/**
 * /assets/css/pages/creators.css
 *
 * Creators-only presentation.
 * Global tokens, sections, buttons, hero, hero grid, hero diagonal lines,
 * hero mark and standard typography belong in core.css/components.css.
 */

.page-creators {
  --twitch: #9146ff;
  --hero-min-height: 76vh;
  --hero-accent-x: 72%;
  --hero-accent-y: 40%;
  --hero-accent-alpha: .21;
}

.creators-hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 40%, rgba(189,0,0,.21), transparent 33%),
    radial-gradient(circle at 43% 78%, rgba(145,70,255,.075), transparent 32%),
    linear-gradient(115deg, #080808 0%, #111 48%, #070707 100%);
}



/* =====================================================
       CREATOR SUPPORT
    ====================================================== */

    .benefit-grid {
      display: grid;

      grid-template-columns:
        repeat(4, minmax(0, 1fr));

      gap: 18px;
    }

    .benefit-card {
      height: 100%;

      padding: 31px;

      border:
        1px solid
        var(--border);

      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.014),
          rgba(255,255,255,.003)
        );

      transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
    }

    .benefit-card:hover {
      transform: translateY(-4px);

      border-color: var(--red-border);

      background:
        linear-gradient(
          145deg,
          rgba(189,0,0,.055),
          rgba(255,255,255,.004)
        );
    }

    .benefit-icon {
      width: 43px;
      height: 43px;

      display: flex;
      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--red-border);

      color: var(--red-bright);
      background: var(--red-soft);
    }

    .benefit-title {
      margin-top: 25px;

      color: #fff;

      font-size: 1rem;
      font-weight: 800;
    }

    .benefit-copy {
      margin-top: 10px;

      color: rgba(255,255,255,.37);

      font-size: .81rem;
      line-height: 1.72;
    }


    /* =====================================================
       CREATOR TYPES
    ====================================================== */

    .creator-type-wrap {
      display: grid;

      grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 1fr);

      gap: 70px;

      align-items: center;
    }

    .creator-type-list {
      border:
        1px solid
        var(--border);

      background: #0d0d0d;
    }

    .creator-type-item {
      display: grid;

      grid-template-columns:
        48px
        minmax(0, 1fr);

      gap: 16px;

      padding:
        24px
        26px;

      border-bottom:
        1px solid
        var(--border-soft);
    }

    .creator-type-item:last-child {
      border-bottom: 0;
    }

    .creator-type-icon {
      width: 40px;
      height: 40px;

      display: flex;
      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--border);

      color: var(--red-bright);
    }

    .creator-type-title {
      color: #fff;

      font-size: .88rem;
      font-weight: 700;
    }

    .creator-type-copy {
      margin-top: 5px;

      color: rgba(255,255,255,.34);

      font-size: .75rem;
      line-height: 1.6;
    }


    /* =====================================================
       TWITCH SECTION
    ====================================================== */

    .twitch-header {
      display: grid;

      grid-template-columns:
        minmax(280px, .8fr)
        minmax(400px, 1fr)
        auto;

      gap: 45px;

      align-items: center;

      margin-bottom: 32px;

      padding:
        24px
        0;

      border-top:
        1px solid
        var(--border-soft);

      border-bottom:
        1px solid
        var(--border-soft);
    }

    .twitch-kicker {
      margin-bottom: 8px;

      color: var(--red-bright);

      font-size: .56rem;
      font-weight: 800;
      letter-spacing: .19em;
      text-transform: uppercase;
    }

    .twitch-title {
      margin: 0;

      color: #fff;

      font-size:
        clamp(
          2rem,
          3.5vw,
          3.5rem
        );

      font-weight: 900;
      line-height: .95;
      letter-spacing: -.045em;
      text-transform: uppercase;
    }

    .twitch-title span {
      color: rgba(255,255,255,.35);
    }

    .twitch-copy {
      max-width: 560px;

      color: rgba(255,255,255,.38);

      font-size: .76rem;
      line-height: 1.68;
    }

    .twitch-status {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      gap: 8px;

      white-space: nowrap;

      color: rgba(255,255,255,.32);

      font-size: .57rem;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
    }

    .twitch-status-dot {
      width: 7px;
      height: 7px;

      border-radius: 50%;

      background: rgba(255,255,255,.20);
    }

    .twitch-status.live {
      color: #fff;
    }

    .twitch-status.live
    .twitch-status-dot {
      background: #e91916;

      box-shadow:
        0 0 12px rgba(233,25,22,.65);

      animation:
        livePulse
        1.6s
        infinite;
    }


    /* =====================================================
       LIVE FEATURE
    ====================================================== */

    .live-area {
      display: none;

      margin-bottom: 43px;
    }

    .live-area.visible {
      display: block;
    }

    .live-area-heading {
      display: flex;

      align-items: center;
      justify-content: space-between;

      gap: 20px;

      margin-bottom: 15px;
    }

    .live-label {
      display: flex;
      align-items: center;

      gap: 9px;

      color: #fff;

      font-size: .63rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .live-dot {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: #e91916;

      box-shadow:
        0 0 15px rgba(233,25,22,.75);

      animation:
        livePulse
        1.6s
        infinite;
    }

    @keyframes livePulse {
      50% {
        opacity: .40;
      }
    }

    .rotation-status {
      display: flex;
      align-items: center;

      gap: 6px;

      color: rgba(255,255,255,.27);

      font-size: .58rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .featured-stream {
      display: grid;

      grid-template-columns:
        minmax(0, 1.72fr)
        minmax(300px, .68fr);

      gap: 1px;

      border:
        1px solid
        var(--border);

      background: var(--border);
    }

    .featured-video {
      aspect-ratio: 16 / 9;

      background: #000;
    }

    .featured-video iframe {
      display: block;

      width: 100%;
      height: 100%;

      border: 0;
    }

    .featured-chat {
      position: relative;

      background: #0e0e10;
    }

    .featured-chat iframe {
      position: absolute;
      inset: 0;

      width: 100%;
      height: 100%;

      border: 0;
    }

    .featured-info {
      display: flex;

      align-items: center;
      justify-content: space-between;

      flex-wrap: wrap;

      gap: 18px;

      padding:
        16px
        19px;

      border:
        1px solid
        var(--border);

      border-top: 0;

      background: #0e0e0e;
    }

    .featured-main {
      display: flex;
      align-items: center;

      gap: 11px;

      min-width: 0;
    }

    .featured-profile {
      width: 40px;
      height: 40px;

      flex: 0 0 auto;

      overflow: hidden;

      border:
        2px solid
        var(--red-border);

      border-radius: 50%;

      background: #111;
    }

    .featured-profile img {
      width: 100%;
      height: 100%;

      object-fit: cover;
    }

    .featured-name {
      color: #fff;

      font-size: .91rem;
      font-weight: 800;
    }

    .featured-title {
      max-width: 760px;

      margin-top: 3px;

      overflow: hidden;

      color: rgba(255,255,255,.39);

      font-size: .72rem;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .featured-meta {
      display: flex;
      flex-wrap: wrap;

      gap: 14px;

      color: rgba(255,255,255,.36);

      font-size: .64rem;
    }


    /* =====================================================
       LIVE CREATOR SELECTOR

       Compact tabs instead of another card wall.
    ====================================================== */

    .live-selector-wrap {
      display: grid;

      grid-template-columns:
        34px
        minmax(0, 1fr)
        34px;

      gap: 7px;

      margin-top: 10px;
    }

    .live-selector-arrow {
      display: flex;
      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--border);

      color: rgba(255,255,255,.32);
      background: #0c0c0c;

      cursor: pointer;
    }

    .live-selector-arrow:hover {
      color: #fff;
      border-color: var(--red-border);
    }

    .live-selector {
      display: flex;

      gap: 6px;

      overflow-x: auto;

      scroll-behavior: smooth;
      scrollbar-width: none;
    }

    .live-selector::-webkit-scrollbar {
      display: none;
    }

    .live-selector-item {
      flex: 0 0 auto;

      display: inline-flex;
      align-items: center;

      gap: 8px;

      min-height: 38px;

      padding:
        5px
        11px
        5px
        6px;

      border:
        1px solid
        var(--border);

      color: rgba(255,255,255,.65);
      background: #0d0d0d;

      cursor: pointer;

      transition:
        background .2s ease,
        border-color .2s ease;
    }

    .live-selector-item:hover,
    .live-selector-item.active {
      border-color: var(--red-border);
      background: var(--red-soft);
    }

    .live-selector-avatar {
      width: 27px;
      height: 27px;

      flex: 0 0 auto;

      border-radius: 50%;

      object-fit: cover;
    }

    .live-selector-name {
      max-width: 145px;

      overflow: hidden;

      color: #fff;

      font-size: .64rem;
      font-weight: 700;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .live-selector-viewers {
      display: inline-flex;
      align-items: center;

      gap: 4px;

      color: rgba(255,255,255,.35);

      font-size: .55rem;
    }

    .live-selector-viewers::before {
      content: "";

      width: 5px;
      height: 5px;

      border-radius: 50%;

      background: #e91916;
    }


    /* =====================================================
       COMPACT CREATOR DIRECTORY
    ====================================================== */

    .creator-directory {
      margin-top: 9px;
    }

    .creator-directory-toolbar {
      display: flex;

      align-items: center;
      justify-content: space-between;

      flex-wrap: wrap;

      gap: 15px;

      margin-bottom: 14px;

      padding-top: 23px;

      border-top:
        1px solid
        var(--border-soft);
    }

    .creator-directory-count {
      color: rgba(255,255,255,.28);

      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .creator-refresh {
      display: inline-flex;
      align-items: center;

      gap: 6px;

      padding: 0;

      border: 0;

      color: rgba(255,255,255,.31);
      background: transparent;

      font-size: .62rem;

      cursor: pointer;
    }

    .creator-refresh:hover {
      color: #fff;
    }

    .creator-rows {
      border:
        1px solid
        var(--border);

      background: #0d0d0d;
    }

    .creator-row {
      display: grid;

      grid-template-columns:
        54px
        minmax(180px, .9fr)
        minmax(200px, 1.15fr)
        minmax(150px, .65fr)
        auto;

      gap: 17px;

      align-items: center;

      min-height: 72px;

      padding:
        9px
        16px;

      border-bottom:
        1px solid
        var(--border-soft);

      transition:
        background .18s ease;
    }

    .creator-row:last-child {
      border-bottom: 0;
    }

    .creator-row:hover {
      background:
        rgba(255,255,255,.018);
    }

    .creator-row.live {
      background:
        linear-gradient(
          90deg,
          rgba(189,0,0,.045),
          transparent 35%
        );
    }

    .creator-avatar-wrap {
      position: relative;

      width: 46px;
      height: 46px;
    }

    .creator-avatar {
      width: 46px;
      height: 46px;

      border-radius: 50%;

      object-fit: cover;

      background: #151515;
    }

    .creator-online-dot {
      position: absolute;

      right: 0;
      bottom: 1px;

      width: 11px;
      height: 11px;

      border:
        2px solid
        #0d0d0d;

      border-radius: 50%;

      background: #e91916;
    }

    .creator-name {
      overflow: hidden;

      color: #fff;

      font-size: .78rem;
      font-weight: 800;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .creator-login {
      margin-top: 4px;

      overflow: hidden;

      color: rgba(255,255,255,.26);

      font-size: .59rem;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .creator-status {
      min-width: 0;
    }

    .creator-status-label {
      display: inline-flex;
      align-items: center;

      gap: 6px;

      color: rgba(255,255,255,.27);

      font-size: .57rem;
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .creator-row.live
    .creator-status-label {
      color: #fff;
    }

    .creator-status-label.live::before {
      content: "";

      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: #e91916;

      box-shadow:
        0 0 8px rgba(233,25,22,.5);
    }

    .creator-stream-title {
      margin-top: 5px;

      overflow: hidden;

      color: rgba(255,255,255,.32);

      font-size: .63rem;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .creator-game {
      overflow: hidden;

      color: rgba(255,255,255,.43);

      font-size: .65rem;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .creator-game.offline {
      color: rgba(255,255,255,.20);
    }

    .creator-viewers {
      margin-top: 4px;

      color: rgba(255,255,255,.25);

      font-size: .56rem;
    }

    .creator-row-actions {
      display: flex;
      align-items: center;

      gap: 7px;
    }

    .creator-row-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      gap: 6px;

      min-height: 34px;

      padding:
        0
        12px;

      border:
        1px solid
        rgba(145,70,255,.32);

      color: rgba(255,255,255,.75);
      background: rgba(145,70,255,.07);

      font-size: .56rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;

      transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
    }

    .creator-row-button:hover {
      color: #fff;

      border-color: var(--twitch);

      background: rgba(145,70,255,.18);
    }

    .creator-feature-button {
      display: none;

      min-height: 34px;

      padding:
        0
        11px;

      border:
        1px solid
        var(--red-border);

      color: rgba(255,255,255,.67);
      background: var(--red-soft);

      font-size: .55rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;

      cursor: pointer;
    }

    .creator-row.live
    .creator-feature-button {
      display: inline-flex;

      align-items: center;
      justify-content: center;

      gap: 5px;
    }

    .creator-feature-button:hover {
      color: #fff;

      border-color: var(--red-bright);
    }


    /* =====================================================
       LOAD MORE
    ====================================================== */

    .load-more-wrap {
      display: flex;
      justify-content: center;

      margin-top: 24px;
    }

    .load-more-button {
      display: inline-flex;

      align-items: center;
      justify-content: center;

      gap: 9px;

      min-width: 215px;
      min-height: 43px;

      padding:
        0
        20px;

      border:
        1px solid
        rgba(255,255,255,.11);

      color: rgba(255,255,255,.58);
      background: rgba(255,255,255,.015);

      font-size: .59rem;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;

      cursor: pointer;

      transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
    }

    .load-more-button:hover {
      color: #fff;

      border-color: var(--red-border);

      background: var(--red-soft);
    }

    .load-more-button[hidden] {
      display: none;
    }


    /* =====================================================
       LOADING
    ====================================================== */

    .creator-loading {
      display: flex;

      align-items: center;
      justify-content: center;

      gap: 11px;

      min-height: 135px;

      border:
        1px solid
        var(--border);

      color: rgba(255,255,255,.34);

      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .loader-ring {
      width: 16px;
      height: 16px;

      border:
        2px solid
        rgba(255,255,255,.12);

      border-top-color:
        var(--red-bright);

      border-radius: 50%;

      animation:
        spin
        .75s
        linear
        infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }


    /* =====================================================
       COMMUNITY CONTENT / VIDEO LIBRARY
    ====================================================== */

    .creator-video-library {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr);
      gap: 1px;
      margin-top: 48px;
      border: 1px solid var(--border);
      background: var(--border);
    }

    .creator-video-stage,
    .creator-video-queue {
      min-width: 0;
      background: #0d0d0d;
    }

    .creator-video-player {
      aspect-ratio: 16 / 9;
      background: #000;
    }

    .creator-video-player iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .creator-video-info {
      padding: 24px 26px 27px;
      border-top: 1px solid var(--border-soft);
    }

    .video-label,
    .creator-video-card-label {
      color: var(--red-bright);
      font-size: .56rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .creator-video-title {
      margin: 9px 0 0;
      color: #fff;
      font-size: clamp(1.2rem, 2vw, 1.65rem);
      font-weight: 800;
      letter-spacing: -.025em;
    }

    .creator-video-byline {
      margin-top: 6px;
      color: rgba(255,255,255,.32);
      font-size: .67rem;
      font-weight: 700;
    }

    .video-copy {
      max-width: 780px;
      margin: 12px 0 0;
      color: rgba(255,255,255,.36);
      font-size: .76rem;
      line-height: 1.65;
    }

    .creator-video-queue {
      display: flex;
      flex-direction: column;
    }

    .creator-video-queue-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      padding: 21px 20px;
      border-bottom: 1px solid var(--border-soft);
    }

    .creator-video-queue-title {
      margin-top: 6px;
      color: #fff;
      font-size: .9rem;
      font-weight: 800;
    }

    .creator-video-count,
    .creator-video-gallery-count {
      color: rgba(255,255,255,.25);
      font-size: .57rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .creator-video-queue-list {
      display: flex;
      flex-direction: column;
    }

    .creator-video-queue-item,
    .creator-video-card {
      appearance: none;
      width: 100%;
      padding: 0;
      border: 0;
      color: inherit;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .creator-video-queue-item {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      gap: 13px;
      padding: 13px;
      border-bottom: 1px solid var(--border-soft);
      transition: background .18s ease;
    }

    .creator-video-queue-item:last-child { border-bottom: 0; }
    .creator-video-queue-item:hover { background: rgba(255,255,255,.025); }

    .creator-video-thumb {
      position: relative;
      display: block;
      overflow: hidden;
      aspect-ratio: 16 / 9;
      background: #080808;
    }

    .creator-video-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .25s ease, opacity .25s ease;
    }

    .creator-video-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: rgba(0,0,0,.18);
      font-size: 1.55rem;
      opacity: .8;
      transition: background .2s ease, opacity .2s ease;
    }

    .creator-video-queue-item:hover .creator-video-thumb img,
    .creator-video-card:hover .creator-video-thumb img { transform: scale(1.035); }

    .creator-video-queue-item:hover .creator-video-play,
    .creator-video-card:hover .creator-video-play {
      opacity: 1;
      background: rgba(189,0,0,.28);
    }

    .creator-video-card-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .creator-video-queue-item .creator-video-card-copy { justify-content: center; }

    .creator-video-card-copy strong {
      margin-top: 6px;
      overflow: hidden;
      color: #fff;
      font-size: .75rem;
      font-weight: 750;
      line-height: 1.3;
      text-overflow: ellipsis;
    }

    .creator-video-card-copy > span:last-child {
      margin-top: 5px;
      overflow: hidden;
      color: rgba(255,255,255,.28);
      font-size: .59rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .creator-video-gallery-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-top: 42px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-soft);
    }

    .creator-video-gallery-title {
      margin: 7px 0 0;
      color: #fff;
      font-size: 1.15rem;
      font-weight: 800;
    }

    .creator-video-gallery {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 18px;
    }

    .creator-video-card {
      overflow: hidden;
      border: 1px solid var(--border);
      background: #0d0d0d;
      transition: border-color .2s ease, transform .2s ease, background .2s ease;
    }

    .creator-video-card:hover,
    .creator-video-card.active {
      border-color: var(--red-border);
      background: rgba(189,0,0,.025);
      transform: translateY(-2px);
    }

    .creator-video-card.active { box-shadow: inset 0 -2px 0 var(--red-bright); }
    .creator-video-card .creator-video-card-copy { padding: 16px; }

    .creator-video-card.active .creator-video-card-label::after {
      content: " · NOW PLAYING";
      color: rgba(255,255,255,.38);
    }

    .content-type-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      margin-top: 45px;
      border: 1px solid var(--border-soft);
      background: var(--border-soft);
    }

    .content-type {
      min-height: 190px;

      padding: 27px;

      background: #0d0d0d;
    }

    .content-type i {
      color: var(--red-bright);

      font-size: 1.08rem;
    }

    .content-type strong {
      display: block;

      margin-top: 22px;

      color: #fff;

      font-size: .92rem;
    }

    .content-type span {
      display: block;

      margin-top: 8px;

      color: rgba(255,255,255,.32);

      font-size: .75rem;
      line-height: 1.6;
    }




    @media (max-width: 1050px) {
      .creator-video-library { grid-template-columns: 1fr; }
      .creator-video-queue-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .creator-video-queue-item:nth-child(odd) { border-right: 1px solid var(--border-soft); }
      .creator-video-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .creator-video-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .creator-video-queue-list { grid-template-columns: 1fr; }
      .creator-video-queue-item:nth-child(odd) { border-right: 0; }
      .creator-video-info { padding: 20px; }
    }

    @media (max-width: 520px) {
      .creator-video-gallery { grid-template-columns: 1fr; }
      .creator-video-queue-item { grid-template-columns: 104px minmax(0, 1fr); }
      .creator-video-gallery-header { align-items: flex-start; flex-direction: column; gap: 8px; }
    }


    /* =====================================================
       CREATOR PATH
    ====================================================== */

    .creator-path {
      display: grid;

      grid-template-columns:
        repeat(4, minmax(0, 1fr));

      margin-top: 48px;

      border:
        1px solid
        var(--border);
    }

    .creator-step {
      min-height: 230px;

      padding: 29px;

      border-right:
        1px solid
        var(--border-soft);

      background:
        rgba(255,255,255,.006);
    }

    .creator-step:last-child {
      border-right: 0;
    }

    .creator-step-number {
      color: var(--red-bright);

      font-size: .57rem;
      font-weight: 800;
      letter-spacing: .16em;
    }

    .creator-step-title {
      margin-top: 20px;

      color: #fff;

      font-size: 1rem;
      font-weight: 700;
    }

    .creator-step-copy {
      margin-top: 10px;

      color: rgba(255,255,255,.35);

      font-size: .77rem;
      line-height: 1.65;
    }


    /* =====================================================
       STREAM WITH US
    ====================================================== */

    .stream-with-us {
      position: relative;

      overflow: hidden;

      background:
        linear-gradient(
          120deg,
          #080808,
          #111 60%,
          #080808
        );
    }

    .stream-with-us::before {
      content: "";

      position: absolute;
      inset: 0;

      background:
        radial-gradient(
          circle at 76% 50%,
          rgba(189,0,0,.17),
          transparent 35%
        );

      pointer-events: none;
    }

    .stream-layout {
      position: relative;

      z-index: 1;

      display: grid;

      grid-template-columns:
        minmax(0, 1.1fr)
        minmax(340px, .9fr);

      gap: 70px;

      align-items: center;
    }

    .creator-expectations {
      border:
        1px solid
        var(--border);

      background:
        rgba(8,8,8,.68);
    }

    .expectation {
      display: grid;

      grid-template-columns:
        42px
        1fr;

      gap: 15px;

      padding:
        24px
        26px;

      border-bottom:
        1px solid
        var(--border-soft);
    }

    .expectation:last-child {
      border-bottom: 0;
    }

    .expectation-icon {
      width: 37px;
      height: 37px;

      display: flex;
      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--red-border);

      color: var(--red-bright);
      background: var(--red-soft);
    }

    .expectation-title {
      color: #fff;

      font-size: .87rem;
      font-weight: 700;
    }

    .expectation-copy {
      margin-top: 5px;

      color: rgba(255,255,255,.35);

      font-size: .74rem;
      line-height: 1.62;
    }


    /* =====================================================
       RESPONSIVE
    ====================================================== */

    @media (max-width: 1199.98px) {

      .benefit-grid,
      .content-type-grid,
      .creator-path {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));
      }

      .creator-step:nth-child(2) {
        border-right: 0;
      }

      .creator-step:nth-child(-n+2) {
        border-bottom:
          1px solid
          var(--border-soft);
      }

      .twitch-header {
        grid-template-columns:
          minmax(260px, .8fr)
          1fr;
      }

      .twitch-status {
        grid-column:
          1 / -1;

        justify-content: flex-start;
      }

      .creator-row {
        grid-template-columns:
          54px
          minmax(150px, .8fr)
          minmax(180px, 1fr)
          auto;
      }

      .creator-row-game-column {
        display: none;
      }

    }


    @media (max-width: 991.98px) {

      .creator-type-wrap,
      .stream-layout {
        grid-template-columns: 1fr;
      }
.featured-stream {
        grid-template-columns: 1fr;
      }

      .featured-chat {
        min-height: 420px;
      }

      .creator-row {
        grid-template-columns:
          50px
          minmax(130px, .8fr)
          minmax(160px, 1fr)
          auto;

        gap: 12px;
      }

      .creator-feature-button {
        display: none !important;
      }

    }


    @media (max-width: 767.98px) {
.benefit-grid,
      .content-type-grid,
      .creator-path {
        grid-template-columns: 1fr;
      }

      .creator-step {
        border-right: 0;

        border-bottom:
          1px solid
          var(--border-soft);
      }

      .creator-step:last-child {
        border-bottom: 0;
      }

      .twitch-header {
        grid-template-columns: 1fr;

        gap: 14px;
      }

      .twitch-status {
        grid-column: auto;
      }

      .live-area-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
      }

      .featured-info {
        align-items: flex-start;

        flex-direction: column;
      }

      .featured-title {
        max-width: 70vw;
      }

      .featured-chat {
        min-height: 360px;
      }

      .creator-row {
        grid-template-columns:
          48px
          minmax(0, 1fr)
          auto;

        min-height: 67px;

        padding:
          9px
          11px;
      }

      .creator-row-status-column {
        display: none;
      }

      .creator-row-actions {
        gap: 0;
      }

      .creator-row-button {
        width: 34px;
        min-width: 34px;

        padding: 0;
      }

      .creator-row-button span {
        display: none;
      }

    }


    @media (max-width: 480px) {
.live-selector-wrap {
        grid-template-columns:
          28px
          minmax(0, 1fr)
          28px;
      }

    }