@charset "UTF-8";
/* ==========================================================================
   TMF Leaks: Black out.
   Layered on styles.css and active only on html[data-theme="blackout"]
   (theme-boot.js / theme-gate.js). Same pages, ids and flows, same layout as
   the Decal Sheet -- with everything blacked out, like a murdered-out car:
   black on black, where the difference between matte and gloss black does
   the work paint used to; white type only where there is something to read.
   The colour comes back as light, never as paint: TMF red glows out of the
   dark wherever something matters -- a red-hot sweep through the outlined
   wordmark, the lamp line and underglow of the buttons you should press, the
   page you are on, prices on sale, stars, what is live -- and a red light
   follows the pointer across the cards' hairlines. The page ends on its
   tail-lights. Photos and clips keep their colour, dimmed until you look at
   them. Type: Anybody condensed in uppercase for display, Archivo to read,
   Martian Mono for labels. No rounded corners anywhere.
   ========================================================================== */

/* The display face, condensed whatever a rule asks for: the Decal Sheet sets
   its display type wide (108-150%) in many places; declaring only a narrow
   width range here makes the browser clamp every one of them to it. */
@font-face {
  font-family: 'BO Display';
  src: url('/fonts/anybody-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 56% 68%;
  font-style: normal;
  font-display: swap;
}

/* How much the red lamps are lit (the homepage intro powers them on). */
@property --bo-power { syntax: '<number>'; inherits: true; initial-value: 1; }
/* The pointer light on one card: 0 off, 1 on (fades both ways). */
@property --bo-spot { syntax: '<number>'; inherits: false; initial-value: 0; }
/* The wordmark's blur while it comes up out of the dark. */
@property --bo-blur { syntax: '<length>'; inherits: false; initial-value: 0px; }

html[data-theme="blackout"] {
  --font-display: 'BO Display', 'Archivo', system-ui, sans-serif;
  --liner: #000000;
  --liner-2: #070707;
  --liner-3: #0e0e0e;
  --liner-4: #171717;
  --rule: rgba(255, 255, 255, 0.075);
  --rule-strong: rgba(255, 255, 255, 0.15);
  --grid: transparent;
  --liner-print: none;

  --ink: #ececec;
  --ink-2: #9c9c9c;
  --ink-3: #808080;   /* 5.1:1 on the panels, the floor for small type */

  /* the light: TMF red, emitted rather than painted */
  --bo-light: 255, 38, 52;   /* the lamps' rgb, for rgba(var(--bo-light), a) */
  --bo-lamp: #ff2634;        /* a lit thing itself: a lamp line, a dot */
  --bo-fill: #d90d18;        /* the few red fills that carry white type (5.2:1) */
  --red-ink: #ff4a52;        /* red type on black (6.3:1): links, stars, sale, focus */

  /* the vinyl is all black: what was white, red or black decal is gloss black */
  --paper: #0d0d0d;
  --vinyl-black: #050505;
  --red: #161616;
  --red-hi: #1f1f1f;
  --red-deep: #0a0a0a;
  --on-red: #ececec;
  --on-light: #ececec;
  --foil: linear-gradient(180deg, #232323 0%, #0b0b0b 52%, #050505 100%);

  --gloss: linear-gradient(180deg, #1c1c1c 0%, #0a0a0a 55%, #040404 100%);
  --gloss-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  --kiss: 0px;
  --r: 0;
  --r-lg: 4px;
  --r-btn: 0;
  --r-btn-sm: 0;
  --r-btn-lg: 0;
  --lift: 0 0 0 0 transparent;
  --lift-hover: 0 24px 50px -28px rgba(0, 0, 0, 1);
  --panel-shadow: inset 0 0 0 1px var(--rule), 0 30px 60px -30px rgba(0, 0, 0, 1);

  --font-condensed: 'BO Display', 'Archivo', system-ui, sans-serif;
  background: var(--liner);
  color-scheme: dark;
  scrollbar-color: #262626 #000;
}

/* No tilts and no italic sponsor lettering anywhere: nothing here is a sticker. */
html[data-theme="blackout"] *,
html[data-theme="blackout"] *::before,
html[data-theme="blackout"] *::after {
  rotate: none !important;
  font-style: normal !important;
}

/* Hard edges everywhere: buttons, cards, chips, avatars, dots. The theme
   picker is shared by every theme and keeps its own corners. */
html[data-theme="blackout"] *:not(.theme-gate, .theme-gate *),
html[data-theme="blackout"] *:not(.theme-gate, .theme-gate *)::before,
html[data-theme="blackout"] *:not(.theme-gate, .theme-gate *)::after {
  border-radius: 0 !important;
}

/* Reveals come up out of the dark: a fade with a breath of blur, no slap. */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="blackout"].js-motion .reveal-in,
  html[data-theme="blackout"].js-motion :is(.ecosystem-tile, .price-card, .vouch-card, .gc-card, .giveaway-card).reveal-in {
    animation-name: bo-emerge;
    animation-duration: 900ms;
  }
}
@keyframes bo-emerge { from { opacity: 0; filter: blur(6px); translate: 0 10px; } }
/* the light that runs across gloss black */
@keyframes bo-sheen {
  0%, 62% { background-position: 130% 0, 0 0; }
  100% { background-position: -40% 0, 0 0; }
}

html[data-theme="blackout"] {

  /* The room's light, on the fixed layer behind every page: a low red glow
     from below the screen and a faint spill from the top corner, so the
     dark between sections has depth instead of reading as flat #000. The
     grain sits on top and dithers the glow, so it never bands. */
  & body::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(130% 60% at 50% 115%, rgba(var(--bo-light), 0.1), rgba(var(--bo-light), 0.045) 38%, rgba(var(--bo-light), 0.012) 62%, transparent 82%),
      radial-gradient(55% 42% at 104% -6%, rgba(var(--bo-light), 0.05), rgba(var(--bo-light), 0.015) 50%, transparent 78%);
    background-size: 160px 160px, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat;
  }
  & ::selection { background: var(--bo-fill); color: #fff; }
  & :focus-visible { outline-color: var(--red-ink); }
  & :is(input, textarea) { caret-color: var(--red-ink); }
  & ::-webkit-scrollbar-thumb { background: #262626; border-color: #000; }
  & ::-webkit-scrollbar-thumb:hover { background: #4a1015; }

  /* ---------- type ---------- */
  & :is(h1, h2, .section-head h2, .features-head h2, .cta h2) {
    font-family: var(--font-condensed);
    font-weight: 800;
    font-stretch: 62%;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.95;
  }
  & :is(.section-head h2, .features-head h2) { font-size: clamp(40px, 6vw, 88px); }
  & :is(.section-head .subtitle, .features-head .subtitle) { color: var(--ink-2); }
  & :is(h3, h4) { font-stretch: 100%; }
  & .shop-category-row-head h3, & .giveaway-card-head h3, & .slide-copy h3, & .shop-modal-info h3, & .rp-modal-info h3, & .faq-group h3 {
    font-family: var(--font-condensed);
    font-weight: 800;
    font-stretch: 66%;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  /* media: in colour, dimmed until looked at */
  /* (tutorial embeds too; the timecycle editor's own frame stays as it is: it is a colour tool) */
  & main :is(img, video):not(.avatar-img), & main .tutorial-video iframe {
    filter: brightness(0.66) saturate(0.85);
    transition: filter 600ms var(--ease-out);
  }
  & main :is(a, article, .shop-item, .slide, .carousel, .gc-card, .pf-item, .opti-photo-pair, .tutorial-video, .hero-window, .partner-logo):hover :is(img, video, iframe) {
    filter: brightness(1) saturate(1);
  }

  /* ---------- header + ticker ---------- */
  & .announcement-ticker { background: #000; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
  /* the separators are lamps */
  & .ticker-item::after { background: var(--bo-lamp); box-shadow: 0 0 6px rgba(var(--bo-light), 0.75); }
  & .site-header { background: rgba(0, 0, 0, 0.86); border-bottom: 1px solid var(--rule); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  & .brand-decal { box-shadow: none; gap: 0.4em; font-family: var(--font-condensed); font-weight: 800; font-stretch: 70%; font-size: 22px; letter-spacing: 0.04em; }
  & .brand-tmf, & .brand-leaks { background: none; padding: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; }
  /* TMF outlined in lit red, LEAKS solid white */
  & .brand-tmf { color: transparent; -webkit-text-stroke: 1px var(--red-ink); }
  & .brand-leaks { color: var(--ink); }
  & :is(.top-nav > a, .nav-more-btn) { color: var(--ink-2); font-weight: 500; }
  & :is(.top-nav > a, .nav-more-btn):hover { color: var(--ink); background: none; }
  & :is(.top-nav > a, .nav-more-btn)[aria-current="page"] { color: var(--ink); }
  /* the page you are on: a lamp line under it, throwing light down */
  & :is(.top-nav > a, .nav-more-btn)[aria-current="page"]::after { background: var(--bo-lamp); box-shadow: 0 3px 10px rgba(var(--bo-light), 0.7); }
  @media (min-width: 1181px) {
    & .top-nav > a[aria-current="page"]::after { height: 2px; }
    & .nav-more-btn[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; }
  }
  & :is(.cart-btn, .settings-btn, .nav-toggle, .music-toggle, .nav-wallet, .admin-badge-link, .profile-avatar-link) { border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px var(--rule); background: transparent; }
  & :is(.cart-btn, .settings-btn, .nav-toggle):hover { background: var(--liner-3); }
  /* music on air: the equalizer lights red */
  & .music-toggle-playing { background: #0b0b0b; color: var(--bo-lamp); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.55), 0 10px 22px -12px rgba(var(--bo-light), 0.7); }
  & .music-toggle-playing:hover { background: #121212; color: var(--bo-lamp); }
  & body > .music-player { border-radius: var(--r-btn); }
  & .music-eq i { border-radius: 0; }
  @media (max-width: 768px) {
    & body > .music-player {
      left: 18px;
      bottom: calc(18px + env(safe-area-inset-bottom));
      padding: 0;
      border: 0;
      background: #000;
      box-shadow: inset 0 0 0 1px var(--rule-strong);
    }
    & body > .music-player:has(.music-toggle-playing) { box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.55), 0 12px 26px -14px rgba(var(--bo-light), 0.75); }
    & body > .music-player .music-toggle { width: 48px; min-width: 48px; height: 48px; padding: 0; justify-content: center; background: transparent; box-shadow: none; }
    & body > .music-player .music-nav-btn { width: 40px; height: 48px; }
  }
  @media (max-width: 640px) {
    & .jerry-bubble { width: 48px; }   /* square, like the music button opposite */
  }
  & .cart-badge { background: var(--bo-fill); color: #fff; box-shadow: 0 0 0 2px #000; }
  & .admin-badge-link { color: var(--ink); }
  & .nav-more-dropdown, & .cart-dropdown, & .settings-dropdown { background: var(--liner-2); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 30px 60px -20px #000; border-radius: var(--r); }
  & .nav-more-dropdown a svg.i { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); }
  & .nav-more-dropdown a:hover svg.i { background: transparent; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.6); }

  /* ---------- buttons: gloss black keys with a red lamp line ---------- */
  & .btn {
    font-family: var(--font-mono);
    font-weight: 500;
    font-stretch: 100%;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  & :is(.btn-primary, .btn-foil, .btn-white, .btn-discord) {
    position: relative;
    overflow: hidden;
    background: var(--gloss);
    color: var(--ink);
    box-shadow: var(--gloss-edge), inset 0 -1px 0 rgba(var(--bo-light), 0.9);
    text-shadow: none;
    transition: box-shadow 300ms var(--ease-out), color 200ms ease;
  }
  /* the big ones sit on their own red light, cast down onto the sheet */
  & :is(.btn-primary, .btn-foil, .btn-white, .btn-discord).btn-lg {
    box-shadow: var(--gloss-edge), inset 0 -2px 0 rgba(var(--bo-light), calc(0.95 * var(--bo-power, 1))), 0 18px 34px -18px rgba(var(--bo-light), calc(0.8 * var(--bo-power, 1)));
  }
  & :is(.btn-primary, .btn-foil, .btn-white, .btn-discord)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 32%, rgba(var(--bo-light), 0.12) 44%, rgba(255, 255, 255, 0.2) 50%, rgba(var(--bo-light), 0.12) 56%, transparent 68%) 130% 0 / 250% 100% no-repeat;
    pointer-events: none;
    transition: background-position 900ms var(--ease-out);
  }
  & :is(.btn-primary, .btn-foil, .btn-white, .btn-discord):hover {
    background: var(--gloss);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 var(--bo-lamp), 0 14px 28px -14px rgba(var(--bo-light), 0.85);
  }
  & :is(.btn-primary, .btn-foil, .btn-white, .btn-discord).btn-lg:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 var(--bo-lamp), 0 22px 42px -16px rgba(var(--bo-light), 0.95);
  }
  & :is(.btn-primary, .btn-foil, .btn-white, .btn-discord):hover::before { background-position: -40% 0; }
  & .btn-foil { background: var(--gloss); }
  & :is(.btn-ghost, .btn-secondary) { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); }
  & :is(.btn-ghost, .btn-secondary):hover { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
  & .btn:disabled { opacity: 0.35; }
  & :is(.btn-primary, .btn-foil, .btn-white, .btn-discord):disabled { box-shadow: var(--gloss-edge); }
  & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .custom-select-trigger, .shop-search) {
    background: #050505;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--rule-strong);
  }
  & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .shop-search):focus { box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.7); }
  & :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--bo-fill); }

  /* ---------- hero: the wordmark, blacked out and lit ---------- */
  & .pill-promo {
    background: transparent;
    color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--rule-strong);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  & .pill-promo svg.i:first-child { color: var(--red-ink); }
  & .pill-promo:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.55); }
  /* chips and link pills share the theme's corners, not pills */
  & :is(.pill, .pill-promo, .tmf-hub-link, .nav-more-btn) { border-radius: var(--r); }
  & :is(.shop-sound-btn, .shop-fullscreen-btn, .price-preview-arrow, .jerry-close-btn, .jerry-send-btn, .shop-wishlist-btn,
        .qty-btn, .cart-item-remove, .music-nav-btn, .theme-switch-btn, .carousel-arrow) { border-radius: var(--r-btn); }
  & input[type="file"]::file-selector-button { border-radius: 0; }
  /* The outline catches a red-hot sweep (white at its core) every few
     seconds and throws a low red light under itself. --bo-blur and
     --bo-power belong to the homepage intro (site-motion.js). */
  & .hero-decal {
    background: none;
    box-shadow: none;
    padding: 0;
    font-family: var(--font-condensed);
    font-weight: 900;
    font-stretch: 58%;
    font-size: clamp(84px, 15.5vw, 236px);
    line-height: 0.82;
    letter-spacing: 0;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(236, 236, 236, 0.66);
    background-image:
      linear-gradient(100deg, transparent 38%, rgba(var(--bo-light), 0.9) 45%, #fff4f4 50%, rgba(var(--bo-light), 0.9) 55%, transparent 62%),
      linear-gradient(#060606, #060606);
    background-size: 300% 100%, 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: blur(var(--bo-blur, 0px)) drop-shadow(0 0 1px rgba(var(--bo-light), calc(0.55 * var(--bo-power, 1)))) drop-shadow(0 14px 36px rgba(var(--bo-light), calc(0.34 * var(--bo-power, 1))));
  }
  @media (prefers-reduced-motion: no-preference) {
    & .hero-decal { animation: bo-sheen 9s cubic-bezier(0.6, 0, 0.3, 1) 1.2s infinite; }
  }
  & .hero-title-accent {
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 18px 0 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-stretch: 100%;
    font-size: clamp(12px, 1.1vw, 14px);
    letter-spacing: 0.32em;
    color: var(--ink-2);
  }
  & .hero-sub { color: var(--ink-2); max-width: 46ch; }
  /* the clip, in colour, on a red light spilling out under its frame */
  & .hero-window {
    border-radius: var(--r);
    box-shadow: inset 0 0 0 1px var(--rule-strong), 0 54px 90px -54px rgba(var(--bo-light), calc(0.6 * var(--bo-power, 1))), 0 40px 90px -40px #000;
    background: #000;
  }
  & .hero-window { margin: 0; }
  & .hero-window::before { display: none; }
  & .hero-window-cut { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--rule-strong); }
  & :is(.hero-stats, .invite-decal) { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); border-radius: var(--r); }
  & .invite-icon { background: var(--liner-3); color: var(--ink); font-family: var(--font-condensed); font-stretch: 70%; }
  & .invite-name { font-family: var(--font-condensed); font-weight: 800; font-stretch: 66%; text-transform: uppercase; letter-spacing: 0.02em; }
  & .partners-strip { border: 1px solid var(--rule); background: transparent; }
  & .powering-label { box-shadow: inset 0 0 0 1px var(--rule-strong); background: transparent; color: var(--ink-2); }
  & .partner-logo { filter: brightness(0.8); }
  & .partner-logo.active { box-shadow: 0 0 0 1px var(--red-ink); filter: none; transform: none; }
  & .owner-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }

  /* ---------- cards: hairlines that catch the light ----------
     A red light rides the pointer across a card (site-motion.js sets --mx /
     --my and .bo-spot-on): it lights the stretch of the card's edge nearest
     the pointer and warms the black under it. The edge is a 1px transparent
     border showing the layer under the card's own black. */
  & :is(.ecosystem-tile, main .price-card, #promoServices .price-card, .shop-item, .vouch-card, .giveaway-card, .gc-card, .pf-item) {
    border: 1px solid transparent;
    background:
      radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--bo-light), calc(0.08 * var(--bo-spot, 0))), transparent 70%) padding-box,
      linear-gradient(var(--bo-card, var(--liner-2)), var(--bo-card, var(--liner-2))) padding-box,
      radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--bo-light), calc(0.95 * var(--bo-spot, 0))), transparent 70%) border-box,
      linear-gradient(var(--bo-hair, var(--rule)), var(--bo-hair, var(--rule))) border-box;
    color: var(--ink);
    box-shadow: none;
    border-radius: var(--r);
    transform: none;
    transition: --bo-spot 420ms var(--ease-out), box-shadow 300ms ease, translate 300ms var(--ease-out);
  }
  & .bo-spot-on { --bo-spot: 1; }

  /* ---------- the homepage sections ---------- */
  & .ecosystem-tile:hover { --bo-card: var(--liner-3); --bo-hair: rgba(255, 255, 255, 0.2); transform: none; }
  & .ecosystem-tile::after { display: none; }
  & .ecosystem-icon-wrap { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); border-radius: var(--r-btn); transition: color 300ms ease, box-shadow 300ms ease; }
  & .ecosystem-tile:hover .ecosystem-icon-wrap { color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.55); }
  & .tile-label, & .tile-graphics .tile-label {
    font-family: var(--font-condensed);
    font-weight: 800;
    font-stretch: 64%;
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  & .tile-note { color: var(--ink-3); }

  & .carousel { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--rule); background: #000; }
  & .slide-meta { background: none; color: var(--ink-2); box-shadow: none; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  & .slide-copy h3 { text-shadow: none; }
  & .carousel-arrow { background: rgba(0, 0, 0, 0.7); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); border-radius: var(--r-btn); }
  & .carousel-arrow:hover { background: #000; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.6); }
  & .carousel-dots span { background: var(--ink-3); }
  & :is(.carousel-dots, .price-preview-dots) span.active { background: var(--bo-lamp); box-shadow: 0 0 6px rgba(var(--bo-light), 0.7); }
  & #mpCarousel { background: var(--liner-2); }
  & #mpCarousel .slide-meta { background: none; color: var(--ink-2); box-shadow: none; }

  & .feature-item { border-top: 1px solid var(--rule); }
  & .feature-item > svg.i { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); border-radius: var(--r-btn); }
  & .feature-item h3 { font-family: var(--font-condensed); font-weight: 800; font-stretch: 66%; text-transform: uppercase; letter-spacing: 0.01em; }

  /* a storewide sale is lit */
  & .promo-banner { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.45), 0 22px 44px -30px rgba(var(--bo-light), 0.6); }
  & .promo-banner-icon { color: var(--red-ink); }
  & .promo-banner-end { background: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }

  /* the tier to pick: a red edge, and its own light under it */
  & main .price-card.price-card.featured {
    --bo-card: var(--liner-3);
    --bo-hair: rgba(var(--bo-light), 0.55);
    box-shadow: 0 36px 70px -40px rgba(var(--bo-light), 0.55);
  }
  & .price-card::before { display: none; }
  & :is(.price-card, #promoServices .price-card:nth-child(n), .opti-page .price-card.featured) { --on: var(--ink); --on-soft: var(--ink-2); }
  & .price-amt { font-family: var(--font-condensed); font-weight: 900; font-stretch: 60%; letter-spacing: 0; }
  & .price-tag em { background: transparent; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.5); }
  & :is(.price-sale-ribbon, .price-card .price-sale-ribbon) { background: #000; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.6), 0 12px 24px -12px rgba(var(--bo-light), 0.6); }
  /* the featured tier's buy button is the one lit key on the row */
  & .price-card.featured :is(.buy-instant-btn, .opti-buy-btn) {
    background: var(--gloss);
    color: #fff;
    box-shadow: var(--gloss-edge), inset 0 -2px 0 var(--bo-lamp), 0 18px 34px -18px rgba(var(--bo-light), 0.85);
  }
  & .price-card.featured :is(.buy-instant-btn, .opti-buy-btn):hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 var(--bo-lamp), 0 22px 42px -16px rgba(var(--bo-light), 0.95);
  }
  & .price-most-purchased-badge { background: #000; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.45); }
  & .price-card li::before { background: var(--ink); }
  & .price-card li::after { border-color: #000; }
  & .price-card[data-in-cart]::after { background: var(--bo-fill); color: #fff; box-shadow: 0 0 0 2px #000; }
  & .price-card :is(.price-card-photos, .price-preview) { border-radius: var(--r-btn); }

  & .vouch-card-stars { color: var(--red-ink); }
  & .vouch-card-verified { color: var(--ink-3); opacity: 1; }

  /* the last call before the footer: an outline on a red glow */
  & .cta h2 {
    font-size: clamp(48px, 9vw, 150px);
    color: #050505;
    -webkit-text-stroke: 1.2px rgba(236, 236, 236, 0.7);
    background: none;
    box-shadow: none;
    padding: 0;
    filter: drop-shadow(0 0 1px rgba(var(--bo-light), 0.5)) drop-shadow(0 18px 44px rgba(var(--bo-light), 0.4));
  }

  /* ---------- shop, previews, finder, packs ---------- */
  & .shop-item:hover { --bo-hair: rgba(255, 255, 255, 0.24); }
  & .shop-item-tag { background: rgba(0, 0, 0, 0.75); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); font-family: var(--font-mono); }
  & .shop-item-price { font-family: var(--font-condensed); font-weight: 800; font-stretch: 66%; font-size: 21px; color: var(--ink); }
  & :is(.shop-sidebar-btn, .rp-sidebar-btn) { border-radius: var(--r-btn); }
  & :is(.shop-sidebar-btn, .rp-sidebar-btn).active { background: var(--liner-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong), inset 2px 0 0 var(--bo-lamp); }
  & :is(.previews-tab, .faq-pill, .pf-mode-btn) { border-radius: var(--r-btn); }
  & :is(.previews-tab, .faq-pill, .pf-mode-btn).active { background: var(--ink); color: #000; box-shadow: none; }
  & :is(.shop-modal, .confirm-modal, .rp-modal) { background: var(--liner-2); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 40px 90px -30px #000; }
  & :is(.shop-modal-overlay, .confirm-modal-overlay, .rp-modal-overlay) { background: rgba(0, 0, 0, 0.82); }
  & .rp-phrase-btn, & .rp-phrase-btn:nth-child(n) { background: var(--liner-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); border-radius: var(--r); }
  & .rp-phrase-btn:hover { box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.5); }
  & .rp-phrase-count { background: var(--bo-fill); color: #fff; }
  & .pf-upload { border: 1px dashed var(--rule-strong); border-radius: var(--r); }
  & .pf-upload-inner svg { background: transparent; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.45); }
  & :is(.gc-redeem, .orders-stat, .admin-row, .admin-stat, .wallet-summary, .whr-row) {
    background: var(--liner-2);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--rule);
    border-radius: var(--r);
  }
  & .giveaway-card:nth-child(n) { color: var(--ink); }
  /* the clock is running: red */
  & .giveaway-countdown { background: transparent; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.45); font-variant-numeric: tabular-nums; }
  & .giveaway-meta li { background: var(--liner-3); }
  & .giveaway-card.is-entered .btn-primary { background: var(--liner-3); color: var(--ink-3); box-shadow: var(--gloss-edge); }
  & .giveaway-status { color: var(--ink); }
  & :is(.tutorial-video, .tool-iframe-wrap) { box-shadow: inset 0 0 0 1px var(--rule); border-radius: var(--r); }
  & :is(.faq-item, .faq-item:last-child) { border-color: var(--rule); }
  & :is(.promo-tier-price, .whr-amount, .orders-stat-value, .admin-stat :is(h4, .admin-stat-value), .wallet-summary-amount) {
    font-family: var(--font-condensed);
    font-weight: 900;
    font-stretch: 62%;
  }
  & :is(.admin-badge, .shop-results-count, .pf-results-count) { font-variant-numeric: tabular-nums; }
  /* on duty is on air */
  & .staff-row.is-on-duty { box-shadow: 0 0 0 1px var(--bo-lamp), 0 14px 30px -18px rgba(var(--bo-light), 0.7); }
  & .ticket-msg-mention { background: rgba(var(--bo-light), 0.16); color: var(--ink); }

  /* ---------- Jerry ---------- */
  & .jerry-bubble { background: #000; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); border-radius: var(--r-btn); }
  & .jerry-bubble:hover { box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.55); }
  & .jerry-bubble-notify { background: var(--bo-lamp); box-shadow: 0 0 0 2px #000, 0 0 8px rgba(var(--bo-light), 0.8); }
  & .jerry-panel { background: var(--liner-2); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 40px 80px -30px #000; border-radius: var(--r); }
  & .jerry-header { border-bottom: 1px solid var(--rule); font-family: var(--font-condensed); font-stretch: 70%; text-transform: uppercase; }
  & .jerry-msg-bot { background: var(--liner-3); }
  & .jerry-msg-user { background: var(--ink); color: #000; }
  & .jerry-suggestion-chip { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); border-radius: var(--r-btn); }
  & .jerry-suggestion-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--bo-light), 0.55); }
  & .jerry-proactive { background: var(--liner-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 30px 60px -24px #000; border-radius: var(--r); }
  & .jerry-proactive-close { color: var(--ink-2); }

  /* ---------- footer: the tail-lights ----------
     A lamp line along its top edge throws red up onto the page, and the
     wordmark across the sheet is outlined in dim red. */
  & .site-footer {
    border-top: 0;
    background: #000;
    box-shadow: 0 -1px 0 rgba(var(--bo-light), 0.8), 0 -30px 60px -34px rgba(var(--bo-light), 0.6);
  }
  & .footer-col h2 { color: var(--ink-3); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; }
  & .footer-col a { color: var(--ink-2); }
  & .footer-col a:hover { color: var(--red-ink); }
  & .footer-sheet { gap: 0.12em; font-stretch: 58%; font-weight: 900; }
  & .footer-sheet span, & .footer-sheet span:first-child, & .footer-sheet span:last-child {
    background: none;
    box-shadow: none;
    padding: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--bo-light), 0.5);
  }
  & .footer-bottom { border-top: 1px solid var(--rule); }

  & .music-toggle-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }

  /* ---------- small screens ---------- */
  @media (max-width: 960px) {
    & .hero-window { width: 100%; margin-left: 0; margin-right: 0; }
  }
  @media (max-width: 560px) {
    & .hero-decal { font-size: clamp(64px, 24vw, 110px); -webkit-text-stroke-width: 1px; }
    & :is(.section-head h2, .features-head h2) { font-size: clamp(36px, 11vw, 56px); }
  }
}