/*
 * SpellBinders public Pages visual polish — isolated, zero dependency, no portal effect.
 * Loaded ONLY by scripts/build-public-preview.mjs in the static Cloudflare Pages export.
 * Uses the existing official purple/gold palette and Awaken SVG artwork unchanged.
 */
.sb-public-polish {
  --sb-night: #1b1022;
  --sb-plum: #2b1835;
  --sb-violet: #4a2e54;
  --sb-gold: #c79e4e;
  --sb-cream: #faf4ff;
  --sb-text-muted: #d9cde0;
  background: var(--sb-night);
  color: var(--sb-cream);
  overflow-x: clip;
  font-family: "Segoe UI", Arial, sans-serif;
  font-feature-settings: "kern";
}
.sb-public-polish :is(h1, h2, h3) {
  text-wrap: balance;
}
.sb-public-polish p {
  text-wrap: pretty;
}
.sb-public-polish .site-container {
  width: min(1280px, calc(100% - clamp(36px, 8vw, 160px)));
}
.sb-public-polish .site-header {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid rgb(199 158 78 / 35%);
  background: linear-gradient(100deg, #1b1022 0%, #28172f 48%, #1b1022 100%);
  box-shadow: 0 8px 32px rgb(9 4 14 / 24%);
}
.sb-public-polish .header-inner {
  min-height: 86px;
  gap: 18px;
}
.sb-public-polish .site-header .brand-mark {
  width: 142px;
  height: 75px;
}
.sb-public-polish .desktop-nav {
  gap: clamp(18px, 2.4vw, 37px);
}
.sb-public-polish .nav-link {
  color: #e4d8e9;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.045em;
}
.sb-public-polish .desktop-nav .is-active::after {
  bottom: 21px;
  width: 27px;
}
.sb-public-polish .button-portal {
  min-height: 42px;
  border-color: rgb(199 158 78 / 64%);
  color: #f2d898;
  background: rgb(199 158 78 / 4%);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.sb-public-polish .button-portal:hover {
  color: #201327;
  background: var(--sb-gold);
}
.sb-public-polish .mobile-menu-button {
  display: none;
}
.sb-public-polish .stage-mobile-nav {
  display: none;
}
.sb-public-polish .skip-link:focus {
  z-index: 100;
}

.sb-public-polish .hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 77% 40%, rgb(114 72 125 / 28%), transparent 45%),
    radial-gradient(ellipse at 12% 90%, rgb(114 58 103 / 11%), transparent 52%),
    linear-gradient(116deg, #160d1c 1%, #2b1835 55%, #1b1124 100%);
  border-bottom: 1px solid rgb(199 158 78 / 27%);
}
.sb-public-polish .hero::before {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 176px,
      rgb(199 158 78 / 10%) 177px,
      transparent 178px
    ),
    linear-gradient(90deg, transparent 0 48%, rgb(199 158 78 / 5%) 48% 48.08%, transparent 48.08%);
  opacity: 0.52;
}
.sb-public-polish .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(650px, 60vw);
  aspect-ratio: 1;
  right: -5%;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(147 91 150 / 17%) 0, transparent 67%);
}
.sb-public-polish .hero-inner {
  min-height: clamp(630px, 56vw, 740px);
}
.sb-public-polish .hero-copy {
  width: 60%;
  padding-block: 92px 100px;
}
.sb-public-polish .eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: #e6c883;
}
.sb-public-polish .eyebrow > span {
  width: 19px;
  height: 2px;
}
.sb-public-polish .hero h1 {
  font-family: "Arial Narrow", Impact, "Arial Black", Arial, sans-serif;
  font-stretch: condensed;
  letter-spacing: -0.058em;
  font-size: clamp(52px, 5.7vw, 94px);
  line-height: 0.95;
  max-width: 850px;
  margin-top: 37px;
  text-shadow: 0 10px 36px rgb(12 5 20 / 24%);
}
.sb-public-polish .hero h1 > span {
  font-size: clamp(66px, 7.35vw, 116px);
  letter-spacing: -0.05em;
  margin-top: 7px;
  color: #d4ae5b;
}
.sb-public-polish .hero-tagline {
  margin-top: 33px;
  font-size: clamp(21px, 2.15vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.sb-public-polish .hero-description {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: #e1d5e5;
}
.sb-public-polish .hero-actions {
  margin-top: 35px;
  gap: 12px;
}
.sb-public-polish .hero-actions > a {
  min-height: 51px;
  padding-inline: 24px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.015em;
}
.sb-public-polish .button-gold {
  border-color: var(--sb-gold);
  background: #c79e4e;
  box-shadow: 0 12px 30px rgb(12 5 20 / 26%);
}
.sb-public-polish .button-quiet {
  border-color: rgb(216 192 226 / 35%);
}
.sb-public-polish .hero-caption {
  margin-top: 27px;
  font-size: 11px;
  line-height: 1.5;
  color: #d3c4da;
}
.sb-public-polish .hero-art {
  right: -3%;
  top: 7%;
  width: 48%;
  height: 86%;
}
.sb-public-polish .hero-art::before {
  inset: 9% 0;
  background: linear-gradient(145deg, rgb(92 51 100 / 32%), rgb(18 10 28 / 58%));
  border-color: rgb(199 158 78 / 37%);
  opacity: 0.82;
}
.sb-public-polish .sigil-frame {
  width: 96%;
  height: 96%;
  opacity: 0.3;
}
.sb-public-polish .hero-crest {
  width: 84%;
  height: auto;
  max-height: 74%;
  filter: none;
  transform: none;
}
.sb-public-polish .art-label {
  bottom: 1%;
  right: 12%;
  letter-spacing: 0.14em;
  color: #e0d0e2;
}
.sb-public-polish .hero-rule {
  height: 4px;
  width: 145px;
}
.sb-public-polish .principle-strip {
  background: #23142b;
}
.sb-public-polish .principle-inner {
  padding-block: 27px;
}
.sb-public-polish .principle-inner > div {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 750;
  color: #f1e8f4;
}
.sb-public-polish .principle-inner svg {
  color: #d2aa57;
}

.sb-public-polish .section {
  padding-block: clamp(70px, 7vw, 112px);
}
.sb-public-polish .section-alt {
  background: radial-gradient(circle at 88% 12%, rgb(99 55 117 / 22%), transparent 45%), #24152e;
}
.sb-public-polish .section-heading {
  margin-bottom: 36px;
}
.sb-public-polish .section-heading h2,
.sb-public-polish .values-intro h2 {
  font-size: clamp(29px, 3.7vw, 46px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.038em;
}
.sb-public-polish .text-link {
  font-size: 12px;
  font-weight: 750;
  color: #e0b65d;
}
.sb-public-polish .program-grid {
  gap: 20px;
}
.sb-public-polish .program-card {
  border: 1px solid rgb(180 135 192 / 23%);
  border-top: 2px solid rgb(199 158 78 / 82%);
  border-radius: 3px;
  background: linear-gradient(180deg, #392344 0%, #24172d 100%);
  box-shadow: 0 12px 28px rgb(13 6 19 / 12%);
  min-width: 0;
}
.sb-public-polish .program-art {
  height: clamp(170px, 17vw, 236px);
  background: radial-gradient(ellipse at 82% 27%, rgb(137 83 153 / 27%), transparent 52%), #34203f;
}
.sb-public-polish .program-art::before {
  background: rgb(32 16 42 / 40%);
}
.sb-public-polish .program-serial {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.sb-public-polish .program-code {
  font-size: clamp(49px, 5.3vw, 78px);
  letter-spacing: -0.045em;
}
.sb-public-polish .code-neutral .program-code {
  font-size: clamp(35px, 3.4vw, 49px);
}
.sb-public-polish .program-body {
  padding: 26px;
}
.sb-public-polish .program-meta {
  gap: 12px;
}
.sb-public-polish .program-meta h3 {
  font-size: 17px;
}
.sb-public-polish .program-body p {
  font-size: 13px;
  line-height: 1.75;
}
.sb-public-polish .status-label {
  border-color: rgb(199 158 78 / 34%);
  color: #f4e6c8;
}
.sb-public-polish .section-footnote {
  font-size: 12px;
}
.sb-public-polish .values-layout {
  gap: clamp(35px, 6vw, 90px);
}
.sb-public-polish .value-row {
  padding-bottom: 26px;
  border-bottom-color: rgb(199 158 78 / 19%);
}
.sb-public-polish .value-row h3 {
  font-size: 18px;
}
.sb-public-polish .value-row p {
  font-size: 13px;
}
.sb-public-polish .news-empty-inline {
  padding-block: 35px;
  border-color: rgb(199 158 78 / 28%);
}
.sb-public-polish .news-empty-inline h3 {
  font-size: 19px;
}
.sb-public-polish .news-empty-inline p {
  font-size: 13px;
}
.sb-public-polish .join-band {
  padding-block: 60px;
  background: linear-gradient(105deg, #382146, #2b1a38 68%, #1a1022);
}
.sb-public-polish .join-inner h2 {
  font-size: clamp(25px, 3vw, 37px);
}
.sb-public-polish .site-footer {
  background: #160e1d;
  border-top-color: rgb(199 158 78 / 27%);
}
.sb-public-polish .footer-top {
  padding-bottom: 36px;
}
.sb-public-polish .footer-top > p {
  font-size: 12px;
}
.sb-public-polish .footer-bottom {
  font-size: 10px;
  letter-spacing: 0.055em;
}
.sb-public-polish .content-page {
  padding-block: 90px 105px;
}
.sb-public-polish .page-heading {
  max-width: 910px;
  margin-bottom: 60px;
}
.sb-public-polish .page-heading h1 {
  font-size: clamp(41px, 5.3vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.048em;
  margin-top: 25px;
}
.sb-public-polish .page-intro {
  font-size: clamp(15px, 1.5vw, 18px);
  color: #e1d5e5;
}
.sb-public-polish .about-statement {
  gap: 50px;
  padding-block: 45px;
  border-color: rgb(199 158 78 / 30%);
}
.sb-public-polish .about-statement h2 {
  font-size: clamp(25px, 2.5vw, 32px);
}
.sb-public-polish .about-statement p {
  font-size: 15px;
  line-height: 1.8;
}
.sb-public-polish .empty-state {
  max-width: none;
  border: 1px solid rgb(199 158 78 / 26%);
  background: linear-gradient(135deg, #34203e, #231529);
  padding: clamp(30px, 5vw, 70px);
}
.sb-public-polish .empty-state p {
  font-size: 15px;
}
.sb-public-polish .state-note {
  font-size: 13px;
}

@media (max-width: 1050px) {
  .sb-public-polish .hero-art {
    right: -9%;
    opacity: 0.63;
  }
  .sb-public-polish .hero-copy {
    width: 68%;
  }
  .sb-public-polish .program-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 900px) {
  .sb-public-polish .desktop-nav {
    display: none;
  }
  .sb-public-polish .stage-mobile-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 0 min(4vw, 28px);
    border-top: 1px solid rgb(199 158 78 / 20%);
    background: rgb(18 8 24 / 22%);
  }
  .sb-public-polish .stage-mobile-nav a {
    min-width: 0;
    text-align: center;
    display: block;
    padding: 13px 3px;
    color: #e8ddec;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.012em;
    text-decoration: none;
    white-space: nowrap;
  }
  .sb-public-polish .stage-mobile-nav a[aria-current="page"] {
    color: #efc76c;
    box-shadow: inset 0 -2px #c79e4e;
  }
  .sb-public-polish .stage-mobile-nav a:focus-visible {
    outline: 2px solid #e3bd75;
    outline-offset: -3px;
  }
  .sb-public-polish .header-inner {
    min-height: 72px;
  }
  .sb-public-polish .program-grid {
    gap: 13px;
  }
}
@media (max-width: 640px) {
  .sb-public-polish .site-container {
    width: calc(100% - 36px);
  }
  .sb-public-polish .site-header .brand-mark {
    width: 104px;
    height: 62px;
  }
  .sb-public-polish .header-inner {
    min-height: 70px;
    gap: 8px;
  }
  .sb-public-polish .button-portal {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 10px;
    white-space: nowrap;
  }
  .sb-public-polish .stage-mobile-nav {
    padding-inline: 6px;
  }
  .sb-public-polish .stage-mobile-nav a {
    font-size: 10px;
    padding-inline: 1px;
  }
  .sb-public-polish .hero-inner {
    min-height: 615px;
    align-items: flex-start;
  }
  .sb-public-polish .hero-copy {
    width: 100%;
    padding-block: 56px 48px;
  }
  .sb-public-polish .hero h1 {
    font-size: clamp(32px, 9.5vw, 51px);
    letter-spacing: -0.065em;
    margin-top: 25px;
  }
  .sb-public-polish .hero h1 > span {
    font-size: clamp(57px, 15vw, 79px);
    letter-spacing: -0.055em;
  }
  .sb-public-polish .hero-tagline {
    font-size: 21px;
    margin-top: 25px;
  }
  .sb-public-polish .hero-description {
    margin-top: 18px;
    font-size: 13px;
    max-width: 345px;
  }
  .sb-public-polish .hero-actions {
    gap: 9px;
    margin-top: 26px;
  }
  .sb-public-polish .hero-actions > a {
    padding-inline: 13px;
    min-height: 46px;
    font-size: 11px;
  }
  .sb-public-polish .hero-art {
    width: 330px;
    height: 395px;
    right: -192px;
    top: 128px;
    opacity: 0.16;
    pointer-events: none;
  }
  .sb-public-polish .hero-crest {
    width: 250px;
    height: auto;
  }
  .sb-public-polish .hero-caption {
    max-width: 320px;
  }
  .sb-public-polish .principle-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-block: 17px;
  }
  .sb-public-polish .principle-inner > div {
    min-width: 0;
    padding-inline: 3px;
    justify-content: center;
    gap: 7px;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .sb-public-polish .principle-inner svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }
  .sb-public-polish .section {
    padding-block: 65px;
  }
  .sb-public-polish .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
  }
  .sb-public-polish .section-heading h2 {
    font-size: 30px;
  }
  .sb-public-polish .section-heading > .text-link {
    margin-top: 0;
    font-size: 12px;
  }
  .sb-public-polish .program-grid {
    grid-template-columns: 1fr;
    gap: 19px;
  }
  .sb-public-polish .program-art {
    height: 185px;
  }
  .sb-public-polish .program-code {
    font-size: 66px;
  }
  .sb-public-polish .code-neutral .program-code {
    font-size: 48px;
  }
  .sb-public-polish .program-meta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .sb-public-polish .values-intro h2 {
    font-size: 32px;
  }
  .sb-public-polish .join-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .sb-public-polish .content-page {
    padding-block: 58px 75px;
  }
  .sb-public-polish .page-heading {
    margin-bottom: 40px;
  }
  .sb-public-polish .page-heading h1 {
    font-size: clamp(37px, 10vw, 48px);
  }
  .sb-public-polish .about-statement {
    grid-template-columns: 1fr;
    gap: 19px;
    padding-block: 30px;
  }
  .sb-public-polish .footer-top {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .sb-public-polish .footer-bottom {
    font-size: 10px;
  }
}
@media (max-width: 365px) {
  .sb-public-polish .hero h1 {
    font-size: 30px;
  }
  .sb-public-polish .hero h1 > span {
    font-size: 52px;
  }
  .sb-public-polish .hero-actions > a {
    padding-inline: 10px;
    font-size: 11px;
  }
  .sb-public-polish .stage-mobile-nav a {
    font-size: 11px;
  }
}
/* Animation is progressively enhanced; essential content is never JS-hidden. */
@media (prefers-reduced-motion: no-preference) {
  .sb-public-polish .hero-copy {
    animation: sb-hero-in 780ms cubic-bezier(0.2, 0.8, 0.15, 1) both;
  }
  .sb-public-polish .hero-art {
    animation: sb-crest-in 1100ms cubic-bezier(0.18, 0.78, 0.18, 1) 120ms both;
  }
  .sb-public-polish .hero::after {
    animation: sb-ambient 17s ease-in-out infinite alternate;
  }
  .sb-public-polish .nav-link,
  .sb-public-polish .stage-mobile-nav a,
  .sb-public-polish .hero-actions > a,
  .sb-public-polish .program-card,
  .sb-public-polish .text-link {
    transition:
      color 190ms ease,
      border-color 220ms ease,
      background 220ms ease,
      box-shadow 260ms ease,
      transform 240ms ease;
  }
  .sb-public-polish .program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgb(6 2 11 / 30%);
  }
  .sb-public-polish .hero-actions > a:hover {
    transform: translateY(-2px);
  }
  @supports (animation-timeline: view()) {
    .sb-public-polish .section-heading,
    .sb-public-polish .program-card,
    .sb-public-polish .values-layout,
    .sb-public-polish .news-empty-inline {
      animation: sb-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }
  }
  @keyframes sb-hero-in {
    from {
      opacity: 0;
      transform: translateY(17px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes sb-crest-in {
    from {
      opacity: 0.15;
      transform: translateY(18px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes sb-ambient {
    to {
      transform: translate3d(-3%, 2%, 0);
    }
  }
  @keyframes sb-reveal {
    from {
      transform: translateY(20px);
    }
    to {
      transform: translateY(0);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-public-polish,
  .sb-public-polish *,
  .sb-public-polish *::before,
  .sb-public-polish *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard focus, including links whose base UI utilities suppress outlines. */
.sb-public-polish .hero-actions > a:focus-visible,
.sb-public-polish .header-actions a:focus-visible,
.sb-public-polish .text-link:focus-visible,
.sb-public-polish .brand-lockup:focus-visible {
  outline: 3px solid #efd087;
  outline-offset: 4px;
}

/* Public-only Teams semantic H2 titles retain the existing program-card appearance. */
.sb-public-polish .program-meta h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: inherit;
}

/* Replaceable Awaken overlay; never hides the official SVG identity. */
.sb-public-polish .sb-designer-overlay {
  position: absolute;
  inset: 7% 3%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.sb-public-polish .sb-designer-overlay img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: 0.84;
}
.sb-public-polish .hero-crest {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .sb-public-polish .sb-designer-overlay {
    inset: 6% 0;
  }
  .sb-public-polish .sb-designer-overlay img {
    object-position: 45% 50%;
    opacity: 0.65;
  }
}

/* On phones, keep the typographic safe zone dominant instead of animating the crest over copy. */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .sb-public-polish .hero-art {
    animation: none;
    opacity: 0.13;
  }
}

/* Same-origin static-page transitions on supporting browsers: optional and CSS-only. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 150ms ease both sb-page-out;
  }
  ::view-transition-new(root) {
    animation: 230ms ease both sb-page-in;
  }
  @keyframes sb-page-out {
    to {
      opacity: 0;
    }
  }
  @keyframes sb-page-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}


/* Owner-requested Awaken art: public homepage only, official logo/CTA remains interactive. */
.sb-public-polish .sb-awaken-hero {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(
      90deg,
      rgb(20 11 26 / 87%) 0%,
      rgb(31 17 37 / 66%) 51%,
      rgb(30 17 38 / 47%) 100%
    ),
    url("/designer-art/awaken-hero-background.webp") center / cover no-repeat,
    #23132b;
}
.sb-public-polish .sb-awaken-hero::before {
  opacity: 0.19;
}
.sb-public-polish .sb-awaken-hero .hero-inner {
  position: relative;
  z-index: 2;
}
.sb-public-polish .sb-awaken-hero .hero-copy {
  position: relative;
  z-index: 3;
}
.sb-public-polish .sb-awaken-hero .hero-art {
  z-index: 2;
}
.sb-public-polish .sb-awaken-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.sb-public-polish .sb-awaken-line {
  display: block;
  position: absolute;
  width: clamp(92px, 11vw, 170px);
  height: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: drop-shadow(0 0 9px rgb(199 158 78 / 21%));
}
.sb-public-polish .sb-awaken-line-main {
  right: 7%;
  top: 4%;
  transform: rotate(-14deg);
}
.sb-public-polish .sb-awaken-line-angle {
  width: clamp(95px, 11vw, 155px);
  right: 31%;
  bottom: 1%;
  opacity: 0.4;
  transform: rotate(25deg);
}
.sb-public-polish .sb-awaken-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  pointer-events: none;
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .sb-public-polish .sb-awaken-line-main {
    animation: sb-awaken-line-drift 11s ease-in-out infinite alternate;
  }
  .sb-public-polish .sb-awaken-line-angle {
    animation: sb-awaken-angle-drift 14s ease-in-out infinite alternate;
  }
  @keyframes sb-awaken-line-drift {
    from {
      opacity: 0.35;
      transform: translate3d(0, -7px, 0) rotate(-14deg);
    }
    to {
      opacity: 0.55;
      transform: translate3d(0, 8px, 0) rotate(-14deg);
    }
  }
  @keyframes sb-awaken-angle-drift {
    from {
      opacity: 0.29;
      transform: translate3d(-6px, 0, 0) rotate(25deg);
    }
    to {
      opacity: 0.48;
      transform: translate3d(6px, -8px, 0) rotate(25deg);
    }
  }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .sb-public-polish .sb-awaken-particles {
    display: none;
  }
  .sb-public-polish .sb-awaken-line {
    animation: none !important;
  }
}
@media (max-width: 640px) {
  .sb-public-polish .sb-awaken-hero {
    background:
      linear-gradient(90deg, rgb(20 11 26 / 94%), rgb(31 17 37 / 79%)),
      url("/designer-art/awaken-hero-background.webp") center / cover no-repeat,
      #23132b;
  }
  .sb-public-polish .sb-awaken-line-main {
    right: -6%;
    top: 13%;
    width: 95px;
    opacity: 0.3;
  }
  .sb-public-polish .sb-awaken-line-angle {
    display: none;
  }
}

/* Static first paint: never hide essential homepage content behind entrance motion. */
.sb-public-polish .sb-awaken-hero .hero-copy {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.sb-public-polish .sb-awaken-hero .hero-art {
  animation: none !important;
}

/* SB legacy Hall of Fame teaser */
.hof-public-teaser{margin:70px 0 0;padding:58px 0;background:linear-gradient(115deg,#201331,#0e0a1d);border-top:1px solid rgba(234,188,109,.3);border-bottom:1px solid rgba(234,188,109,.3)}
.hof-public-teaser .site-container{max-width:1040px}
.hof-teaser-kicker{font-size:12px;font-weight:800;letter-spacing:.2em;color:#e5c17c}
.hof-public-teaser h2{font-size:clamp(30px,4vw,55px);letter-spacing:-.04em;line-height:1.12;color:#fff;margin:12px 0}
.hof-public-teaser p{max-width:710px;line-height:1.75;font-size:17px;color:#d3c6e1}
.hof-public-teaser a{color:#e5c17c;display:inline-block;margin-top:12px;font-weight:800;text-underline-offset:5px}
.hof-public-teaser a:focus-visible{outline:3px solid #e5c17c;outline-offset:5px}