/* ==========================================================================
   rpvip2 · skin "langit-magenta" (reference-led)
   Bahasa visual dari poster resmi brand: langit magenta dengan
   ranting ungu, karakter bermahkota laurel, sayap ungu berbingkai emas, dan
   wordmark hijau-emas. Diterjemahkan menjadi panggung akses gelap: latar ungu
   nyaris hitam, cahaya magenta, garis emas tipis, judul kondensasi besar, dan
   dua tombol tegas (H5 emas, APK ungu bertepi emas).
   Tidak memakai teks promosi, nominal bonus, layar kemenangan, kode QR, nama
   permainan pihak ketiga, atau merek lain dari poster.
   ========================================================================== */

body.variant-arena {
  --bg: #08010f;
  --bg2: #120220;
  --panel: #1b0530;
  --text: #fff3e6;
  --muted: #c8a7d8;
  --accent: #a80fe0;
  --accent2: #f0c46a;
  --line: rgba(240, 196, 106, 0.26);
  --display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Impact, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 0px;
  --gold: #e8bd63;
  --gold-hi: #ffe3a6;
  --gold-deep: #8a5a12;
  --ink: #240718;
  --violet: #a80fe0;
  --violet-soft: #d98cff;
  --violet-deep: #4a0a6b;
  --cream: #fff3e6;
  --rule: rgba(240, 196, 106, 0.30);
  background:
    radial-gradient(1100px 620px at 50% -18%, rgba(168, 15, 224, 0.26), transparent 66%),
    radial-gradient(860px 520px at 96% 4%, rgba(94, 10, 132, 0.30), transparent 62%),
    radial-gradient(760px 520px at 4% 88%, rgba(94, 10, 132, 0.22), transparent 64%),
    linear-gradient(180deg, #0c0116 0%, #08010f 48%, #06010b 100%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Poster texture: branch sky at the top, dusk haze at the foot. Both are the
   brand's own poster crops, blurred and darkened, used very thin. */
body.variant-arena::before,
body.variant-arena::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Ranting ungu di sudut kanan atas, dilembutkan dengan mask radial agar tidak
   ada garis potong antara tekstur dan latar. */
body.variant-arena::before {
  background-image: url("../assets/langit-bg-cabang.webp");
  background-repeat: no-repeat;
  background-position: 102% 2%;
  background-size: 46% auto;
  opacity: 0.30;
  filter: saturate(1.05);
  -webkit-mask-image: radial-gradient(760px 620px at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
  mask-image: radial-gradient(760px 620px at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
}

/* Kabut senja di kaki halaman, juga ber-mask agar menyatu. */
body.variant-arena::after {
  background-image: url("../assets/langit-bg-senja.webp");
  background-repeat: no-repeat;
  background-position: 50% 108%;
  background-size: 150% auto;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 78%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 78%);
}

body.variant-arena > *:not(.skip) {
  position: relative;
  z-index: 1;
}

body.variant-arena .skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
}

body.variant-arena .skip:focus {
  left: 12px;
  top: 12px;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 14px;
}

body.variant-arena .wrap {
  width: min(1180px, calc(100% - 40px));
}

/* ---------- Tipografi ------------------------------------------------------ */
body.variant-arena h1,
body.variant-arena h2,
body.variant-arena h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

body.variant-arena h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 0.98;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

body.variant-arena h3 {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

body.variant-arena .kicker,
body.variant-arena .eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.variant-arena .kicker::before,
body.variant-arena .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* ---------- Header masthead ------------------------------------------------ */
body.variant-arena .site-header.ed-header {
  background: linear-gradient(180deg, rgba(14, 2, 24, 0.97), rgba(8, 1, 15, 0.92));
  border-bottom: 1px solid rgba(240, 196, 106, 0.42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}

body.variant-arena .ed-masthead {
  min-height: 82px;
  gap: 18px;
}

body.variant-arena .ed-nav {
  gap: 4px;
  flex: 1 1 auto;
}

body.variant-arena .ed-nav a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 7px;
  border-bottom: 1px solid transparent;
}

body.variant-arena .ed-nav a:hover,
body.variant-arena .ed-nav a[aria-current="page"] {
  color: var(--gold-hi);
  border-bottom-color: var(--gold);
}

body.variant-arena .ed-wordmark {
  font-family: var(--display);
  flex: 0 0 auto;
  order: 0;
}

body.variant-arena .ed-brand-logo,
body.variant-arena .brand-logo {
  height: 58px;
  max-height: 58px;
  width: auto;
  filter: drop-shadow(0 6px 18px rgba(168, 15, 224, 0.45));
}

body.variant-arena .ed-meta {
  flex: 1 1 auto;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

body.variant-arena .ed-meta .menu-btn,
body.variant-arena .menu-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(168, 15, 224, 0.22);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 10px;
  min-height: 36px;
}

body.variant-arena .ed-rule {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0 9px;
  border-top: 1px solid rgba(240, 196, 106, 0.14);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Policy strip --------------------------------------------------- */
body.variant-arena .policy-strip {
  background:
    linear-gradient(90deg, rgba(168, 15, 224, 0.34), rgba(74, 10, 107, 0.28) 60%, rgba(168, 15, 224, 0.18)),
    #0c0116;
  border-bottom: 1px solid rgba(240, 196, 106, 0.38);
  border-top: 1px solid rgba(240, 196, 106, 0.12);
}

body.variant-arena .policy-strip-inner {
  gap: 10px;
  padding: 9px 0;
}

body.variant-arena .policy-badge {
  color: var(--gold-hi);
  font-weight: 800;
  letter-spacing: 0.16em;
}

body.variant-arena .policy-tag {
  color: var(--cream);
  border: 1px solid rgba(240, 196, 106, 0.6);
  padding: 2px 6px;
  letter-spacing: 0.2em;
}

body.variant-arena .policy-link {
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
  padding-bottom: 1px;
}

body.variant-arena .policy-link:hover {
  color: var(--gold-hi);
}

body.variant-arena .policy-note {
  color: var(--muted);
  letter-spacing: 0.12em;
}

/* ---------- Hero: panggung akses ------------------------------------------ */
body.variant-arena .ap-hero {
  position: relative;
  padding: 30px 0 42px;
  background:
    radial-gradient(680px 460px at 76% 22%, rgba(168, 15, 224, 0.34), transparent 68%),
    radial-gradient(520px 420px at 12% 8%, rgba(74, 10, 107, 0.42), transparent 70%),
    linear-gradient(180deg, rgba(12, 1, 22, 0.92), rgba(8, 1, 15, 0.98));
  border-bottom: 1px solid rgba(240, 196, 106, 0.30);
  overflow: hidden;
}

body.variant-arena .ap-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

body.variant-arena .ap-hero-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 40px;
  align-items: center;
}

body.variant-arena .ap-hero-copy {
  min-width: 0;
}

body.variant-arena .ap-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 12px;
}

body.variant-arena .ap-hero h1 {
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: 0.88;
  letter-spacing: -0.005em;
  color: var(--cream);
  background: linear-gradient(180deg, #fff8ec 8%, var(--gold-hi) 46%, var(--gold) 72%, #c98f2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 8px 40px rgba(240, 196, 106, 0.22);
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}

body.variant-arena .ap-deck {
  font-size: 14.5px;
  line-height: 1.68;
  color: #e7d2ec;
  max-width: 56ch;
  border-left: 2px solid rgba(168, 15, 224, 0.65);
  padding-left: 14px;
}

body.variant-arena .ap-chips span {
  border: 1px solid var(--rule);
  background: rgba(27, 5, 48, 0.72);
  color: var(--gold-hi);
  border-radius: 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
}

body.variant-arena .ap-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}

body.variant-arena .ap-hero-actions .btn {
  min-height: 56px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  padding: 0 26px;
}

body.variant-arena .ap-micro {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Hero logo lockup: the brand mark is a first-screen fixture, 180-240px tall on
   desktop and capped at 84px on phones (see responsive block). */
body.variant-arena .hero-logo-lockup {
  gap: 14px;
  margin: 0 0 18px;
  align-items: center;
}

body.variant-arena .hero-brand-logo {
  height: 180px;
  max-height: 184px;
  max-width: min(320px, 46vw);
  width: auto;
  filter: drop-shadow(0 14px 34px rgba(168, 15, 224, 0.5)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
}

body.variant-arena .hero-logo-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gold-hi);
  border: 1px solid rgba(240, 196, 106, 0.55);
  background: rgba(12, 1, 22, 0.55);
  padding: 4px 8px;
  border-radius: 0;
}

/* Telepon: bingkai emas ganda dengan halo magenta, layar = artwork resmi. */
body.variant-arena .ap-phone {
  width: min(340px, 100%);
  padding: 9px;
  border: 1px solid rgba(240, 196, 106, 0.7);
  outline: 1px solid rgba(240, 196, 106, 0.22);
  outline-offset: 5px;
  border-radius: 30px;
  background: linear-gradient(180deg, #2a0740, #0d0117 70%);
  box-shadow:
    0 0 0 7px rgba(12, 1, 22, 0.9),
    0 26px 60px rgba(0, 0, 0, 0.62),
    0 0 70px rgba(168, 15, 224, 0.4);
}

body.variant-arena .ap-phone-screen {
  border-radius: 22px;
  background: linear-gradient(160deg, #3a0a55, #0c0116 72%);
}

body.variant-arena .ap-phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(240, 196, 106, 0.22);
}

body.variant-arena .ap-phone-bar {
  color: var(--gold);
  letter-spacing: 0.18em;
  font-size: 8px;
}

body.variant-arena .ap-phone-bar span:first-child {
  background: var(--gold);
  opacity: 0.55;
}

/* ---------- Buttons -------------------------------------------------------- */
body.variant-arena .btn {
  border-radius: 0;
  border-width: 2px;
  font-family: var(--display);
  letter-spacing: 0.08em;
}

body.variant-arena .btn-primary {
  background: linear-gradient(180deg, #ffe6ab 0%, var(--gold) 52%, #b8802a 100%);
  color: #2a0a04;
  border-color: #7d5312;
  box-shadow:
    0 5px 0 rgba(104, 66, 12, 0.75),
    0 0 34px rgba(240, 196, 106, 0.28);
}

body.variant-arena .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

body.variant-arena .btn-ghost {
  background: linear-gradient(180deg, rgba(168, 15, 224, 0.30), rgba(58, 6, 86, 0.55));
  color: var(--cream);
  border-color: rgba(240, 196, 106, 0.75);
  box-shadow:
    0 5px 0 rgba(74, 10, 107, 0.55),
    inset 0 0 24px rgba(168, 15, 224, 0.22);
}

body.variant-arena .btn-ghost:hover {
  color: var(--gold-hi);
  border-color: var(--gold-hi);
  transform: translateY(-1px);
}

/* ---------- Galeri / showcase --------------------------------------------- */
body.variant-arena .sec-showcase {
  padding-top: 46px;
}

body.variant-arena .sec-head {
  max-width: 780px;
}

body.variant-arena .sec-head p {
  color: var(--muted);
  font-size: 13.5px;
}

body.variant-arena .h03-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

body.variant-arena .h03-tile {
  margin: 0;
  position: relative;
  border: 1px solid rgba(240, 196, 106, 0.42);
  background: linear-gradient(180deg, rgba(27, 5, 48, 0.9), rgba(12, 1, 22, 0.95));
  padding: 7px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

body.variant-arena .h03-tile img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  border: 1px solid rgba(240, 196, 106, 0.18);
}

body.variant-arena .h03-tile figcaption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-hi);
  padding: 8px 2px 2px;
  text-align: center;
}

body.variant-arena .h03-band {
  margin: 16px 0 0;
  border: 1px solid rgba(240, 196, 106, 0.38);
  background: rgba(12, 1, 22, 0.85);
  padding: 8px 8px 12px;
}

body.variant-arena .h03-band img {
  width: 100%;
  height: auto;
  display: block;
}

body.variant-arena .h03-band figcaption {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 10px 2px 0;
}

/* ---------- Sections ------------------------------------------------------- */
body.variant-arena .section {
  padding: 54px 0;
  border-bottom: 1px solid rgba(240, 196, 106, 0.16);
}

body.variant-arena .section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(27, 5, 48, 0.34), rgba(8, 1, 15, 0.2));
}

