/* 8svip · naga-giok skin
   Reference-led visual language for the 8svip official site (8svip.online).

   Borrowed from the brand's own landing poster and H5 launcher, 8svip only:
   jade-teal water field, gold lacquer frames, deep-red ribbon accents, mahjong
   tiles and the golden dragon pair.  No reference copy, no third-party game
   name, no bonus/win number and no other brand's artwork is used.

   Composition notes
   - masthead: centred official logo (56px) on a gold-bordered jade plaque
   - hero: split, 200px hero logo lockup left, gold-framed dragon poster right
   - showcase: mosaic of five sanctioned artwork crops
   - mobile: image-first, fixed H5/APK bar with safe-area padding
*/

:root{
  --jade-950:#03211e; --jade-900:#062f2b; --jade-850:#07362f; --jade-800:#0a3f37;
  --jade-700:#0e4f45; --jade-600:#136a58;
  --gold:#f3c64e; --gold-2:#ffd76a; --gold-3:#c98f1a; --gold-deep:#8a5a0b;
  --red:#a8231b; --red-2:#c93028; --red-deep:#5c110d;
  --cream:#fff6e0; --cream-2:#f2e6c8; --muted:#c3d9c9; --ink:#10241f;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --bg:#062f2b; --bg2:#052622; --panel:#0a3f37; --text:#fff6e0; --muted:#c3d9c9;
  --accent:#d9a521; --accent2:#ffd76a; --line:rgba(255,215,106,.30);
  --display:"Arial Black",Impact,"Franklin Gothic Heavy","Helvetica Neue",sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:14px;
}

/* ---------- canvas ---------- */
body.variant-appfirst{
  background:
    radial-gradient(900px 520px at 82% -6%,rgba(243,198,78,.14),rgba(243,198,78,0) 62%),
    radial-gradient(760px 460px at 4% 8%,rgba(19,106,88,.42),rgba(19,106,88,0) 64%),
    linear-gradient(180deg,#083b33 0%,#062f2b 34%,#052a26 66%,#03211e 100%);
  background-color:#052a26;
  color:var(--cream);
  overflow-x:hidden;
}
body.variant-appfirst::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.22;
  background-image:url("../assets/bg-giok-1440.webp");
  background-size:cover;background-position:center;
  mix-blend-mode:soft-light;
}
body.variant-appfirst::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 16% 22%,rgba(255,215,106,.55) 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 74% 64%,rgba(255,246,224,.42) 0 1px,transparent 1.7px);
  background-size:260px 260px,340px 340px;
}
body.variant-appfirst>header,
body.variant-appfirst>main,
body.variant-appfirst>footer,
body.variant-appfirst>.bottom-cta{position:relative;z-index:1}
body.variant-appfirst>.skip{position:absolute!important}
body.variant-appfirst .wrap{width:min(1160px,100% - 40px)}
body.variant-appfirst ::selection{background:var(--gold);color:var(--jade-950)}
body.variant-appfirst a:focus-visible,
body.variant-appfirst button:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px}

