/* ==========================================================================
   hokiwin · "naga-merah" skin  (reference-led, arena / typographic hero)

   Visual language borrowed from the brand's own landing artwork — deep
   maroon-to-black ground, gold filigree frames, crimson panels, gold bevel
   buttons and a condensed poster headline.  Intentional differences from the
   other arena sites on this portfolio: a centred poster hero (logo → framed
   artwork → gold-gradient headline), a gold hairline masthead instead of a
   solid colour bar, 5-tile gold-framed gallery, ornament section heads and a
   maroon footer with a gold CTA band.

   No reference copy, no other brand's logo, no promo numbers, no QR code.
   All artwork is brand-owned and sanitized (see brand/artwork_manifest.json).
   ========================================================================== */

:root{
  --hk-ink:#0c0305;
  --hk-ink-2:#150609;
  --hk-maroon:#3d0c12;
  --hk-maroon-2:#5a1119;
  --hk-crimson:#8c1f28;
  --hk-gold:#f6cf85;
  --hk-gold-2:#e0a94a;
  --hk-gold-3:#b57a2b;
  --hk-cream:#fff4e6;
  --hk-muted:#c3ab9a;
  --hk-line:rgba(246,207,133,.32);
  --hk-line-soft:rgba(246,207,133,.16);
  --hk-gold-grad:linear-gradient(178deg,#fff4d2 0%,#f8d68f 26%,#e8b45c 54%,#c08a33 78%,#9a6a24 100%);
  --hk-panel:linear-gradient(180deg,#2c0b11 0%,#1b070b 100%);
  --hk-panel-2:linear-gradient(180deg,#3a0e15 0%,#20080d 100%);
  --hk-glow:0 22px 48px rgba(0,0,0,.55);
  --hk-frame:inset 0 0 0 1px rgba(246,207,133,.14),0 0 0 1px rgba(0,0,0,.65);
}

html{background:#0c0305}
body.variant-arena{
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(224,169,74,.16), transparent 62%),
    radial-gradient(940px 640px at 104% 14%, rgba(140,31,40,.34), transparent 60%),
    radial-gradient(820px 560px at -4% 58%, rgba(140,31,40,.24), transparent 64%),
    linear-gradient(180deg,#140508 0%,#0c0305 48%,#160609 100%);
  background-attachment:fixed;
  color:var(--hk-cream);
  overflow-x:clip;
}
/* Texture + faint gold dust instead of the default confetti pattern. */
body.variant-arena::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(246,207,133,.14) 0 1px, transparent 1.4px),
    radial-gradient(circle at 74% 64%, rgba(246,207,133,.10) 0 1px, transparent 1.5px),
    linear-gradient(0deg, rgba(255,255,255,.015), rgba(255,255,255,.015));
  background-size:220px 220px,320px 320px,100% 100%;
}
body.variant-arena>*{position:relative;z-index:1}
body.variant-arena .wrap{width:min(1180px,100% - 40px)}
::selection{background:var(--hk-gold);color:#2a0a06}

/* ---------- type ---------- */
body.variant-arena h1,
body.variant-arena h2,
body.variant-arena h3{text-transform:uppercase;text-shadow:none;font-weight:900}
body.variant-arena h1{letter-spacing:.005em}
body.variant-arena h2{letter-spacing:.02em}
body.variant-arena p{color:var(--hk-muted)}
body.variant-arena a{color:var(--hk-gold)}
body.variant-arena a:hover{color:#fff6e0}

body.variant-arena .kicker,
body.variant-arena .eyebrow{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;letter-spacing:.22em;color:var(--hk-gold);
  border:1px solid var(--hk-line-soft);border-radius:999px;
  background:linear-gradient(180deg,rgba(140,31,40,.42),rgba(20,5,8,.6));
  padding:4px 11px;margin:0 0 12px;
}

/* ---------- masthead: gold hairline, centred logo (reference: app header) ---------- */
body.variant-arena .ed-header{
  background:linear-gradient(180deg,rgba(18,4,7,.97),rgba(12,3,5,.92));
  border-bottom:1px solid var(--hk-line);
  box-shadow:0 1px 0 rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
}
body.variant-arena .ed-header::after{
  content:"";display:block;height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,207,133,.55),transparent);
}
body.variant-arena .ed-masthead{min-height:74px;gap:14px}
body.variant-arena .ed-brand-logo{height:56px;width:56px;max-width:56px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
body.variant-arena .ed-wordmark{flex:0 0 auto;order:2}
body.variant-arena .ed-nav{order:1;gap:16px}
body.variant-arena .ed-nav a{
  font-size:9px;letter-spacing:.16em;color:var(--hk-muted);
  border-bottom:1px solid transparent;padding:6px 0;
}
body.variant-arena .ed-nav a:hover,
body.variant-arena .ed-nav a[aria-current="page"]{color:var(--hk-gold);border-bottom-color:var(--hk-gold-2)}
body.variant-arena .ed-meta{order:3;font-size:8px;letter-spacing:.1em;color:var(--hk-muted);text-transform:uppercase}
body.variant-arena .ed-meta .menu-btn{
  border:1px solid var(--hk-line);border-radius:999px;background:rgba(90,17,25,.5);
  color:var(--hk-gold);height:36px;padding:0 12px;
}
body.variant-arena .ed-rule{
  border-top:1px solid rgba(246,207,133,.10);
  font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.2em;
  color:rgba(246,207,133,.72);text-transform:uppercase;padding:5px 0;
}

/* ---------- global policy strip (slot / resmi / link alternatif) ---------- */
body.variant-arena .policy-strip{
  background:linear-gradient(180deg,#4a1119,#2a0a0e);
  border-top:1px solid rgba(246,207,133,.18);
  border-bottom:1px solid rgba(0,0,0,.8);
  box-shadow:inset 0 1px 0 rgba(246,207,133,.10);
  font-size:9px;letter-spacing:.1em;
}
body.variant-arena .policy-strip-inner{padding:6px 0;gap:6px 10px}
body.variant-arena .policy-badge{color:var(--hk-gold);letter-spacing:.14em}
body.variant-arena .policy-tag{
  border:1px solid var(--hk-line);border-radius:999px;color:#ffeccb;
  background:rgba(12,3,5,.45);padding:2px 8px;font-weight:800;
}
body.variant-arena .policy-link{
  border:1px solid var(--hk-line);border-radius:999px;color:var(--hk-gold);
  background:linear-gradient(180deg,rgba(224,169,74,.16),rgba(12,3,5,.35));
  padding:3px 9px;min-height:26px;font-weight:700;
}
body.variant-arena .policy-link:hover{background:var(--hk-gold);color:#2a0a06}
body.variant-arena .policy-note{color:rgba(255,236,203,.7)}

/* ---------- buttons: gold bevel pill ---------- */
body.variant-arena .btn{
  font-family:var(--display);letter-spacing:.08em;border-radius:999px;
  font-size:12px;padding:0 22px;min-height:48px;
}
body.variant-arena .btn-primary{
  background:linear-gradient(180deg,#fff6da 0%,#f8d68f 34%,#e0a94a 62%,#b57a2b 100%);
  color:#2c0a05;border:1px solid #7c470f;
  box-shadow:0 4px 0 #6d3d0d,0 12px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.75);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
body.variant-arena .btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
body.variant-arena .btn-ghost{
  background:linear-gradient(180deg,rgba(90,17,25,.9),rgba(28,7,11,.95));
  color:var(--hk-gold);border:1px solid var(--hk-line);
  box-shadow:inset 0 1px 0 rgba(246,207,133,.16),0 6px 16px rgba(0,0,0,.4);
}
body.variant-arena .btn-ghost:hover{background:linear-gradient(180deg,#6d1620,#320b11);color:#fff6e0}
body.variant-arena .btn-sm{min-height:38px;padding:0 15px;font-size:10px}
body.variant-arena .btn-lg{min-height:54px;padding:0 26px;font-size:13px}

/* ---------- hero: centred poster (logo → framed artwork → gold headline) ---------- */
body.variant-arena .po-hero{
  padding:8px 0 0;overflow:visible;text-align:center;
  background:
    radial-gradient(680px 300px at 50% 4%, rgba(224,169,74,.18), transparent 70%);
}
body.variant-arena .po-hero .wrap{display:flex;flex-direction:column;align-items:center}
body.variant-arena .hero-logo-lockup{
  justify-content:center;align-items:flex-end;margin:0 0 8px;gap:10px;
}
body.variant-arena .hero-brand-logo{
  height:180px;width:180px;max-height:180px;max-width:180px;object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(224,169,74,.28));
}
body.variant-arena .hero-logo-tag{
  border:1px solid var(--hk-line);border-radius:999px;color:var(--hk-gold);
  background:rgba(12,3,5,.6);padding:4px 9px;letter-spacing:.2em;font-size:8px;
}
body.variant-arena .po-kicker{color:rgba(246,207,133,.8);letter-spacing:.2em;font-size:9px;margin-bottom:8px}

/* Framed artwork: double gold rule + warm glow. The base max-height must be
   lifted or object-fit:cover would crop the dragon's head. */
body.variant-arena .po-hero-figure{
  position:relative;width:100%;max-width:640px;margin:0 auto;
  max-height:none;aspect-ratio:960/513;
  border:1px solid var(--hk-line);border-radius:22px;overflow:hidden;
  background:#180608;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.75),
    0 0 0 7px rgba(246,207,133,.08),
    0 26px 60px rgba(0,0,0,.62),
    0 0 90px rgba(224,169,74,.20);
}
body.variant-arena .po-hero-figure::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(246,207,133,.28);
  border-radius:16px;pointer-events:none;
}
body.variant-arena .po-hero-figure img,
body.variant-arena .po-hero-figure picture{display:block;width:100%;height:100%}
body.variant-arena .po-hero-figure img{max-height:none;object-fit:cover;object-position:center}
body.variant-arena .po-title{
  margin:14px 0 0;font-size:clamp(34px,4.4vw,60px);line-height:.94;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:0;background:var(--hk-gold-grad);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(224,169,74,.25));
  max-width:900px;
}
body.variant-arena .po-rule{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;margin:12px auto 0;width:min(420px,80%);
}
body.variant-arena .po-rule span{height:1px;background:linear-gradient(90deg,transparent,var(--hk-gold-2))}
body.variant-arena .po-rule span:nth-child(2){
  height:7px;width:7px;border:1px solid var(--hk-gold-2);background:var(--hk-gold);
  transform:rotate(45deg);border-radius:1px;
}
body.variant-arena .po-rule span:nth-child(3){background:linear-gradient(90deg,var(--hk-gold-2),transparent)}
body.variant-arena .po-hero-grid{
  display:flex;flex-direction:column;align-items:center;gap:12px;margin:12px auto 0;max-width:760px;
}
body.variant-arena .po-deck{
  font-size:14.5px;line-height:1.7;color:var(--hk-muted);max-width:700px;margin:0;
}
/* Actions first: the access buttons stay in the first screen, the explanation
   follows.  Reading order in the HTML is unchanged (deck, then actions). */
body.variant-arena .po-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;order:-1}
body.variant-arena .po-arrow{
  font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hk-gold);text-decoration:none;border-bottom:1px solid var(--hk-line);padding-bottom:2px;
}
body.variant-arena .po-chips{justify-content:center;margin-top:16px}
body.variant-arena .chips span{
  border:1px solid var(--hk-line-soft);border-radius:999px;
  background:rgba(20,5,8,.55);color:rgba(255,236,203,.8);
  font-size:9px;letter-spacing:.04em;padding:4px 9px;
}
body.variant-arena .po-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  width:100%;margin:26px 0 0;padding:11px 16px;
  border-top:1px solid var(--hk-line-soft);border-bottom:1px solid var(--hk-line-soft);
  background:linear-gradient(180deg,rgba(60,13,19,.55),rgba(12,3,5,.45));
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hk-muted);
}
body.variant-arena .po-strip b{color:var(--hk-gold);font-weight:700}

/* ---------- section frame + ornament heads ---------- */
body.variant-arena .section{
  padding:48px 0;border-bottom:1px solid rgba(246,207,133,.12);
  background:radial-gradient(760px 320px at 50% 0%, rgba(140,31,40,.14), transparent 70%);
}
body.variant-arena .sec-head{max-width:720px;margin:0 auto 26px;text-align:center}
body.variant-arena .sec-head h2{
  font-size:clamp(24px,3vw,36px);color:var(--hk-gold);margin:0 0 10px;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
body.variant-arena .sec-head h2::after{
  content:"";display:block;width:64px;height:1px;margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--hk-gold-2),transparent);
}
body.variant-arena .sec-head p{font-size:14px;color:var(--hk-muted)}
body.variant-arena .sec-head.left{text-align:left;margin-left:0}
body.variant-arena .sec-head.left h2::after{margin-left:0;margin-right:auto}

/* ---------- gallery (showcase) ---------- */
body.variant-arena .sec-showcase{
  background:
    radial-gradient(620px 260px at 50% 0%, rgba(224,169,74,.10), transparent 70%);
}
body.variant-arena .h03-tiles{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
body.variant-arena .h03-tile{
  grid-column:span 2;margin:0;padding:8px;border-radius:18px;overflow:hidden;
  background:var(--hk-panel);border:1px solid var(--hk-line);
  box-shadow:var(--hk-frame),var(--hk-glow);
}
body.variant-arena .h03-tile:nth-child(4){grid-column:2 / span 2}
body.variant-arena .h03-tile:nth-child(5){grid-column:4 / span 2}
body.variant-arena .h03-tile img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:12px;background:#160608;
}
body.variant-arena .h03-tile figcaption{
  font-family:var(--display);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hk-gold);text-align:center;padding:9px 2px 3px;
}
body.variant-arena .h03-band{
  margin:20px 0 0;border:1px solid var(--hk-line);border-radius:18px;overflow:hidden;
  background:#160608;box-shadow:var(--hk-frame),var(--hk-glow);
}
body.variant-arena .h03-band img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
body.variant-arena .h03-band figcaption{
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.1em;
  color:var(--hk-muted);padding:10px 14px;text-transform:uppercase;
}