body.variant-arena .sec-links a {
  color: var(--gold);
  border-bottom: 1px solid rgba(240, 196, 106, 0.4);
  text-decoration: none;
  margin-right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.variant-arena .av-summary,
body.variant-arena .mi-summary {
  display: grid;
  gap: 28px;
}

body.variant-arena .av-summary {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
}

body.variant-arena .av-summary p {
  color: #e6d2ec;
  font-size: 14.5px;
}

body.variant-arena .table-wrap {
  border: 1px solid var(--rule);
  background: rgba(12, 1, 22, 0.6);
}

body.variant-arena .geo-facts caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
  padding: 10px 12px 0;
}

body.variant-arena .geo-facts th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(240, 196, 106, 0.14);
}

body.variant-arena .geo-facts td {
  color: var(--cream);
  border-bottom: 1px solid rgba(240, 196, 106, 0.14);
}

body.variant-arena .route-card {
  border: 1px solid var(--rule);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(27, 5, 48, 0.78), rgba(12, 1, 22, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.variant-arena .route-card.primary {
  border-color: rgba(240, 196, 106, 0.6);
  background: linear-gradient(180deg, rgba(74, 10, 107, 0.6), rgba(12, 1, 22, 0.92));
}

body.variant-arena .route-card h3 {
  color: var(--gold-hi);
}

body.variant-arena .route-no {
  color: var(--violet-soft);
}

body.variant-arena .activities-grid article,
body.variant-arena .trust-list li,
body.variant-arena .steps li {
  border-color: rgba(240, 196, 106, 0.18);
}

body.variant-arena .faq-q {
  color: var(--gold-hi);
}

body.variant-arena .faq-a {
  color: var(--muted);
}

body.variant-arena .chips span {
  border-color: var(--rule);
  background: rgba(27, 5, 48, 0.7);
  color: var(--gold-hi);
  border-radius: 0;
}

/* ---------- Footer --------------------------------------------------------- */
body.variant-arena .site-footer.ed-footer {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(168, 15, 224, 0.16), transparent 70%),
    linear-gradient(180deg, #0b0113, #06010b);
  border-top: 1px solid rgba(240, 196, 106, 0.45);
}

body.variant-arena .ed-footer-grid {
  padding: 34px 0 22px;
}

body.variant-arena .ed-footer-wordmark {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-transform: uppercase;
}

body.variant-arena .ed-footer-brand p {
  color: var(--muted);
  font-size: 12.5px;
}

body.variant-arena .ed-colophon {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}

body.variant-arena .ed-footer-links h3 {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

body.variant-arena .ed-footer-links a {
  color: #d9c3e2;
  font-size: 11.5px;
}

body.variant-arena .ed-footer-links a:hover {
  color: var(--gold-hi);
}

body.variant-arena .ed-footer-bottom {
  border-top: 1px solid rgba(240, 196, 106, 0.2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.variant-arena .age {
  border: 1px solid rgba(240, 196, 106, 0.5);
  color: var(--gold);
  padding: 1px 5px;
  margin-right: 8px;
  border-radius: 0;
}

/* ---------- Bilah CTA bawah (mobile) -------------------------------------- */
/* Base factory menyembunyikan .bottom-cta untuk situs variant; skin ini
   mengaktifkannya kembali hanya di layar kecil, dengan dua tombol >=50px,
   aria-label "link alternatif", dan href redirect mediafire situs ini. */
body.variant-arena .bottom-cta {
  display: none !important;
}

@media (max-width: 700px) {
  body.variant-arena .bottom-cta {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(12, 1, 22, 0.98), rgba(6, 1, 11, 0.99));
    border-top: 1px solid rgba(240, 196, 106, 0.55);
    box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(240, 196, 106, 0.18);
  }

  body.variant-arena .bottom-cta .btn {
    flex: 1 1 0;
    min-height: 50px;
    height: 50px;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  body.variant-arena {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* ---------- Responsif ------------------------------------------------------ */
@media (max-width: 1000px) {
  body.variant-arena .h03-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.variant-arena .ap-hero-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body.variant-arena .ap-phone {
    order: -1;
    width: min(260px, 76vw);
  }

  body.variant-arena .ap-hero {
    padding: 22px 0 34px;
  }

  body.variant-arena .hero-brand-logo {
    height: 72px;
    max-height: 84px;
    max-width: min(160px, 46vw);
  }

  body.variant-arena .hero-logo-lockup {
    margin-bottom: 10px;
  }

  body.variant-arena .ap-hero h1 {
    font-size: clamp(40px, 11vw, 58px);
    margin-bottom: 10px;
  }

  body.variant-arena .ap-deck {
    font-size: 14.5px;
    border-left-width: 2px;
  }

  body.variant-arena .av-summary,
  body.variant-arena .mi-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body.variant-arena .wrap {
    width: calc(100% - 26px);
  }

  body.variant-arena .ed-masthead {
    min-height: 58px;
    gap: 10px;
    justify-content: space-between;
  }

  body.variant-arena .ed-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    background: #0c0116;
    border-bottom: 1px solid var(--rule);
    padding: 10px 16px 18px;
    z-index: 90;
  }

  body.variant-arena .ed-nav.is-open {
    display: flex;
  }

  body.variant-arena .ed-brand-logo,
  body.variant-arena .brand-logo {
    height: 42px;
    max-height: 42px;
  }

  body.variant-arena .ed-meta {
    font-size: 8.5px;
    letter-spacing: 0.08em;
  }

  body.variant-arena .ed-rule {
    font-size: 8px;
    letter-spacing: 0.1em;
    padding: 5px 0 7px;
  }

  body.variant-arena .policy-strip-inner {
    gap: 6px;
    padding: 7px 0;
    font-size: 8.5px;
    letter-spacing: 0.04em;
  }

  body.variant-arena .policy-note {
    font-size: 8px;
  }

  body.variant-arena .ap-phone {
    width: min(234px, 68vw);
    padding: 7px;
    border-radius: 24px;
    outline-offset: 4px;
  }

  body.variant-arena .ap-phone-screen {
    border-radius: 18px;
  }

  body.variant-arena .ap-hero h1 {
    font-size: clamp(36px, 10.6vw, 52px);
  }

  body.variant-arena .ap-hero-actions .btn {
    min-height: 50px;
    font-size: 10.5px;
    padding: 0 16px;
    letter-spacing: 0.05em;
    width: 100%;
  }

  body.variant-arena .ap-hero-actions {
    gap: 8px;
  }

  body.variant-arena .hero-brand-logo {
    height: 64px;
    max-height: 76px;
    max-width: 132px;
  }

  body.variant-arena .hero-logo-tag {
    font-size: 8px;
    padding: 3px 6px;
  }

  body.variant-arena .section {
    padding: 36px 0;
  }

  body.variant-arena h2 {
    font-size: 26px;
  }

  body.variant-arena .h03-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  body.variant-arena .h03-tile img {
    height: 122px;
  }

  body.variant-arena .h03-tile figcaption {
    font-size: 8px;
    letter-spacing: 0.12em;
    padding: 6px 2px 1px;
  }

  body.variant-arena .ed-footer-wordmark {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  body.variant-arena .ap-phone {
    width: min(214px, 62vw);
  }

  body.variant-arena .hero-brand-logo {
    height: 60px;
    max-height: 72px;
  }

  body.variant-arena .ap-hero h1 {
    font-size: clamp(34px, 10.2vw, 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.variant-arena * {
    transition: none !important;
    animation: none !important;
  }
}