/* ============================================================
   R&D Landing v2 (6 Oct 2026) — loads LAST, after og-polish.css.
   Owner brief: hero type + background look weak; port the CashbackXM
   hover language (benefit cards + broker logo card) to OG.
   Everything new lives in this one file — delete the <link> to revert.

   §1 Hero typography — one weight system (200 display · 500 headline ·
      400 body · 600 micro-labels) instead of 800/300/700/300/700/300
   §2 Hero background — same approved lobby photo, pushed back
      (darker, softer, warmer) + dark "stage" behind the copy + grain.
      No gold halo behind text (user removed the aura 29 Sep 2026).
   §3 Benefit cards — CXM cxm-hover-v1 translated to black + gold
   §4 Exness account card — CXM xm-card link translated to black + gold
   ============================================================ */

/* ── §1 HERO TYPOGRAPHY ───────────────────────────────────── */
#hero{font-optical-sizing:auto}
#hero .hero-center{max-width:1040px!important}
/* less dead space above the copy (was 5.8rem + nav) */
#hero{padding-top:calc(3.4rem + 78px)!important;padding-bottom:6.5rem!important}

/* kicker: champagne micro-label flanked by hairlines */
#hero .hero-kicker{
  display:inline-flex!important;align-items:center;gap:14px;
  font-size:.74rem!important;font-weight:600!important;letter-spacing:.34em!important;
  text-indent:.34em;color:#CDB57A!important;margin:0 0 .35rem!important;
}
#hero .hero-kicker::before,#hero .hero-kicker::after{
  content:'';width:34px;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,rgba(205,181,122,.7));
}
#hero .hero-kicker::after{background:linear-gradient(90deg,rgba(205,181,122,.7),transparent)}

/* 90% — thin display numerals, quiet metallic gold, no glow */
#hero .big-pct-wrap{margin:0 0 .5rem!important;align-items:flex-start!important}
#hero .big-pct{
  font-size:clamp(6.5rem,11vw,9.6rem)!important;font-weight:200!important;
  letter-spacing:-.06em!important;line-height:.86!important;
  font-feature-settings:"tnum" 0,"ss01" 1;
  background:linear-gradient(180deg,#FFF1C4 0%,#F4CE5E 38%,#E0A92A 72%,#B98A1E 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  filter:none!important;text-shadow:none!important;padding-right:.02em;
}
#hero .big-pct-sym{
  font-size:clamp(2.4rem,4.4vw,3.6rem)!important;font-weight:200!important;
  margin:.55rem 0 0 .12em!important;opacity:1!important;color:#E7BC4A!important;line-height:1;
}

/* H1 — medium weight, tight tracking, balanced lines */
#hero .hero-tagline{
  font-size:clamp(1.85rem,3.3vw,3rem)!important;font-weight:500!important;
  letter-spacing:-.032em!important;line-height:1.08!important;
  color:#F6F4ED!important;margin:0 0 1.1rem!important;text-wrap:balance;max-width:none!important;
}
#hero .hero-tagline>span{
  color:transparent!important;
  background:linear-gradient(180deg,#FBDD84 0%,#F0C040 55%,#D9A42C 100%);
  -webkit-background-clip:text;background-clip:text;
}

/* sub-line: one readable sentence + a small credential row */
#hero .hero-sub-c{
  font-size:clamp(1rem,1.25vw,1.13rem)!important;font-weight:400!important;line-height:1.55!important;
  color:#D8D4CB!important;max-width:34em!important;margin:0 0 .9rem!important;
}
#hero .hero-cred{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .7rem;
  margin:0 0 2.1rem;font-size:.78rem;font-weight:500;letter-spacing:.03em;color:#9D988E;
  opacity:0;animation:fadeUp .7s ease forwards .45s;
}
#hero .hero-cred svg{width:14px;height:14px;color:#CDB57A;flex-shrink:0}
#hero .hero-cred .cred-item{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
#hero .hero-cred .cred-dot{width:3px;height:3px;border-radius:50%;background:rgba(205,181,122,.55)}
#hero .hero-cred b{font-weight:500;color:#CFCAC0;font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* status box + stats: same micro-label style everywhere */
#hero .hero-status{margin:0 0 1.5rem!important}
#hero .hero-status-lbl{
  font-size:.7rem!important;font-weight:600!important;letter-spacing:.16em!important;
  text-transform:uppercase;color:#A9A49A!important;
}
#hero .status-form{margin-top:1rem!important}
#hero .status-form input{font-weight:400!important}
#hero .hero-btns-c .btn{font-weight:600!important;letter-spacing:.01em}
#hero .hms-num{
  font-size:1.5rem!important;font-weight:300!important;letter-spacing:-.03em!important;
  font-variant-numeric:tabular-nums;color:#F0C040!important;
}
#hero .hms-lbl{font-size:.7rem!important;font-weight:500!important;letter-spacing:.03em!important;color:#8F8A81!important;margin-top:.3rem!important}
#hero .hero-mini-stats{gap:2.4rem!important;padding:1.05rem 1.9rem!important}
#hero .hero-strip span{font-weight:500!important;color:#A9A49A}

