/* ============================================================
   OG guide + checker pages — Landing v2 design language (R&D · 6 Oct 2026)
   Owner: "ทำหน้า Checker และหน้า Guide ให้ใช้ภาษาดีไซน์ชุดเดียวกับ Landing นี้"
   Loads AFTER the page's own <style> blocks; every guide page shares the
   same template, so this one file restyles all of them.
   Same rules as landing R&D v2 (rnd-v2.css):
   Inter (optical size) · weights 400/500/600 · thin hairlines · gold only
   for emphasis · cards lift with a gold edge + warm wash on hover ·
   CashbackXM button recipe in gold · gold wire 3D ribbon in the page head.
   ============================================================ */
:root{
  --og-ink:#F6F4ED;--og-body:#B4AFA6;--og-mute:#8F8A81;--og-champ:#CDB57A;
  --og-gold:#F0C040;--og-line:rgba(255,255,255,.08);--og-line2:rgba(255,255,255,.14);
  --og-card:linear-gradient(180deg,#131419 0%,#0D0E12 100%);
}
html body{font-family:'Inter','Prompt',system-ui,sans-serif;font-optical-sizing:auto;font-weight:400;color:var(--og-ink);background:#08090C}
html body input,html body button{font-family:inherit}

/* ── NAV: lockup like the landing + blurred plate ───────────── */
nav{background:rgba(8,9,12,.78)!important;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.06)!important;box-shadow:0 10px 34px rgba(0,0,0,.35)}
.nav-inner{max-width:1180px!important;padding:14px 24px!important}
.logo{display:flex!important;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em}
.logo img{height:28px;width:auto}
.logo .logo-lockup{display:flex;flex-direction:column;line-height:1;font-size:.95rem;color:var(--og-ink)}
.logo .logo-lockup span{color:var(--og-gold)}
.logo .logo-lockup small{font-size:.5rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#B9A26A;margin-top:3px}
@media(max-width:420px){.logo img{height:22px}.logo .logo-lockup small{font-size:.42rem}}

/* ── PAGE HEAD: gold wire ribbon behind the title ───────────── */
.og-page-band{position:absolute;left:0;right:0;top:0;height:640px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.og-page-band canvas{position:absolute;inset:0;width:100%;height:100%}
.og-page-band::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 60% at 50% 44%,rgba(8,9,12,.82) 0%,rgba(8,9,12,.45) 60%,rgba(8,9,12,0) 100%)}
@media(max-width:800px){.og-page-band{height:560px}.og-page-band::after{background:radial-gradient(ellipse 100% 55% at 50% 40%,rgba(8,9,12,.85) 0%,rgba(8,9,12,.5) 65%,rgba(8,9,12,.1) 100%)}}
main{position:relative;z-index:1;max-width:880px!important;padding-top:64px!important}
footer{position:relative;z-index:1}

/* ── TYPE ───────────────────────────────────────────────────── */
.crumb{font-size:.76rem!important;color:var(--og-mute)!important;letter-spacing:.01em}
.crumb a{color:var(--og-body)!important;transition:color .2s}.crumb a:hover{color:var(--og-gold)!important}
.tag{display:inline-flex!important;align-items:center;gap:12px;border:0!important;padding:0!important;border-radius:0!important;
  font-size:.7rem!important;font-weight:600!important;letter-spacing:.3em!important;color:var(--og-champ)!important;margin-bottom:16px!important}
.tag::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,rgba(205,181,122,.7),transparent)}
h1{font-size:clamp(2rem,4.6vw,3.1rem)!important;font-weight:500!important;letter-spacing:-.032em;line-height:1.08!important;text-wrap:balance;margin-bottom:18px!important;color:var(--og-ink)}
.lede{font-size:clamp(1rem,1.3vw,1.12rem)!important;line-height:1.6;color:#D2CEC5!important}
.updated{font-size:.72rem!important;color:var(--og-mute)!important;letter-spacing:.02em}
h2{font-size:clamp(1.35rem,2.4vw,1.7rem)!important;font-weight:600!important;letter-spacing:-.025em;line-height:1.2;margin:56px 0 16px!important;color:var(--og-ink)}
h2 .g{color:var(--og-gold)}
p{color:var(--og-body)!important;line-height:1.75}
strong{color:var(--og-ink)!important;font-weight:600}
main a[style*="color:var(--gold)"]{transition:opacity .2s}main a[style*="color:var(--gold)"]:hover{opacity:.8}

/* ── CARDS: one language (landing §3 benefit card) ──────────── */
.flow .step,.box,.formula,.tbl-wrap,.ex-tbl,.checker-card{
  position:relative;background:var(--og-card)!important;border:1px solid var(--og-line)!important;border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -30px rgba(0,0,0,.7)}
.flow .step{overflow:hidden;padding:18px!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.flow .step::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)}
.flow .step::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%)}
.flow .step: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,.26),0 10px 24px rgba(0,0,0,.45)}
.flow .step:hover::before{transform:scaleY(1)}.flow .step:hover::after{opacity:1}
.flow .n{color:var(--og-champ)!important;font-weight:600!important;letter-spacing:.2em!important}
.flow .t{font-weight:500!important;color:var(--og-ink)!important}
.flow .step:hover .n{color:var(--og-gold)!important}