/* ---------- facts ---------- */
body.variant-arena .facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;overflow:hidden;
  border:1px solid var(--hk-line);border-radius:16px;
  background:linear-gradient(180deg,rgba(60,13,19,.6),rgba(12,3,5,.55));
  box-shadow:var(--hk-frame);
}
body.variant-arena .facts div{padding:14px 16px;border-right:1px solid var(--hk-line-soft);border-bottom:1px solid var(--hk-line-soft)}
body.variant-arena .facts div:nth-child(3n){border-right:0}
body.variant-arena .facts span{
  display:block;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(246,207,133,.7);
}
body.variant-arena .facts b{display:block;margin-top:5px;font-family:var(--display);font-size:15px;color:var(--hk-cream);word-break:break-word}

/* ---------- summary / steps / trust / terms / faq ---------- */
body.variant-arena .av-summary{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
body.variant-arena .av-summary p{font-size:14px;line-height:1.75}
body.variant-arena .geo-facts caption{color:var(--hk-gold);letter-spacing:.1em}
body.variant-arena .table-wrap{
  border:1px solid var(--hk-line);border-radius:14px;overflow:hidden;
  background:rgba(12,3,5,.5);box-shadow:var(--hk-frame);
}
body.variant-arena .geo-facts th{
  background:linear-gradient(180deg,rgba(140,31,40,.55),rgba(60,13,19,.5));
  color:var(--hk-gold);font-size:10px;letter-spacing:.04em;
}
body.variant-arena .geo-facts td{color:var(--hk-muted);font-size:11.5px}
body.variant-arena .sec-links a{color:var(--hk-gold);border-bottom:1px solid var(--hk-line-soft);padding-bottom:1px}

body.variant-arena .av-steps{list-style:none;margin:0 auto;padding:0;display:grid;gap:10px;max-width:760px}
body.variant-arena .av-steps li{
  display:grid;grid-template-columns:44px 1fr;grid-template-areas:"num head" "num body";
  gap:0 14px;align-items:start;
  border:1px solid var(--hk-line-soft);border-radius:14px;padding:14px 16px;
  background:var(--hk-panel);box-shadow:var(--hk-frame);
}
body.variant-arena .av-steps li>span{
  grid-area:num;font-family:var(--display);font-size:16px;color:var(--hk-gold-2);
  border:1px solid var(--hk-line-soft);border-radius:10px;text-align:center;padding:3px 0;height:34px;
}
body.variant-arena .av-steps h3{grid-area:head;font-size:14px;margin:0 0 3px;color:var(--hk-cream)}
body.variant-arena .av-steps p{grid-area:body;margin:0;font-size:12.5px;color:var(--hk-muted)}

body.variant-arena .trust-list{list-style:none;padding:0;margin:0 auto;display:grid;gap:10px;max-width:820px}
body.variant-arena .trust-list li{
  display:grid;grid-template-columns:44px 1fr;grid-template-areas:"num body";
  gap:0 14px;align-items:start;
  border:1px solid var(--hk-line-soft);border-radius:14px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(45,10,15,.8),rgba(14,4,6,.7));
}
body.variant-arena .trust-list li span{
  grid-area:num;font-family:var(--display);font-size:14px;color:var(--hk-gold-2);text-align:center;
}
body.variant-arena .trust-list li p{grid-area:body;margin:0;font-size:13px;color:var(--hk-muted)}