/* ── §2 HERO BACKGROUND ──────────────────────────────────── */
/* photo pushed back: darker, slightly soft, warmer → copy reads first */
#hero .hero-bg{background:#08090C;overflow:hidden}
#hero .hero-bg .hb img{filter:brightness(.6) saturate(.8) contrast(1.06) sepia(.12) blur(1.2px)}
/* dark stage behind the copy + nav fade + edge vignette + melt into the page.
   (darkness only — no gold halo, per §12 of og-polish / user 29 Sep) */
#hero .hero-bg::after{
  z-index:2;
  background:
    radial-gradient(ellipse 46% 52% at 50% 46%,rgba(8,9,12,.72) 0%,rgba(8,9,12,.46) 55%,rgba(8,9,12,0) 100%),
    radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(8,9,12,.75) 100%),
    linear-gradient(180deg,rgba(8,9,12,.78) 0%,rgba(8,9,12,.18) 20%,rgba(8,9,12,.22) 62%,#08090C 100%)!important;
}
/* fine film grain — kills banding in the gradients, adds a printed feel */
#hero .hero-bg::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* one fine gold line along the horizon of the floor (style guide v6 family A:
   "one thin gold light line") — sits in the photo, far from the copy */
#hero .hero-line{
  position:absolute;left:0;right:0;bottom:118px;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(240,192,64,.0) 8%,rgba(240,192,64,.38) 30%,rgba(240,192,64,.08) 50%,rgba(240,192,64,.38) 70%,rgba(240,192,64,0) 92%,transparent 100%);
  transform:scaleX(0);transform-origin:center;animation:rndLine 1.6s cubic-bezier(.22,1,.36,1) .9s forwards;
}
@keyframes rndLine{to{transform:scaleX(1)}}
@media(max-width:800px){#hero .hero-line{display:none}}

/* mobile: tighter stage, crop as before (og-polish §9) */
@media(max-width:800px){
  #hero .hero-bg::after{
    background:
      radial-gradient(ellipse 85% 48% at 50% 40%,rgba(8,9,12,.70) 0%,rgba(8,9,12,.40) 60%,rgba(8,9,12,0) 100%),
      linear-gradient(180deg,rgba(8,9,12,.8) 0%,rgba(8,9,12,.25) 18%,rgba(8,9,12,.35) 60%,#08090C 100%)!important;
  }
  #hero .hero-kicker{font-size:.68rem!important;gap:10px}
  #hero .hero-kicker::before,#hero .hero-kicker::after{width:22px}
  #hero .big-pct{font-size:clamp(5.6rem,27vw,7.5rem)!important}
  #hero .big-pct-sym{font-size:2.3rem!important;margin-top:.45rem!important}
  #hero{padding-top:calc(3rem + 66px)!important;padding-bottom:4rem!important}
  #hero .hero-tagline{font-size:clamp(1.75rem,7.6vw,2.2rem)!important;line-height:1.12!important}
  #hero .hero-sub-c{font-size:.98rem!important}
  #hero .hero-cred{font-size:.72rem;margin-bottom:1.7rem;flex-direction:column;gap:.3rem}
  #hero .hero-cred .cred-dot{display:none}
  #hero .hms-num{font-size:1.12rem!important}
  #hero .hms-lbl{font-size:.58rem!important;letter-spacing:0!important}
  #hero .hero-mini-stats{gap:.5rem!important;padding:.9rem .5rem!important}
}
@media(prefers-reduced-motion:reduce){#hero .hero-line{animation:none;transform:none}#hero .hero-cred{animation:none;opacity:1}}

/* ── §3 BENEFIT CARDS (CXM cxm-hover-v1 → black + gold) ──── */
.og-benefits{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.8rem}
.og-benefit{
  position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:.9rem;
  padding:1.1rem 1.15rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s;
}
/* gold accent bar grows down the leading edge */
.og-benefit::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:linear-gradient(180deg,#FBDD84,#C89416);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
/* warm wash from the corner */
.og-benefit::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at 0% 0%,rgba(240,192,64,.11),transparent 62%);
}
[dir=rtl] .og-benefit::after{background:radial-gradient(circle at 100% 0%,rgba(240,192,64,.11),transparent 62%)}
.og-benefit:hover{
  transform:translateY(-4px);border-color:rgba(240,192,64,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -18px rgba(240,192,64,.28),0 10px 24px rgba(0,0,0,.45);
}
.og-benefit:hover::before{transform:scaleY(1)}
.og-benefit:hover::after{opacity:1}
.og-b-ic{
  position:relative;z-index:1;width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(240,192,64,.09);border:1px solid rgba(240,192,64,.18);color:#F0C040;
  transition:background .35s,color .35s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}
.og-benefit:hover .og-b-ic{
  background:linear-gradient(180deg,#F7CE58,#E0A92A);border-color:transparent;color:#08090C;
  transform:scale(1.08) rotate(-6deg);box-shadow:0 8px 18px rgba(240,192,64,.30);
}
.og-b-t{position:relative;z-index:1;font-size:.84rem;font-weight:400;line-height:1.55;color:#A9A49A}
.og-b-t strong{display:block;font-size:.95rem;font-weight:600;color:#F6F4ED;letter-spacing:-.01em;margin-bottom:.18rem;transition:color .25s}
.og-benefit:hover .og-b-t strong{color:#F0C040}
@media(max-width:640px){.og-benefits{grid-template-columns:1fr;gap:.7rem}}

/* ── §4 EXNESS ACCOUNT CARD (CXM xm-card link → black + gold) ── */
.og-broker-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.05rem;
  margin-top:1.1rem;min-height:168px;padding:2.2rem 2rem;border-radius:20px;text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,#121318 0%,#0B0C10 100%);
  border:1px solid rgba(240,192,64,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -28px rgba(0,0,0,.75);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s;
}
/* resting warm floor light (like CXM's red radial) */
.og-broker-card::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 118%,rgba(240,192,64,.16) 0%,transparent 62%);
}
/* hover: the floor light swells */
.og-broker-card::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(circle at 50% 122%,rgba(240,192,64,.42) 0%,transparent 64%);
}
.og-broker-card:hover{
  transform:translateY(-4px);border-color:rgba(240,192,64,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 46px -16px rgba(240,192,64,.24),0 10px 22px rgba(0,0,0,.5);
}
.og-broker-card:hover::before{opacity:1}
.og-broker-card:focus-visible{outline:2px solid rgba(240,192,64,.7);outline-offset:3px}
.og-broker-mark{
  display:flex;flex-direction:column;align-items:center;line-height:1;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.og-broker-card:hover .og-broker-mark{transform:scale(1.06)}
.og-broker-word{font-size:clamp(2.4rem,3.6vw,3rem);font-weight:700;letter-spacing:-.045em;color:#F6F4ED}
.og-broker-id{margin-top:.55rem;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#B9A26A}
.og-broker-id b{font-weight:500;letter-spacing:.08em;color:#CFCAC0;font-variant-numeric:tabular-nums}
.og-broker-cta{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.15rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#F6F4ED;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.3;
  transition:background .35s,border-color .35s,box-shadow .35s,color .35s;
}
.og-broker-cta svg{flex-shrink:0;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .og-broker-cta svg{transform:scaleX(-1)}
.og-broker-card:hover .og-broker-cta{
  background:linear-gradient(180deg,#F7CE58,#E9B62F);border-color:transparent;color:#08090C;
  box-shadow:0 8px 20px rgba(240,192,64,.32);
}
.og-broker-card:hover .og-broker-cta svg{transform:translateX(3px)}
[dir=rtl] .og-broker-card:hover .og-broker-cta svg{transform:scaleX(-1) translateX(3px)}
@media(max-width:640px){.og-broker-card{min-height:150px;padding:1.8rem 1.2rem}}

/* touch screens: no sticky hover lift; keep the colour cues on tap */
@media(hover:none){
  .og-benefit:hover,.og-broker-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .og-benefit,.og-benefit::before,.og-b-ic,.og-broker-card,.og-broker-mark,.og-broker-cta svg{transition:none}
  .og-benefit:hover,.og-broker-card:hover,.og-broker-card:hover .og-broker-mark,.og-benefit:hover .og-b-ic{transform:none}
}

/* §4b placement: desktop = card in the visual column under the photo,
   copy column spans both rows (CXM: logo card left, benefits right) */
@media(min-width:801px){
  #what .what-grid{align-items:start!important;row-gap:0!important}
  #what .what-content{grid-column:2;grid-row:1 / span 2;align-self:center}
  #what .og-broker-card{grid-column:1;grid-row:2;margin:1.6rem 18px 0 0}
}
@media(max-width:800px){
  #what .og-broker-card{grid-column:1;grid-row:3;margin-top:0}
  #hero .hero-status-lbl{letter-spacing:.08em!important}
}

/* ============================================================
   §5 PAYOUT RATES — the "90%" plaque (owner 6 Oct 2026: not pretty yet)
   Before: editorial.css stripped the card to a bare top hairline
   (padding 0, no radius) while og-polish §8c still drew a 1px gold
   ring + a gold glow underneath -> a thin box hugging "90%" with a
   smudge below. Now a proper card in the same language as the
   Exness card: dark gradient, hairline, warm floor light.
   ============================================================ */
#rates .rate-hero{
  position:relative;overflow:hidden;isolation:isolate;text-align:left!important;
  margin:2.4rem 0 0!important;padding:1.9rem 2.1rem 2.1rem!important;border-radius:20px!important;
  background:linear-gradient(180deg,#131419 0%,#0B0C10 100%)!important;
  border:1px solid rgba(240,192,64,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -34px rgba(0,0,0,.85)!important;
  transition:border-color .45s,box-shadow .45s;
}
#rates .rate-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 30% 118%,rgba(240,192,64,.15) 0%,transparent 65%);
}
#rates .rate-hero::before{
  content:''!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse 80% 70% at 30% 122%,rgba(240,192,64,.30) 0%,transparent 66%)!important;
}
#rates .rate-hero:hover{border-color:rgba(240,192,64,.30)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 56px -24px rgba(240,192,64,.20),0 30px 60px -34px rgba(0,0,0,.85)!important}
#rates .rate-hero:hover::before{opacity:1}
.rh-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rh-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#CDB57A}
.rh-kicker::after{content:'';width:28px;height:1px;background:linear-gradient(90deg,rgba(205,181,122,.7),transparent)}
.rh-badge{font-size:.66rem;font-weight:500;letter-spacing:.06em;color:#8F8A81;padding:.3rem .7rem;border:1px solid rgba(255,255,255,.09);border-radius:999px}
#rates .rate-pct{
  margin-top:.6rem;font-size:clamp(5.5rem,8.4vw,8rem)!important;font-weight:200!important;
  letter-spacing:-.06em!important;line-height:.88!important;display:flex;align-items:flex-start;
  background:linear-gradient(180deg,#FFF1C4 0%,#F4CE5E 38%,#E0A92A 72%,#B98A1E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
#rates .rate-pct-sym{font-size:.42em;margin:.2em 0 0 .1em;letter-spacing:0}
#rates .rate-sub{margin:1rem 0 0!important;font-size:1.08rem!important;font-weight:600!important;color:#F6F4ED!important;letter-spacing:-.01em}
.rh-facts{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0;padding:0}
.rh-facts li{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .8rem .38rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);font-size:.76rem;font-weight:500;color:#C9C4BA;line-height:1.3}
.rh-facts svg{width:12px;height:12px;color:#F0C040;flex-shrink:0}
#rates .rh-cta{margin-top:1.6rem}
#rates .rh-cta svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
#rates .rh-cta:hover svg{transform:translateX(3px)}
/* table rows: gold marker + symbol turns gold on hover */
#rates .rate-panel tbody tr{transition:background .25s}
#rates .rate-panel tbody tr td:first-child{transition:color .25s,box-shadow .25s}
#rates .rate-panel tbody tr:hover{background:rgba(240,192,64,.035)!important}
#rates .rate-panel tbody tr:hover td:first-child{color:#F0C040!important;box-shadow:inset 2px 0 0 #F0C040}
@media(max-width:640px){
  #rates .rate-hero{padding:1.5rem 1.3rem 1.6rem!important}
  #rates .rate-pct{font-size:clamp(4.8rem,24vw,6rem)!important}
  .rh-badge{display:none}
  #rates .rh-cta{width:100%;justify-content:center}
}

/* ============================================================
   §6 BUTTONS — CashbackXM button language in black + gold
   (owner 6 Oct 2026: use CXM's buttons, glowing on hover, in our theme)
   CXM recipe: solid fill · soft same-colour shadow at rest · on hover
   lift 2px + the shadow grows into a glow. Outline buttons fill with a
   tint and take the brand colour. Replaces og-polish §8e / §12 button
   shadows (hero buttons glow on hover only — at rest the shadow stays
   small, so the hero keeps the "no aura" look from 29 Sep).
   ============================================================ */
html body .btn{
  border-radius:10px;font-weight:700!important;letter-spacing:.005em;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,color .25s,border-color .25s!important;
}
html body .btn-lg{border-radius:12px}
html body .btn-gold,html body #hero .btn-gold,html body #hero .hero-status .btn-gold,html body .nf-btn{
  background:linear-gradient(180deg,#F7D05E 0%,#EDB832 100%)!important;color:#0A0B0E!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 4px 14px rgba(240,192,64,.20)!important;
}
html body .btn-gold:hover,html body #hero .btn-gold:hover,html body #hero .hero-status .btn-gold:hover,html body .nf-btn:hover{
  background:linear-gradient(180deg,#FFDE7A 0%,#F3C340 100%)!important;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(255,214,110,.45),0 8px 24px rgba(240,192,64,.38),0 0 42px rgba(240,192,64,.22)!important;
}
html body .btn-gold:active,html body .nf-btn:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 10px rgba(240,192,64,.25)!important}
html body .btn-outline{
  background:rgba(255,255,255,.025)!important;color:#F6F4ED!important;border:1.5px solid rgba(255,255,255,.16)!important;box-shadow:none!important;
}
html body .btn-outline:hover{
  background:rgba(240,192,64,.08)!important;color:#F0C040!important;border-color:rgba(240,192,64,.65)!important;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(240,192,64,.16),0 0 30px rgba(240,192,64,.10)!important;
}
.btn:focus-visible,.nf-btn:focus-visible,.copy-btn:focus-visible,.video-btn:focus-visible,.lang-btn:focus-visible{outline:2px solid rgba(240,192,64,.75);outline-offset:3px}
/* small utility buttons follow the same idea */
html body .copy-btn{border-radius:8px;transition:background .25s,color .25s,border-color .25s,box-shadow .3s!important}
html body .copy-btn:hover{background:#F0C040!important;color:#0A0B0E!important;border-color:#F0C040!important;box-shadow:0 6px 16px rgba(240,192,64,.32)}
html body .video-btn:hover{border-color:rgba(240,192,64,.45)!important;background:rgba(240,192,64,.06)!important;box-shadow:0 8px 22px rgba(240,192,64,.12)}
html body .lang-btn{transition:background .25s,border-color .25s,box-shadow .3s}
html body .lang-btn:hover{border-color:rgba(240,192,64,.7);background:rgba(240,192,64,.08);box-shadow:0 4px 16px rgba(240,192,64,.14)}
@media(hover:none){html body .btn:hover,html body .nf-btn:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html body .btn,html body .nf-btn{transition:none!important}html body .btn:hover{transform:none}}

/* §6b fonts: these components still declared Manrope, which the page never loads -> they fell back to a system sans. Use the page font (Inter). */
html body .btn,html body .lang-btn,html body .ticker-item,html body .rate-tab,html body .copy-btn,html body .video-btn,html body .vmodal-close,html body .status-form input{font-family:inherit!important}

/* ============================================================
   §7 HERO MOTION BACKGROUND (6 Oct 2026) — Higgsfield Kling 3.0 clip made
   from the approved lobby photo: first 2.5s of a slow dolly push-in, eased
   + slowed to 7.5s (ffmpeg minterpolate), then played forward/back = a
   seamless 15s loop (style guide v6 §14.2 "slow push-in"). Files:
   og-photos/hero-loop-1920.mp4 (1.25 MB) · hero-loop-960.mp4 (mobile, 0.39 MB).
   The still photo stays underneath as poster + fallback; the video
   fades in on its first painted frame. Reduced-motion = still photo.
   ============================================================ */
#hero .hero-bg .hb-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.2s ease;
  filter:brightness(.68) saturate(.82) contrast(1.06) sepia(.12) blur(.8px); /* a touch lighter than the still so the motion reads */
  animation:none;
}
#hero .hero-bg .hb-video.on{opacity:1}
@media(max-width:800px){
  #hero .hero-bg .hb-video{left:0;width:100%;height:150%;top:-45%}
}
@media(prefers-reduced-motion:reduce){#hero .hero-bg .hb-video{display:none}}

/* ============================================================
   §8 HERO 3D GOLD MESH (6 Oct 2026 · default background)
   Owner: simple 3D — a gold woven net snaking slowly (instead of the
   building clip). Drawn live by assets/hero-mesh.js on a canvas.
   html.bg-mesh  = mesh (default) · html.bg-video = Higgsfield clip ·
   html.bg-photo = still photo. Switch with ?bg=video / ?bg=photo.
   ============================================================ */
#hero .hero-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:none;opacity:0;transition:opacity 1.6s ease}
html.bg-mesh #hero .hero-mesh{display:block}
html.bg-mesh #hero .hero-mesh.on{opacity:1}
html.bg-mesh #hero .hero-bg .hb{display:none}
html.bg-mesh #hero .hero-bg{
  background:
    radial-gradient(ellipse 70% 45% at 50% 108%,rgba(240,192,64,.10),transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 40%,#0E0F13 0%,#08090C 75%);
}
html.bg-mesh #hero .hero-line{display:none}
/* the dark stage behind the copy is a little stronger over thin bright lines */
html.bg-mesh #hero .hero-bg::after{
  background:
    radial-gradient(ellipse 40% 44% at 50% 44%,rgba(8,9,12,.82) 0%,rgba(8,9,12,.5) 55%,rgba(8,9,12,0) 100%),
    linear-gradient(180deg,rgba(8,9,12,.7) 0%,rgba(8,9,12,0) 18%,rgba(8,9,12,0) 70%,#08090C 100%)!important;
}
@media(max-width:800px){
  html.bg-mesh #hero .hero-bg::after{
    background:
      radial-gradient(ellipse 90% 30% at 50% 34%,rgba(8,9,12,.7) 0%,rgba(8,9,12,.35) 60%,rgba(8,9,12,0) 100%),
      linear-gradient(180deg,rgba(8,9,12,.75) 0%,rgba(8,9,12,0) 16%,rgba(8,9,12,.1) 70%,#08090C 100%)!important;
  }
}

/* ============================================================
   §9 "90%" — minimal & plain (owner 6 Oct 2026: "Minimal และธรรมดากว่านี้")
   Before: 200-weight hairline numerals ~154px, 4-stop metallic
   gradient, "%" floated as a superscript.
   Now: one flat brand gold, regular weight, smaller, "%" sits on the
   same baseline at the same size — reads as a plain fact, not a badge.
   Same treatment on the Payout Rates card so the page says "90%" one way.
   ============================================================ */
#hero .big-pct-wrap{align-items:baseline!important;justify-content:center!important;gap:0!important;margin:.15rem 0 .7rem!important}
#hero .big-pct,#hero .big-pct-sym{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  color:#F0C040!important;-webkit-text-fill-color:#F0C040;
  font-weight:400!important;line-height:1!important;letter-spacing:-.045em!important;filter:none!important;opacity:1!important;
  font-size:clamp(4.25rem,6.4vw,5.75rem)!important;margin:0!important;padding:0!important;
}
#hero .big-pct-sym{letter-spacing:0!important;margin-left:.04em!important}
#rates .rate-pct{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  color:#F0C040!important;-webkit-text-fill-color:#F0C040;
  font-weight:400!important;letter-spacing:-.045em!important;line-height:1!important;align-items:baseline!important;
  font-size:clamp(4rem,5.6vw,5.25rem)!important;
}
#rates .rate-pct-sym{font-size:1em!important;margin:0 0 0 .04em!important;letter-spacing:0}
@media(max-width:800px){
  #hero .big-pct,#hero .big-pct-sym{font-size:clamp(3.6rem,17vw,4.5rem)!important}
  #rates .rate-pct{font-size:clamp(3.6rem,17vw,4.25rem)!important}
}

/* ============================================================
   §10 OTHER SECTIONS (6 Oct 2026 · owner: "มีไอเดียแต่ง Section อื่นมั้ย")
   One card language across the page = the benefit-card hover from §3:
   hairline at rest → gold edge, lift and warm wash on hover.
   ============================================================ */

/* 10a HOW IT WORKS — equal-height steps, brand palette (no red/green),
   gold edge on hover. Transforms stay with the flow animation. */
#how-it-works .flow{align-items:stretch!important}
#how-it-works .flow-arrow{align-self:center}
#how-it-works .flow-val.loss{color:#CFCAC0!important}
#how-it-works .flow-val.gain{color:#F0C040!important}
#how-it-works .flow-item{transition:border-color .35s,box-shadow .35s,background .35s,opacity .6s,transform .6s cubic-bezier(.22,1,.36,1)!important}
#how-it-works .flow-item:hover{border-color:rgba(240,192,64,.34)!important;background:linear-gradient(180deg,rgba(240,192,64,.06),rgba(255,255,255,.012))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -18px rgba(240,192,64,.26)!important}
#how-it-works .flow-item .flow-icon{transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
#how-it-works .flow-item:hover .flow-icon{background:linear-gradient(180deg,#F7CE58,#E0A92A)!important;color:#08090C!important;border-color:transparent!important;box-shadow:0 6px 16px rgba(240,192,64,.3)}

/* 10b HOW TO CLAIM — the "EXISTING / NEW ACCOUNT" chip was stretched to a
   full-width bar that read like an input; back to a real chip. */
.path-pill{width:fit-content!important;align-self:flex-start;padding:.32rem .8rem!important;border-radius:999px!important}
.path-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s!important}
.path-card:hover{border-color:rgba(240,192,64,.32)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 56px -26px rgba(240,192,64,.22),0 24px 48px -28px rgba(0,0,0,.65)!important}
.path-step-dot{transition:background .3s,color .3s}
.path-card:hover .path-step-dot{background:#F0C040!important;color:#08090C!important;border-color:#F0C040!important}

/* 10c COMPARISON — the OG column gets the floor light + hover glow */
.compare-col{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s!important}
.compare-col:hover{transform:translateY(-4px)}
.compare-col.col-gold:hover{
  border-color:rgba(240,192,64,.5)!important;box-shadow:0 0 0 1px rgba(240,192,64,.18),0 30px 60px -28px rgba(240,192,64,.32)!important}
.compare-row{transition:background .25s}
.compare-row:hover{background:rgba(240,192,64,.03)}

/* 10d REVIEWS — cards lift and the stars warm up on hover */
.testi-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s!important}
.testi-card:hover{transform:translateY(-4px);border-color:rgba(240,192,64,.3)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -18px rgba(240,192,64,.22)!important}

/* 10e FAQ — heading column sticks while you read; small help card fills it */
@media(min-width:801px){#faq .ecb-faq-layout>.text-center{position:sticky;top:110px;align-self:start}}
.og-faq-help{margin-top:2rem;max-width:360px;padding:1.3rem 1.4rem 1.4rem;border-radius:16px;
  background:linear-gradient(180deg,#131419,#0B0C10);border:1px solid rgba(240,192,64,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.og-faq-help-t{font-size:.98rem;font-weight:600;color:#F6F4ED;letter-spacing:-.01em}
.og-faq-help p{margin:.4rem 0 1rem!important;font-size:.84rem!important;line-height:1.6!important;color:#A9A49A!important}
.og-faq-help .btn{padding:.6rem 1.2rem}
.faq-item{transition:border-color .3s,box-shadow .3s,background .3s!important}
.faq-item:hover{border-color:rgba(240,192,64,.28)!important}
.faq-item[open]{box-shadow:inset 2px 0 0 #F0C040,inset 0 1px 0 rgba(255,255,255,.05)!important}
.faq-ic{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faq-item[open] .faq-ic{transform:rotate(45deg)}
@media(max-width:800px){.og-faq-help{max-width:none;margin-top:1.4rem}}

/* 10f FOOTER — Menu / Guides / Contact columns, OG mark in the brand block */
@media(min-width:900px){
  footer .foot-inner{display:grid!important;grid-template-columns:1.4fr .8fr 1.3fr .7fr;gap:3rem}
}
@media(min-width:600px) and (max-width:899px){
  footer .foot-inner{display:grid!important;grid-template-columns:1fr 1fr;gap:2rem}
}
.foot-mark{width:auto;height:28px;margin-bottom:.6rem}
.foot-links a{position:relative;transition:color .2s,padding .25s}
.foot-links a:hover{padding-left:10px}
.foot-links a::before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:#F0C040;transition:width .25s}
.foot-links a:hover::before{width:6px}
[dir=rtl] .foot-links a:hover{padding-left:0;padding-right:10px}
[dir=rtl] .foot-links a::before{left:auto;right:0}

@media(hover:none){.compare-col:hover,.testi-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.compare-col,.testi-card,.path-card,.faq-ic{transition:none!important}.compare-col:hover,.testi-card:hover{transform:none}}

/* ============================================================
   §11 MORE 3D (6 Oct 2026 · owner: "พวก 3D อยากเพิ่มตรงไหนเพิ่มได้เลย")
   assets/og3d.js draws every canvas.og3d (replaces hero-mesh.js).
   ============================================================ */
.og3d{pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.og3d.on{opacity:1}
html.bg-mesh #hero .hero-mesh.on{opacity:1}
/* reviews: gold wire globe behind the heading */
#testimonials .testi-header{position:relative;isolation:isolate}
.og3d-globe{position:absolute;z-index:-1;left:50%;top:50%;width:min(560px,92vw);height:min(560px,92vw);transform:translate(-50%,-52%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 72%)}
/* (90% card ring removed 6 Oct 2026 — owner: "อันนี้เอาออก") */
/* final CTA: one ribbon across the band, under the copy */
#proof .proof-hero{isolation:isolate}
#proof .og3d-cta{position:absolute;inset:0;width:100%;height:100%;z-index:1;border-radius:inherit}
#proof .proof-text{position:relative;z-index:2}
/* footer mark: keep its own size (the flex column stretched it) */
.foot-logo .foot-mark{width:44px!important;height:30px!important;object-fit:contain;align-self:flex-start}

/* ============================================================
   §12 SECTION DIVIDERS — a thin strand of the hero's gold net on
   every seam between the main sections (owner 6 Oct 2026).
   Zero-height wrapper, so layout does not move; the canvas straddles
   the seam and fades out at both screen edges.
   ============================================================ */
.og-divider{position:relative;height:0;z-index:3;pointer-events:none}
.og-divider canvas{position:absolute;left:0;width:100%;top:-46px;height:92px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
@media(max-width:800px){.og-divider canvas{top:-32px;height:64px}}

/* ============================================================
   §13 COMPARISON — type only (owner 6 Oct 2026: "เอาการ์ดออกเหลือแต่ฟ้อน
   · ออร่าเอาออก · แบคกราวดำล้วน · ที่เหลือไม่ต้องเปลี่ยน").
   CSS only, markup and copy untouched: the two cards dissolve
   (display:contents) into one 3-column grid — shared labels | No Cashback
   | With OG Cashback — so rows stay aligned in every language.
   Child order in each .compare-col: head (1) · 5 rows (2–6) · foot (7).
   ============================================================ */
#compare{background:#08090C}
#compare .compare-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:3.25rem;align-items:stretch}
#compare .compare-col,#compare .compare-row{display:contents}
#compare .compare-col::before{content:none!important}
#compare .compare-head-icon,#compare .col-gold .compare-row-lbl{display:none}
/* every cell: hairline on top, no fill */
#compare .compare-row-lbl,#compare .compare-row-val,#compare .compare-foot{padding:1.1rem 1.25rem 1.1rem 0;border-top:1px solid rgba(255,255,255,.08);background:none!important;display:flex;align-items:center}
[dir=rtl] #compare .compare-row-lbl,[dir=rtl] #compare .compare-row-val,[dir=rtl] #compare .compare-foot{padding:1.1rem 0 1.1rem 1.25rem}
/* header: titles over their value column, a firmer line underneath */
#compare .compare-head{display:block;padding:0 1.25rem 1.2rem 0;border:0;background:none}
[dir=rtl] #compare .compare-head{padding:0 0 1.2rem 1.25rem}
#compare .compare-head-main{display:block}
#compare .compare-head-title{font-size:1.05rem;font-weight:500;letter-spacing:-.005em}
#compare .compare-head-sub{font-size:.76rem;margin-top:.2rem}
#compare .compare-head-right{display:block;margin-top:.55rem}
#compare .compare-badge{background:none;border:0;padding:0;border-radius:0;font-size:.62rem;font-weight:600;letter-spacing:.16em}
#compare .compare-badge svg{display:none}
#compare .col-muted>:nth-child(2)>*,#compare .col-gold>:nth-child(2)>*{border-top-color:rgba(255,255,255,.3)}
/* placement */
#compare .col-muted>.compare-head{grid-column:2;grid-row:1}
#compare .col-gold>.compare-head{grid-column:3;grid-row:1}
#compare .compare-row-lbl{grid-column:1;font-size:.86rem}
#compare .col-muted .compare-row-val{grid-column:2}
#compare .col-gold .compare-row-val{grid-column:3}
#compare .compare-col>:nth-child(2)>*{grid-row:2}
#compare .compare-col>:nth-child(3)>*{grid-row:3}
#compare .compare-col>:nth-child(4)>*{grid-row:4}
#compare .compare-col>:nth-child(5)>*{grid-row:5}
#compare .compare-col>:nth-child(6)>*{grid-row:6}
#compare .col-muted>.compare-foot{grid-column:2;grid-row:7}
#compare .col-gold>.compare-foot{grid-column:3;grid-row:7}
#compare .compare-grid::after{content:'';grid-column:1;grid-row:7;border-top:1px solid rgba(255,255,255,.08)}
#compare .compare-row-val{font-variant-numeric:tabular-nums}
/* the yearly result: big thin numerals, no panel */
#compare .compare-foot{flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;padding-top:1.6rem;padding-bottom:0}
#compare .compare-foot-big{font-size:2.6rem;font-weight:200;letter-spacing:-.02em}
#compare .compare-foot-lbl{margin-top:.45rem}
@media(max-width:900px){
  #compare .compare-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);margin-top:2.25rem}
  #compare .compare-row-lbl,#compare .compare-row-val{padding:.85rem .6rem .85rem 0}
  [dir=rtl] #compare .compare-row-lbl,[dir=rtl] #compare .compare-row-val{padding:.85rem 0 .85rem .6rem}
  #compare .compare-head{padding:0 .6rem .9rem 0}
  [dir=rtl] #compare .compare-head{padding:0 0 .9rem .6rem}
  #compare .compare-foot{padding:1.2rem .6rem 0 0}
  [dir=rtl] #compare .compare-foot{padding:1.2rem 0 0 .6rem}
  #compare .compare-row-lbl{font-size:.74rem;line-height:1.35}
  #compare .compare-row-val{font-size:.84rem}
  #compare .compare-head-title{font-size:.86rem;line-height:1.25}
  #compare .compare-head-sub{font-size:.66rem;line-height:1.35}
  #compare .compare-badge{font-size:.54rem;letter-spacing:.12em}
  #compare .compare-foot-big{font-size:1.55rem}
  #compare .compare-foot-lbl{font-size:.64rem;line-height:1.35}
}
/* no aura: drop the drifting gold glow og-polish §8b put behind this section (the gold hairline seam on top stays) */
#compare::after{content:none!important;animation:none!important}
#compare .compare-grid{max-width:980px;margin-inline:auto}
#compare .compare-foot,#compare .col-gold .compare-foot{border-top:1px solid rgba(255,255,255,.08)!important}  /* og-polish §8c sets these with !important */
/* (header line: col 1 used to get a 2nd line from .compare-grid::before on top of its own cell border → looked brighter; removed 6 Oct) */
/* green check after the yearly saving (owner 6 Oct 2026) — brand green token #4DB87B, CSS only */
#compare .col-gold .compare-foot-big{display:inline-flex;align-items:center;gap:.32em}
#compare .col-gold .compare-foot-big::after{content:'';flex:none;width:.56em;height:.56em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%234DB87B'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.8' fill='none' stroke='%2308090C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ============================================================
   §14 STATS ROW in "What is cashback" — type only (owner 7 Oct 2026:
   "Section นี้ก็ไม่ชอบให้เป็นการ์ด"). Same language as §13: no panel,
   border, glow, shadow or hover lift; thin vertical hairlines between
   the four figures. CSS only — markup and copy untouched.
   ============================================================ */
#what .what-stat-card{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;padding:.6rem 1rem!important}
#what .what-stat-card::before,#what .what-stat-card::after{content:none!important}
#what .what-stat-card+.what-stat-card{border-inline-start:1px solid rgba(255,255,255,.08)!important}
#what .what-stats-grid{gap:0!important}
@media(max-width:900px){
  #what .what-stats-grid{row-gap:1.4rem!important}
  #what .what-stat-card:nth-child(odd){border-inline-start:0!important}
}

/* ============================================================
   §15 PAYOUT RATES — no cards (owner 7 Oct 2026, option A:
   "ไม่อยากให้ทำเป็น card · แบบ A"). Same language as §13/§14:
   black ground, type + hairlines only. CSS only, markup/copy untouched.
   Left: "UP TO / 90%" sits straight on the black (count-up kept), the
   account-type pill and the 3 fact chips become plain text lines.
   Right: the table loses its panel; tabs become an underline row.
   ============================================================ */
#rates{background:#08090C!important;box-shadow:none!important}
/* left plaque → bare type */
#rates .rate-hero{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;overflow:visible}
#rates .rate-hero::before,#rates .rate-hero::after{content:none!important}
#rates .rate-hero:hover{box-shadow:none!important}
#rates .rh-badge{border:0;border-radius:0;padding:0;font-size:.7rem;letter-spacing:.08em;color:#8F8A81}
#rates .rh-facts{flex-direction:column;gap:.55rem;margin-top:1.3rem}
#rates .rh-facts li{background:none;border:0;border-radius:0;padding:0;font-size:.9rem;font-weight:400;color:#C9C4BA}
#rates .rh-facts svg{width:14px;height:14px}
/* right table → no panel */
#rates .rate-tabs-wrap{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
#rates .rate-tabs{background:none!important;padding:0!important;gap:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
#rates .rate-tab{border-radius:0!important;background:none!important;border:0!important;box-shadow:none!important;margin-bottom:-1px;border-bottom:1px solid transparent!important}
#rates .rate-tab.active{background:none!important;color:#F0C040!important;border-bottom-color:#F0C040!important}
#rates .rate-tab:hover:not(.active){background:none!important}
#rates .rate-panel th{background:none!important}
#rates .rate-panel th:first-child,#rates .rate-panel td:first-child{padding-inline-start:0!important}
#rates .rate-panel td{border-bottom:1px solid rgba(255,255,255,.08)!important}
#rates .rate-panel-foot{background:none!important;padding-inline:0!important;border-top:1px solid rgba(255,255,255,.14)}
/* hover marker on rows: gold symbol only (no inset bar now that rows start at the edge) */
#rates .rate-panel tbody tr:hover td:first-child{box-shadow:none}
@media(max-width:640px){
  #rates .rh-badge{display:none}
  #rates .rh-facts li{font-size:.85rem}
}
#rates .rate-panel thead,#rates .rate-panel thead tr,#rates .rate-panel table{background:none!important}
#rates .rate-panel th{box-shadow:none!important}  /* og-polish left a faint gold inset glow on the header row */

/* §16 Thai: no letter-spacing on Thai labels — tracked Thai breaks into loose glyphs
   ("ส ิ น ท ร ั พ ย ์"). Only the Thai page (lang="th") is affected. (owner 7 Oct 2026) */
html[lang=th] body :is(th,.sec-tag,.rh-kicker,.hero-kicker,.hero-status-lbl,.cost-lbl,.trust-official,.compare-badge,.path-pill,.foot-col-title,.hero-strip span,[style*="letter-spacing"]){letter-spacing:0!important}
html[lang=th] body #hero :is(.hero-kicker,.hero-status-lbl,.hero-strip span){letter-spacing:0!important}  /* #hero rules are id-scoped, need the id here too */