:root {
      --page-bg: #aa226b;
      --section-bg: #aa226b;
      --accent: #ed508e;
      --accent-2: #d179d7;
      --canvas-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--section-bg)), color-mix(in srgb, var(--accent-2) 12%, var(--section-bg)));
      --banner-height: 292px;
      --banner-fit: cover;
      --section-width: 860px;
      --shadow: 0 24px 80px rgba(0, 0, 0, .42);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background: var(--canvas-bg);
      color: #fff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }
    a { color: inherit; }
    .landing,
    .published-landing {
      width: min(100%, 980px);
      margin: 0 auto;
      overflow: hidden;
      background: var(--canvas-bg);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }
    .landing[data-device="phone"],
    .published-landing[data-device="phone"] { width: min(100%, 390px); }
    .banner {
      position: relative;
      min-height: var(--banner-height, 430px);
      overflow: hidden;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%),
        radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--accent-2) 32%, transparent), transparent 26%),
        #090719;
    }
    .banner img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: var(--banner-fit, cover);
    }
    .banner::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(5, 3, 15, .55), rgba(5, 3, 15, .12) 45%, rgba(5, 3, 15, .35)),
        linear-gradient(0deg, rgba(5, 3, 15, .5), transparent 48%);
    }
    .banner.has-image::after {
      display: none;
    }
    .banner-link-hit {
      position: absolute;
      inset: 0;
      z-index: 2;
    }
    .banner-inner {
      position: relative;
      z-index: 3;
      min-height: var(--banner-height, 430px);
      display: grid;
      align-content: end;
      padding: 48px 32px;
      pointer-events: none;
    }
    .banner-inner a,
    .banner-inner .landing-cta { pointer-events: auto; }
    .banner-placeholder {
      position: absolute;
      inset: 32px;
      z-index: 1;
      display: grid;
      place-items: center;
      border: 1px dashed rgba(255, 255, 255, .35);
      border-radius: 14px;
      color: rgba(255, 255, 255, .74);
      text-align: center;
    }
    .banner-placeholder strong {
      display: block;
      margin-bottom: 8px;
      color: #fff;
      font-size: 24px;
    }
    .headline {
      max-width: 640px;
      pointer-events: none;
    }
    .headline h2 {
      margin: 0;
      font-size: clamp(40px, 7vw, 64px);
      line-height: 1.02;
      letter-spacing: 0;
    }
    .headline p {
      margin: 16px 0 0;
      color: rgba(255, 255, 255, .86);
      font-size: 17px;
    }
    .headline .subtle {
      margin-top: 18px;
      color: rgba(255, 255, 255, .76);
      font-size: 13px;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }
    .landing-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 42px;
      border: 0;
      border-radius: 999px;
      padding: 12px 24px;
      color: #fff;
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      font-weight: 900;
      text-decoration: none;
    }
    .landing-cta.size-sm {
      min-height: 36px;
      padding: 9px 18px;
      font-size: 14px;
    }
    .landing-cta.size-md {
      min-height: 42px;
      padding: 12px 24px;
      font-size: 16px;
    }
    .landing-cta.size-lg {
      min-height: 52px;
      padding: 15px 34px;
      font-size: 18px;
    }
    .landing-cta.ghost {
      color: #fff;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .22);
    }
    .landing-cta.inert {
      cursor: default;
      opacity: .72;
    }
    .eyebrow {
      justify-self: start;
      align-self: end;
      margin: 0;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 999px;
      background: rgba(0, 0, 0, .28);
      padding: 5px 12px;
      color: rgba(255, 255, 255, .8);
      font-size: 12px;
      font-weight: 700;
    }
    .body {
      padding: 32px clamp(16px, 4vw, 52px) 60px;
      background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
        var(--page-bg);
    }
    .section {
      position: relative;
      margin: 0 auto 26px;
      max-width: var(--section-width, 860px);
      padding: 24px;
      background: color-mix(in srgb, var(--section-bg) 86%, transparent);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 10px;
    }
    .section.full { max-width: none; }
    .section-head {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }
    .section h3 {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: 0;
    }
    .module-list {
      display: grid;
      gap: 14px;
      grid-auto-flow: row;
    }
    .module-list.auto {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .module-list.auto.single {
      grid-template-columns: minmax(min(100%, 360px), 360px);
      justify-content: center;
    }
    .module-list.horizontal.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .module-list.horizontal.four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .module-list.vertical {
      grid-template-columns: 1fr;
    }
    .card {
      min-height: 142px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      padding: 14px;
      text-decoration: none;
      grid-column: span var(--span, 1);
      order: var(--order, 0);
    }
    .module-list.vertical .card,
    .module-list.vertical .reward {
      min-height: auto;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 16px;
    }
    .how-card {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .how-card h4,
    .how-card p {
      width: 100%;
    }
    .module-list.vertical .how-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .module-list .how-card.phone-how-card {
      min-height: 96px;
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 14px;
      text-align: left;
    }
    .module-list .how-card.phone-how-card .icon {
      width: 40px;
      height: 40px;
      margin: 0;
      border-radius: 10px;
      font-size: 16px;
    }
    .module-list .how-card.phone-how-card h4 {
      grid-column: 2;
      grid-row: 1;
      text-align: left;
    }
    .module-list .how-card.phone-how-card p {
      grid-column: 2;
      grid-row: 2;
      margin: 0;
      text-align: left;
    }
    .module-list.vertical .card p,
    .module-list.vertical .reward span {
      grid-column: 2;
    }
    .icon {
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      margin: 0 auto 8px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #131423;
      font-size: 22px;
      font-weight: 900;
    }
    .card h4,
    .card p {
      margin: 0;
    }
    .card h4 {
      font-size: 16px;
      line-height: 1.25;
    }
    .card p,
    .copy,
    .faq-item small {
      color: rgba(255, 255, 255, .68);
      font-size: 14px;
    }
    .copy {
      margin: 0;
      font-size: 18px;
      line-height: 1.6;
    }
    .reward-row,
    .contact-row {
      gap: 12px;
    }
    .contact-row .card {
      align-items: center;
      text-align: center;
    }
    .contact-row .card h4,
    .contact-row .card p {
      width: 100%;
    }
    .reward {
      min-height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
        color-mix(in srgb, var(--accent) 18%, var(--section-bg));
      padding: 20px;
      grid-column: span var(--span, 1);
      order: var(--order, 0);
    }
    .reward-logo,
    .contact-logo {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent) 46%, transparent);
      color: #fff;
      font-weight: 900;
    }
    .contact-logo {
      width: 40px;
      height: 40px;
      margin: 0 auto;
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
    }
    .reward-logo img,
    .contact-logo img,
    .custom-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .reward strong {
      width: 100%;
      font-size: 18px;
      line-height: 1.25;
    }
    .reward span {
      max-width: 32ch;
      margin: 0 auto;
      color: rgba(255, 255, 255, .76);
      font-size: 14px;
      line-height: 1.45;
    }
    .table-wrap {
      overflow-x: auto;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 8px;
    }
    table {
      width: 100%;
      min-width: 520px;
      border-collapse: collapse;
      font-size: 14px;
    }
    th,
    td {
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding: 12px;
      text-align: left;
    }
    th {
      border-top: 0;
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .82);
    }
    .faq-item {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 16px;
      margin-bottom: 8px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .06);
    }
    .faq-item strong,
    .faq-item small {
      display: block;
    }
    .faq-item small {
      margin-top: 6px;
    }
    .media-box {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .06);
    }
    .custom-image {
      height: auto;
      max-height: 520px;
    }
    .custom-video {
      width: 100%;
      max-height: 520px;
      display: block;
      background: #000;
    }
    .join-strip {
      display: flex;
      justify-content: center;
      max-width: var(--section-width, 860px);
      margin: 0 auto 26px;
      padding: 4px 0;
    }
    .join-box {
      display: flex;
      justify-content: center;
      text-align: center;
    }
    @media (max-width: 760px) {
      .landing {
        width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
      }
      .banner-inner {
        padding: 36px 24px;
      }
      .headline h2 {
        font-size: 40px;
      }
      .section {
        padding: 18px;
      }
      .section h3 {
        font-size: 24px;
      }
      .module-list,
      .module-list.auto,
      .module-list.auto.single,
      .module-list.horizontal.three,
      .module-list.horizontal.four {
        grid-template-columns: 1fr;
      }
      .card,
      .reward {
        grid-column: auto;
      }
    }