/* Foundation */
@font-face {
  font-family: Inter;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2")
    format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2")
    format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
  --tebex-legal-footer-background-color: #111218;
  --tebex-legal-footer-text-color: #afb0bb;
  --tebex-legal-footer-border-color: #ffffff23;
  --tebex-legal-footer-max-width: 1320px;
  color-scheme: dark;
  --bg: #05060b;
  --line: #ffffff12;
  --line-strong: #ffffff23;
  --text: #f0f0f3;
  --muted: #afb0bb;
  --red: #ef163f;
  --red-light: #ff4465;
  --green: #68d6a4;
  --tag-red: #ff6074;
  --tag-green: #42ff8b;
  --radius: 11.9px;
  --radius-xs: 4.25px;
  --radius-sm: 6.8px;
  --radius-md: 8.5px;
  --radius-lg: 10.2px;
  --radius-xl: 15.3px;
  --glass-alpha: 0.96;
  --glass-fallback: #101118;
  --glass-blur: 8px;
  --glass-border: #ffffff24;
  --glass-tint: 184 48 68;
  --glass-active-border: rgb(var(--glass-tint) / 0.45);
  --content: 1320px;
  --page-gutter: 40px;
  --glass-shadow: inset 0 1px #ffffff16, 0 22px 54px #0000004d;
  --glass-active-shadow:
    inset 0 1px #ffffff1a, 0 28px 64px #00000066,
    0 0 30px rgb(var(--glass-tint) / 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(
      circle at 18% 24%,
      rgba(255, 49, 76, 0.095) 0 1px,
      rgba(255, 96, 116, 0.045) 2px,
      transparent 6px
    ),
    radial-gradient(
      circle at 74% 18%,
      rgba(255, 49, 76, 0.11) 0 1px,
      rgba(255, 49, 76, 0.045) 2px,
      transparent 7px
    ),
    radial-gradient(
      circle at 42% 78%,
      rgba(255, 255, 255, 0.075) 0 1px,
      rgba(255, 49, 76, 0.035) 2px,
      transparent 6px
    ),
    radial-gradient(
      circle at 58% 38%,
      rgba(255, 49, 76, 0.055),
      transparent 28%
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.004) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.004) 1px, transparent 1px),
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(50% - 1px),
      rgba(255, 49, 76, 0.016) 50%,
      transparent calc(50% + 1px),
      transparent 100%
    ),
    linear-gradient(
      113deg,
      transparent 0 18%,
      rgba(255, 255, 255, 0.013) 18.12% 18.3%,
      transparent 18.58% 64%,
      rgba(255, 49, 76, 0.014) 64.12% 64.42%,
      transparent 64.78%
    ),
    linear-gradient(
      76deg,
      transparent 0 73%,
      rgba(255, 255, 255, 0.011) 73.12% 73.28%,
      transparent 73.62%
    ),
    linear-gradient(
      116deg,
      transparent 0 11%,
      rgba(255, 255, 255, 0.012) 19%,
      transparent 32%
    ),
    linear-gradient(
      105deg,
      transparent 0 56%,
      rgba(255, 49, 76, 0.014) 66%,
      transparent 80%
    ),
    radial-gradient(
      1100px 680px at 48% -14%,
      rgba(255, 255, 255, 0.016),
      transparent 72%
    ),
    radial-gradient(
      980px 560px at 6% -4%,
      rgba(54, 4, 12, 0.18),
      transparent 76%
    ),
    radial-gradient(
      900px 560px at 96% 12%,
      rgba(72, 5, 16, 0.1),
      transparent 78%
    ),
    radial-gradient(
      1040px 720px at 76% 92%,
      rgba(44, 3, 11, 0.15),
      transparent 78%
    ),
    radial-gradient(
      780px 520px at 46% 46%,
      rgba(0, 0, 0, 0.28),
      transparent 74%
    ),
    linear-gradient(
      180deg,
      rgba(5, 6, 11, 0.3) 0%,
      rgba(5, 6, 11, 0.56) 48%,
      rgba(5, 6, 11, 0.84) 100%
    ),
    radial-gradient(
      900px 560px at 72% 8%,
      rgba(84, 5, 18, 0.14),
      transparent 76%
    ),
    linear-gradient(
      90deg,
      rgba(10, 1, 5, 0.5) 0%,
      transparent 30%,
      transparent 69%,
      rgba(12, 1, 5, 0.35) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.65) 0%,
      transparent 26%,
      rgba(0, 0, 0, 0.48) 100%
    ),
    linear-gradient(
      112deg,
      rgba(5, 6, 11, 0.995) 0%,
      rgba(7, 8, 14, 0.99) 48%,
      rgba(11, 5, 10, 0.985) 100%
    );
  background-size:
    520px 420px,
    720px 560px,
    860px 640px,
    100% 100%,
    104px 104px,
    104px 104px,
    28px 28px,
    28px 28px,
    100% 100%,
    142% 142%,
    150% 150%,
    138% 138%,
    145% 145%,
    auto,
    auto,
    auto,
    auto,
    auto,
    100% 100%,
    cover,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    4% 8%,
    86% 12%,
    44% 76%,
    center top,
    center top,
    center top,
    center top,
    center top,
    center top,
    48% 0%,
    54% 0%,
    50% 0%,
    52% 0%,
    center top,
    center top,
    center top,
    center top,
    center top,
    center top,
    72% top,
    center top,
    center top,
    center top;
  background-repeat:
    repeat, repeat, repeat, no-repeat, repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat;
  color: var(--text);
  font:
    400 15px/1.65 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  overflow-wrap: break-word;
}
body:has(dialog[open]) {
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}
button,
input,
select {
  border-radius: var(--radius-sm);
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  object-fit: cover;
}
button img {
  pointer-events: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(32px, 4.4vw, 60px);
}
h2 {
  font-size: clamp(27px, 3vw, 38px);
}
h3 {
  font-size: 21px;
}
/* Resource headings shrink with name length, while keeping a readable minimum. */
.resource-title,
.auth-panel .resource-title {
  font-size: clamp(
    var(--resource-title-min, 16px),
    calc(
      var(--resource-title-size, 21px) -
        max(0, var(--resource-title-length, 0) - 24) *
        var(--resource-title-step, 0.12px)
    ),
    var(--resource-title-size, 21px)
  );
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
p {
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid #ff728c;
  outline-offset: 5px;
}
::selection {
  background: #bb244d;
  color: #fff;
}
.wrap {
  width: min(var(--content), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}
.icon {
  flex-shrink: 0;
}
.media-counter,
.lightbox-close {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #ffffff08;
  color: var(--muted);
}
.media-counter {
  flex-shrink: 0;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Consolidated from the original REDACTOR atmosphere; decorative layers only. */
.site-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
}
.site-image {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(880px, 116svh, 1240px);
  overflow: hidden;
  filter: saturate(1.06) contrast(1.08) brightness(0.8);
  mask-image: linear-gradient(
    #000 0% 48%,
    rgba(0, 0, 0, 0.82) 64%,
    #0006 84%,
    transparent 100%
  );
}
.site-backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% top;
}
/* The shade must cover the photograph before the whole group fades out. */
.site-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(2, 3, 7, 0.86) 0%,
      rgba(2, 3, 7, 0.52) 34%,
      rgba(2, 3, 7, 0.24) 68%,
      rgba(25, 2, 9, 0.46) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2, 3, 7, 0.14) 0%,
      rgba(2, 3, 7, 0.18) 44%,
      rgba(2, 3, 7, 0.66) 76%,
      rgba(2, 3, 7, 0.98) 100%
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(
      114deg,
      transparent 0 56%,
      rgba(255, 255, 255, 0.04) 56.1%,
      transparent 56.42%
    ),
    linear-gradient(
      103deg,
      transparent 0 70%,
      rgba(255, 49, 76, 0.074) 70.1%,
      transparent 70.55%
    ),
    radial-gradient(
      720px 420px at 18% 36%,
      rgba(2, 3, 7, 0.55),
      transparent 72%
    ),
    radial-gradient(
      860px 520px at 82% 8%,
      rgba(255, 49, 76, 0.11),
      transparent 78%
    );
  background-size:
    auto,
    auto,
    96px 96px,
    96px 96px,
    100% 100%,
    100% 100%,
    auto,
    auto;
}
.ambient-haze {
  position: fixed;
  inset: -12vh -10vw;
  background:
    radial-gradient(
      620px 360px at 14% 18%,
      rgba(255, 49, 76, 0.05),
      transparent 72%
    ),
    radial-gradient(
      520px 320px at 82% 20%,
      rgba(255, 49, 76, 0.032),
      transparent 74%
    ),
    radial-gradient(
      760px 440px at 56% 78%,
      rgba(72, 6, 17, 0.076),
      transparent 76%
    ),
    radial-gradient(
      720px 360px at 28% 86%,
      rgba(255, 49, 76, 0.04),
      transparent 76%
    ),
    radial-gradient(
      560px 320px at 92% 64%,
      rgba(255, 92, 110, 0.03),
      transparent 74%
    ),
    radial-gradient(
      520px 280px at 30% 62%,
      rgba(255, 255, 255, 0.024),
      transparent 72%
    ),
    radial-gradient(
      520px 300px at 8% 54%,
      rgba(255, 49, 76, 0.028),
      transparent 76%
    ),
    radial-gradient(
      680px 380px at 68% 92%,
      rgba(255, 49, 76, 0.026),
      transparent 78%
    );
  opacity: 0.34;
  filter: blur(18px) saturate(0.9);
  animation: ambient-fog 72s ease-in-out infinite alternate;
}
.ambient-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100vh;
  opacity: 0.78;
  mix-blend-mode: screen;
}
@keyframes ambient-fog {
  0% {
    transform: translate3d(-4vw, -3vh, 0) scale(1.04);
  }
  48% {
    transform: translate3d(5vw, 3.5vh, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-2vw, 6vh, 0) scale(1.06);
  }
}
.is-paused .ambient-haze {
  animation-play-state: paused;
}
@media (max-width: 820px),
  (hover: none) and (pointer: coarse),
  (prefers-reduced-motion: reduce) {
  .ambient-canvas,
  .ambient-haze {
    display: none;
  }
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .site-image {
    height: clamp(720px, 104svh, 980px);
    filter: saturate(1.02) contrast(1.04) brightness(0.72);
  }
  .site-backdrop {
    object-position: 64% top;
  }
  .site-image::after {
    background:
      linear-gradient(
        90deg,
        rgba(2, 3, 7, 0.88),
        rgba(2, 3, 7, 0.6) 42%,
        rgba(25, 2, 9, 0.52)
      ),
      linear-gradient(
        180deg,
        rgba(2, 3, 7, 0.12),
        rgba(2, 3, 7, 0.28) 52%,
        rgba(2, 3, 7, 0.98)
      ),
      linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
      radial-gradient(
        640px 360px at 78% 12%,
        rgba(255, 49, 76, 0.1),
        transparent 76%
      );
    background-size:
      auto,
      auto,
      110px 110px,
      110px 110px,
      auto;
  }
}
/* Neutral tags; only heading prefixes carry the red accent. */
:is(
  .eyebrow,
  .framework-badges > span,
  .notes-badges > span,
  .faq-question small,
  .hero-proof > span
) {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  padding: 0 1px 3px;
  border: 0;
  border-bottom: 2px solid currentColor;
  color: var(--tag-color, var(--muted));
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eyebrow:has(+ :is(h1, h2, h3)),
.faq-question small {
  color: var(--tag-color, var(--tag-red));
}
.tag-mlo {
  --tag-color: var(--tag-green);
}
:is(.hero-proof, .notes-badges, .trust-strip, .purchase-facts) .icon,
.standards-links > * > .icon:first-child {
  color: var(--tag-red);
}
:is(.hero-proof, .notes-badges) .icon {
  width: 13px;
  height: 13px;
}
.lead {
  font-size: 17px;
  line-height: 1.7;
  color: #c5c5ce;
}
.muted {
  font-size: 13px;
  color: var(--muted);
}
:where(.button, .icon-button, .locale-menu > summary, .module-address) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.button {
  --button-start: 65 66 70;
  --button-middle: 35 36 40;
  --button-deep: 24 25 29;
  --button-end: 14 15 18;
  --button-alpha: 0.7;
  --button-accent: 233 18 42;
  --button-glow: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 1px 2px #00000040;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse at 20% -45%, #ffffff18, transparent 65%),
    linear-gradient(
      135deg,
      rgb(var(--button-start) / var(--button-alpha)),
      rgb(var(--button-middle) / var(--button-alpha)) 38%,
      rgb(var(--button-deep) / var(--button-alpha)) 72%,
      rgb(var(--button-end) / var(--button-alpha))
    );
  border-color: #ffffff25;
  box-shadow:
    inset 0 1px #ffffff17,
    inset 0 -7px 16px #00000017,
    0 3px 6px #00000024,
    0 8px 24px rgb(var(--button-accent) / var(--button-glow));
}
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
        90deg,
        transparent,
        rgb(var(--button-accent) / 0.52),
        transparent
      )
      center bottom / 72% 1px no-repeat,
    radial-gradient(
      ellipse at 50% 135%,
      rgb(var(--button-accent) / 0.16),
      transparent 62%
    );
  opacity: 0.4;
  transition: opacity 0.3s var(--ease-out);
}
:is(.button, .icon-button, .locale-menu > summary, .module-address)::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  inset-block: -50%;
  left: -65%;
  width: 55%;
  background: linear-gradient(
    90deg,
    transparent,
    #ffffff08 25%,
    #ffffff38 50%,
    #ffffff0d 70%,
    transparent
  );
  opacity: 0;
  transform: skewX(-22deg);
}
:is(
  .button:not(:disabled, [aria-disabled="true"]),
  .social-link,
  .locale-menu > summary
):is(:hover, :focus-visible) {
  transform: translateY(-1px);
}
.button:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
  background-color: #ffffff0a;
  border-color: rgb(var(--button-accent) / 0.42);
  box-shadow:
    inset 0 1px #ffffff22,
    inset 0 -7px 16px #00000012,
    0 4px 8px #0000002e,
    0 10px 28px rgb(var(--button-accent) / calc(var(--button-glow) + 0.04));
}
.button:not(:disabled, [aria-disabled="true"]):is(
    :hover,
    :focus-visible
  )::before {
  opacity: 0.7;
}
/* One brief response per hover/focus; individual transforms preserve each control's lift. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.button, .icon-button, .locale-menu > summary, .module-address):not(
      :disabled,
      [aria-disabled="true"]
    ):is(:hover, :focus-visible) {
    animation: button-settle 480ms ease-in-out;
  }
  :is(.button, .icon-button, .locale-menu > summary, .module-address):not(
      :disabled,
      [aria-disabled="true"]
    ):is(:hover, :focus-visible)::after {
    animation: button-shine 720ms var(--ease-out);
  }
}
@keyframes button-shine {
  0% {
    opacity: 0;
    transform: skewX(-22deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(320%) skewX(-22deg);
  }
}
@keyframes button-settle {
  0%,
  100% {
    translate: 0;
    rotate: 0deg;
  }
  22% {
    translate: -0.65px 0;
    rotate: -0.4deg;
  }
  44% {
    translate: 0.65px 0;
    rotate: 0.4deg;
  }
  66% {
    translate: -0.35px 0;
    rotate: -0.2deg;
  }
  82% {
    translate: 0.2px 0;
    rotate: 0.1deg;
  }
}
.button-primary {
  --button-start: 255 31 58;
  --button-middle: 233 18 42;
  --button-deep: 163 6 25;
  --button-end: 71 4 11;
  --button-alpha: 0.86;
  --button-glow: 0.13;
  border-color: #ff485e9e;
  color: #fff;
}
.button-small {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 12px;
}
.button-quiet {
  --button-start: 48 49 53;
  --button-middle: 28 29 33;
  --button-deep: 20 21 25;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.text-link .icon {
  width: 17px;
}
button.text-link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
/* One underline treatment for text links and the labels inside linked panels. */
:is(
  .text-link,
  .feature-link,
  .breadcrumbs a,
  .feature-details h3 a,
  .card-body h3 a,
  .basket-item h2 a,
  .footer-meta > span > a,
  .footer-link-label,
  .category-cta,
  .support-option > span,
  noscript a,
  .prose
    a:not(:where(.button, .icon-button)):not(:has(:where(img, picture, video)))
) {
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-position: left bottom;
  background-size: 0 1px;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    color 0.25s var(--ease-out),
    background-size 0.3s var(--ease-out);
}
:is(
  .text-link,
  .feature-link,
  .breadcrumbs a,
  .feature-details h3 a,
  .card-body h3 a,
  .basket-item h2 a,
  .footer-meta > span > a,
  noscript a,
  .prose
    a:not(:where(.button, .icon-button)):not(:has(:where(img, picture, video)))
):is(:hover, :focus-visible),
.footer-links a:is(:hover, :focus-visible) > .footer-link-label,
.category-tile:is(:hover, :focus-visible) > .category-cta,
.support-option:is(:hover, :focus-visible) > span {
  color: var(--red-light);
  background-size: 100% 1px;
}
.notice {
  margin-top: 20px;
  padding: 15px 20px;
  border-radius: var(--radius-sm);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 0;
  left: 24px;
  z-index: 100;
  background: var(--red);
  padding: 12px 20px;
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: translateY(0);
}
/* OLD card palette, with a slightly more transparent base and one shared hover layer. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root {
    --glass-alpha: 0.81;
    --glass-fallback: transparent;
  }
}
.glass-panel {
  --glass-angle: 145deg;
  --glass-glow:
    radial-gradient(
      ellipse at 0% 0%,
      rgb(var(--glass-tint) / 0.07),
      transparent 68%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgb(var(--glass-tint) / 0.012),
      transparent 72%
    );
  --glass-hover-glow:
    radial-gradient(
      ellipse at 0% 8%,
      rgb(var(--glass-tint) / 0.085),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      #ffffff08,
      transparent 58%,
      rgb(var(--glass-tint) / 0.016)
    );
  --glass-hover-opacity: 0;
  --glass-accent-opacity: 0.76;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background-color: var(--glass-fallback);
  background-image:
    var(--glass-glow),
    linear-gradient(
      100deg,
      #ffffff09,
      transparent 30%,
      rgb(var(--glass-tint) / 0.016)
    ),
    linear-gradient(
      var(--glass-angle),
      rgb(28 29 37 / var(--glass-alpha)),
      rgb(9 10 15 / calc(var(--glass-alpha) + 0.025)) 62%,
      rgb(20 15 23 / calc(var(--glass-alpha) - 0.19))
    );
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
/* Fade only the decorative light; the text and images remain unchanged. */
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-hover-glow);
  opacity: var(--glass-hover-opacity);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out);
}
.glass-panel:focus-within {
  --glass-hover-opacity: 1;
  --glass-accent-opacity: 1;
  border-color: var(--glass-active-border);
  box-shadow: var(--glass-active-shadow);
}
/* Products retain OLD's lower red glow and curved accent. */
.glass-panel.product-card {
  --glass-angle: 155deg;
  --glass-glow: radial-gradient(
    420px 220px at 100% 100%,
    rgb(var(--glass-tint) / 0.07),
    transparent 70%
  );
  --glass-hover-glow:
    radial-gradient(
      380px 180px at 0% 0%,
      rgb(var(--glass-tint) / 0.15),
      transparent 70%
    ),
    radial-gradient(300px 160px at 100% 16%, #ffffff0d, transparent 72%),
    linear-gradient(
      145deg,
      #ffffff0c,
      transparent 58%,
      rgb(var(--glass-tint) / 0.035)
    );
}
.glass-panel.product-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border: 2px solid rgb(var(--glass-tint) / 0.58);
  border-top: 0;
  border-radius: inherit;
  mask-image: linear-gradient(
    to top,
    #000,
    #000b 8px,
    #0003 18px,
    transparent 26px
  );
  opacity: var(--glass-accent-opacity);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .glass-panel:hover {
    --glass-hover-opacity: 1;
    --glass-accent-opacity: 1;
    border-color: var(--glass-active-border);
    box-shadow: var(--glass-active-shadow);
  }
  .glass-panel.product-card:hover {
    transform: translateY(-3px);
  }
}
/* Controls use the same restrained tint and a lighter blur. */
:where(
  .button,
  .icon-button,
  .locale-menu summary,
  input,
  select,
  textarea,
  .gallery-enlarge
) {
  background-color: rgb(36 36 44 / 0.46);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition:
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
:where(
  .button,
  .icon-button,
  .locale-menu summary,
  input,
  select,
  textarea
):focus-visible,
:is(
  input:not([type="checkbox"], [type="radio"]):focus,
  select:focus,
  select:open,
  textarea:focus
),
.locale-menu[open] summary {
  background-color: rgb(46 42 50 / 0.68);
  border-color: var(--glass-active-border);
}
@media (hover: hover) and (pointer: fine) {
  :where(
      .button,
      .icon-button,
      .locale-menu summary,
      input,
      select,
      textarea
    ):hover:not(:disabled, [aria-disabled="true"]) {
    background-color: rgb(46 42 50 / 0.68);
    border-color: var(--glass-active-border);
  }
}
select option {
  background: #171820;
  color: var(--text);
}
/* Overlaid menus stay dense enough to read above the page. */
.glass-panel:is(.nav-dropdown-panel, .mobile-nav, .toast) {
  --glass-fallback: #111219f5;
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --glass-blur: 4px;
  }
}
/* Original REDACTOR scrollbar palette, with one browser-native scroll owner. */
* {
  scrollbar-width: thin;
  scrollbar-color: #be2c43 #05060a;
}
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: linear-gradient(#ff314c09, transparent 30%, #ff314c07), #05060af5;
}
::-webkit-scrollbar-thumb {
  border: 4px solid #05060af5;
  border-radius: 7px;
  background: linear-gradient(#ff4b5ed6, #c9112bc2 48%, #590813e0);
  box-shadow: inset 0 1px #ffffff26;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#ff6072eb, #e81430db 52%, #760a19f0);
}
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
::-webkit-scrollbar-corner {
  background: #05060a;
}
.locale-menu .nav-dropdown-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.locale-menu .nav-dropdown-panel::-webkit-scrollbar-track {
  margin-block: 8px;
}
.locale-menu .nav-dropdown-panel::-webkit-scrollbar-thumb {
  border-width: 3px;
}

/* Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid #bc73852b;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background:
    linear-gradient(
      90deg,
      rgb(233 18 42 / 0.26),
      transparent max(180px, 22%),
      transparent 76%,
      #ffffff04
    ),
    linear-gradient(#16151ccc, #111118ad);
  box-shadow:
    0 8px 28px #0000001f,
    inset 0 1px #ffffff08;
}
.header-inner {
  position: relative;
  width: min(1600px, calc(100% - 44px));
  height: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  flex-shrink: 0;
  display: block;
  width: 200px;
}
.brand img {
  width: 100%;
  height: 52px;
  object-fit: contain;
}
.desktop-nav {
  --nav-inline-padding: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #b8b8c2;
}
.nav-dropdown {
  position: relative;
}
.nav-dropdown > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  font-size: 13px;
  font-weight: 600;
}
.nav-link,
.catalog-menu > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  padding: 10px var(--nav-inline-padding, 12px);
  border-radius: var(--radius-sm);
  transition:
    color 180ms ease,
    background-color 180ms ease;
}
.nav-link::after,
.catalog-menu > summary::after {
  content: "";
  position: absolute;
  inset-inline: var(--nav-inline-padding, 12px);
  bottom: 5px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.nav-link:is(:hover, :focus-visible, [aria-current]),
.catalog-menu[open] > summary,
.catalog-menu > summary:is(:hover, :focus-visible) {
  color: var(--text);
  background-color: #ffffff0d;
}
.nav-link:is(:hover, :focus-visible),
.catalog-menu > summary:is(:hover, :focus-visible) {
  color: var(--red-light);
}
.nav-link:is(:hover, :focus-visible, [aria-current])::after,
.catalog-menu[open] > summary::after,
.catalog-menu > summary:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}
.nav-link > .icon,
.catalog-menu > summary > .icon {
  transition:
    transform 180ms ease,
    color 180ms ease;
}
.nav-link:is(:hover, :focus-visible, [aria-current]) > .icon,
.catalog-menu > summary:is(:hover, :focus-visible) > .icon,
.catalog-menu[open] > summary > .icon {
  transform: translateY(-1px);
  color: var(--text);
}
.dropdown-chevron {
  display: inline-flex;
  flex: 0 0 14px;
  margin-inline-start: 2px;
  transition: transform 180ms ease;
}
.dropdown-chevron > .icon,
.gallery-enlarge > .icon,
.card-video-countdown > .icon {
  width: 14px;
  height: 14px;
}
.nav-dropdown[open] > summary .dropdown-chevron {
  transform: rotate(180deg);
}
@supports selector(::details-content) {
  .nav-dropdown::details-content {
    opacity: 0;
    transition:
      opacity 180ms ease,
      content-visibility 180ms allow-discrete;
  }
  .nav-dropdown[open]::details-content {
    opacity: 1;
  }
  .nav-dropdown:not([open]) > .nav-dropdown-panel {
    pointer-events: none;
  }
  .nav-dropdown:not([open]) > .glass-panel {
    transform: translateY(-6px);
  }
}
summary::-webkit-details-marker {
  display: none;
}
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  max-width: calc(100vw - 32px);
  max-height: min(420px, calc(100dvh - 110px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border-color: #bd7b8b52;
  border-radius: var(--radius-md);
  z-index: 40;
  transition-duration: 180ms;
}
.nav-dropdown-panel :is(a, .category-branch > summary) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 5.1px;
  font-size: 13px;
  color: #c8c6d1;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}
.nav-dropdown-panel a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nav-dropdown-panel
  :is(a, .category-branch > summary):is(:hover, :focus-visible) {
  background-color: #86364742;
  border-color: #e2768e63;
  color: #fff;
}
.catalog-menu .nav-dropdown-panel a[aria-current],
.category-branch > summary.is-current,
.category-branch[open] > summary {
  background-color: #d528491a;
  border-color: #e52b4d40;
  color: #fff;
}
.category-tree {
  display: grid;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.category-tree li {
  min-width: 0;
}
.category-tree :is(a, summary) {
  min-height: 44px;
}
.category-branch > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}
.category-chevron {
  display: inline-flex;
  margin-inline-start: auto;
  flex: 0 0 14px;
}
.category-branch > summary .category-chevron .icon {
  width: 14px;
  height: 14px;
  color: inherit;
  transition: rotate 180ms ease;
}
.category-branch[open] > summary .category-chevron .icon {
  rotate: 180deg;
}
.category-tree .category-tree {
  margin: 3px 0 7px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.category-tree :is(a, summary) > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nav-dropdown-panel .icon {
  width: 17px;
  color: var(--red-light);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.locale-menu {
  flex-shrink: 0;
}
.locale-menu .nav-dropdown-panel {
  display: grid;
  gap: 4px;
  left: auto;
  right: 0;
  width: 220px;
  scrollbar-gutter: stable;
}
.locale-menu summary {
  width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.locale-menu a[aria-current] {
  background-color: #94334652;
  border-color: #ed68836b;
  box-shadow: inset 2px 0 #ed6883;
  color: #fff;
}
.locale-menu a:not([aria-current]):is(:hover, :focus-visible) {
  background-color: #ffffff12;
  border-color: #ffffff38;
}
.locale-menu a:focus-visible {
  outline-offset: 0;
}
.locale-menu a[aria-current] > .icon {
  flex: 0 0 17px;
  height: 17px;
  margin-inline-start: auto;
}
.button-cart {
  background-color: rgb(83 31 46 / 0.22);
  border-color: #d6677c38;
  padding: 9px 13px;
  gap: 9px;
  min-height: 42px;
}
.button-cart > .icon {
  color: #ff5374;
  width: 18px;
}
.cart-count {
  color: var(--red-light);
  background: #ffffff0e;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 3.4px;
  text-align: center;
  font-size: 10px;
}
.mobile-toggle {
  display: none;
}
.mobile-nav {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: var(--page-gutter);
  padding: 10px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.mobile-nav :is(.nav-link, .catalog-menu > summary) {
  font-size: 13px;
}
.mobile-nav .catalog-menu {
  grid-column: 1 / -1;
}
.mobile-nav .catalog-menu > summary .dropdown-chevron {
  margin-inline-start: auto;
}
.mobile-nav .nav-dropdown-panel {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  padding: 5px 0 0;
  display: grid;
  gap: 5px;
}
.mobile-toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--glass-active-border);
  background-color: rgb(83 31 46 / 0.48);
}
/* Home */
.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 80px;
  padding-block: clamp(24px, 4svh, 40px);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.hero-logo {
  display: block;
  width: 320px;
  margin-bottom: 20px;
  max-width: 100%;
}
.hero-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hero h1 {
  margin-bottom: 18px;
  letter-spacing: -0.045em;
  font-size: clamp(38px, min(4.4vw, 8svh), 64px);
  font-weight: 750;
  line-height: 1.08;
}
.hero .lead {
  max-width: 490px;
}
.hero-note {
  font-size: 13px;
  margin-top: 12px;
  max-width: 440px;
  line-height: 1.75;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-block: 20px 16px;
}
.hero-actions .button {
  min-height: 46px;
}
.hero-proof {
  display: flex;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.hero-feature {
  --feature-navigation-size: 50px;
  --glass-glow: radial-gradient(
    460px 230px at 102% -4%,
    #ef163f1f,
    transparent 70%
  );
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border-color: #ff425b42;
  border-radius: var(--radius-xl);
}
.feature-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.feature-stage {
  display: grid;
  flex: 1;
  min-width: 0;
}
/* Slides share one grid cell, preventing jumps without resize scripts. */
.feature-slide {
  grid-area: 1 / 1;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #171820b3, #090a10b3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    visibility 0.28s;
}
.feature-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* A single image uses the space otherwise occupied by the slideshow controls. */
.feature-slide:only-child {
  --feature-image-extra: var(--feature-navigation-size);
}
.feature-image {
  display: block;
  flex: 1 0 auto;
  position: relative;
  overflow: hidden;
  height: calc(
    min(56.25cqw, clamp(132px, 28svh, 220px)) + var(--feature-image-extra, 0px)
  );
  border-bottom: 1px solid var(--line);
  background: #08090e;
}
.feature-image img,
.card-media img,
.basket-image img {
  width: 100%;
  height: 100%;
}
.feature-image-backdrop,
.gallery-image-backdrop {
  position: absolute;
  inset: 0;
  object-fit: cover;
  filter: blur(18px) brightness(0.72);
  transform: scale(1.12);
  pointer-events: none;
}
.feature-image-main {
  position: absolute;
  inset: 0;
  z-index: 1;
  object-fit: contain;
}
.feature-image::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 40% 0 0;
  background: linear-gradient(transparent, #000a);
}
.feature-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 14px;
}
.feature-details h3 {
  --resource-title-size: 23px;
  --resource-title-step: 0.15px;
  flex: 1 1 180px;
  min-width: 0;
  line-height: 1.2;
  margin-top: 0;
  font-weight: 650;
}
.feature-details .price {
  --price-size: 24px;
  min-height: 46px;
}
.feature-heading h2 {
  margin-top: 6px;
  font-size: 24px;
}
.feature-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
  padding: 0 14px 12px;
}
.feature-navigation {
  flex-shrink: 0;
  height: var(--feature-navigation-size);
  padding-top: 8px;
}
.feature-progress {
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: #ffffff12;
}
.feature-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #a60629, var(--red-light));
  transform: scaleX(0);
  transform-origin: left center;
}
.feature-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.feature-controls .icon-button {
  width: 34px;
  height: 34px;
  color: var(--muted);
}
.feature-controls .icon-button:is(:hover, :focus-visible) {
  color: var(--red-light);
}
.feature-controls .icon,
.category-cta .icon,
.standards-links > span .icon {
  width: 17px;
  height: 17px;
}
.feature-previous > .icon {
  transform: rotate(180deg);
}
.feature-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.feature-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
}
.feature-dot > span {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #ffffff45;
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}
.feature-dot:is(:hover, :focus-visible) > span,
.feature-dot[aria-pressed="true"] > span {
  background: var(--red-light);
}
.feature-dot[aria-pressed="true"] > span {
  width: 18px;
}
.feature-actions > .button {
  flex: 1;
}
.feature-actions .card-purchase-actions {
  flex: 1.35;
  margin: 0;
}
.feature-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 12px;
}
.trust-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin-block: 0;
  padding: 12px;
}
.trust-strip li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}
.trust-strip li + li {
  border-left: 1px solid var(--line);
}
.trust-strip .icon {
  width: 18px;
  height: 18px;
}
.trust-strip span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #bfc0cc;
}
.section {
  padding-block: 60px;
}
[data-page="home"]
  #main
  > .section:not(.glass-panel)
  + .section:not(.glass-panel) {
  padding-top: 0;
}
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  text-align: center;
}
.section-heading > h2 {
  max-width: 960px;
  text-wrap: balance;
}
.section-heading > p {
  max-width: 740px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}