/* ---------- masthead ---------- */
body.variant-appfirst .ed-header{
  position:sticky;top:0;z-index:80;
  background:linear-gradient(180deg,rgba(7,54,47,.97),rgba(5,38,34,.95));
  border-bottom:3px solid var(--gold-3);
  box-shadow:0 10px 30px rgba(1,12,11,.45),inset 0 -1px 0 rgba(255,215,106,.28);
}
body.variant-appfirst .ed-masthead{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  min-height:78px;padding:6px 0;
}
body.variant-appfirst .ed-nav{order:1;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;justify-content:flex-start}
body.variant-appfirst .ed-nav a{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-2);text-decoration:none;border-bottom:2px solid transparent;padding:7px 0;
}
body.variant-appfirst .ed-nav a:hover,
body.variant-appfirst .ed-nav a[aria-current="page"]{color:var(--gold-2);border-bottom-color:var(--gold)}
body.variant-appfirst .ed-wordmark{
  order:2;justify-self:center;display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#0d4a40,#082f29);
  border:2px solid var(--gold);border-radius:14px;padding:4px 14px;line-height:0;
  box-shadow:0 5px 0 rgba(0,0,0,.35),0 0 26px rgba(243,198,78,.18);
}
body.variant-appfirst .ed-wordmark::after{
  content:"OFFICIAL";font-family:var(--mono);font-size:8px;letter-spacing:.18em;
  color:var(--gold-2);line-height:1;padding-left:10px;border-left:1px solid rgba(255,215,106,.35);
}
body.variant-appfirst .ed-brand-logo{
  height:52px;width:52px;max-width:52px;max-height:52px;object-fit:contain;
  border-radius:10px;background:var(--jade-950);padding:1px;
}
body.variant-appfirst .ed-meta{
  order:3;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.1em;
}
body.variant-appfirst .ed-meta>span{text-transform:uppercase}
body.variant-appfirst .ed-meta .menu-btn{
  background:rgba(243,198,78,.1);border:1px solid rgba(255,215,106,.55);color:var(--gold-2);
  height:38px;border-radius:8px;font-size:9px;
}
body.variant-appfirst .ed-rule{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border-top:1px solid rgba(255,215,106,.18);
  padding:6px 0 7px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
body.variant-appfirst .ed-rule span:first-child::before{content:"◆ ";color:var(--gold)}

/* ---------- policy strip ---------- */
body.variant-appfirst .policy-strip{
  background:linear-gradient(90deg,#5b110c 0%,#43100b 55%,#2f0d09 100%);
  border-bottom:1px solid rgba(255,215,106,.45);color:var(--cream);
}
body.variant-appfirst .policy-strip-inner{padding:7px 0;gap:8px;font-size:9px;letter-spacing:.08em}
body.variant-appfirst .policy-badge{color:var(--gold-2);font-weight:900}
body.variant-appfirst .policy-tag{
  background:var(--gold);border:1px solid var(--gold-2);color:#3a2600;font-weight:900;
  border-radius:3px;padding:2px 7px;
}
body.variant-appfirst .policy-link{
  color:var(--gold-2);border:1px solid rgba(255,215,106,.5);border-radius:4px;text-decoration:none;
  padding:3px 8px;min-height:24px;
}
body.variant-appfirst .policy-link:hover{background:var(--gold);color:#3a2600}
body.variant-appfirst .policy-note{color:#e7c9b8;font-size:8.5px}

/* ---------- hero (split poster) ---------- */
body.variant-appfirst .ed-hero{
  position:relative;padding:34px 0 46px;overflow:hidden;
  border-bottom:2px solid rgba(255,215,106,.28);
  background:
    radial-gradient(620px 360px at 78% 6%,rgba(243,198,78,.16),rgba(243,198,78,0) 66%),
    linear-gradient(180deg,rgba(19,106,88,.22),rgba(6,47,43,0) 72%);
}
body.variant-appfirst .ed-hero::before{
  content:"";position:absolute;left:-90px;top:-140px;width:560px;height:560px;
  border:2px solid rgba(255,215,106,.18);border-radius:50% 50% 44% 46%;
  pointer-events:none;
}
body.variant-appfirst .ed-hero::after{
  content:"";position:absolute;right:-120px;bottom:-180px;width:480px;height:480px;
  border:2px dashed rgba(255,215,106,.16);border-radius:50%;pointer-events:none;
}
body.variant-appfirst .ed-hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center;
  position:relative;z-index:1;
}
body.variant-appfirst .ed-hero-copy{min-width:0}
body.variant-appfirst .hero-logo-lockup{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,#0e5145,#093830);
  border:2px solid var(--gold);border-radius:20px;padding:9px 15px;margin:0 0 18px;
  box-shadow:0 6px 0 rgba(0,0,0,.32),0 16px 34px rgba(0,0,0,.32),0 0 30px rgba(243,198,78,.14);
}
body.variant-appfirst .hero-brand-logo{
  width:200px;height:200px;max-width:200px;max-height:200px;object-fit:contain;
  border-radius:16px;display:block;
}
body.variant-appfirst .hero-logo-tag{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;font-weight:800;
  color:#3a2600;background:var(--gold);border:1px solid var(--gold-2);
  padding:5px 8px;border-radius:4px;
}
body.variant-appfirst .ed-kicker{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 10px;
}
body.variant-appfirst .ed-hero h1{
  border-top:0;padding-top:0;margin:0;color:var(--gold-2);
  font-size:clamp(40px,5.4vw,70px);line-height:.94;letter-spacing:-.03em;
  text-shadow:0 3px 0 #5c110d,0 8px 26px rgba(0,0,0,.4);
}
body.variant-appfirst .ed-hero h1::after{
  content:"";display:block;width:96px;height:6px;margin-top:15px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),#fff0b8 55%,var(--gold-3));
}
body.variant-appfirst .ed-deck{
  font-size:15.5px;line-height:1.72;color:var(--cream-2);max-width:600px;margin:16px 0 0;
}
body.variant-appfirst .ed-chips span{
  background:rgba(255,215,106,.08);border-color:rgba(255,215,106,.34);color:var(--cream-2);
}
body.variant-appfirst .ed-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
body.variant-appfirst .ed-link-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 26px;border-radius:12px;text-decoration:none;
  background:linear-gradient(180deg,#ffe58a,#ffd24a 46%,#e7a91b);
  color:#3a1e00;font-family:var(--display);font-weight:900;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;border:0;
  box-shadow:0 5px 0 var(--gold-deep),0 16px 30px rgba(0,0,0,.34);
  transition:transform .15s ease,filter .15s ease;
}
body.variant-appfirst .ed-link-cta:hover{transform:translateY(-2px);filter:brightness(1.05);color:#3a1e00}
body.variant-appfirst .ed-link-cta.muted{
  background:linear-gradient(180deg,#c9332a,#a8231b 55%,#7e1611);
  color:var(--cream);border:2px solid var(--gold);
  box-shadow:0 5px 0 #4c0d09,0 16px 30px rgba(0,0,0,.34);
}
body.variant-appfirst .ed-link-cta.muted:hover{color:#fff;filter:brightness(1.08)}
body.variant-appfirst .ed-figure{
  margin:0;border:0;padding:0;position:relative;
  background:linear-gradient(180deg,#0d4a40,#072e28);
  border-radius:22px;padding:10px 10px 0;
  border:2px solid var(--gold);outline:1px solid rgba(255,215,106,.35);outline-offset:4px;
  box-shadow:0 8px 0 rgba(0,0,0,.3),0 30px 60px rgba(0,0,0,.42),0 0 46px rgba(243,198,78,.12);
}
body.variant-appfirst .ed-figure::before,
body.variant-appfirst .ed-figure::after{
  content:"";position:absolute;width:34px;height:34px;pointer-events:none;z-index:2;
}
body.variant-appfirst .ed-figure::before{
  left:6px;top:6px;border-left:4px solid var(--gold-2);border-top:4px solid var(--gold-2);
  border-radius:8px 0 0 0;
}
body.variant-appfirst .ed-figure::after{
  right:6px;bottom:34px;border-right:4px solid var(--gold-2);border-bottom:4px solid var(--gold-2);
  border-radius:0 0 8px 0;
}
body.variant-appfirst .ed-figure img{
  width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:cover;
  display:block;border-radius:14px;filter:saturate(1.04) contrast(1.02);
}
body.variant-appfirst .ed-figure figcaption{
  font-family:var(--mono);font-size:9px;line-height:1.6;color:var(--cream-2);
  border-top:1px solid rgba(255,215,106,.3);margin-top:10px;padding:9px 4px 11px;
}
body.variant-appfirst .ed-figure figcaption span{display:block;color:var(--gold-2);margin-top:3px}

/* ---------- section shells ---------- */
body.variant-appfirst .section{padding:48px 0;border-bottom:1px solid rgba(255,215,106,.2)}
body.variant-appfirst .sec-head{max-width:780px;margin:0 0 24px;text-align:left}
body.variant-appfirst .sec-head .kicker{
  color:var(--gold-2);font-size:9px;letter-spacing:.18em;
}
body.variant-appfirst .sec-head .kicker::before{content:"◆ ";color:var(--gold-3)}
body.variant-appfirst .sec-head h2{
  color:var(--gold-2);font-size:clamp(24px,2.9vw,36px);letter-spacing:-.02em;margin:0 0 9px;
  text-shadow:0 2px 0 rgba(92,17,13,.55);
}
body.variant-appfirst .sec-head p{color:var(--cream-2);font-size:13.5px;line-height:1.72;max-width:700px;margin:0}
body.variant-appfirst .section-note{text-align:left;font-size:10.5px;color:var(--muted);margin-top:16px}
body.variant-appfirst .section-note a{color:var(--gold-2)}

/* ---------- showcase mosaic ---------- */
body.variant-appfirst .sec-showcase{
  padding-top:36px;border-top:2px solid rgba(255,215,106,.22);
  background:linear-gradient(180deg,rgba(19,106,88,.14),rgba(6,47,43,0) 70%);
}
body.variant-appfirst .h03-tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
body.variant-appfirst .h03-tile{
  grid-column:auto;margin:0;position:relative;
  background:linear-gradient(180deg,#0d4a40,#072e28);
  border:2px solid rgba(255,215,106,.55);border-radius:16px;padding:7px 7px 4px;
  box-shadow:0 6px 0 rgba(0,0,0,.28),0 18px 34px rgba(0,0,0,.28);
  transition:transform .16s ease,border-color .16s ease;
}
body.variant-appfirst .h03-tile:hover{transform:translateY(-3px);border-color:var(--gold-2)}
body.variant-appfirst .h03-tile img{
  width:100%;height:210px;object-fit:cover;border-radius:10px;display:block;
}
body.variant-appfirst .h03-tile figcaption{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);padding:9px 3px 5px;font-weight:800;
}
body.variant-appfirst .h03-tile figcaption::before{content:"◆ ";color:var(--gold-3)}

/* ---------- summary ---------- */
body.variant-appfirst .ap-summary{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:start}
body.variant-appfirst .ap-card{
  background:linear-gradient(180deg,rgba(13,74,64,.9),rgba(7,46,40,.92));
  border:1px solid rgba(255,215,106,.38);border-radius:18px;padding:22px 24px;
  position:relative;box-shadow:0 16px 34px rgba(0,0,0,.24);
}
body.variant-appfirst .ap-card::before{
  content:"";position:absolute;left:24px;top:0;width:64px;height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--gold),#fff0b8);
}
body.variant-appfirst .ap-card p{color:var(--cream-2);font-size:14px;line-height:1.78;margin:0 0 12px}
body.variant-appfirst .ap-card p:last-child{margin-bottom:0}
body.variant-appfirst .ap-card a{color:var(--gold-2);font-weight:800;text-decoration:none;border-bottom:2px solid rgba(255,215,106,.3)}
body.variant-appfirst .ap-fact-chips{display:grid;gap:8px}
body.variant-appfirst .ap-fact-chips span{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  background:rgba(255,215,106,.07);border:1px solid rgba(255,215,106,.28);
  border-radius:11px;padding:9px 12px;font-size:10.5px;color:var(--cream-2);
}
body.variant-appfirst .ap-fact-chips b{
  color:var(--gold-2);font-weight:800;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- routes ---------- */
body.variant-appfirst .route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
body.variant-appfirst .route-card{
  position:relative;display:flex;flex-direction:column;gap:8px;min-height:190px;
  background:linear-gradient(180deg,rgba(13,74,64,.9),rgba(7,46,40,.94));
  border:1px solid rgba(255,215,106,.35);border-radius:16px;padding:20px 20px 16px;
  text-decoration:none;color:var(--cream);
  box-shadow:0 6px 0 rgba(0,0,0,.24),0 16px 30px rgba(0,0,0,.22);
  transition:transform .16s ease,border-color .16s ease;
}
body.variant-appfirst .route-card::after{
  content:"";position:absolute;left:20px;right:20px;top:0;height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--gold),#fff0b8,var(--gold-3));
}
body.variant-appfirst .route-card:hover{transform:translateY(-3px);border-color:var(--gold-2);color:var(--cream)}
body.variant-appfirst .route-card .route-no{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--gold-2);
}
body.variant-appfirst .route-card h3{
  color:var(--gold-2);font-size:19px;line-height:1.12;margin:0;letter-spacing:.01em;
}
body.variant-appfirst .route-card p{color:var(--cream-2);font-size:12.5px;line-height:1.6;margin:0;flex:1}
body.variant-appfirst .route-card .route-link{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);border-top:1px dashed rgba(255,215,106,.3);padding-top:10px;
}
body.variant-appfirst .route-card.primary{
  background:linear-gradient(180deg,#0f5a4b,#0a3f37);
  border-color:var(--gold);
  box-shadow:0 6px 0 rgba(0,0,0,.28),0 20px 38px rgba(0,0,0,.28),0 0 30px rgba(243,198,78,.14);
}

/* ---------- facts ---------- */
body.variant-appfirst .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
body.variant-appfirst .facts div{
  background:rgba(255,215,106,.055);border:1px solid rgba(255,215,106,.26);
  border-radius:12px;padding:12px 14px;
}
body.variant-appfirst .facts span{
  display:block;font-family:var(--mono);font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
body.variant-appfirst .facts b{color:var(--gold-2);font-size:13px;font-weight:800;line-height:1.4;word-break:break-word}

/* ---------- activities ---------- */
body.variant-appfirst .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
body.variant-appfirst .promo-card{
  background:linear-gradient(180deg,rgba(13,74,64,.86),rgba(7,46,40,.92));
  border:1px solid rgba(255,215,106,.28);border-left:4px solid var(--gold-3);
  border-radius:12px;padding:14px 16px;box-shadow:0 12px 26px rgba(0,0,0,.2);
}
body.variant-appfirst .promo-card .label{
  font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 6px;
}
body.variant-appfirst .promo-card h3{font-size:14px;color:var(--cream);line-height:1.3;margin:0 0 6px}
body.variant-appfirst .promo-card p{font-size:11.5px;line-height:1.6;color:var(--muted);margin:0}
body.variant-appfirst .empty{
  border:1px dashed rgba(255,215,106,.35);border-radius:14px;padding:22px;text-align:center;
}

/* ---------- steps / trust ---------- */
body.variant-appfirst .ap-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
body.variant-appfirst .ap-steps li{
  display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  border:1px solid rgba(255,215,106,.28);border-radius:14px;
  background:linear-gradient(180deg,rgba(13,74,64,.8),rgba(7,46,40,.86));
  padding:13px 16px;
}
body.variant-appfirst .ap-tick{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#ffe58a,var(--gold) 55%,var(--gold-3));
  box-shadow:0 3px 0 var(--gold-deep);position:relative;
}
body.variant-appfirst .ap-tick::after{
  content:"";width:9px;height:5px;border-left:2.5px solid #3a1e00;border-bottom:2.5px solid #3a1e00;
  transform:rotate(-45deg) translate(1px,-1px);
}
body.variant-appfirst .ap-steps h3{font-size:14px;color:var(--gold-2);margin:0 0 3px}
body.variant-appfirst .ap-steps p{font-size:12px;color:var(--cream-2);margin:0;line-height:1.6}
body.variant-appfirst .trust-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
body.variant-appfirst .trust-list li{
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
  border-bottom:1px solid rgba(255,215,106,.18);padding:10px 0;
}
body.variant-appfirst .trust-list li>span{
  font-family:var(--mono);font-size:10px;color:var(--gold-2);letter-spacing:.1em;
}
body.variant-appfirst .trust-list p{font-size:13px;color:var(--cream-2);line-height:1.65;margin:0}

/* ---------- terms / chips ---------- */
body.variant-appfirst .terms-box{
  border:1px solid rgba(255,215,106,.28);border-radius:14px;padding:16px 18px;
  background:rgba(255,215,106,.045);
}
body.variant-appfirst .terms-label{
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 6px;
}
body.variant-appfirst .terms-label + .chips{margin-top:0}
body.variant-appfirst .chips span{
  background:rgba(255,215,106,.07);border-color:rgba(255,215,106,.3);color:var(--cream-2);
}
body.variant-appfirst .edition-note{
  margin-top:12px;border-top:1px dashed rgba(255,215,106,.3);padding-top:10px;
}
body.variant-appfirst .edition-note p{font-size:11.5px;color:var(--muted);line-height:1.6;margin:0}

/* ---------- FAQ ---------- */
body.variant-appfirst .ap-faq{display:grid;gap:9px}
body.variant-appfirst .ap-faq article{
  display:grid;grid-template-columns:38px 1fr;gap:12px;
  border:1px solid rgba(255,215,106,.26);border-radius:14px;padding:13px 16px;
  background:linear-gradient(180deg,rgba(13,74,64,.78),rgba(7,46,40,.86));
}
body.variant-appfirst .ap-faq>article>span{
  font-family:var(--mono);font-size:10px;color:var(--gold-2);letter-spacing:.08em;padding-top:2px;
}
body.variant-appfirst .ap-faq h3{font-size:13.5px;color:var(--gold-2);margin:0 0 4px;line-height:1.35}
body.variant-appfirst .ap-faq p{font-size:12px;color:var(--cream-2);margin:0;line-height:1.62}

/* ---------- generic content pages ---------- */
body.variant-appfirst .variant-page-hero{
  padding:42px 0 30px;border-bottom:2px solid rgba(255,215,106,.24);
  background:radial-gradient(640px 320px at 12% 0%,rgba(243,198,78,.13),transparent 62%);
}
body.variant-appfirst .variant-page-hero h1{
  color:var(--gold-2);text-shadow:0 3px 0 rgba(92,17,13,.6);
  font-size:clamp(34px,4.2vw,50px);max-width:1000px;margin:0 auto;text-wrap:balance;
}
body.variant-appfirst .variant-page-hero .eyebrow{color:var(--gold-2)}
body.variant-appfirst .variant-page-hero .deck{color:var(--cream-2);max-width:760px}
body.variant-appfirst .variant-page-hero .hero-actions{justify-content:center}
body.variant-appfirst .variant-page-hero .chips{justify-content:center}
body.variant-appfirst .variant-page-hero .eyebrow{font-size:8.5px;letter-spacing:.14em;max-width:900px;margin-left:auto;margin-right:auto}
body.variant-appfirst .variant-prose h2{
  color:var(--gold-2);font-size:clamp(20px,2.6vw,30px);margin:26px 0 10px;
  border-top:1px solid rgba(255,215,106,.28);padding-top:12px;
}
body.variant-appfirst .variant-prose p,
body.variant-appfirst .variant-prose li{
  color:var(--cream-2);font-size:14px;line-height:1.8;
}
body.variant-appfirst .variant-prose li::marker{color:var(--gold)}
body.variant-appfirst .table-wrap{border:1px solid rgba(255,215,106,.26);border-radius:12px;overflow:auto}
body.variant-appfirst table{width:100%;border-collapse:collapse;font-size:12px}
body.variant-appfirst th{
  background:rgba(243,198,78,.14);color:var(--gold-2);font-family:var(--mono);
  font-size:8px;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:9px 11px;
}
body.variant-appfirst td{
  border-top:1px solid rgba(255,215,106,.16);padding:9px 11px;color:var(--cream-2);vertical-align:top;
}

/* ---------- footer ---------- */
body.variant-appfirst .av-footer{
  background:linear-gradient(180deg,#072e28,#03211e);border-top:3px solid var(--gold-3);
}
body.variant-appfirst .av-footer-cta{
  border-bottom:1px solid rgba(255,215,106,.24);
  background:
    linear-gradient(180deg,rgba(7,46,40,.9),rgba(3,33,30,.96)),
    url("../assets/bg-langit-1200.webp") center 34%/cover no-repeat,
    radial-gradient(600px 200px at 20% 0%,rgba(243,198,78,.12),transparent 65%);
}
body.variant-appfirst .av-footer-cta p{color:var(--cream-2);font-size:13px}
body.variant-appfirst .av-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;padding:34px 0 20px}
body.variant-appfirst .av-footer-brand p{color:var(--muted);font-size:11.5px;line-height:1.7;max-width:340px}
body.variant-appfirst .av-footer-col h3{
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 8px;
}
body.variant-appfirst .av-footer-col a{
  display:block;color:var(--cream-2);font-size:11.5px;text-decoration:none;padding:3px 0;
}
body.variant-appfirst .av-footer-col a:hover{color:var(--gold-2)}
body.variant-appfirst .av-footer-brand img{max-height:64px;width:auto;margin-bottom:10px}
body.variant-appfirst .av-footer-bottom{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(255,215,106,.22);padding:12px 0 22px;
  font-size:9px;color:var(--muted);
}
body.variant-appfirst .age{
  display:inline-block;background:var(--gold);color:#3a1e00;font-weight:900;
  border-radius:3px;padding:0 5px;margin-right:6px;font-size:9px;
}

/* ---------- shared buttons (footer, activity, page CTAs) ---------- */
body.variant-appfirst .btn{min-height:48px;border-radius:11px;font-size:11.5px;letter-spacing:.05em}
body.variant-appfirst .btn-primary{
  background:linear-gradient(180deg,#ffe58a,#ffd24a 46%,#e7a91b);color:#3a1e00;border:0;
  box-shadow:0 4px 0 var(--gold-deep);font-weight:900;
}
body.variant-appfirst .btn-primary:hover{color:#3a1e00;filter:brightness(1.05)}
body.variant-appfirst .btn-ghost{
  background:linear-gradient(180deg,#c9332a,#a8231b 55%,#7e1611);color:var(--cream);
  border:2px solid var(--gold);box-shadow:0 4px 0 #4c0d09;font-weight:900;
}
body.variant-appfirst .btn-ghost:hover{color:#fff;filter:brightness(1.08)}
body.variant-appfirst .av-footer-cta .btn{min-height:46px}

/* ---------- mobile CTA bar ---------- */
body.variant-appfirst .bottom-cta{display:none}
@media (max-width:700px){
  body.variant-appfirst{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  body.variant-appfirst .bottom-cta{
    display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:95;gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(5,38,34,.97),rgba(3,33,30,.99));
    border-top:2px solid var(--gold-3);
    box-shadow:0 -12px 30px rgba(0,0,0,.45);
  }
  body.variant-appfirst .bottom-cta .btn{
    flex:1;min-height:52px;font-size:12px;border-radius:11px;letter-spacing:.04em;
    text-transform:none;
  }
  body.variant-appfirst .bottom-cta .btn-primary{
    background:linear-gradient(180deg,#ffe58a,#ffd24a 46%,#e7a91b);color:#3a1e00;
    border:0;box-shadow:0 4px 0 var(--gold-deep);font-weight:900;
  }
  body.variant-appfirst .bottom-cta .btn-ghost{
    background:linear-gradient(180deg,#c9332a,#a8231b 55%,#7e1611);color:var(--cream);
    border:2px solid var(--gold);box-shadow:0 4px 0 #4c0d09;font-weight:900;
  }
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  body.variant-appfirst .ed-hero-grid{gap:26px}
  body.variant-appfirst .facts{grid-template-columns:repeat(2,1fr)}
  body.variant-appfirst .card-grid{grid-template-columns:repeat(2,1fr)}
  body.variant-appfirst .av-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  body.variant-appfirst .ed-hero-grid{grid-template-columns:1fr;gap:28px}
  body.variant-appfirst .ed-figure{order:-1}
  body.variant-appfirst .h03-tiles{grid-template-columns:repeat(2,1fr)}
  body.variant-appfirst .h03-tile{grid-column:auto}
  body.variant-appfirst .h03-tile img{height:150px}
  body.variant-appfirst .ap-summary{grid-template-columns:1fr}
  body.variant-appfirst .route-grid{grid-template-columns:1fr}
  body.variant-appfirst .ed-nav{display:none}
  body.variant-appfirst .ed-masthead{grid-template-columns:1fr auto 1fr;min-height:66px;gap:8px}
  body.variant-appfirst .ed-wordmark{grid-column:2}
  body.variant-appfirst .ed-meta{grid-column:3}
  body.variant-appfirst .ed-wordmark{padding:3px 10px}
  body.variant-appfirst .ed-brand-logo{height:46px;width:46px;max-width:46px;max-height:46px}
  body.variant-appfirst .ed-wordmark::after{display:none}
  body.variant-appfirst .ed-meta>span{display:none}
  body.variant-appfirst .ed-meta .menu-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 12px}
  body.variant-appfirst .ed-nav.is-open{
    display:flex;position:absolute;left:0;right:0;top:100%;z-index:90;
    flex-direction:column;gap:0;padding:8px 20px 14px;
    background:linear-gradient(180deg,#07362f,#03211e);
    border-bottom:2px solid var(--gold-3);box-shadow:0 20px 40px rgba(0,0,0,.5);
  }
  body.variant-appfirst .ed-nav.is-open a{padding:12px 2px;border-bottom:1px solid rgba(255,215,106,.2)}
  body.variant-appfirst .ed-rule{display:none}
  body.variant-appfirst .policy-strip-inner{gap:4px 6px;font-size:7.5px;padding:5px 0;letter-spacing:.04em}
  body.variant-appfirst .policy-link{padding:2px 6px;min-height:21px}
  body.variant-appfirst .policy-note{display:none}
  body.variant-appfirst .ed-hero{padding:22px 0 30px}
  body.variant-appfirst .ed-figure{padding:7px 7px 0;border-radius:16px;outline-offset:3px}
  body.variant-appfirst .ed-figure::before,
  body.variant-appfirst .ed-figure::after{width:24px;height:24px}
  body.variant-appfirst .ed-figure::after{bottom:30px}
  body.variant-appfirst .hero-logo-lockup{
    padding:6px 11px;border-radius:16px;margin-bottom:12px;gap:8px;
  }
  body.variant-appfirst .hero-brand-logo{
    width:80px;height:80px;max-width:80px;max-height:80px;border-radius:12px;
  }
  body.variant-appfirst .hero-logo-tag{font-size:8px;padding:4px 6px}
  body.variant-appfirst .ed-kicker{font-size:8px;margin-bottom:7px}
  body.variant-appfirst .ed-hero h1{font-size:clamp(32px,9.2vw,44px);line-height:.96}
  body.variant-appfirst .ed-hero h1::after{width:72px;height:5px;margin-top:10px}
  body.variant-appfirst .ed-deck{font-size:13.5px;line-height:1.68;margin-top:12px}
  body.variant-appfirst .ed-hero-actions{display:none}
  body.variant-appfirst .ed-link-cta{min-height:52px;flex:1;padding:0 12px;font-size:11.5px}
  body.variant-appfirst .ed-figure figcaption{display:none}
  body.variant-appfirst .section{padding:34px 0}
  body.variant-appfirst .sec-head{margin-bottom:16px}
  body.variant-appfirst .sec-head h2{font-size:clamp(22px,6.4vw,28px)}
  body.variant-appfirst .sec-head p{font-size:12.5px}
  body.variant-appfirst .h03-tiles{gap:9px}
  body.variant-appfirst .h03-tile{padding:5px 5px 2px;border-radius:12px}
  body.variant-appfirst .h03-tile img{height:132px}
  body.variant-appfirst .h03-tile figcaption{font-size:7.5px;padding:6px 2px 4px}
  body.variant-appfirst .facts{grid-template-columns:1fr 1fr;gap:8px}
  body.variant-appfirst .facts div{padding:10px 11px}
  body.variant-appfirst .card-grid{grid-template-columns:1fr}
  body.variant-appfirst .promo-card{padding:12px 14px}
  body.variant-appfirst .ap-steps li{padding:11px 12px;gap:11px}
  body.variant-appfirst .ap-faq article{padding:11px 12px;gap:9px;grid-template-columns:30px 1fr}
  body.variant-appfirst .variant-page-hero{padding:30px 0 22px}
  body.variant-appfirst .variant-page-hero h1{font-size:clamp(30px,8.4vw,40px)}
  body.variant-appfirst .variant-prose p,
  body.variant-appfirst .variant-prose li{font-size:13.5px;line-height:1.75}
  body.variant-appfirst .av-footer-grid{grid-template-columns:1fr;gap:16px;padding:24px 0 14px}
  body.variant-appfirst .av-footer-brand p{max-width:none}
  body.variant-appfirst .av-footer-bottom{padding-bottom:18px}
}
@media (max-width:380px){
  body.variant-appfirst .wrap{width:calc(100% - 26px)}
  body.variant-appfirst .ed-hero h1{font-size:30px}
  body.variant-appfirst .hero-brand-logo{width:72px;height:72px;max-width:72px;max-height:72px}
}