body.variant-arena .terms-box{
  border:1px solid var(--hk-line);border-radius:16px;padding:18px;
  background:linear-gradient(180deg,rgba(45,10,15,.72),rgba(12,3,5,.6));
  box-shadow:var(--hk-frame);
}
body.variant-arena .terms-label{color:var(--hk-gold);letter-spacing:.16em}
body.variant-arena .terms-derived span{border-style:dashed;opacity:.95}
body.variant-arena .terms-note{color:rgba(255,236,203,.6)}

body.variant-arena .av-faq{max-width:860px;margin:0 auto;display:grid;gap:10px}
body.variant-arena .faq-item{
  border:1px solid var(--hk-line-soft);border-left:2px solid var(--hk-gold-2);
  border-radius:12px;padding:15px 18px;
  background:linear-gradient(180deg,rgba(45,10,15,.7),rgba(14,4,6,.6));
}
body.variant-arena .faq-q{font-size:14.5px;color:var(--hk-cream);letter-spacing:.01em}
body.variant-arena .faq-a{font-size:13px;line-height:1.7;color:var(--hk-muted)}

/* ---------- route cards / cards ---------- */
body.variant-arena .route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
body.variant-arena .route-card{
  border:1px solid var(--hk-line);border-radius:16px;padding:20px;
  background:var(--hk-panel);box-shadow:6px 6px 0 rgba(140,31,40,.35);
}
body.variant-arena .route-card.primary{
  background:var(--hk-panel-2);border-color:var(--hk-gold-2);
  box-shadow:6px 6px 0 rgba(224,169,74,.5);
}
body.variant-arena .route-no{color:rgba(246,207,133,.7);letter-spacing:.14em}
body.variant-arena .route-card h3{color:var(--hk-gold);font-size:22px;margin:12px 0 6px}
body.variant-arena .route-card p{font-size:12px;color:var(--hk-muted)}
body.variant-arena .route-link{border-top:1px solid var(--hk-line-soft);color:var(--hk-gold);letter-spacing:.08em}
body.variant-arena .card{
  border:1px solid var(--hk-line-soft);border-radius:14px;
  background:linear-gradient(180deg,rgba(45,10,15,.72),rgba(12,3,5,.6));
  box-shadow:var(--hk-frame);
}
body.variant-arena .card .label{color:rgba(246,207,133,.75)}
body.variant-arena .empty{
  border:1px dashed var(--hk-line);border-radius:16px;
  background:rgba(20,5,8,.5);
}
body.variant-arena .empty h2{font-size:24px;color:var(--hk-gold)}
body.variant-arena .empty p{color:var(--hk-muted)}
body.variant-arena .callout{
  border-left:2px solid var(--hk-gold-2);background:rgba(45,10,15,.5);
  border-radius:0 12px 12px 0;color:var(--hk-muted);
}