.section-heading > .text-link {
  white-space: nowrap;
  padding-bottom: 5px;
}
.section-action {
  text-align: center;
  margin-top: 34px;
}
.category-tiles,
.server-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.category-tile {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 16px 18px;
  align-items: start;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
}
/* Quiet corner labels shared by category, information and server cards. */
.card-number {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: -1;
  font-size: var(--corner-size, clamp(76px, 6vw, 104px));
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: 0;
  color: var(--corner-color, #ffffff0b);
  pointer-events: none;
}
.category-symbol {
  display: grid;
  place-items: center;
  align-self: center;
  width: 58px;
  height: 58px;
  border: 1px solid #ef163f38;
  border-radius: var(--radius-md);
  color: var(--red-light);
}
.category-symbol .icon {
  width: 26px;
  height: 26px;
}
.category-heading {
  display: grid;
  align-self: center;
  gap: 8px;
  min-width: 0;
}
.category-tile h3 {
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.1;
}
.category-tile p {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.55;
}
.category-cta {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  font-size: 13px;
}

/* Cards */
.product-grid {
  display: grid;
  gap: 24px;
}
.home-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.card-media {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0d0f14;
  margin: 8px 8px 0;
  border-radius: calc(var(--radius) - 5px);
  -webkit-user-select: none;
  user-select: none;
}
.card-media-link,
.card-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.card-video {
  z-index: 1;
  border: 0;
  pointer-events: none;
}
.card-video-countdown {
  font-variant-numeric: tabular-nums;
}
.card-video-countdown > .icon {
  color: var(--red-light);
}

.card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body .eyebrow {
  font-size: 10px;
  letter-spacing: 0.09em;
}
.card-body h3 {
  margin-block: 10px 12px;
  line-height: 1.25;
  font-weight: 650;
}
.card-body p {
  font-size: 13px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 22px;
}
.card-bottom {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.card-bottom .button {
  white-space: nowrap;
  margin-inline-start: auto;
}
.price {
  --price-size: 21px;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px 8px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background-color: var(--glass-fallback);
  background-image: linear-gradient(
    155deg,
    rgb(25 26 33 / calc(var(--glass-alpha) - 0.05)),
    rgb(8 9 14 / calc(var(--glass-alpha) - 0.1))
  );
  box-shadow:
    inset 0 1px #ffffff0a,
    0 5px 14px #00000026;
  -webkit-backdrop-filter: blur(min(4px, var(--glass-blur)));
  backdrop-filter: blur(min(4px, var(--glass-blur)));
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.price.has-discount {
  margin-block-start: 9px;
}
.price-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.price strong {
  font-size: var(--price-size);
  letter-spacing: -0.025em;
  font-weight: 750;
}
.price del {
  font-size: calc(var(--price-size) * 0.72);
  color: #a52236;
  font-weight: 600;
  white-space: nowrap;
  text-decoration-line: line-through;
  text-decoration-color: #ff2342;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
}
.price small {
  font-size: clamp(9px, calc(var(--price-size) * 0.4), 11px);
  color: #aaa8b6;
  font-weight: 650;
  letter-spacing: 0.06em;
}
.price-discount {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 6px;
  border: 1px solid rgb(255 100 120 / 0.72);
  border-radius: var(--radius-xs);
  background: linear-gradient(
    135deg,
    rgb(255 49 76 / 0.98),
    rgb(166 5 30 / 0.98)
  );
  box-shadow:
    inset 0 1px #ffffff3d,
    0 4px 12px rgb(255 22 52 / 0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.price.is-free strong {
  color: var(--tag-green);
  font-size: min(var(--price-size), 18px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price.is-custom strong {
  font-size: min(var(--price-size), 18px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.media-placeholder {
  display: grid;
  place-items: center;
  place-content: center;
  gap: 16px;
  padding: 24px;
  height: 100%;
  color: var(--muted);
  text-align: center;
}
.media-placeholder .icon {
  width: 60px;
  height: 60px;
  color: var(--red-light);
  opacity: 0.65;
}
/* Servers and editorial blocks */

.server-card {
  --server-accent: var(--muted);
  --server-glow: transparent;
  --glass-glow: radial-gradient(
    220px 150px at 100% 0%,
    var(--server-glow),
    transparent 75%
  );
  --glass-hover-glow: var(--glass-glow);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  gap: 14px;
}
.server-head {
  min-width: 0;
  padding-right: clamp(140px, 17vw, 190px);
}
.server-head h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1.3;
  text-wrap: pretty;
}
.server-status {
  --corner-size: clamp(28px, 3.2vw, 38px);
  --corner-color: var(--server-accent);
  max-width: calc(100% - 48px);
  text-align: right;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  opacity: 0.12;
}
.server-card:has([data-server-state="online"]) {
  --server-accent: var(--tag-green);
  --server-glow: #42ff8b24;
}
.server-card:has([data-server-state="offline"]) {
  --server-accent: var(--tag-red);
  --server-glow: #ff607428;
}
.server-status:is([data-server-state="unknown"], [data-server-state="stale"]) {
  --corner-size: 11px;
  max-width: 150px;
  line-height: 1.4;
  opacity: 1;
}
.server-address {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #cbcbd5;
  overflow-wrap: anywhere;
}
.server-address code {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ffffff0b, #ffffff04), #0405094d;
}
.server-address .icon {
  width: 24px;
  height: 24px;
  color: var(--server-accent);
  transition: color 0.3s ease;
}
.server-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
}
.server-actions .icon-button {
  width: 46px;
  height: 46px;
}
/* Shared card actions */
.card-purchase-actions {
  margin-top: 16px;
}
.card-purchase-actions .button {
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 12px;
}
.studio-standards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding: 38px;
}
.studio-standards > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.standards-intro h2 {
  margin: 10px 0 14px;
  font-size: 29px;
}
.studio-standards p {
  font-size: 13px;
}
.studio-standards p + p {
  margin-top: 12px;
}
.standards-detail {
  border-left: 1px solid var(--line);
  padding-left: 30px;
}
.standards-detail h3 {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 17px;
  margin-bottom: 16px;
}
.standards-detail h3 .icon {
  color: var(--red-light);
}
.framework-badges,
.language-badges,
.notes-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.framework-badges,
.language-badges {
  justify-content: center;
}
.framework-badges,
.language-badges,
.standards-links {
  margin-top: auto;
  padding-top: 20px;
}
.notes-badges {
  margin-top: 20px;
}
.framework-badges span {
  font-size: 13px;
}
.notes-badges span {
  font-size: 10px;
}
.language-badges {
  gap: 6px;
}
.language-badge {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: #ffffff04;
}
.language-flag {
  display: inline-block;
  flex: 0 0 27px;
  width: 27px;
  height: 18px;
  border-radius: 2.5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 1px #ffffff18;
}
.standards-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.standards-links > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.information-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.information-card {
  padding: 24px;
  overflow: hidden;
}
.information-card h3 {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: 22px;
  margin: 0 0 10px;
  line-height: 1.22;
}
.information-card h3 .icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--red-light);
}
.information-card p {
  font-size: 14px;
  line-height: 1.6;
}
.purchase-notes {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
}
.notes-heading h2 {
  margin: 12px 0 18px;
}
.notes-heading .button {
  display: flex;
  width: fit-content;
  margin: 25px auto 0;
}
.notes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.notes-grid article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 16px;
  align-content: center;
  padding: 20px 24px;
}
.notes-grid article > .icon {
  grid-row: 1 / 3;
  align-self: center;
  width: 28px;
  height: 28px;
  color: var(--red-light);
}
.notes-grid h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.notes-grid p {
  grid-column: 2;
  font-size: 13px;
}
.faq-section {
  display: block;
}
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.faq-column {
  display: grid;
  gap: 12px;
}
.faq-list details {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-list details[open] {
  border-color: var(--glass-active-border);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 24px;
  list-style: none;
  cursor: pointer;
}
.faq-question {
  display: grid;
  gap: 7px;
}
.faq-question small {
  font-size: 9px;
  letter-spacing: 0.08em;
}
.faq-question strong {
  font-size: 13px;
  font-weight: 600;
}
.faq-plus {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--red-light);
  transition: transform 0.35s var(--ease-out);
}
.faq-list details[open] .faq-plus {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 24px 23px;
}
.faq-answer p {
  font-size: 13px;
}
.faq-answer .text-link {
  margin-top: 12px;
}
/* Inner pages */
.page-shell {
  padding-block: 36px 75px;
  min-height: 60vh;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #9e98aa;
  align-items: center;
  margin-bottom: 34px;
}
.breadcrumbs > span:last-child {
  color: #d3ccdb;
}
.page-heading {
  margin-bottom: 36px;
  max-width: 940px;
}
.page-heading h1 {
  margin-block: 12px 18px;
  font-size: clamp(32px, 4vw, 49px);
}
.page-heading .lead {
  font-size: 15px;
  max-width: 760px;
}
.catalog-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.catalog-sidebar {
  position: sticky;
  top: 110px;
}
.catalog-results {
  position: relative;
  min-width: 0;
}
.sidebar-panel {
  padding: 23px 16px;
  border-radius: var(--radius-lg);
}
.sidebar-panel > .eyebrow {
  gap: 9px;
  padding-inline: 0;
  margin-inline: 13px;
  margin-bottom: 16px;
  color: #fff;
}
.sidebar-panel > .eyebrow .icon {
  width: 18px;
  height: 18px;
  color: var(--red-light);
}
.sidebar-panel nav {
  display: grid;
  gap: 6px;
}
.sidebar-panel :is(a, summary) {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5.95px;
  border: 1px solid transparent;
}
.sidebar-panel :is(a, summary) .icon {
  width: 16px;
  height: 16px;
  color: #a49cac;
}
.sidebar-panel a[aria-current] {
  background: #d5284912;
  border-color: #e52b4d40;
  color: #fff;
}
.sidebar-panel a[aria-current] .icon,
.sidebar-panel summary > .icon {
  color: var(--red-light);
}
.sidebar-panel :is(a, summary):is(:hover, :focus-visible) {
  background: #ffffff06;
}
.sidebar-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 25px 23px;
  border-radius: var(--radius-lg);
  text-align: center;
}
.sidebar-help h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  margin-bottom: 14px;
  text-align: left;
}
.sidebar-help h2 .icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--red-light);
}
.sidebar-help p {
  font-size: 12px;
}
.sidebar-help .text-link {
  margin-top: 20px;
  font-size: 11px;
}
.catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.catalog-toolbar {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.search-field,
:is(.sort-field, .select-field) {
  position: relative;
  isolation: isolate;
}
.search-field {
  flex: 1;
  min-width: 0;
}
:is(.search-field, .sort-field, .select-field) > .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #9e94a6;
  pointer-events: none;
  transition:
    color 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}