.box{border-left:2px solid var(--og-gold)!important;padding:20px 22px!important;transition:border-color .35s,box-shadow .35s}
.box:hover{border-color:rgba(240,192,64,.3)!important;border-left-color:var(--og-gold)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -22px rgba(240,192,64,.2)}
.formula{border-color:rgba(240,192,64,.2)!important;color:var(--og-gold)!important;font-size:.92rem!important;padding:20px 22px!important;
  background:radial-gradient(ellipse 70% 120% at 50% 130%,rgba(240,192,64,.10),transparent 70%),var(--og-card)!important}

/* tables: landing "Broker Details" style — gray labels, white values, gold highlights */
.tbl-wrap,.ex-tbl{overflow-x:auto;padding:0!important}
table{font-size:.88rem!important}
th{background:transparent!important;color:rgba(255,255,255,.32)!important;font-size:.62rem!important;font-weight:600!important;letter-spacing:.22em!important;
  border-bottom:1px solid rgba(255,255,255,.06);padding:14px 18px!important}
td{border-top:1px solid rgba(255,255,255,.05)!important;padding:14px 18px!important;color:var(--og-body)!important;transition:background .25s}
tr:hover td{background:rgba(240,192,64,.03)}
tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--og-gold)}
td strong{color:var(--og-ink)!important}
td.v{color:var(--og-ink)!important}
tr.sum td{background:rgba(240,192,64,.06)!important}
tr.sum td.v{color:var(--og-gold)!important}

/* lists: gold ticks in a ring · numbered steps in gold coins */
ul.checks li{padding:8px 0 8px 34px!important}
ul.checks li::before{content:''!important;top:12px;left:2px!important;width:18px;height:18px;border-radius:50%;
  background:rgba(240,192,64,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0C040' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
  border:1px solid rgba(240,192,64,.3)}
ol.steps{list-style:none;margin-left:0!important;counter-reset:ogs}
ol.steps li{position:relative;padding:8px 0 8px 38px!important;counter-increment:ogs}
ol.steps li::before{content:counter(ogs);position:absolute;left:0;top:9px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;color:var(--og-gold);
  background:rgba(240,192,64,.08);border:1px solid rgba(240,192,64,.3)}

/* ── BUTTONS: CashbackXM recipe in gold ─────────────────────── */
.btn-gold,.nav-cta{
  display:inline-flex!important;align-items:center;justify-content:center;gap:.4rem;
  background:linear-gradient(180deg,#F7D05E 0%,#EDB832 100%)!important;color:#0A0B0E!important;font-weight:700!important;border:0!important;border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 4px 14px rgba(240,192,64,.20);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s}
.nav-cta{border-radius:10px!important}
.btn-gold:hover,.nav-cta: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)}
.btn-gold:active,.nav-cta:active{transform:translateY(0)}
.btn-line{display:inline-flex!important;align-items:center;background:rgba(255,255,255,.025);border:1.5px solid rgba(255,255,255,.16)!important;color:var(--og-ink)!important;
  border-radius:12px!important;font-weight:600!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,color .25s,border-color .25s}
.btn-line:hover{background:rgba(240,192,64,.08);color:var(--og-gold)!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)}
.btn-gold:focus-visible,.btn-line:focus-visible,.nav-cta:focus-visible{outline:2px solid rgba(240,192,64,.75);outline-offset:3px}