/* ---------- inner pages ---------- */
body.variant-arena .variant-page-hero{
  padding:44px 0 34px;text-align:center;
  border-bottom:1px solid var(--hk-line-soft);
  background:
    radial-gradient(680px 300px at 50% -10%, rgba(224,169,74,.20), transparent 70%),
    linear-gradient(180deg,rgba(60,13,19,.55),transparent 85%);
}
body.variant-arena .variant-page-hero h1{
  font-size:clamp(30px,4vw,52px);line-height:1;color:var(--hk-gold);
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
body.variant-arena .variant-page-hero .deck{margin:14px auto 0;max-width:680px;font-size:15px;color:var(--hk-muted)}
body.variant-arena .variant-page-hero .hero-actions{justify-content:center;margin-top:20px}
body.variant-arena .variant-page-hero .chips{justify-content:center}
body.variant-arena .variant-prose h2{
  color:var(--hk-gold);font-size:26px;margin:32px 0 10px;letter-spacing:.02em;
}
body.variant-arena .variant-prose p,
body.variant-arena .variant-prose li{color:var(--hk-muted);font-size:14.5px;line-height:1.8}
body.variant-arena .variant-prose h2::after{
  content:"";display:block;width:52px;height:1px;margin-top:10px;
  background:linear-gradient(90deg,var(--hk-gold-2),transparent);
}
body.variant-arena .split{gap:30px}
body.variant-arena .aside .card{padding:16px}
body.variant-arena .h2{color:var(--hk-gold);font-size:20px;margin:26px 0 10px}
body.variant-arena table{font-size:12px}
body.variant-arena th{
  background:linear-gradient(180deg,rgba(140,31,40,.6),rgba(60,13,19,.5));
  color:var(--hk-gold);letter-spacing:.08em;
}
body.variant-arena td{color:var(--hk-muted);border-bottom:1px solid var(--hk-line-soft)}

/* ---------- footer ---------- */
body.variant-arena .av-footer{
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(224,169,74,.12), transparent 70%),
    linear-gradient(180deg,#17060a 0%,#0a0203 100%);
  border-top:1px solid var(--hk-line);
}
body.variant-arena .av-footer-cta{
  background:linear-gradient(180deg,#f8d68f,#dfa748 55%,#b97f2c);
  color:#2c0a05;border-bottom:1px solid rgba(0,0,0,.5);
}
body.variant-arena .av-footer-cta p{color:#33100a;letter-spacing:.06em}
body.variant-arena .av-footer-cta .btn-primary{
  background:linear-gradient(180deg,#2c0a0f,#150407);color:var(--hk-gold);border-color:#0d0203;
  box-shadow:0 4px 0 #0a0102;text-shadow:none;
}
body.variant-arena .av-footer-cta .btn-ghost{
  background:transparent;color:#33100a;border-color:rgba(44,10,5,.5);box-shadow:none;
}
body.variant-arena .av-footer-brand strong{
  font-family:var(--display);font-size:24px;letter-spacing:.06em;color:var(--hk-gold);
}
body.variant-arena .av-footer-brand p{color:var(--hk-muted);font-size:11.5px;line-height:1.7}
body.variant-arena .av-footer-col h3{color:rgba(246,207,133,.8);letter-spacing:.16em}
body.variant-arena .av-footer-col a{color:var(--hk-muted);font-size:10.5px}
body.variant-arena .av-footer-col a:hover{color:var(--hk-gold)}
body.variant-arena .av-footer-bottom{
  border-top:1px solid var(--hk-line-soft);color:rgba(195,171,154,.8);
}
body.variant-arena .age{border-color:var(--hk-line);color:var(--hk-gold)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  body.variant-arena .av-summary{grid-template-columns:1fr}
  body.variant-arena .route-grid{grid-template-columns:1fr}
  body.variant-arena .h03-tiles{grid-template-columns:repeat(2,1fr)}
  body.variant-arena .h03-tile,
  body.variant-arena .h03-tile:nth-child(4),
  body.variant-arena .h03-tile:nth-child(5){grid-column:auto}
  body.variant-arena .facts{grid-template-columns:1fr 1fr}
  body.variant-arena .facts div:nth-child(3n){border-right:1px solid var(--hk-line-soft)}
  body.variant-arena .facts div:nth-child(2n){border-right:0}
  body.variant-arena .ed-nav{display:none}
  body.variant-arena .ed-nav.is-open{display:flex}
}
@media (max-width:700px){
  body.variant-arena{padding-bottom:70px}
  body.variant-arena .wrap{width:calc(100% - 28px)}
  body.variant-arena .ed-masthead{min-height:62px;gap:10px}
  body.variant-arena .ed-brand-logo{height:44px;width:44px;max-width:44px}
  body.variant-arena .ed-rule{font-size:7px;letter-spacing:.14em}
  body.variant-arena .policy-strip{font-size:8px}
  body.variant-arena .policy-strip-inner{padding:5px 0;gap:4px 6px}
  body.variant-arena .policy-note{display:none}
  body.variant-arena .policy-link{min-height:24px;padding:3px 8px}
  body.variant-arena .po-hero{padding:16px 0 0}
  body.variant-arena .hero-brand-logo{height:140px;width:140px;max-height:140px;max-width:140px}
  body.variant-arena .hero-logo-tag{display:none}
  body.variant-arena .po-kicker{font-size:8px;margin-bottom:10px}
  body.variant-arena .po-hero-figure{max-width:100%;border-radius:16px}
  body.variant-arena .po-hero-figure::after{inset:5px;border-radius:12px}
  body.variant-arena .po-title{font-size:clamp(30px,9vw,42px);margin-top:16px}
  body.variant-arena .po-rule{margin-top:12px;width:70%}
  body.variant-arena .po-hero-grid{gap:14px;margin-top:12px}
  body.variant-arena .po-deck{font-size:14px;line-height:1.65}
  body.variant-arena .po-hero-actions{width:100%}
  body.variant-arena .po-hero-actions .btn{flex:1 1 46%}
  body.variant-arena .po-strip{font-size:8px;gap:6px 12px;padding:9px 10px;margin-top:18px}
  body.variant-arena .section{padding:34px 0}
  body.variant-arena .h03-tiles{gap:9px}
  body.variant-arena .h03-tile{padding:6px;border-radius:13px}
  body.variant-arena .h03-tile figcaption{font-size:8px;padding:6px 1px 2px}
  body.variant-arena .facts{grid-template-columns:1fr}
  body.variant-arena .facts div{border-right:0!important}
  body.variant-arena .av-steps li,
  body.variant-arena .trust-list li{grid-template-columns:36px 1fr;gap:10px;padding:12px 13px}
  body.variant-arena .variant-page-hero{padding:28px 0 24px}
  body.variant-arena .variant-page-hero h1{font-size:clamp(26px,7.4vw,38px)}
  body.variant-arena .av-footer-grid{grid-template-columns:1fr 1fr;gap:18px}
  body.variant-arena .av-footer-cta .wrap{flex-direction:column;align-items:flex-start;gap:10px}

  /* Sticky access bar: base hides .bottom-cta for variant sites. */
  body.variant-arena .bottom-cta{
    display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:70;
    gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(22,6,9,.97),rgba(10,2,3,.99));
    border-top:1px solid var(--hk-line);
    box-shadow:0 -10px 30px rgba(0,0,0,.6);
  }
  body.variant-arena .bottom-cta .btn{flex:1;min-height:46px;font-size:11px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  body.variant-arena *{transition:none!important;animation:none!important}
}