.search-field > .icon {
  left: 15px;
}
:is(
    .search-field:focus-within,
    :is(.sort-field, .select-field):focus-within,
    :is(.sort-field, .select-field):has(select:open)
  )
  > .icon {
  color: var(--red-light);
}
input,
select,
textarea {
  color: var(--text);
  padding: 12px 14px;
  max-width: 100%;
  min-height: 46px;
}
.catalog-toolbar :is(input, select) {
  width: 100%;
  height: 50px;
}
.search-field input {
  padding-left: 43px;
}
:is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
  outline: none;
}
input::placeholder {
  color: #918999;
  font-size: 12px;
}
.sort-field {
  flex-shrink: 0;
  width: 190px;
}
:is(.sort-field, .select-field) select {
  appearance: none;
  align-items: center;
  padding-right: 40px;
  font-size: 12px;
  cursor: pointer;
}
:is(.sort-field, .select-field) > .icon {
  right: 15px;
}
:is(.sort-field, .select-field):has(select:open) > .icon {
  transform: translateY(-50%) rotate(180deg);
}
/* Native picker enhancement; unsupported browsers retain their system picker. */
@supports (appearance: base-select) {
  :is(.sort-field, .select-field) select,
  :is(.sort-field, .select-field) select::picker(select) {
    appearance: base-select;
  }
  :is(.sort-field, .select-field) select::picker-icon {
    display: none;
  }
  :is(.sort-field, .select-field) select::picker(select) {
    margin-block: 8px;
    position-try-order: normal;
    padding: 6px;
    max-height: min(320px, 60dvh);
    overflow-y: auto;
    border: 1px solid var(--glass-active-border);
    border-radius: var(--radius-sm);
    background: rgb(27 26 34 / 0.94);
    color: var(--text);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px #00000059;
  }
  :is(.sort-field, .select-field) option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--muted);
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease;
  }
  :is(.sort-field, .select-field) option + option {
    margin-top: 4px;
  }
  :is(.sort-field, .select-field) option:checked {
    background: rgb(var(--glass-tint) / 0.15);
    border-color: var(--glass-active-border);
    color: var(--text);
    font-weight: 600;
  }
  :is(.sort-field, .select-field) option:is(:hover, :focus) {
    outline: none;
    background: #ffffff12;
    border-color: var(--glass-border);
    color: #fff;
  }
  :is(.sort-field, .select-field) option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--red-light);
  }
  @media (prefers-reduced-motion: no-preference) {
    :is(.sort-field, .select-field) select::picker(select) {
      opacity: 0;
      transition:
        opacity 160ms ease,
        display 160ms allow-discrete,
        overlay 160ms allow-discrete;
    }
    :is(.sort-field, .select-field) select:open::picker(select) {
      opacity: 1;
    }
    @starting-style {
      :is(.sort-field, .select-field) select:open::picker(select) {
        opacity: 0;
      }
    }
  }
}
.catalog-meta {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  color: #aaa2b5;
  font-size: 11px;
  max-width: 100%;
}
.catalog-meta .eyebrow > .icon {
  width: 16px;
  height: 16px;
  color: var(--red-light);
}
.catalog-meta b {
  color: var(--text);
  font-weight: inherit;
}
.check-field {
  display: inline-grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 8px;
  isolation: isolate;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease;
}
.check-field input {
  appearance: none;
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-xs);
  outline-offset: 3px;
  cursor: inherit;
}
.check-field > .icon {
  grid-area: 1 / 1;
  justify-self: center;
  z-index: 1;
  width: 14px;
  height: 14px;
  color: var(--red-light);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms var(--ease-out);
}
.check-field input:checked {
  background-color: rgb(var(--glass-tint) / 0.22);
  border-color: var(--red-light);
}
.check-field input:checked + .icon {
  opacity: 1;
  transform: scale(1);
}
.check-field:has(input:checked) {
  color: var(--text);
}
.empty-state {
  border-style: dashed;
  text-align: center;
  padding: 70px 30px;
}
.empty-state > .icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 25px;
  color: var(--red-light);
}
.empty-state h2 {
  font-size: 27px;
  margin-bottom: 14px;
}
.empty-state p {
  font-size: 13px;
  margin-bottom: 28px;
}
.empty-state .button {
  margin: 4px;
}
/* Product detail */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(310px, 1fr);
  gap: 30px;
  align-items: start;
}
.product-main {
  display: contents;
}
.gallery,
.lightbox {
  -webkit-user-select: none;
  user-select: none;
}
.gallery {
  min-width: 0;
  padding: 18px;
}
.gallery-top {
  --gallery-control-size: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.gallery-top > .eyebrow {
  align-self: center;
  min-width: 0;
  min-height: var(--gallery-control-size);
  gap: 7px;
  padding-block: 0;
  font-size: 12px;
  color: var(--text);
}
.gallery-top > .eyebrow > .icon {
  width: 18px;
  height: 18px;
  color: var(--tag-red);
}
.gallery-header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}
.gallery-top :is(.media-counter, .lightbox-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--gallery-control-size);
  padding-block: 0;
}
.gallery-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #090a0f;
  aspect-ratio: 16/9;
}
.gallery-stage > img {
  height: 100%;
  width: 100%;
}
.gallery-image-button,
.gallery-video,
.gallery-stage [data-gallery-image] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.gallery-stage [data-gallery-image] {
  object-fit: contain;
}
.gallery-image-button,
.gallery-video {
  padding: 0;
  border: 0;
  background: transparent;
}
.gallery-enlarge,
.card-video-countdown {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  top: 12px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  background: #080910bd;
  border: 1px solid #ffffff25;
  padding: 6px 9px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  color: #fff;
  pointer-events: none;
}
.gallery-enlarge {
  opacity: 0;
  transition: opacity 180ms ease;
}
.gallery-image-button:focus-visible .gallery-enlarge {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-image-button:hover .gallery-enlarge {
    opacity: 1;
  }
}