/* ── CTA BAND: dark card + warm floor light (Exness card on landing) ── */
.cta-band{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#131419,#0B0C10)!important;
  border:1px solid rgba(240,192,64,.16)!important;border-radius:20px!important;padding:40px 30px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -34px rgba(0,0,0,.85);transition:border-color .45s,box-shadow .45s}
.cta-band::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 70% at 50% 125%,rgba(240,192,64,.18),transparent 65%)}
.cta-band::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;background:radial-gradient(ellipse 80% 80% at 50% 130%,rgba(240,192,64,.34),transparent 66%)}
.cta-band:hover{border-color:rgba(240,192,64,.32)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 56px -24px rgba(240,192,64,.22)}
.cta-band:hover::before{opacity:1}
.cta-band h3{font-size:1.45rem!important;font-weight:600!important;letter-spacing:-.025em;color:var(--og-ink)}

/* FAQ */
.faq h3{font-weight:600!important;letter-spacing:-.01em;font-size:1.02rem!important;margin-top:26px!important;padding-left:14px;border-left:2px solid rgba(240,192,64,.5)}
.faq h3+p{padding-left:16px}

/* ── CHECKER: landing hero status box ───────────────────────── */
.checker-card{border-color:rgba(240,192,64,.18)!important;border-radius:18px!important;padding:26px 24px 22px!important;
  background:radial-gradient(ellipse 70% 80% at 50% 135%,rgba(240,192,64,.12),transparent 70%),linear-gradient(180deg,#131419,#0B0C10)!important}
.status-form input{background:rgba(0,0,0,.36)!important;border:1px solid var(--og-line2)!important;border-radius:12px!important;transition:border-color .25s,box-shadow .25s}
.status-form input:focus{border-color:rgba(240,192,64,.55)!important;box-shadow:0 0 0 3px rgba(240,192,64,.12)}
.status-form .btn-gold{border-radius:12px!important}
/* results: brand palette — gold = running, champagne = waiting, amber = action needed */
.sr{border-radius:12px!important;background:rgba(0,0,0,.3)!important}
.sr.ok,.sr.okwait{border-color:rgba(240,192,64,.45)!important}
.sr.ok .sr-title{color:var(--og-gold)!important}.sr.okwait .sr-title{color:var(--og-champ)!important}
.sr.inactive,.sr.miss{border-color:rgba(217,163,90,.45)!important}
.sr.inactive .sr-title,.sr.miss .sr-title,.sr.invalid .sr-title{color:#D9A35A!important}
.box.st-ok{border-left-color:var(--og-gold)!important}.box.st-okwait{border-left-color:var(--og-champ)!important}
.box.st-inactive,.box.st-miss{border-left-color:#D9A35A!important}

/* ── FOOTER: landing look ───────────────────────────────────── */
footer{border-top:1px solid rgba(240,192,64,.14)!important;background:#0B0B0C;margin-top:72px!important}
.foot-inner{max-width:1180px!important}
.foot-logo{display:flex;align-items:center;gap:10px}
.foot-logo img{height:26px;width:auto}
.foot-links a{position:relative;transition:color .2s,padding .25s}
.foot-links a:hover{color:var(--og-gold)!important;padding-left:10px}
.foot-links a::before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:var(--og-gold);transition:width .25s}
.foot-links a:hover::before{width:6px}
.foot-legal{max-width:1180px!important;border-top:1px solid rgba(255,255,255,.05)}

@media(max-width:620px){main{padding-top:40px!important}h2{margin-top:44px!important}.cta-band{padding:30px 20px!important}}
@media(hover:none){.flow .step:hover,.btn-gold:hover,.btn-line:hover,.nav-cta:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.flow .step,.btn-gold,.btn-line,.nav-cta,.box,.cta-band{transition:none!important}.flow .step:hover,.btn-gold:hover,.btn-line:hover{transform:none}}
.foot-logo .foot-word{color:var(--og-ink)}.foot-logo .foot-word span{color:var(--og-gold)}