/* ═══════════════════════════════════════════════════════════════════════════
   THE FEATURED SLOT
   Gold exists nowhere else on the site. Featured is a black VIP stage:
   champagne metal, warm light and one restrained sponsor-colour halo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── paid asset rail ─────────────────────────────────────────────────────── */
.asset-cluster-paid {
  position: relative;
  padding-left: 7px;
  border-left: 1px solid rgba(229, 190, 102, .28);
}
.asset-cluster-paid::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: #e7c36d;
  box-shadow: 0 0 10px rgba(231, 195, 109, .55);
  pointer-events: none;
}
/* The rail is width-critical at 1440px. Keep the paid slot inside the
   existing budget so PORTFOLIO never gets pushed off-screen. */
@media (min-width: 1181px) {
  .asset-switch button { min-width: 44px; padding: 0 7px; }
  .topbar-divider { margin: 0 10px; }
}
.asset-switch .featured-tab,
.asset-switch button.featured-tab,
.asset-switch .featured-buzz,
.asset-switch button.featured-buzz {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 9px;
  color: rgba(242, 211, 137, .78);
  text-shadow: 0 0 14px rgba(220, 173, 69, .12);
}
.asset-switch .featured-tab:hover,
.asset-switch .featured-buzz:hover {
  color: #fff1c2;
  background: linear-gradient(180deg, rgba(246, 210, 124, .12), rgba(196, 139, 30, .06));
}
.asset-switch .featured-tab.active {
  color: #fff5d2;
  background:
    linear-gradient(180deg, rgba(255, 238, 187, .14), rgba(197, 143, 38, .08)),
    #0a0804;
  box-shadow:
    inset 0 0 0 1px rgba(235, 198, 109, .36),
    inset 0 1px 0 rgba(255, 247, 218, .18),
    0 0 18px rgba(215, 166, 53, .12);
}
.asset-switch .featured-tab {
  z-index: 1;
  flex: 0 0 auto;
}
.asset-switch .featured-buzz,
.asset-switch button.featured-buzz {
  z-index: 3;
  flex: 0 0 31px;
  width: 31px;
  padding-inline: 0;
  pointer-events: auto;
}
.featured-tab img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 235, 179, .42), 0 0 10px rgba(224, 176, 64, .32);
}
.featured-buzz-star {
  font-size: 13px;
  line-height: 1;
  color: #f4d47f;
  transform: translateY(-1px);
  animation: featured-buzz-flicker 7s ease-in-out infinite;
}
.featured-buzz-label { letter-spacing: .09em; }
@keyframes featured-buzz-flicker {
  0%, 84%, 100% { color: #e3bd61; text-shadow: none; }
  89% { color: #fff4c8; text-shadow: 0 0 9px rgba(255, 224, 145, .85), 0 0 22px rgba(205, 150, 35, .52); }
  93% { color: #d8aa45; text-shadow: none; }
  96% { color: #ffeab0; text-shadow: 0 0 8px rgba(239, 199, 106, .72); }
}

/* ── modal stage ─────────────────────────────────────────────────────────── */
#featured-modal .share-modal-backdrop {
  background:
    radial-gradient(760px 520px at 50% 42%, rgba(164, 117, 24, .12), transparent 72%),
    rgba(2, 2, 2, .9);
  backdrop-filter: blur(10px) saturate(.72);
}
/* Keep the paid experience visually sealed. The persistent site dock remains
   in the DOM, but cannot float over the modal on narrow screens. */
body:has(#featured-modal:not([hidden])) :is(.site-dock, .dock-x, .share-fab) {
  opacity: 0;
  pointer-events: none;
}
.featured-dialog {
  --gold: #edc96f;
  --gold-bright: #fff0b5;
  --gold-deep: #9a6819;
  position: relative;
  isolation: isolate;
  width: min(920px, calc(100vw - 40px));
  padding: 26px 28px 28px;
  overflow: hidden;
  border: 1px solid rgba(235, 199, 111, .38);
  border-radius: 18px;
  color: #f8f3e8;
  background:
    radial-gradient(700px 300px at 50% -32%, rgba(241, 204, 112, .16), transparent 68%),
    radial-gradient(440px 260px at 100% 100%, rgba(150, 99, 17, .08), transparent 72%),
    linear-gradient(145deg, rgba(18, 16, 11, .99), rgba(6, 6, 5, .995) 62%);
  box-shadow:
    0 42px 120px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(0, 0, 0, .82),
    0 0 72px rgba(185, 132, 26, .12),
    inset 0 1px 0 rgba(255, 242, 198, .14);
}
.featured-dialog::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f1d58b 28%, #fff5cd 50%, #f1d58b 72%, transparent);
  box-shadow: 0 0 22px rgba(235, 194, 95, .55);
  pointer-events: none;
}
.featured-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -220px;
  left: 50%;
  width: 520px;
  height: 420px;
  transform: translateX(-50%);
  background: conic-gradient(from 166deg at 50% 0%, transparent 0 47%, rgba(255, 231, 165, .06) 48.5% 51.5%, transparent 53% 100%);
  filter: blur(5px);
  pointer-events: none;
}
.featured-dialog .share-dialog-head {
  position: relative;
  z-index: 2;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(235, 203, 129, .13);
}
.featured-dialog .share-dialog-head label {
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .24em;
}
.featured-dialog .share-dialog-head h2 {
  max-width: 680px;
  margin-top: 7px;
  color: #fffdf7;
  font-size: clamp(21px, 2.25vw, 29px);
  font-weight: 620;
  letter-spacing: -.035em;
}
.featured-dialog .share-close {
  border-color: rgba(235, 203, 129, .2);
  color: rgba(250, 232, 184, .66);
  background: rgba(255, 255, 255, .025);
}
.featured-dialog .share-close:hover {
  color: #fff4cb;
  background: rgba(237, 201, 111, .1);
}
.featured-step { margin-top: 22px; }

/* Intro: one idea, one seal, three quiet proof points — no card wall. */
.featured-intro { text-align: center; }
.featured-intro-star {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 4px auto 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 240, 189, .78);
  border-radius: 50%;
  color: #fff7d7;
  font-size: 27px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(64, 38, 0, .72), 0 0 12px rgba(255, 245, 204, .4);
  background:
    radial-gradient(circle at 34% 27%, #fff6cf 0 7%, #f2d179 23%, #bb7d1d 57%, #60400f 80%, #1a1207 100%);
  box-shadow:
    0 0 0 6px rgba(224, 183, 83, .055),
    0 0 0 7px rgba(243, 211, 133, .17),
    0 20px 45px rgba(0, 0, 0, .5),
    0 0 48px rgba(222, 172, 54, .28),
    inset 0 2px 2px rgba(255, 250, 224, .72),
    inset 0 -7px 13px rgba(67, 38, 4, .75);
}
.featured-intro-star::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  clip-path: circle(50% at 50% 50%);
  pointer-events: none;
  background: linear-gradient(112deg, transparent 37%, rgba(255,255,255,.1) 43%, rgba(255,250,220,.92) 49%, rgba(255,255,255,.16) 55%, transparent 61%);
  background-size: 280% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
  animation: featured-seal-shine 3.8s cubic-bezier(.22,.72,.24,1) infinite;
}
.featured-intro-star::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(80, 47, 7, .48);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 184, .26);
  animation: featured-seal-rim 2.6s ease-in-out infinite;
}
@keyframes featured-seal-shine {
  0%, 12% { opacity: 0; background-position: 130% 0; }
  18% { opacity: .9; }
  42% { opacity: .72; background-position: -30% 0; }
  48%, 100% { opacity: 0; background-position: -30% 0; }
}
@keyframes featured-seal-rim {
  0%, 100% { opacity: .72; box-shadow: inset 0 0 0 1px rgba(255,240,184,.22), 0 0 0 rgba(255,224,144,0); }
  50% { opacity: 1; box-shadow: inset 0 0 0 1px rgba(255,249,220,.54), 0 0 13px rgba(255,224,144,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .featured-intro-star::before,
  .featured-intro-star::after { animation: none; }
}
.featured-intro-lead {
  max-width: 52ch;
  margin: 0 auto 25px;
  color: rgba(247, 238, 215, .78);
  font-size: 14px;
  line-height: 1.65;
}
.featured-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid rgba(235, 203, 129, .13);
  border-bottom: 1px solid rgba(235, 203, 129, .13);
}
.featured-card {
  position: relative;
  min-height: 108px;
  padding: 20px 24px 19px 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.featured-card + .featured-card { border-left: 1px solid rgba(235, 203, 129, .13); }
.featured-card-icon {
  position: absolute;
  top: 21px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 1px solid rgba(237, 201, 111, .32);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(237, 201, 111, .045);
  box-shadow: inset 0 1px 0 rgba(255, 243, 205, .12);
}
.featured-card-icon svg { width: 13px; height: 13px; }
.featured-card b {
  display: block;
  margin: 0 0 6px;
  color: #fffaf0;
  font-size: 12px;
  letter-spacing: .015em;
}
.featured-card small {
  color: rgba(246, 237, 213, .5);
  font-size: 10px;
  line-height: 1.55;
}
.featured-intro-nav { justify-content: center; margin-top: 24px; }

/* Navigation and controls */
.featured-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.featured-nav .featured-bid-send { width: auto; flex: none; margin-top: 0; padding: 13px 26px; }
.featured-ghost {
  padding: 10px 4px;
  border: 0;
  background: none;
  color: rgba(246, 235, 208, .48);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  transition: color .2s ease;
}
.featured-ghost:hover { color: #f8db91; }
.featured-step-title {
  margin: 0 0 18px;
  color: #fffaf0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.featured-step-title small {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .2em;
}
.featured-step input {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(237, 209, 142, .2);
  border-radius: 10px;
  color: #fffaf0;
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.featured-step input::placeholder { color: rgba(247, 236, 209, .3); font-family: Manrope, sans-serif; }
.featured-step input:focus-visible {
  outline: none;
  border-color: rgba(241, 207, 125, .68);
  background: rgba(0, 0, 0, .52);
  box-shadow: 0 0 0 3px rgba(215, 166, 53, .11), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Resolved token */
.featured-token-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(237, 201, 111, .3);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(220, 171, 58, .08), rgba(220, 171, 58, .018));
  box-shadow: inset 0 1px 0 rgba(255, 242, 202, .06);
}
.featured-token-card img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(244, 216, 148, .4), 0 0 18px rgba(215, 166, 53, .18);
}
.featured-token-card b { font-size: 14px; letter-spacing: .04em; }
.featured-token-card small { display: block; margin-top: 3px; color: rgba(247, 236, 209, .46); font-size: 10px; }
.featured-token-card.is-unknown { border-color: rgba(255, 90, 120, .34); background: rgba(255, 90, 120, .05); }
.featured-token-card.is-unknown small { color: #ff97b0; }

/* Bid screen */
.featured-chosen { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.featured-chosen img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(239, 205, 124, .32); }
.featured-chosen b { color: var(--gold-bright); font-size: 13px; letter-spacing: .04em; }
.featured-chosen small { color: rgba(247, 236, 209, .44); font-size: 10px; }
.featured-bid-amount { display: flex; gap: 9px; align-items: stretch; }
.featured-bid-amount input { flex: 1; font-variant-numeric: tabular-nums; }
#bid-lead {
  flex: none;
  padding: 0 16px;
  border: 1px solid rgba(237, 201, 111, .38);
  border-radius: 10px;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(237, 201, 111, .07), rgba(237, 201, 111, .025));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#bid-lead:hover { color: #fff2c5; border-color: rgba(244, 214, 143, .66); background: rgba(237, 201, 111, .11); }
.featured-hint { margin: 9px 2px 0; color: rgba(247, 236, 209, .46); font-size: 10px; }
.featured-bid-send {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #f2d27f;
  border-radius: 10px;
  color: #171005;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 43%),
    linear-gradient(105deg, #b97d1d, #f2d27f 42%, #c38b2c 100%);
  font-family: Sora, Manrope, sans-serif;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-shadow: 0 1px 0 rgba(255, 248, 216, .34);
  box-shadow: 0 13px 32px rgba(167, 111, 15, .2), inset 0 1px 0 rgba(255, 255, 255, .54), inset 0 -1px 0 rgba(87, 49, 3, .32);
  transition: filter .2s ease, transform .15s ease, opacity .2s ease;
}
.featured-bid-send:hover:not(:disabled) { filter: brightness(1.08) saturate(1.05); }
.featured-bid-send:active:not(:disabled) { transform: scale(.985); }
.featured-bid-send:disabled { opacity: .32; cursor: default; box-shadow: none; }
.featured-bid-status { margin: 10px 2px 0; min-height: 14px; color: rgba(247, 236, 209, .52); font-size: 10px; }
.featured-bid-status.is-good { color: #6fe3a1; }
.featured-bid-status.is-bad { color: #ff97b0; }
.featured-fine { margin: 17px 2px 0; color: rgba(247, 236, 209, .36); font-size: 9.5px; line-height: 1.7; }
.featured-fine b { color: rgba(247, 217, 143, .86); }
.featured-fine .tip-copy { margin: 0 3px; vertical-align: middle; }

/* Leaderboard: current champion on the plinth, next week as a clean race. */
.featured-now {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px 17px;
  overflow: hidden;
  border: 1px solid rgba(239, 204, 119, .38);
  border-radius: 12px;
  background:
    radial-gradient(400px 140px at 7% 0%, rgba(237, 197, 99, .15), transparent 72%),
    linear-gradient(100deg, rgba(41, 31, 13, .76), rgba(11, 10, 7, .88));
  box-shadow: inset 0 1px 0 rgba(255, 244, 207, .1), 0 15px 34px rgba(0, 0, 0, .24);
}
.featured-now::after {
  content: "";
  position: absolute;
  right: 13%;
  bottom: -44px;
  width: 210px;
  height: 80px;
  border-radius: 50%;
  background: rgba(224, 174, 55, .11);
  filter: blur(22px);
  pointer-events: none;
}
.featured-now > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 231, 171, .55), 0 0 0 5px rgba(229, 186, 82, .06), 0 0 24px rgba(222, 172, 54, .28);
}
.featured-now-copy { position: relative; z-index: 1; }
.featured-now-copy label { color: var(--gold); font-size: 8px; letter-spacing: .17em; }
.featured-now-copy h3 { margin: 3px 0 0; color: #fffaf0; font-size: 19px; letter-spacing: .02em; }
.featured-won { position: relative; z-index: 1; margin-left: auto; color: rgba(247, 236, 209, .5); font-size: 11px; }
.featured-won b { color: var(--gold-bright); }
.featured-vacant .featured-won { margin-left: 0; }
.featured-live-link {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 9px 14px;
  border: 1px solid rgba(239, 204, 119, .4);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(237, 201, 111, .03);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.featured-live-link:hover { color: #fff2c5; border-color: rgba(244, 214, 143, .66); background: rgba(237, 201, 111, .1); }
.featured-race-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.featured-race-head h3 { margin: 0; color: #fffaf0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.featured-cutoff { color: rgba(247, 236, 209, .42); font-size: 10px; }
.featured-cutoff b { color: var(--gold); font-variant-numeric: tabular-nums; }
.featured-standings { counter-reset: featured-rank; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid rgba(235, 203, 129, .13); }
.featured-standings li {
  counter-increment: featured-rank;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 9px 13px 9px 48px;
  overflow: hidden;
  border-bottom: 1px solid rgba(235, 203, 129, .1);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}
.featured-standings li::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--race, 0%);
  background: linear-gradient(90deg, rgba(211, 158, 43, .13), rgba(211, 158, 43, .012));
  pointer-events: none;
}
.featured-standings li::after {
  content: counter(featured-rank, decimal-leading-zero);
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(239, 208, 133, .35);
  font: 700 9px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
}
.featured-standings li:hover { background: rgba(237, 201, 111, .045); }
.featured-standings li.is-leader { background: linear-gradient(90deg, rgba(237, 195, 91, .065), transparent 72%); box-shadow: inset 2px 0 0 #dcb04d; }
.featured-standings li.is-leader::after { color: var(--gold); }
.featured-standings li.is-leader .featured-standing-bid { color: var(--gold-bright); }
.featured-standings img { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(239, 208, 133, .2); }
.featured-standings li > b { position: relative; z-index: 1; color: #f8f2e5; font-size: 12px; letter-spacing: .045em; }
.featured-standing-bid { position: relative; z-index: 1; margin-left: auto; color: rgba(250, 241, 220, .82); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.featured-standings-empty { padding: 12px 2px; color: rgba(247, 236, 209, .5); font-size: 11px; cursor: default; background: none; }

/* ── the winner's gold chart page ───────────────────────────────────────── */
html[data-asset="FEATURED"] {
  --muted: rgba(241, 229, 198, .58);
  --line: rgba(231, 195, 109, .19);
  --red: #e8be5f;
  --fire: #f4d47f;
  --deep: #060604;
  --glass: rgba(12, 11, 8, .72);
  --shadow: 0 24px 58px rgba(0, 0, 0, .56);
}
html[data-asset="FEATURED"] body {
  background:
    radial-gradient(860px 540px at 50% -22%, rgba(214, 169, 63, .16), transparent 69%),
    radial-gradient(680px 500px at -8% 22%, rgba(180, 128, 28, .09), transparent 70%),
    linear-gradient(135deg, #0c0b08 0%, #060605 52%, #020202 100%);
}
/* The sponsor gets exactly one halo. Gold remains the paid signature. */
@supports (background: color-mix(in srgb, #fff 10%, transparent)) {
  html[data-asset="FEATURED"] body {
    background:
      radial-gradient(720px 520px at 92% 10%, color-mix(in srgb, var(--sponsor, #d4a73e) 18%, transparent), transparent 70%),
      radial-gradient(860px 540px at 50% -22%, rgba(214, 169, 63, .16), transparent 69%),
      radial-gradient(680px 500px at -8% 22%, rgba(180, 128, 28, .09), transparent 70%),
      linear-gradient(135deg, #0c0b08 0%, #060605 52%, #020202 100%);
  }
}
html[data-asset="FEATURED"] body::after {
  opacity: .72;
  background:
    linear-gradient(108deg, transparent 0 24%, rgba(255, 241, 194, .025) 24.2%, transparent 24.7% 71%, rgba(224, 183, 83, .025) 71.2%, transparent 71.8%),
    radial-gradient(780px 420px at 50% 108%, rgba(190, 137, 30, .055), transparent 73%);
}
html[data-asset="FEATURED"] .card,
html[data-asset="FEATURED"] .performance-hero,
html[data-asset="FEATURED"] .chart-card {
  border-color: rgba(231, 195, 109, .21);
  background: linear-gradient(145deg, rgba(18, 16, 11, .87), rgba(6, 6, 5, .91)), var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 242, 198, .08), 0 0 0 1px rgba(0, 0, 0, .42), var(--shadow);
}
html[data-asset="FEATURED"] .topbar {
  border-color: rgba(231, 195, 109, .21);
  background:
    linear-gradient(180deg, rgba(255, 243, 207, .025), transparent 60%),
    rgba(5, 5, 4, .88);
  box-shadow: inset 0 -1px 0 rgba(229, 190, 96, .08), 0 16px 42px rgba(0, 0, 0, .46);
}
html[data-asset="FEATURED"] .asset-switch {
  border-color: rgba(231, 195, 109, .18);
  background: rgba(0, 0, 0, .42);
}
html[data-asset="FEATURED"] .asset-switch button.active {
  color: #fff1bf;
  background: linear-gradient(180deg, rgba(240, 207, 126, .13), rgba(170, 116, 20, .06));
  box-shadow: inset 0 0 0 1px rgba(231, 195, 109, .26), inset 0 1px 0 rgba(255, 246, 217, .12), 0 8px 20px rgba(0, 0, 0, .4);
}
html[data-asset="FEATURED"] .performance-hero {
  border-color: rgba(239, 205, 122, .32);
  background:
    radial-gradient(700px 330px at 42% -48%, rgba(243, 211, 128, .24), transparent 69%),
    linear-gradient(108deg, rgba(29, 24, 14, .94), rgba(11, 10, 7, .96) 58%, rgba(4, 4, 3, .97));
  box-shadow: inset 0 1px 0 rgba(255, 246, 217, .13), 0 0 48px rgba(190, 137, 30, .1), var(--shadow);
}
html[data-asset="FEATURED"] .performance-hero::before {
  background:
    linear-gradient(118deg, transparent 0 38%, rgba(255, 241, 194, .035) 38.2%, transparent 38.8%),
    radial-gradient(430px 180px at 12% 90%, rgba(213, 163, 51, .055), transparent 74%);
}
html[data-asset="FEATURED"] .performance-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  width: 32%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #efd17e 40%, transparent);
  box-shadow: 0 0 16px rgba(239, 201, 111, .35);
  pointer-events: none;
}
html[data-asset="FEATURED"] .performance-primary > label { color: #ecd086; }
html[data-asset="FEATURED"] .performance-primary > strong {
  color: #fff7d8;
  text-shadow: 0 0 28px rgba(228, 181, 71, .16);
}
html[data-asset="FEATURED"] .performance-primary > span {
  color: rgba(244, 218, 152, .66);
  background: rgba(229, 183, 73, .055);
  box-shadow: inset 0 0 0 1px rgba(231, 195, 109, .2);
}
html[data-asset="FEATURED"] .performance-multiple { border-color: rgba(231, 195, 109, .18); }
html[data-asset="FEATURED"] .performance-multiple strong { color: #f2d27f; }
html[data-asset="FEATURED"] .chart-card {
  border-color: rgba(231, 195, 109, .23);
  background:
    radial-gradient(720px 300px at 52% 102%, rgba(194, 140, 29, .075), transparent 72%),
    linear-gradient(145deg, rgba(14, 13, 9, .94), rgba(4, 4, 3, .97));
}
html[data-asset="FEATURED"] .chart-head {
  border-color: rgba(231, 195, 109, .12);
  background: linear-gradient(90deg, rgba(237, 204, 124, .045), transparent 52%);
}
html[data-asset="FEATURED"] .chart-head label { color: #e7c36d; }
html[data-asset="FEATURED"] .chart-stage {
  background:
    linear-gradient(14deg, transparent 0 18%, rgba(255, 239, 187, .018) 18.2%, transparent 18.7%),
    radial-gradient(700px 300px at 70% 100%, rgba(193, 137, 25, .06), transparent 72%);
}
html[data-asset="FEATURED"] .chart-watermark { filter: grayscale(1); opacity: .025; }
html[data-asset="FEATURED"] .market-pulse,
html[data-asset="FEATURED"] .chart-tooltip {
  border-color: rgba(231, 195, 109, .2);
  background: rgba(9, 8, 5, .88);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 239, 187, .08);
}
html[data-asset="FEATURED"] .share-modal-backdrop { background: rgba(2, 2, 2, .88); }
html[data-asset="FEATURED"] .share-dialog:not(.featured-dialog) {
  border-color: rgba(231, 195, 109, .25);
  background: radial-gradient(520px 260px at 12% 0%, rgba(228, 181, 71, .08), transparent 70%), linear-gradient(145deg, rgba(18, 16, 11, .99), rgba(6, 6, 5, .99));
  box-shadow: inset 0 1px 0 rgba(255, 242, 198, .08), 0 40px 100px rgba(0, 0, 0, .74);
}

/* Sponsor logo set into the same struck-gold medallion every winner earns. */
html[data-asset="FEATURED"] .brand-mark picture {
  position: relative;
  display: grid;
  place-items: center;
  padding: 8%;
  border: 1px solid rgba(255, 242, 198, .72);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #fff5c9 0%, #e9c367 32%, #a66b15 65%, #382307 100%);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .52), 0 0 0 4px rgba(230, 187, 84, .055), 0 0 25px rgba(221, 171, 52, .25), inset 0 2px 2px rgba(255, 255, 255, .62), inset 0 -4px 8px rgba(73, 41, 4, .62);
}
html[data-asset="FEATURED"] .brand-mark img {
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .48), 0 0 0 1px rgba(72, 43, 8, .58);
}
html[data-asset="FEATURED"] .brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 31% 19%, rgba(255, 255, 255, .54), rgba(255, 255, 255, .1) 27%, transparent 45%), linear-gradient(160deg, transparent 56%, rgba(45, 27, 5, .3) 94%);
}
html[data-asset="FEATURED"] .brand-mark::before { inset: 6%; border-radius: 50%; background: rgba(226, 179, 68, .13); }

/* ── mobile: one column, full-height luxury sheet ───────────────────────── */
@media (max-width: 800px) {
  .asset-switch .featured-tab,
  .asset-switch button.featured-tab,
  .asset-switch .featured-buzz,
  .asset-switch button.featured-buzz { padding-inline: 7px; }
  .featured-buzz-label { display: none; }
  #featured-modal { padding: 0; place-items: end center; }
  .featured-dialog {
    width: 100%;
    max-width: none;
    max-height: 94svh;
    padding: 21px 18px calc(22px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    overflow-y: auto;
  }
  .featured-dialog .share-dialog-head { padding-right: 40px; padding-bottom: 15px; }
  .featured-dialog .share-dialog-head h2 { font-size: clamp(19px, 5.5vw, 24px); }
  .featured-step { margin-top: 18px; }
  .featured-intro-star { width: 68px; height: 68px; margin-top: 2px; font-size: 24px; }
  .featured-intro-lead { margin-bottom: 17px; font-size: 12px; line-height: 1.55; }
  .featured-cards { grid-template-columns: 1fr; }
  .featured-card { min-height: 0; padding: 14px 12px 14px 48px; }
  .featured-card + .featured-card { border-left: 0; border-top: 1px solid rgba(235, 203, 129, .11); }
  .featured-card-icon { top: 15px; left: 10px; }
  .featured-intro-nav { margin-top: 18px; }
  .featured-nav { align-items: stretch; gap: 10px 14px; }
  .featured-nav .featured-bid-send { flex: 1 1 100%; width: 100%; }
  .featured-intro-nav .featured-ghost { flex: 1 1 100%; }
  .featured-bid-amount { flex-wrap: wrap; }
  .featured-bid-amount input { flex: 1 1 100%; }
  #bid-lead { min-height: 42px; flex: 1 1 100%; }
  .featured-race-head { flex-wrap: wrap; }
  .featured-now { flex-wrap: wrap; padding: 14px; }
  .featured-won { flex: 1 1 auto; margin-left: 0; }
  .featured-live-link { margin-left: auto; }
  .featured-standings li { min-height: 46px; padding-left: 43px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTOMATIC SPONSOR THEME
   featured.js supplies --sponsor and --sponsor-2 from the winner's logo.
   Every surface below is derived from those two colours; the composition and
   contrast remain standard, while each winner owns the atmosphere. Gold is
   reduced to the paid-placement seal, rank and fine jewellery-like trim.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --sponsor: #7654f5;
  --sponsor-2: #e548c8;
}

/* The auction belongs to the page it was opened from, not to this week's
   winner. The active chart supplies these two colours; a measured gold blend
   keeps the paid placement distinct without fighting the host token. */
#featured-modal {
  --auction-host: #d23761;
  --auction-host-2: #7c1737;
  --sponsor: color-mix(in srgb, var(--auction-host) 82%, #d7ad52);
  --sponsor-2: color-mix(in srgb, var(--auction-host-2) 84%, #9b6b25);
}

#featured-modal .share-modal-backdrop {
  background:
    radial-gradient(720px 520px at 26% 25%, color-mix(in srgb, var(--sponsor) 38%, transparent), transparent 72%),
    radial-gradient(680px 480px at 78% 76%, color-mix(in srgb, var(--sponsor-2) 28%, transparent), transparent 72%),
    color-mix(in srgb, var(--sponsor) 22%, rgba(18, 12, 38, .92));
}
.featured-dialog {
  --scheme-deep: color-mix(in srgb, var(--sponsor) 42%, #20143d);
  --scheme-deeper: color-mix(in srgb, var(--sponsor-2) 24%, #24133d);
  --scheme-line: color-mix(in srgb, var(--sponsor) 42%, rgba(255,255,255,.28));
  border-color: color-mix(in srgb, var(--sponsor) 55%, rgba(255,255,255,.38));
  background:
    radial-gradient(720px 330px at 14% -8%, color-mix(in srgb, var(--sponsor) 58%, transparent), transparent 68%),
    radial-gradient(620px 330px at 98% 110%, color-mix(in srgb, var(--sponsor-2) 46%, transparent), transparent 70%),
    linear-gradient(135deg, var(--scheme-deep), var(--scheme-deeper));
  box-shadow:
    0 42px 120px rgba(24, 10, 57, .58),
    0 0 78px color-mix(in srgb, var(--sponsor) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.featured-dialog::after {
  background: conic-gradient(from 166deg at 50% 0%, transparent 0 47%, color-mix(in srgb, var(--sponsor) 15%, rgba(255,255,255,.08)) 48.5% 51.5%, transparent 53% 100%);
}
.featured-dialog .share-dialog-head { border-color: color-mix(in srgb, var(--sponsor) 32%, rgba(255,255,255,.16)); }
.featured-dialog .share-close {
  border-color: color-mix(in srgb, var(--sponsor) 38%, rgba(255,255,255,.2));
  background: color-mix(in srgb, var(--sponsor) 13%, transparent);
}
.featured-dialog .share-close:hover { background: color-mix(in srgb, var(--sponsor) 28%, transparent); }
.featured-intro-star {
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.95) 0 6%, color-mix(in srgb, var(--sponsor) 35%, white) 24%, var(--sponsor) 58%, color-mix(in srgb, var(--sponsor-2) 62%, #3b2268) 100%);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--sponsor) 10%, transparent),
    0 0 0 7px rgba(243, 211, 133, .3),
    0 20px 45px rgba(30, 12, 66, .42),
    0 0 52px color-mix(in srgb, var(--sponsor) 44%, transparent),
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -7px 13px color-mix(in srgb, var(--sponsor-2) 54%, rgba(28,14,57,.7));
}
.featured-cards { border-color: color-mix(in srgb, var(--sponsor) 34%, rgba(255,255,255,.14)); }
.featured-card + .featured-card { border-color: color-mix(in srgb, var(--sponsor) 34%, rgba(255,255,255,.14)); }
.featured-card-icon {
  color: color-mix(in srgb, var(--sponsor) 28%, white);
  border-color: color-mix(in srgb, var(--sponsor) 52%, rgba(255,255,255,.26));
  background: color-mix(in srgb, var(--sponsor) 18%, transparent);
}
.featured-step input {
  border-color: color-mix(in srgb, var(--sponsor) 42%, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--sponsor) 24%, rgba(29,18,54,.72));
}
.featured-step input:focus-visible {
  border-color: color-mix(in srgb, var(--sponsor) 55%, white);
  background: color-mix(in srgb, var(--sponsor) 34%, rgba(29,18,54,.72));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sponsor) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
.featured-token-card {
  border-color: color-mix(in srgb, var(--sponsor) 54%, rgba(255,255,255,.28));
  background: linear-gradient(90deg, color-mix(in srgb, var(--sponsor) 27%, transparent), color-mix(in srgb, var(--sponsor-2) 12%, transparent));
}
#bid-lead {
  color: color-mix(in srgb, var(--sponsor) 24%, white);
  border-color: color-mix(in srgb, var(--sponsor) 48%, rgba(255,255,255,.3));
  background: color-mix(in srgb, var(--sponsor) 17%, transparent);
}
#bid-lead:hover { color: #fff; border-color: color-mix(in srgb, var(--sponsor) 45%, white); background: color-mix(in srgb, var(--sponsor) 30%, transparent); }
.featured-bid-send {
  color: #fff;
  border-color: rgba(244, 211, 127, .74);
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 45%),
    linear-gradient(112deg, var(--sponsor), color-mix(in srgb, var(--sponsor) 46%, var(--sponsor-2)) 52%, var(--sponsor-2));
  text-shadow: 0 1px 2px rgba(36, 15, 64, .46);
  box-shadow: 0 13px 34px color-mix(in srgb, var(--sponsor) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(40,18,70,.28);
}
.featured-now {
  border-color: color-mix(in srgb, var(--sponsor) 54%, rgba(255,255,255,.32));
  background:
    radial-gradient(460px 160px at 7% 0%, color-mix(in srgb, var(--sponsor) 52%, transparent), transparent 72%),
    radial-gradient(360px 150px at 95% 100%, color-mix(in srgb, var(--sponsor-2) 32%, transparent), transparent 72%),
    linear-gradient(100deg, color-mix(in srgb, var(--sponsor) 35%, #28184b), color-mix(in srgb, var(--sponsor-2) 22%, #251641));
}
.featured-now::after { background: color-mix(in srgb, var(--sponsor-2) 32%, transparent); }
.featured-live-link {
  color: color-mix(in srgb, var(--sponsor) 24%, white);
  border-color: color-mix(in srgb, var(--sponsor) 46%, rgba(255,255,255,.3));
  background: color-mix(in srgb, var(--sponsor) 15%, transparent);
}
.featured-live-link:hover { color: #fff; border-color: color-mix(in srgb, var(--sponsor) 42%, white); background: color-mix(in srgb, var(--sponsor) 29%, transparent); }
.featured-standings { border-color: color-mix(in srgb, var(--sponsor) 30%, rgba(255,255,255,.13)); }
.featured-standings li { border-color: color-mix(in srgb, var(--sponsor) 28%, rgba(255,255,255,.11)); }
.featured-standings li::before { background: linear-gradient(90deg, color-mix(in srgb, var(--sponsor) 26%, transparent), color-mix(in srgb, var(--sponsor-2) 5%, transparent)); }
.featured-standings li:hover { background: color-mix(in srgb, var(--sponsor) 17%, transparent); }
.featured-standings li.is-leader {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sponsor) 27%, transparent), color-mix(in srgb, var(--sponsor-2) 7%, transparent));
  box-shadow: inset 2px 0 0 var(--gold);
}

html[data-asset="FEATURED"] {
  --deep: color-mix(in srgb, var(--sponsor) 44%, #21143d);
  --glass: color-mix(in srgb, var(--sponsor) 25%, rgba(39,23,72,.72));
  --line: color-mix(in srgb, var(--sponsor) 40%, rgba(255,255,255,.24));
  --red: color-mix(in srgb, var(--sponsor) 40%, white);
  --fire: color-mix(in srgb, var(--sponsor-2) 38%, white);
}
html[data-asset="FEATURED"] body {
  background:
    radial-gradient(920px 650px at -6% 8%, color-mix(in srgb, var(--sponsor) 72%, transparent), transparent 68%),
    radial-gradient(860px 620px at 104% 12%, color-mix(in srgb, var(--sponsor-2) 66%, transparent), transparent 70%),
    radial-gradient(820px 540px at 54% 108%, color-mix(in srgb, var(--sponsor) 40%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--sponsor) 48%, #261746), color-mix(in srgb, var(--sponsor-2) 35%, #2a1745));
}
html[data-asset="FEATURED"] body::after {
  opacity: .8;
  background:
    linear-gradient(108deg, transparent 0 24%, rgba(255,255,255,.055) 24.2%, transparent 24.8% 71%, rgba(255,255,255,.035) 71.2%, transparent 71.8%),
    radial-gradient(780px 420px at 50% 108%, color-mix(in srgb, var(--sponsor-2) 24%, transparent), transparent 73%);
}
html[data-asset="FEATURED"] .card,
html[data-asset="FEATURED"] .performance-hero,
html[data-asset="FEATURED"] .chart-card {
  border-color: color-mix(in srgb, var(--sponsor) 46%, rgba(255,255,255,.26));
  background: linear-gradient(145deg, color-mix(in srgb, var(--sponsor) 38%, #251746), color-mix(in srgb, var(--sponsor-2) 25%, #24153f)), var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 58px rgba(37, 15, 69, .34), 0 0 42px color-mix(in srgb, var(--sponsor) 14%, transparent);
}
html[data-asset="FEATURED"] .topbar {
  border-color: color-mix(in srgb, var(--sponsor) 44%, rgba(255,255,255,.25));
  background:
    radial-gradient(520px 160px at 18% 0%, color-mix(in srgb, var(--sponsor) 44%, transparent), transparent 74%),
    linear-gradient(105deg, color-mix(in srgb, var(--sponsor) 42%, #251545), color-mix(in srgb, var(--sponsor-2) 24%, #24133d));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 42px rgba(38,16,72,.3);
}
html[data-asset="FEATURED"] .asset-switch { border-color: color-mix(in srgb, var(--sponsor) 42%, rgba(255,255,255,.2)); background: color-mix(in srgb, var(--sponsor) 26%, rgba(34,20,63,.62)); }
html[data-asset="FEATURED"] .asset-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sponsor) 72%, rgba(255,255,255,.1)), color-mix(in srgb, var(--sponsor-2) 48%, transparent));
  box-shadow: inset 0 0 0 1px rgba(244,211,127,.34), inset 0 1px 0 rgba(255,255,255,.2), 0 8px 22px color-mix(in srgb, var(--sponsor) 25%, transparent);
}
html[data-asset="FEATURED"] .performance-hero {
  border-color: color-mix(in srgb, var(--sponsor) 52%, rgba(255,255,255,.3));
  background:
    radial-gradient(760px 360px at 30% -36%, color-mix(in srgb, var(--sponsor) 68%, rgba(255,255,255,.12)), transparent 69%),
    radial-gradient(580px 320px at 94% 108%, color-mix(in srgb, var(--sponsor-2) 54%, transparent), transparent 70%),
    linear-gradient(112deg, color-mix(in srgb, var(--sponsor) 58%, #2b1950), color-mix(in srgb, var(--sponsor-2) 30%, #281645));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 24px 60px rgba(38,16,72,.34), 0 0 58px color-mix(in srgb, var(--sponsor) 22%, transparent);
}
html[data-asset="FEATURED"] .performance-hero::before { background: linear-gradient(118deg, transparent 0 38%, rgba(255,255,255,.09) 38.2%, transparent 39%), radial-gradient(460px 200px at 10% 92%, color-mix(in srgb, var(--sponsor-2) 25%, transparent), transparent 74%); }
html[data-asset="FEATURED"] .performance-primary > label { color: color-mix(in srgb, var(--sponsor) 22%, white); }
html[data-asset="FEATURED"] .performance-primary > strong { color: #fff; text-shadow: 0 0 32px color-mix(in srgb, var(--sponsor) 36%, transparent); }
html[data-asset="FEATURED"] .performance-primary > span { color: rgba(255,255,255,.72); background: color-mix(in srgb, var(--sponsor) 22%, transparent); border-color: color-mix(in srgb, var(--sponsor) 36%, rgba(255,255,255,.2)); }
html[data-asset="FEATURED"] .performance-multiple { border-color: color-mix(in srgb, var(--sponsor) 38%, rgba(255,255,255,.2)); }
html[data-asset="FEATURED"] .performance-multiple strong { color: color-mix(in srgb, var(--sponsor-2) 30%, white); }
html[data-asset="FEATURED"] .chart-card {
  border-color: color-mix(in srgb, var(--sponsor) 46%, rgba(255,255,255,.26));
  background:
    radial-gradient(820px 390px at 12% 0%, color-mix(in srgb, var(--sponsor) 38%, transparent), transparent 72%),
    radial-gradient(680px 380px at 90% 90%, color-mix(in srgb, var(--sponsor-2) 30%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--sponsor) 32%, #241541), color-mix(in srgb, var(--sponsor-2) 21%, #25153f));
}
html[data-asset="FEATURED"] .chart-head { border-color: color-mix(in srgb, var(--sponsor) 32%, rgba(255,255,255,.15)); background: linear-gradient(90deg, color-mix(in srgb, var(--sponsor) 24%, transparent), color-mix(in srgb, var(--sponsor-2) 8%, transparent)); }
html[data-asset="FEATURED"] .chart-head label { color: color-mix(in srgb, var(--sponsor) 24%, white); }
html[data-asset="FEATURED"] .chart-stage { background: radial-gradient(720px 330px at 68% 100%, color-mix(in srgb, var(--sponsor-2) 24%, transparent), transparent 72%); }
html[data-asset="FEATURED"] .chart-watermark { filter: grayscale(1); opacity: .025; }
html[data-asset="FEATURED"] .market-pulse,
html[data-asset="FEATURED"] .chart-tooltip { border-color: color-mix(in srgb, var(--sponsor) 42%, rgba(255,255,255,.24)); background: color-mix(in srgb, var(--sponsor) 36%, rgba(38,21,69,.82)); }
html[data-asset="FEATURED"] .share-dialog:not(.featured-dialog) {
  border-color: color-mix(in srgb, var(--sponsor) 48%, rgba(255,255,255,.26));
  background: radial-gradient(560px 300px at 10% 0%, color-mix(in srgb, var(--sponsor) 48%, transparent), transparent 70%), linear-gradient(145deg, color-mix(in srgb, var(--sponsor) 42%, #251745), color-mix(in srgb, var(--sponsor-2) 25%, #24143e));
}
html[data-asset="FEATURED"] .brand-mark picture {
  padding: 2%;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: transparent;
  box-shadow: none;
}
html[data-asset="FEATURED"] .brand-mark::before { background: color-mix(in srgb, var(--sponsor) 26%, transparent); }

/* The same automatic 3D mount used by the hand-made core-token art. The
   winner supplies only a flat logo; perspective, edge depth, gloss and cast
   light are deterministic paint, so every Sunday handoff is immediate. */
html[data-asset="FEATURED"] .brand-mark {
  perspective: 520px;
  overflow: visible;
}
html[data-asset="FEATURED"] .brand-mark picture {
  transform: none;
  filter: none;
  box-shadow: none;
}
html[data-asset="FEATURED"] .brand-mark img {
  border-radius: 0;
  object-fit: contain;
  transform-style: preserve-3d;
  transform-origin: 46% 52%;
  transform: rotateX(12deg) rotateY(-19deg) rotateZ(7deg) scale(.93);
  filter:
    drop-shadow(1px 2px 0 rgba(255,255,255,.48))
    drop-shadow(2px 3px 0 color-mix(in srgb, var(--sponsor) 70%, #573078))
    drop-shadow(3px 4px 0 color-mix(in srgb, var(--sponsor-2) 68%, #3a205e))
    drop-shadow(5px 7px 0 color-mix(in srgb, var(--sponsor-2) 34%, #21143d))
    drop-shadow(10px 17px 18px rgba(35,15,68,.38));
  animation: featured-coin-mount .7s cubic-bezier(.2,.8,.2,1) both;
}
html[data-asset="FEATURED"][data-featured-logo-shape="silhouette"] .brand-mark img {
  border-radius: 50%;
}
html[data-asset="FEATURED"][data-featured-logo-shape="opaque"] .brand-mark img {
  border-radius: 18%;
}
html[data-asset="FEATURED"][data-featured-logo-shape="medallion"] .brand-mark img {
  border-radius: 50%;
}
html[data-asset="FEATURED"] .brand-mark::after {
  display: none;
}
html[data-asset="FEATURED"] .featured-tab img,
html[data-asset="FEATURED"] .featured-now > img {
  transform: rotate(9deg) skewY(-3deg);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--sponsor-2) 42%, #38205d), 0 0 13px color-mix(in srgb, var(--sponsor) 48%, transparent);
}
@keyframes featured-coin-mount {
  from { opacity: 0; transform: rotateX(18deg) rotateY(-29deg) rotateZ(10deg) scale(.88); }
  to { opacity: 1; transform: rotateX(12deg) rotateY(-19deg) rotateZ(7deg) scale(.93); }
}

/* ── intro conversion screen ───────────────────────────────────────────────
   One focal action, three non-interactive reasons, one verifiable chain
   statement. Nothing in the benefits column resembles a button. */
.featured-intro { text-align: left; }
.featured-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  align-items: stretch;
  gap: 38px;
  padding: 8px 0 22px;
}
.featured-intro-pitch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 8px 8px 4px;
}
.featured-intro-signature {
  display: flex;
  align-items: center;
  gap: 15px;
}
.featured-intro-signature .featured-intro-star {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  margin: 0;
  font-size: 22px;
}
.featured-intro-signature > span {
  max-width: 22ch;
  color: color-mix(in srgb, var(--sponsor) 25%, white);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.55;
  letter-spacing: .19em;
}
.featured-intro .featured-intro-lead {
  max-width: 36ch;
  margin: 22px 0 0;
  color: rgba(255,255,255,.86);
  font-size: 16px;
  font-weight: 520;
  line-height: 1.58;
  letter-spacing: -.012em;
}
.featured-intro .featured-intro-nav {
  justify-content: flex-start;
  margin-top: 24px;
}
.featured-intro .featured-intro-nav .featured-bid-send {
  min-width: 184px;
  padding-inline: 25px;
}
.featured-intro .featured-intro-nav .featured-ghost {
  color: rgba(255,255,255,.54);
  letter-spacing: .1em;
}
.featured-intro .featured-intro-nav .featured-ghost:hover { color: #fff; }
.featured-benefits {
  display: grid;
  align-content: center;
  border-left: 1px solid color-mix(in srgb, var(--sponsor) 38%, rgba(255,255,255,.16));
}
.featured-benefit {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 13px;
  padding: 17px 4px 17px 25px;
}
.featured-benefit + .featured-benefit {
  border-top: 1px solid color-mix(in srgb, var(--sponsor) 31%, rgba(255,255,255,.13));
}
.featured-benefit > span {
  padding-top: 3px;
  color: var(--gold);
  font: 750 8px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .08em;
}
.featured-benefit b {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .005em;
}
.featured-benefit small {
  display: block;
  max-width: 32ch;
  color: rgba(255,255,255,.53);
  font-size: 10.5px;
  line-height: 1.55;
}
.featured-chain-proof {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--sponsor) 35%, rgba(255,255,255,.15));
}
.featured-chain-proof > span {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: #6ff0ab;
  box-shadow: 0 0 12px rgba(111,240,171,.72);
}
.featured-chain-proof p {
  margin: 0;
  color: rgba(255,255,255,.57);
  font-size: 10.5px;
  line-height: 1.6;
}
.featured-chain-proof b { color: rgba(255,255,255,.92); }

@media (max-width: 800px) {
  .featured-intro-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 2px 0 17px;
  }
  .featured-intro-pitch { padding: 2px 0 0; }
  .featured-intro-signature .featured-intro-star { flex-basis: 54px; width: 54px; height: 54px; font-size: 19px; }
  .featured-intro .featured-intro-lead { max-width: none; margin-top: 17px; font-size: 14px; }
  .featured-intro .featured-intro-nav { margin-top: 18px; }
  .featured-intro .featured-intro-nav .featured-ghost { text-align: center; }
  .featured-benefits { border-top: 1px solid color-mix(in srgb, var(--sponsor) 34%, rgba(255,255,255,.14)); border-left: 0; }
  .featured-benefit { padding: 13px 2px; grid-template-columns: 25px 1fr; gap: 10px; }
  .featured-benefit small { max-width: none; }
  .featured-chain-proof { padding-top: 13px; }
}