.gallery-controls {
  --gallery-thumb-width: 112px;
  --gallery-arrow-size: 42px;
  display: flex;
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-inline: auto;
  padding-top: 13px;
}
.gallery-controls > .icon-button {
  width: var(--gallery-arrow-size);
  height: var(--gallery-arrow-size);
  padding: 0;
  color: #c4c2ca;
  border-color: #ffffff24;
  background: linear-gradient(180deg, #ffffff0c, #ffffff03), #0c0e14cc;
  box-shadow: inset 0 1px #ffffff0d;
}
.gallery-controls > .icon-button:is(:hover, :focus-visible) {
  color: var(--red-light);
  border-color: #ff314c80;
  background: linear-gradient(135deg, #ff314c24, #99071d14), #0c0e14e6;
}
.gallery-previous .icon {
  transform: rotate(180deg);
}
.gallery-thumbnails {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 10px;
  scrollbar-width: none;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10px,
    #000 calc(100% - 10px),
    transparent
  );
}
.gallery-thumbnails::-webkit-scrollbar {
  display: none;
}
.gallery-thumbnails button {
  position: relative;
  width: var(--gallery-thumb-width);
  aspect-ratio: 16/9;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid #ffffff24;
  background: #090a0fe6;
  border-radius: var(--radius-sm);
  opacity: 0.58;
  transition:
    opacity 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}
.gallery-thumbnails button > .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: var(--radius-xs);
  background: #080910cc;
  color: #fff;
  transform: translate(-50%, -50%);
}
.gallery-thumbnails button:is(:hover, :focus-visible) {
  border-color: #ff314c8f;
  opacity: 0.92;
  transform: translateY(-1px);
}
.gallery-thumbnails img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-xs);
  filter: saturate(0.82) brightness(0.78);
  transition: filter 180ms ease;
}
.gallery-thumbnails button[aria-pressed="true"] {
  border-color: var(--red-light);
  opacity: 1;
  transform: none;
}
.gallery-thumbnails
  button:is([aria-pressed="true"], :hover, :focus-visible)
  img {
  filter: saturate(1) brightness(0.96);
}
.purchase-panel {
  --purchase-space: 24px;
  --purchase-top: 110px;
  position: sticky;
  top: var(--purchase-top);
  padding: 30px;
}
.options-panel .resource-title {
  --resource-title-min: 24px;
  --resource-title-step: 0.18px;
}
.purchase-panel h1 {
  --resource-title-min: 16px;
  --resource-title-size: clamp(28px, 2.8vw, 39px);
  font-size: var(--resource-title-size);
  display: flex;
  align-items: center;
  block-size: 98px;
  margin-block: 13px 0;
  padding-bottom: calc(var(--purchase-space) - 4px);
  border-bottom: 1px solid var(--line);
  line-height: 1.14;
}
.purchase-panel h1 > span {
  flex: 0 0 100%;
  min-width: 0;
  max-block-size: 100%;
  overflow: auto;
}
html[data-purchase-title-pending] .purchase-panel h1 > span {
  visibility: hidden;
  overflow: hidden;
}
.purchase-price {
  display: flex;
  justify-content: center;
  margin-block: calc(var(--purchase-space) - 4px) 12px;
}
.purchase-price .price {
  --price-size: clamp(24px, 2.1vw, 30px);
  min-height: 54px;
}
.purchase-price:has(.offer-countdown) {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding-top: 9px;
}
.purchase-price:has(.offer-countdown) .price {
  --price-size: clamp(20px, 7cqi, 30px);
  width: 100%;
  align-content: center;
  margin-block-start: 0;
}
.purchase-price .offer-countdown {
  min-width: 0;
  min-height: 54px;
  margin-top: 0;
  padding: 7px 8px;
  gap: 6px;
  font-size: 11px;
  text-wrap: balance;
}
.purchase-price .is-free {
  align-items: center;
}
.purchase-price .is-free strong {
  font-size: var(--price-size);
}
.purchase-actions {
  display: grid;
  gap: 12px;
  margin-top: var(--purchase-space, 24px);
}
.purchase-panel .purchase-actions:has(> .button:nth-of-type(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.purchase-panel .purchase-actions > .button {
  min-width: 0;
  padding-inline: 10px;
}
.gift-trigger {
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 32px;
  font-size: 12px;
}
.gift-trigger > .icon:first-child {
  color: var(--red-light);
}
.purchase-panel > .button {
  width: 100%;
  margin-top: 10px;
}
.purchase-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  gap: 13px 18px;
  padding-block: var(--purchase-space);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.purchase-facts > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 8px;
  font-size: 11px;
  color: #b6acbf;
}
.purchase-facts > span:last-child {
  grid-column: 1 / -1;
}
.purchase-facts .icon,
.footer-link-icon .icon,
.desktop-nav > a > .icon,
.desktop-nav summary > .icon {
  width: 16px;
  height: 16px;
}
.purchase-help {
  container-type: inline-size;
  padding-top: calc(var(--purchase-space) - 1px);
  text-align: center;
}
.purchase-help h2 {
  font-size: 16px;
}
.purchase-help p {
  font-size: 12px;
  margin-top: 11px;
}
.purchase-help-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 4cqi, 18px);
  margin-top: 14px;
}
.purchase-help-links .text-link {
  min-width: 0;
  gap: 6px;
  font-size: clamp(11px, 4cqi, 13px);
  overflow-wrap: anywhere;
}
.purchase-help-links .icon {
  width: clamp(14px, 5cqi, 17px);
}
.description-panel {
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
}
.related-resources:not(.is-carousel)
  .resource-reel-track
  > .product-card:nth-child(n + 4) {
  display: none;
}
.resource-reel-track {
  --reel-gap: 18px;
  --reel-visible: 3;
  gap: var(--reel-gap);
}
.is-carousel .resource-reel-window {
  overflow: hidden;
  padding-block: 14px 22px;
  margin-block: -14px -22px;
  --reel-mask: linear-gradient(
    to right,
    transparent,
    #0009 7%,
    #000 24%,
    #000 76%,
    #0009 93%,
    transparent
  );
  -webkit-mask-image: var(--reel-mask);
  mask-image: var(--reel-mask);
}
.is-carousel .resource-reel-track {
  display: flex;
  will-change: transform;
}
.is-carousel .resource-reel-track > .product-card {
  flex: 0 0
    calc(
      (100% - (var(--reel-visible) - 1) * var(--reel-gap)) / var(--reel-visible)
    );
  box-shadow:
    inset 0 1px 0 #ffffff0b,
    0 8px 20px #0005;
}
.related-resources .card-body {
  padding: 16px;
}
.related-resources .card-body h3 {
  --resource-title-size: 19px;
  --resource-title-min: 15px;
  margin-block: 9px 10px;
}
.related-resources .card-body p {
  font-size: 12px;
  margin-bottom: 16px;
}
.related-resources .card-bottom {
  gap: 8px;
  padding-top: 13px;
}
.related-resources .card-bottom .price {
  --price-size: 18px;
  padding: 8px 10px;
}
.related-resources .card-bottom .button {
  padding-inline: 12px;
}
.related-resources .card-purchase-actions {
  margin-top: 12px;
}
.resource-reel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
[data-reel-previous] .icon {
  rotate: 180deg;
}
@media (min-width: 1280px) {
  .is-carousel .resource-reel-track:has(> .product-card:nth-child(5)) {
    --reel-visible: 4;
  }
}
.prose {
  color: #bab2c4;
  font-size: 14px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.prose p + p,
.prose p + ul,
.prose p + ol {
  margin-top: 18px;
}
.prose h2 {
  font-size: 27px;
  margin-block: 28px 18px;
  color: #ece8f2;
}
.prose h3 {
  font-size: 20px;
  margin-block: 25px 12px;
  color: #ece8f2;
}
.prose img {
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin-block: 20px;
}
.prose ul,
.prose ol {
  padding-left: 23px;
}
.prose li + li {
  margin-top: 8px;
}
.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  margin-block: 25px;
}
.prose td,
.prose th {
  border: 1px solid var(--line-strong);
  padding: 12px;
  text-align: left;
}
.prose iframe,
.prose video {
  max-width: 100%;
}
.prose pre {
  overflow-x: auto;
  background: rgb(10 12 18 / 0.65);
  padding: 20px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.cms-panel {
  padding: 45px;
}
.cms-panel h1 {
  font-size: 42px;
  margin-block: 15px 30px;
}
.cms-server-layout {
  display: grid;
  gap: 30px;
  align-items: start;
}
.cms-server-layout > * {
  min-width: 0;
}
.server-sidebar .server-head {
  padding-right: 0;
}
/* Basket and account */
.basket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr);
  gap: 30px;
  align-items: start;
}
.basket-items {
  display: grid;
  gap: 15px;
}
.basket-item {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border-radius: var(--radius-lg);
}
.basket-image {
  width: 140px;
  flex-shrink: 0;
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.basket-item-info {
  flex: 1;
  min-width: 0;
}
.basket-item h2 {
  --resource-title-size: 18px;
  --resource-title-min: 15px;
  margin-bottom: 14px;
}
.basket-item-info .price {
  --price-size: 18px;
}
.basket-item-info p {
  font-size: 12px;
}
.basket-remove {
  flex-shrink: 0;
}
.basket-remove .icon {
  color: var(--red-light);
  width: 17px;
  height: 17px;
}
.basket-summary {
  padding: 28px;
}
.basket-summary h2 {
  font-size: 25px;
  margin-top: 13px;
}
.basket-breakdown {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-inline: 16px;
  font-size: 13px;
  color: var(--muted);
}
.basket-breakdown > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line-strong);
}
.basket-breakdown dd {
  margin: 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.basket-savings dd {
  color: var(--red-light);
}
.basket-coupons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
}
.basket-coupons .icon {
  color: var(--red-light);
}
.basket-notes {
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
  text-wrap: balance;
}
.basket-notes .icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-inline-end: 4px;
  vertical-align: -3px;
  color: var(--red-light);
}
.total-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(110deg, rgb(var(--glass-tint) / 0.1), #ffffff04);
  margin-block: 22px 18px;
  font-size: 13px;
  font-weight: 650;
}
.total-row .price {
  --price-size: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.basket-summary > .button {
  margin-block: 22px 17px;
  width: 100%;
}
.basket-summary > .text-link {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.cart-empty {
  max-width: 900px;
  margin-inline: auto;
}
.auth-panel {
  max-width: 520px;
  padding: 44px;
  margin: 25px auto 65px;
  text-align: center;
}
.auth-panel > .icon {
  width: 34px;
  height: 34px;
  color: var(--red-light);
  margin: 0 auto 23px;
}
.auth-panel h1 {
  --resource-title-size: 35px;
  font-size: var(--resource-title-size);
  margin-block: 15px 22px;
}
.auth-panel p {
  font-size: 13px;
  margin-bottom: 25px;
}
.auth-panel > .button {
  width: 100%;
}
.auth-panel > .text-link {
  margin-top: 23px;
}
.auth-panel form {
  display: grid;
  gap: 20px;
}
.auth-panel label,
.gift-dialog label {
  display: grid;
  gap: 10px;
  text-align: left;
  font-size: 12px;
  color: #c7b9d1;
}
.auth-panel label > input,
.gift-dialog input,
.select-field select {
  width: 100%;
}
.select-field {
  display: block;
  min-width: 0;
  width: 100%;
}
.option-discord {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: #ffffff04;
  text-align: left;
}
.option-discord > .icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--red-light);
}
.option-discord.is-connected > .icon {
  color: var(--tag-green);
}
.option-discord p {
  margin: 0;
  font-size: 12px;
}
/* Footer and overlays */
.site-footer {
  margin-block: 28px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.7fr) minmax(0, 0.85fr) minmax(0, 1fr)
    minmax(0, 0.95fr);
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius-xl);
}
.footer-panel {
  --footer-cut: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #ffffff1c;
  background:
    radial-gradient(
      280px 140px at 0 0,
      rgb(var(--glass-tint) / 0.045),
      transparent 75%
    ),
    linear-gradient(
      145deg,
      #ffffff0c,
      #ffffff03 62%,
      rgb(var(--glass-tint) / 0.015)
    );
  background-color: #0d0e143d;
  clip-path: polygon(
    0 0,
    calc(100% - var(--footer-cut)) 0,
    100% var(--footer-cut),
    100% 100%,
    var(--footer-cut) 100%,
    0 calc(100% - var(--footer-cut))
  );
  transition:
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}
.footer-panel:focus-within {
  background-color: #19161f52;
  border-color: rgb(var(--glass-tint) / 0.28);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  padding: 28px;
}
.footer-logo {
  display: inline-block;
  max-width: 100%;
}
.footer-logo img {
  display: block;
  width: 250px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: left;
}
.footer-logo strong {
  font-size: 24px;
}
.footer-brand p {
  margin: 0;
  color: #b9b6c2;
  font-size: 14px;
  line-height: 1.7;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 6px;
  padding-block: 2px 14px;
  border-bottom: 1px solid var(--line);
  color: #e2dee7;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.footer-links h2 > .icon {
  width: 17px;
  height: 17px;
  color: var(--red-light);
}
.footer-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid #ffffff1f;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #ffffff07, #ffffff02);
  background-color: #ffffff05;
  color: #c4c0cd;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  transition:
    background-color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out);
}
.footer-link-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.footer-link-icon {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid #ffffff14;
  border-radius: var(--radius-xs);
  background: #ffffff06;
  color: #bc99a5;
  transition: color 0.25s var(--ease-out);
}

.footer-links a > .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-inline-start: auto;
  opacity: 0.5;
  transition:
    transform 0.25s var(--ease-out),
    opacity 0.25s var(--ease-out);
}
.footer-links a:focus-visible {
  color: var(--text);
  border-color: rgb(var(--glass-tint) / 0.42);
  background-color: rgb(var(--glass-tint) / 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .footer-panel:hover {
    background-color: #19161f52;
    border-color: rgb(var(--glass-tint) / 0.28);
  }
  .footer-links a:hover {
    color: var(--text);
    border-color: rgb(var(--glass-tint) / 0.42);
    background-color: rgb(var(--glass-tint) / 0.12);
  }
  .footer-links a:hover .footer-link-icon {
    color: #e2c8d0;
  }
  .footer-links a:hover > .icon {
    transform: translateX(2px);
    opacity: 1;
  }
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding: 16px 4px 0;
  color: #a6a1af;
}
.footer-bottom p {
  margin: 0;
  max-width: 760px;
  font-size: 11px;
  line-height: 1.7;
}
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 10px;
}
.footer-meta > span {
  white-space: nowrap;
}
.footer-meta > span > a {
  color: #d1cbd4;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-size: 13px;
  z-index: 90;
}
.lightbox {
  border-radius: var(--radius-md);
  padding: 18px;
  width: min(1100px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  overflow: auto;
}
.lightbox::backdrop {
  background: #000d;
  backdrop-filter: blur(3px);
}
.lightbox .gallery-stage {
  height: min(620px, calc(100dvh - 210px));
  min-height: 120px;
  aspect-ratio: auto;
}
.lightbox-close {
  width: var(--gallery-control-size);
  padding: 0;
}
.lightbox-close > .icon {
  width: 18px;
  height: 18px;
}
.dialog-close {
  transition:
    color 170ms ease,
    border-color 170ms ease,
    background-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.dialog-close > .icon {
  transition: transform 170ms ease;
}
.dialog-close:is(:hover, :focus-visible) {
  color: #ff314c;
  border-color: #ff314cc7;
  background: linear-gradient(135deg, #ff314c2e, #ffffff0a), #ff314c0f;
  box-shadow:
    inset 0 1px #ffffff1c,
    0 0 0 1px #ff314c29,
    0 14px 34px #ff314c2e;
  transform: translateY(-1px) scale(1.04);
}
.dialog-close:is(:hover, :focus-visible) > .icon {
  transform: rotate(90deg);
}
/* Responsive rules */
@media (min-width: 1600px) {
  :root {
    --content: 1400px;
  }
  .hero {
    gap: 100px;
  }
}
.support-dialog,
.gift-dialog {
  position: fixed;
  width: min(var(--dialog-width, 940px), calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 36px;
  color: var(--text);
}
.support-dialog::backdrop,
.gift-dialog::backdrop {
  background: #020307a8;
  backdrop-filter: blur(3px);
}
.support-dialog h2,
.gift-dialog h2 {
  margin-block: 16px;
  font-size: clamp(24px, 5vw, 32px);
}
.support-dialog p,
.gift-dialog p {
  color: var(--muted);
  line-height: 1.6;
}
.support-close {
  position: absolute;
  right: 12px;
  top: 12px;
}
.option-actions,
.gift-dialog form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.gift-dialog {
  --dialog-width: 480px;
  padding: clamp(24px, 5vw, 36px);
}
.gift-dialog .eyebrow {
  max-width: calc(100% - 30px);
}
.offer-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 36px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid var(--glass-active-border);
  border-radius: var(--radius-sm);
  background: linear-gradient(110deg, #b30b2817, #ffffff03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: center;
}
.offer-countdown > .icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--red-light);
}
.checkout-error {
  color: var(--red-light);
  font-size: 13px;
  line-height: 1.6;
}
/* Native Tebex modules share the store's existing visual tokens. */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: 24px;
  margin-block: 48px 72px;
}
.store-module {
  min-width: 0;
  padding: 24px;
  overflow-wrap: anywhere;
}
.module-title {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.4;
}
.store-module p {
  margin-block: 12px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.module-featured {
  width: 100%;
  max-width: 440px;
  justify-self: center;
}
[data-catalog][aria-busy="true"] [data-catalog-empty] {
  display: none;
}
.module-featured .product-card {
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.module-featured .product-card::before,
.module-featured .product-card::after {
  content: none;
}
.module-featured .card-body {
  padding-inline: 0;
  padding-bottom: 0;
}
.module-goal-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.module-prose {
  font-size: 14px;
}
.module-prose > :first-child {
  margin-top: 0;
}
.module-progress {
  height: 10px;
  margin-top: 20px;
  border-radius: 17px;
  overflow: hidden;
  background: var(--line-strong);
}
.module-progress-fill {
  display: block;
  height: 100%;
  background-color: var(--red);
}
.module-progress-fill.is-striped {
  background-image: linear-gradient(
    45deg,
    #ffffff24 25%,
    transparent 25%,
    transparent 50%,
    #ffffff24 50%,
    #ffffff24 75%,
    transparent 75%
  );
  background-size: 20px 20px;
}
.module-progress-fill.is-animated {
  animation: module-progress-stripes 1s linear infinite;
}
@keyframes module-progress-stripes {
  to {
    background-position: 20px 0;
  }
}
.module-goal-summary strong {
  color: var(--text);
}
.module-gift-form,
.module-gift-form label {
  display: grid;
  gap: 12px;
}
.module-gift-form label {
  font-size: 13px;
  color: var(--muted);
}
.module-gift-form input {
  min-width: 0;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
}
.module-people {
  list-style: none;
  margin: 0;
  padding: 0;
}
.module-people li,
.module-donor {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.module-people li + li {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.module-people li > div {
  min-width: 0;
}
.module-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.module-username {
  font-size: 14px;
}
.module-people p {
  margin-top: 4px;
}
.module-people .module-payment-price,
.module-status.is-online {
  color: var(--green);
}
.module-people .module-payment-time {
  font-size: 12px;
}
.module-status.is-offline {
  color: var(--red-light);
}
.module-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.module-address span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.module-address svg {
  flex-shrink: 0;
}
/* Navigation, support dialog and desktop back-to-top control */
.desktop-nav > a,
.mobile-nav a,
.mobile-nav .catalog-menu > summary {
  gap: 7px;
}

.mobile-nav :is(.nav-link, .catalog-menu > summary) > .icon {
  width: 16px;
  height: 16px;
  color: var(--red-light);
}
.header-socials,
.mobile-socials {
  display: flex;
  gap: 6px;
}
.mobile-socials {
  grid-column: 1 / -1;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}
.social-link {
  color: var(--muted);
}
.social-link:is(:hover, :focus-visible) {
  color: var(--red-light);
}
.social-link > .icon {
  width: 26px;
  height: 26px;
}
.header-support,
.account-link {
  min-height: 42px;
  padding: 9px 12px;
  gap: 7px;
  font-size: 12px;
}
.account-link span {
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-link .icon {
  color: var(--red-light);
}
.account-link.is-logged-in .icon {
  color: var(--green);
}
.support-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.support-option {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-lg);
}
.support-option-primary {
  --glass-border: #df4b6652;
}
.support-option > .icon {
  width: 26px;
  height: 26px;
  color: var(--red-light);
}
.support-option strong {
  font-size: 17px;
}
.support-option p {
  font-size: 12px;
}
.support-option span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 8px;
}
.page-top-anchor {
  position: absolute;
  top: 0;
  left: 0;
}
.scroll-top {
  position: fixed;
  --scroll-rail: max(var(--page-gutter), calc((100% - var(--content)) / 2));
  right: max(0px, calc((var(--scroll-rail) - 54px) / 2));
  bottom: 58px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: min(54px, var(--scroll-rail));
  height: 54px;
  color: #ff314cbd;
  transition:
    color 0.16s,
    filter 0.16s;
}
.scroll-top .icon {
  width: 40px;
  height: 42px;
  filter: drop-shadow(0 0 8px #ff314c33);
  animation: scroll-top-float 2.4s ease-in-out infinite;
}
.scroll-top:hover {
  color: #ff314c;
  filter: drop-shadow(0 0 12px #ff314c61);
}
.scroll-top.is-launching {
  pointer-events: none;
  animation: scroll-top-launch 0.58s cubic-bezier(0.72, 0, 1, 0.38) forwards;
}
.scroll-top.is-launching svg {
  animation: none;
}
body:has(dialog[open]) .scroll-top {
  visibility: hidden;
}
@keyframes scroll-top-float {
  50% {
    transform: translateY(-7px);
  }
}
@keyframes scroll-top-launch {
  34% {
    transform: translateY(-10px) scale(1.04);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(-100vh - 140px)) scale(0.7);
  }
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .scroll-top {
    display: none;
  }
}
/* Responsive component layout, ordered from wide to narrow. */
@media (min-width: 960px) {
  .cms-server-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
  }
  .server-sidebar .server-grid {
    grid-template-columns: 1fr;
  }
  .basket-summary,
  .server-sidebar {
    position: sticky;
    top: 110px;
    max-block-size: calc(100dvh - 126px);
    overflow: auto;
  }
}
@media (max-width: 1279px) {
  .header-socials {
    display: none;
  }
  .header-inner {
    gap: 18px;
  }
  .desktop-nav {
    --nav-inline-padding: 7px;
    gap: 4px;
  }
  .brand {
    width: 160px;
  }
  .account-link span {
    display: none;
  }
}
@media (max-width: 1199px) {
  .button-cart > span:not(.cart-count) {
    display: none;
  }
  :root {
    --page-gutter: 24px;
  }
  .hero {
    gap: 35px;
  }
  .hero-proof {
    gap: 10px;
    font-size: 9px;
  }
  .catalog-layout {
    grid-template-columns: 205px minmax(0, 1fr);
    gap: 22px;
  }
  .card-body {
    padding: 18px;
  }
  .card-body h3 {
    --resource-title-size: 18px;
  }
  .product-grid {
    gap: 20px;
  }
  .purchase-panel {
    padding: 24px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .basket-image {
    width: 110px;
  }
  .basket-item {
    gap: 16px;
    padding: 18px;
  }
  .information-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-standards {
    gap: 24px;
    padding: 28px;
  }
  .standards-detail {
    padding-left: 22px;
  }
  .purchase-notes {
    gap: 30px;
  }
}
@media (width < 960px) {
  .locale-menu {
    position: static;
  }
  .header-inner {
    height: 74px;
  }
  .desktop-nav {
    display: none;
  }
  .mobile-toggle {
    display: inline-flex;
  }
  .hero {
    gap: 26px;
  }
  .hero h1 {
    font-size: 39px;
  }
  .hero-logo {
    width: 280px;
  }
  .hero .lead {
    font-size: 15px;
  }
  .hero-note {
    font-size: 12px;
  }
  .hero-actions {
    gap: 9px;
  }
  .hero-actions .button {
    font-size: 11px;
    padding: 10px 13px;
    gap: 7px;
  }
  .hero-proof {
    display: none;
  }
  .feature-heading {
    gap: 10px;
  }
  .feature-details {
    gap: 10px;
  }
  .feature-details .price {
    --price-size: 20px;
  }
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 0;
  }
  .trust-strip li:nth-child(odd) {
    border-left: 0;
  }
  .trust-strip li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .trust-strip li:last-child {
    grid-column: 1 / -1;
  }
  .section {
    padding-block: 42px;
  }
  .section-heading > p {
    font-size: 12px;
  }
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .server-card {
    padding: 20px;
  }
  .server-head {
    padding-right: 0;
  }
  .server-status:is(
    [data-server-state="unknown"],
    [data-server-state="stale"]
  ) {
    position: static;
    display: block;
    max-width: none;
    margin-top: 8px;
    text-align: left;
  }
  .server-head h3 {
    font-size: 18px;
  }
  .catalog-layout {
    grid-template-columns: 1fr;
  }
  .catalog-sidebar {
    position: static;
  }
  .catalog-meta {
    position: static;
    margin-bottom: 12px;
  }
  .sidebar-panel {
    padding: 12px;
  }
  .sidebar-panel > .eyebrow,
  .sidebar-help {
    display: none;
  }
  .sidebar-panel nav {
    display: grid;
  }
  .sidebar-panel nav > .category-tree {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .sidebar-panel .category-tree .category-tree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sidebar-panel .category-tree .category-tree > li:first-child {
    grid-column: 1 / -1;
  }
  .sidebar-panel :is(a, summary) {
    white-space: normal;
  }
  .product-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(270px, 1fr);
    gap: 22px;
  }
  .purchase-panel {
    --purchase-top: 96px;
    padding: 22px;
  }
  .purchase-panel h1 {
    --resource-title-size: 28px;
    block-size: 104px;
  }
  .support-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-page .home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-page .card-body {
    padding: 15px;
  }
  .basket-layout {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    gap: 12px;
    padding: 16px;
  }
  .footer-brand {
    padding: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-meta {
    justify-content: flex-start;
  }
  .studio-standards {
    grid-template-columns: 1fr 1fr;
  }
  .standards-intro {
    grid-column: 1/-1;
  }
  .standards-detail {
    border: 0;
    padding: 0;
  }
  .purchase-notes {
    grid-template-columns: 1fr;
  }
}
@media (700px <= width < 960px) {
  .standards-intro {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
  .standards-detail + .standards-detail {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }
}
@media (max-width: 699px) {
  html {
    scroll-padding-top: 85px;
  }
  :root {
    --page-gutter: 18px;
  }
  .header-inner {
    height: 67px;
    gap: 8px;
    width: calc(100% - 2 * var(--page-gutter));
  }
  .brand {
    width: 115px;
  }
  .brand img {
    height: 41px;
  }
  .header-actions {
    gap: 6px;
  }
  .button-cart:has(.cart-count) > .icon {
    translate: -4px 4px;
  }
  .cart-count {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border: 1px solid #d6677c38;
    border-radius: var(--radius-xs);
    background: #30151f;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .icon-button {
    width: 36px;
    height: 36px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .hero h1 {
    font-size: 45px;
    max-width: 490px;
  }
  .hero .lead {
    font-size: 16px;
    max-width: 440px;
  }
  .hero-note {
    max-width: 440px;
  }
  .hero-actions {
    margin-block: 24px 0;
  }
  .hero-actions .button {
    min-height: 46px;
    font-size: 12px;
    padding: 12px 18px;
  }
  .hero-feature {
    padding: 12px;
    border-radius: var(--radius);
  }
  .feature-details .price {
    --price-size: 22px;
  }
  .trust-strip {
    padding-inline: 8px;
  }
  .trust-strip li {
    gap: 8px;
    padding: 12px 8px;
  }
  .trust-strip span {
    font-size: 11px;
  }
  .section {
    padding-block: 34px;
  }
  .section-heading {
    margin-bottom: 24px;
  }
  .section-heading h2 {
    font-size: 29px;
  }
  .category-tiles,
  .server-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .category-tile {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px;
  }
  .category-symbol {
    width: 52px;
    height: 52px;
  }
  .category-tile p {
    font-size: 14px;
  }
  .card-number {
    top: 18px;
    right: 20px;
    font-size: var(--corner-size, 74px);
  }
  .home-grid,
  .catalog-grid {
    grid-template-columns: 1fr;
  }
  .card-body {
    padding: 22px;
  }
  .card-body h3 {
    --resource-title-size: 23px;
  }
  .card-body p {
    font-size: 13px;
  }
  .card-body .eyebrow {
    font-size: 10px;
  }
  .server-address {
    font-size: 11px;
  }
  .page-shell {
    padding-block: 27px 50px;
  }
  .breadcrumbs {
    font-size: 10px;
    gap: 8px;
    margin-bottom: 26px;
  }
  .page-heading {
    margin-bottom: 28px;
  }
  .page-heading h1 {
    font-size: 37px;
  }
  .page-heading .lead {
    font-size: 14px;
  }
  .sidebar-panel nav {
    gap: 3px;
  }
  .sidebar-panel .category-tree .category-tree {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar-panel :is(a, summary) {
    padding: 9px 8px;
    font-size: 12px;
    gap: 6px;
  }
  .sidebar-panel :is(a, summary) .icon {
    width: 13px;
    height: 13px;
  }
  .catalog-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .search-field {
    flex-basis: 100%;
  }
  .sort-field {
    width: 100%;
  }
  .product-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery {
    order: 0;
    padding: 12px;
  }
  .purchase-panel {
    order: 1;
    position: static;
    padding: 27px;
  }
  .description-panel {
    order: 2;
  }
  .purchase-panel h1 {
    --resource-title-size: 35px;
  }
  .product-page .home-grid {
    grid-template-columns: 1fr;
  }
  .product-page .card-body {
    padding: 22px;
  }
  .gallery-controls {
    --gallery-thumb-width: 92px;
    --gallery-arrow-size: 36px;
    gap: 6px;
  }
  .gallery-top {
    margin-bottom: 13px;
  }
  .gallery-top > .eyebrow {
    font-size: 11px;
  }
  .cms-panel {
    padding: 25px;
  }
  .cms-panel h1 {
    font-size: 31px;
  }
  .prose h2 {
    font-size: 24px;
  }
  .prose h3 {
    font-size: 19px;
  }
  .basket-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 15px;
    padding: 17px;
  }
  .basket-image {
    width: 100%;
  }
  .basket-item h2 {
    --resource-title-size: 16px;
  }
  .basket-remove {
    grid-column: 2;
    justify-self: end;
  }
  .basket-summary {
    padding: 25px;
  }
  .auth-panel {
    padding: 30px 23px;
    margin-block: 10px 30px;
  }
  .auth-panel h1 {
    --resource-title-size: 31px;
  }
  .site-footer {
    margin-block: 20px 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .footer-panel {
    --footer-cut: 14px;
    padding: 18px;
  }
  .footer-brand {
    gap: 18px;
    padding: 26px 22px;
  }
  .footer-logo img {
    width: 230px;
  }
  .header-support {
    display: none;
  }
  .header-actions > :is(.button-cart, .account-link, .mobile-toggle),
  .locale-menu summary {
    flex-shrink: 0;
    min-height: 42px;
    width: 42px;
    padding: 6px;
  }
  .account-link .icon {
    width: 18px;
  }
  .studio-standards,
  .information-grid,
  .faq-list {
    grid-template-columns: 1fr;
  }
  .studio-standards {
    padding: 24px;
  }
  .standards-intro {
    grid-column: auto;
  }
  .standards-detail {
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .notes-grid {
    gap: 12px;
  }
  .notes-grid article {
    padding: 18px;
  }
  .notes-grid h3 {
    font-size: 17px;
  }
  .faq-list {
    gap: 12px;
  }
  .faq-list summary {
    padding: 18px;
  }
  .faq-answer {
    padding: 0 18px 20px;
  }
  .support-dialog {
    padding: 28px 20px 20px;
  }
  .support-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .support-option {
    gap: 10px;
    padding: 18px;
  }
  .support-option > .icon {
    width: 22px;
    height: 22px;
  }
  .support-option span {
    padding-top: 0;
  }
  .feature-actions {
    flex-wrap: wrap;
  }
  .feature-actions > * {
    min-width: 110px;
  }
}
@media (max-width: 374px) {
  :root {
    --page-gutter: 14px;
  }
  .brand {
    width: 92px;
  }
  .header-inner {
    gap: 6px;
  }
  .header-actions {
    gap: 4px;
  }
  .hero h1 {
    font-size: 38px;
  }
  .hero-actions .button {
    padding-inline: 13px;
  }
  .card-bottom {
    gap: 8px;
  }
  .card-bottom .price {
    --price-size: 19px;
    padding-inline: 8px;
  }
  .sidebar-panel :is(a, summary) {
    font-size: 9px;
  }
  .footer-grid {
    padding: 10px;
  }
  .footer-brand {
    padding: 24px 18px;
  }
}
@media (min-width: 700px) {
  .product-layout {
    row-gap: 0;
  }
  .product-main > * {
    grid-column: 1;
  }
  .gallery {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    contain: size;
    min-height: 0;
  }
  .gallery-stage {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
  .purchase-panel {
    grid-column: 2;
    grid-row: 1;
    max-block-size: calc(100dvh - var(--purchase-top) - 16px);
    overflow: auto;
  }
}
@media (min-width: 700px) and (max-height: 800px) {
  .purchase-panel {
    --purchase-space: 16px;
    padding-block: 18px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-alpha: 0.97;
    --glass-fallback: #101118;
    --glass-blur: 0px;
  }
  .glass-panel:is(.nav-dropdown-panel, .mobile-nav, .toast) {
    --glass-fallback: #111219;
  }
  .site-header {
    background: #0e0e13;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.button, .icon-button, .locale-menu > summary, .module-address)::after {
    display: none;
  }
  .nav-dropdown::details-content {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .glass-panel.product-card:hover,
  :is(
    .button:not(:disabled, [aria-disabled="true"]),
    .social-link,
    .locale-menu > summary
  ):is(:hover, :focus-visible),
  .dialog-close:is(:hover, :focus-visible),
  .dialog-close:is(:hover, :focus-visible) > .icon,
  .nav-link:is(:hover, :focus-visible, [aria-current]) > .icon,
  .catalog-menu > summary:is(:hover, :focus-visible) > .icon,
  .catalog-menu[open] > summary > .icon {
    transform: none;
  }
}