/* OG Cashback landing polish (28 Sep 2026) — loads LAST, after utspay-refinement.css.
   1) Hero depth (same layout)  2) JMT-style glass cards (broker pages: soft glass, hairline, inset highlight)
   3) "How it works" flow animation 1 → 2 → 3 → 4 (gold dot travels along the arrows, cards light up in turn)
   §14 (2 Oct 2026) the flow lives in its own band #how-it-works above #what; mobile = 4 boxes in one row */
:root{
  --og-line:rgba(255,255,255,.08);
  --og-line2:rgba(255,255,255,.15);
  --og-gold-line:rgba(240,192,64,.34);
  --og-card:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  --og-inset:inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── 1. HERO ─────────────────────────────────────────── */
#hero .hero-bg::after{
  background:
    radial-gradient(ellipse 42% 38% at 50% 30%,rgba(240,192,64,.15),transparent 72%),
    linear-gradient(180deg,rgba(8,9,12,.56) 0%,rgba(8,9,12,.44) 40%,rgba(8,9,12,.96) 100%);
}
.hero-center .hero-kicker{letter-spacing:.32em;color:rgba(240,192,64,.85)}
.hero-center .big-pct{
  background:linear-gradient(180deg,#FFE48F 0%,#F0C040 48%,#C89416 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  text-shadow:none!important;filter:drop-shadow(0 0 38px rgba(240,192,64,.28));
}
.hero-center .big-pct-sym{color:var(--gold)!important;opacity:.7}
.hero-sub-c span{color:var(--text3);letter-spacing:.02em}
.hero-center .hero-status,.hero-center .hero-mini-stats{
  background:rgba(10,11,15,.52)!important;border:1px solid var(--og-line2)!important;
  box-shadow:var(--og-inset),0 24px 60px -22px rgba(0,0,0,.75)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
.hero-status .status-form input{background:rgba(0,0,0,.36)!important;border:1px solid var(--og-line)!important;transition:border-color .25s,box-shadow .25s}
.hero-status .status-form input:focus{border-color:rgba(240,192,64,.55)!important;box-shadow:0 0 0 3px rgba(240,192,64,.12)!important;outline:none}
.hero-btns-c .btn-gold,.hero-status .btn-gold{
  background:linear-gradient(180deg,#F7CE58,#E9B62F)!important;color:#08090C!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 10px 26px rgba(240,192,64,.26)!important;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s!important;
}
.hero-btns-c .btn-gold:hover,.hero-status .btn-gold:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 34px rgba(240,192,64,.36)!important}
.hero-btns-c .btn-outline{
  background:rgba(255,255,255,.03)!important;border:1px solid rgba(240,192,64,.42)!important;color:var(--gold)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s!important;
}
.hero-btns-c .btn-outline:hover{transform:translateY(-2px);border-color:rgba(240,192,64,.75)!important;background:rgba(240,192,64,.06)!important}
.hero-center .hms-num{color:var(--gold)!important}
#hero .cost-card{
  background:rgba(12,13,18,.55)!important;border:1px solid var(--og-line2)!important;
  box-shadow:var(--og-inset),0 24px 60px -22px rgba(0,0,0,.75)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
#hero .hero-strip{background:rgba(8,9,12,.55)!important;border-top:1px solid rgba(240,192,64,.16)!important}

/* ── 2. CARDS (JMT broker-page glass) ────────────────── */
.path-card,.faq-item,.testi-card,.what-stat-card{
  background:var(--og-card)!important;border:1px solid var(--og-line)!important;
  box-shadow:var(--og-inset),0 24px 48px -28px rgba(0,0,0,.65)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.path-card{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s!important}
.path-card::before{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(240,192,64,.05) 0%,transparent 70%)!important}
.path-card.path-primary{border-color:rgba(240,192,64,.22)!important}
.path-card.path-primary::before{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(240,192,64,.09) 0%,transparent 70%)!important}
.path-card:hover,.testi-card:hover,.what-stat-card:hover,.faq-item:hover{
  border-color:var(--og-gold-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 32px rgba(0,0,0,.45),0 0 0 1px rgba(240,192,64,.10)!important;
}
.path-card:hover{transform:translateY(-4px)}
.path-pill{
  background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.09)!important;color:rgba(255,255,255,.55)!important;
  font-size:.62rem!important;letter-spacing:.14em!important;font-weight:600!important;padding:5px 12px!important;border-radius:999px!important;
}
.path-primary .path-pill{color:var(--gold)!important;border-color:rgba(240,192,64,.28)!important;background:rgba(240,192,64,.07)!important}
.path-step-dot{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.16)!important;color:var(--gold)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.copy-row,.video-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))!important;border:1px solid var(--og-line)!important;
  box-shadow:var(--og-inset)!important;border-radius:10px!important;
}
.video-btn{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s!important}
.video-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transition:left .6s ease}
.video-btn:hover::before{left:120%}
.video-btn:hover{transform:translateY(-2px);border-color:var(--og-line2)!important}

/* ── 3. HOW IT WORKS — flow 1 → 2 → 3 → 4 ────────────── */
#how-it-works .flow-item{
  position:relative;opacity:0;transform:translateX(-14px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012))!important;
  border:1px solid var(--og-line)!important;border-radius:14px!important;padding:16px 18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#how-it-works .flow-icon{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.16)!important;color:#e8e8e8!important}
#how-it-works .flow.flow-run .flow-item{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
  animation:ogFlowPulse 4.8s ease-in-out infinite;
}
#how-it-works .flow.flow-run .flow-icon{animation:ogFlowIcon 4.8s ease-in-out infinite}
#how-it-works .flow.flow-run .flow-item:nth-child(1){transition-delay:0s}
#how-it-works .flow.flow-run .flow-item:nth-child(3){transition-delay:.45s}
#how-it-works .flow.flow-run .flow-item:nth-child(5){transition-delay:.9s}
#how-it-works .flow.flow-run .flow-item:nth-child(7){transition-delay:1.35s}
#how-it-works .flow.flow-run .flow-item:nth-child(1),#how-it-works .flow.flow-run .flow-item:nth-child(1) .flow-icon{animation-delay:0s}
#how-it-works .flow.flow-run .flow-item:nth-child(3),#how-it-works .flow.flow-run .flow-item:nth-child(3) .flow-icon{animation-delay:1.2s}
#how-it-works .flow.flow-run .flow-item:nth-child(5),#how-it-works .flow.flow-run .flow-item:nth-child(5) .flow-icon{animation-delay:2.4s}
#how-it-works .flow.flow-run .flow-item:nth-child(7),#how-it-works .flow.flow-run .flow-item:nth-child(7) .flow-icon{animation-delay:3.6s}
/* arrow = track line + chevron + travelling gold dot */
#how-it-works .flow-arrow{
  font-size:0!important;line-height:0;color:transparent!important;padding:0!important;transform:none!important;
  position:relative;flex:0 0 44px;width:44px;height:2px;border-radius:2px;overflow:visible;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.16));
}
#how-it-works .flow-arrow::before{content:'';position:absolute;right:0;top:50%;width:7px;height:7px;border-top:2px solid rgba(255,255,255,.3);border-right:2px solid rgba(255,255,255,.3);transform:translateY(-50%) rotate(45deg)}
#how-it-works .flow-arrow::after{content:'';position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 3px rgba(240,192,64,.55);opacity:0}
#how-it-works .flow.flow-run .flow-arrow::after{animation:ogFlowDot 4.8s cubic-bezier(.4,0,.2,1) infinite}
#how-it-works .flow.flow-run .flow-arrow:nth-child(2)::after{animation-delay:.6s}
#how-it-works .flow.flow-run .flow-arrow:nth-child(4)::after{animation-delay:1.8s}
#how-it-works .flow.flow-run .flow-arrow:nth-child(6)::after{animation-delay:3s}
@keyframes ogFlowDot{0%{left:0;opacity:0}5%{opacity:1}17%{left:calc(100% - var(--og-dot,10px));opacity:1}22%{left:calc(100% - var(--og-dot,10px));opacity:0}100%{left:calc(100% - var(--og-dot,10px));opacity:0}}
@keyframes ogFlowPulse{
  0%,100%{border-color:var(--og-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  7%{border-color:rgba(240,192,64,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(240,192,64,.18),0 10px 30px -10px rgba(240,192,64,.4)}
  30%{border-color:var(--og-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
}
@keyframes ogFlowIcon{
  0%,100%{border-color:rgba(255,255,255,.16);color:#e8e8e8;background:rgba(255,255,255,.03)}
  7%{border-color:var(--gold);color:var(--gold);background:rgba(240,192,64,.14);box-shadow:0 0 14px rgba(240,192,64,.35)}
  30%{border-color:rgba(255,255,255,.16);color:#e8e8e8;background:rgba(255,255,255,.03)}
}
@media(prefers-reduced-motion:reduce){
  #how-it-works .flow-item{opacity:1;transform:none;animation:none!important}
  #how-it-works .flow-icon,#how-it-works .flow-arrow::after{animation:none!important}
}

/* ── 4. FAQ — restore rounded glass cards (editorial.css had flattened them to hairlines) ── */
.faq-list,.ecb-faq-list{gap:.8rem!important}
.faq-item{border-radius:14px!important;border:1px solid var(--og-line)!important;background:var(--og-card)!important;transition:border-color .3s,box-shadow .3s}
.faq-item summary{padding:1.05rem 1.3rem!important}
.faq-a{padding:0 1.3rem 1.15rem!important}
.faq-item[open]{border-color:rgba(240,192,64,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(240,192,64,.10)!important}
.faq-ic{color:var(--gold)!important}
/* globe icon next to "Countries Served" */
.og-globe{width:13px;height:13px;vertical-align:-2px;margin-right:5px;color:var(--gold);opacity:.9}
.what-stat-lbl .og-globe{width:15px;height:15px}

/* ============================================================
   §5 Hero background = ONE image, slide-style entrance played ONCE
   (user 28 Sep 2026: "ใช้ภาพเดียวก่อน · เข้าเหมือนสไลด์ปัจจุบัน · เข้าทีเดียว")
   Mirrors the old slideshow's first slide: quick fade-in, then the
   slow 24s Ken Burns zoom, but no loop / no fade-out.
   ============================================================ */
#hero .hero-bg .hb{opacity:1;animation:ogHeroIn .9s ease-out both}
#hero .hero-bg .hb img{animation:ogHeroZoom 24s linear both}
@keyframes ogHeroIn{from{opacity:0}to{opacity:1}}
@keyframes ogHeroZoom{from{transform:scale(1)}to{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){
  #hero .hero-bg .hb,#hero .hero-bg .hb img{animation:none!important;transform:none!important;opacity:1!important}
}

/* ============================================================
   §6 Testimonials: header re-centred + soft edge shadows on the
   scrolling rows (user 28 Sep 2026: "Layout พัง" + "Shadow ซ้ายขวา")
   Cause: editorial.css anchors .sec-title (max-width 720, margin 0)
   and .sec-sub (max-width 520) to the LEFT inside a text-align:center
   header -> title sits left, sub-line wraps oddly ("order" alone).
   ============================================================ */
#testimonials .testi-header{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 5vw;margin-bottom:3.25rem}
#testimonials .testi-header .sec-tag{margin-left:auto;margin-right:auto}
#testimonials .testi-header .sec-title{max-width:760px;margin:0 auto;text-align:center}
#testimonials .testi-header .sec-sub{max-width:560px;margin:18px auto 0;text-align:center}
/* edge shadows: rows fade into the section background on both sides */
#testimonials .testi-rows{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(48px,9vw,180px),#000 calc(100% - clamp(48px,9vw,180px)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 clamp(48px,9vw,180px),#000 calc(100% - clamp(48px,9vw,180px)),transparent 100%)}
/* a second, softer inner shadow so the fade reads as depth, not a cut */
#testimonials .testi-rows::before,#testimonials .testi-rows::after{content:'';position:absolute;top:0;bottom:0;width:clamp(60px,11vw,220px);z-index:3;pointer-events:none}
#testimonials .testi-rows::before{left:0;background:linear-gradient(90deg,rgba(12,12,13,.9) 0%,rgba(12,12,13,.45) 45%,rgba(12,12,13,0) 100%)}
#testimonials .testi-rows::after{right:0;background:linear-gradient(270deg,rgba(12,12,13,.9) 0%,rgba(12,12,13,.45) 45%,rgba(12,12,13,0) 100%)}

/* ============================================================
   §7 NAV — transparent over the hero, becomes a blurred plate once
   section 2 (#what) reaches the top (JMT v24 rule · user 28 Sep 2026)
   nav:not(.mob-links) because the mobile drawer also uses <nav>.
   ============================================================ */
nav:not(.mob-links){
  position:fixed!important;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,rgba(8,9,12,.80) 0%,rgba(8,9,12,.36) 55%,rgba(8,9,12,0) 100%)!important;
  border-bottom:1px solid transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease;
}
nav:not(.mob-links).scrolled{
  background:rgba(8,9,12,.80)!important;
  backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;
  border-bottom-color:rgba(255,255,255,.07)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
/* scroll-progress hairline along the bottom edge (only once the plate is on) */
nav:not(.mob-links)::after{
  content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--og-progress,0));
  background:linear-gradient(90deg,rgba(240,192,64,.35),var(--gold) 45%,#FFE48F);opacity:0;transition:opacity .35s;
}
nav:not(.mob-links).scrolled::after{opacity:.9}
/* nav links: gold underline slides in */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:.85rem;right:.85rem;bottom:.22rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover::after{transform:scaleX(1)}
/* the page now starts under the fixed nav: give the hero the nav height back */
#hero{padding-top:calc(5.8rem + 78px)!important;min-height:100vh!important}
@media(max-width:980px){#hero{padding-top:calc(5.2rem + 78px)!important}}
@media(max-width:800px){#hero{padding-top:calc(5.2rem + 66px)!important}}
section{scroll-margin-top:90px}

/* ============================================================
   §8 PAGE-WIDE DEPTH + MOTION (user 28 Sep 2026: "Animation และ Shadow ของทั้ง Page")
   8a seams  8b ambient drifting glow  8c panel shadows  8d staggered reveal
   8e buttons  8f footer
   ============================================================ */
/* 8a — section seams: inner shadow on the tinted bands + a gold hairline on the dark ones */
#what,#rates,#testimonials{box-shadow:inset 0 34px 40px -34px rgba(0,0,0,.6),inset 0 -34px 40px -34px rgba(0,0,0,.6)}
#howto,#compare,#faq{position:relative;overflow:hidden}
#howto::before,#compare::before,#faq::before{
  content:'';position:absolute;left:10%;right:10%;top:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(240,192,64,.26) 30%,rgba(240,192,64,.26) 70%,transparent);
}
/* 8b — one slow-drifting gold glow per dark section (very low opacity, blurred) */
#howto::after,#compare::after,#faq::after{
  content:'';position:absolute;width:58vw;height:58vw;max-width:860px;max-height:860px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(240,192,64,.085) 0%,rgba(240,192,64,.03) 38%,transparent 64%);
  filter:blur(28px);animation:ogDrift 26s ease-in-out infinite alternate;
}
#howto::after{top:-14%;right:-16%}
#compare::after{bottom:-18%;left:-16%;animation-delay:-9s}
#faq::after{top:-8%;left:52%;animation-delay:-17s}
#howto>.container,#compare>.container,#faq>.container{position:relative;z-index:1}
@keyframes ogDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7%,6%,0) scale(1.14)}}
/* 8c — panel shadows (rates table, comparison columns, photos, proof banner) */
.rate-tabs-wrap,.compare-col{box-shadow:var(--og-inset),0 34px 64px -34px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.03)!important;transition:box-shadow .35s,transform .35s}
.compare-col.col-gold{box-shadow:var(--og-inset),0 34px 64px -34px rgba(0,0,0,.75),0 0 0 1px rgba(240,192,64,.16),0 0 70px -24px rgba(240,192,64,.30)!important}
.compare-col:hover{transform:translateY(-3px)}
.ecb-intro-photo img,.proof-hero{box-shadow:0 34px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)!important}
.ecb-photo-frame{box-shadow:0 38px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)!important}
.what-stat-card{transition:border-color .3s,transform .3s,box-shadow .3s}
.rate-hero{box-shadow:0 0 0 1px rgba(240,192,64,.10),0 30px 60px -36px rgba(240,192,64,.35)}
/* 8d — staggered reveal for groups the original .fi system did not cover
       (transform goes through a variable so :hover lifts on the same element still win) */
.og-rv{opacity:0;transform:translateY(var(--og-ty,26px));
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
  transition-delay:calc(var(--i,0)*90ms),calc(var(--i,0)*90ms),0s,0s}
.og-rv.og-in{opacity:1;--og-ty:0px}
/* the original .fi reveal (specificity 0,3,0) was cancelling the path-card hover lift — restore it */
.path-card.fi.ecb-reveal-ready.vis:hover{transform:translateY(-4px)!important}
/* 8e — gold buttons everywhere get the hero treatment */
.btn-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -10px rgba(240,192,64,.55);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,background .3s}
.btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 30px -10px rgba(240,192,64,.7);transform:translateY(-2px)}
.btn-outline{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s}
/* 8f — footer seam */
footer{position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
footer::before{content:'';position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(240,192,64,.3) 30%,rgba(240,192,64,.3) 70%,transparent);pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .og-rv{opacity:1;transform:none;transition:none}
  #howto::after,#compare::after,#faq::after{animation:none}
  nav:not(.mob-links){transition:none}
}

/* ============================================================
   §9 MOBILE — hero photo crop (28 Sep 2026 mobile QA)
   On a 390px portrait viewport object-fit:cover shows the FULL image
   height, so the lobby's bright ceiling LED line sits ~17% down and
   reads as a stray horizontal rule under the nav. Push the crop down:
   show roughly the 30%–97% band (glass wall, skyline, floor).
   ============================================================ */
@media(max-width:800px){
  #hero .hero-bg .hb{overflow:hidden}
  #hero .hero-bg .hb img{position:absolute;left:0;width:100%;height:150%;top:-45%;object-position:50% 50%}
}

/* ============================================================
   §10 Hide the page SCROLLBAR (user 28 Sep 2026: the gold progress
   line under the nav replaces it). Only the document scrollbar —
   inner scroll areas (rates table on mobile) keep theirs.
   ============================================================ */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ============================================================
   §11 DATA BOXES — JMT "Broker Details" table look
   (user 28 Sep 2026, ref justmindsettrade.com/home/allbrokers/exness/)
   Palette for text inside data boxes = white · grey · light grey · gold only.
   Labels grey 40% weight 300 · values white 400 · highlights gold 500 ·
   category/column headers tiny letter-spaced grey 28% · hairline rows.
   ============================================================ */
.rate-tabs-wrap,.compare-col{
  background:rgba(9,11,16,.78)!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:14px!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.compare-col.col-gold{border-color:rgba(240,192,64,.22)!important}
.compare-col.col-gold::before{background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(240,192,64,.05) 0%,transparent 70%)!important}
/* 11a — rates table */
.rate-tabs{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.rate-tab{
  background:transparent!important;border-radius:0!important;box-shadow:none!important;
  color:rgba(255,255,255,.4)!important;font-weight:500!important;font-size:.8rem!important;letter-spacing:.06em!important;text-transform:uppercase;
  border-bottom:1px solid transparent!important;margin-bottom:-1px;
}
.rate-tab:hover:not(.active){color:#fff!important;background:rgba(255,255,255,.02)!important}
.rate-tab.active{color:var(--gold)!important;border-bottom-color:var(--gold)!important;background:rgba(240,192,64,.03)!important}
.rate-panel th{
  font-size:.62rem!important;font-weight:500!important;letter-spacing:.22em!important;text-transform:uppercase;
  color:rgba(255,255,255,.28)!important;background:transparent!important;padding:1.05rem 1.6rem .65rem!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;box-shadow:inset 0 0 30px rgba(240,192,64,.03);
}
.rate-panel td{padding:.8rem 1.6rem!important;font-size:.86rem!important;font-weight:300!important;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.05)!important;transition:background .2s}
.rate-panel td:nth-child(2){color:rgba(255,255,255,.4)!important;font-size:.82rem!important}
.rate-panel tr:last-child td{border-bottom:none!important}
.rate-panel tr:hover td{background:rgba(255,255,255,.02)!important}
.td-sym{font-weight:400!important;color:#fff!important;letter-spacing:.01em}
.td-gold{font-weight:500!important;color:var(--gold)!important;min-width:2.6em}
.td-bar-track{height:2px!important;width:56px!important;background:rgba(255,255,255,.05)!important}
.td-bar-fill{background:linear-gradient(90deg,rgba(240,192,64,.4),var(--gold))!important}
.rate-panel-foot{background:rgba(255,255,255,.015)!important;border-top:1px solid rgba(255,255,255,.06)!important;padding:1rem 1.6rem!important}
.rate-panel-foot-text{color:rgba(255,255,255,.4)!important;font-weight:300!important;font-size:.8rem!important}
.rate-panel-foot-val{color:var(--gold)!important;font-weight:500!important;font-size:.95rem!important}
/* 11b — comparison columns: same row grammar, no red/green (palette rule) */
.compare-head{border-bottom:1px solid rgba(255,255,255,.06)!important}
.compare-head-title{font-weight:500!important;letter-spacing:.01em}
.col-muted .compare-head-title{color:#fff!important}
.compare-head-sub{color:rgba(255,255,255,.4)!important;font-weight:300!important}
.compare-head-icon{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.08)!important}
.compare-row{padding:.85rem 1.75rem!important;border-bottom:1px solid rgba(255,255,255,.05)!important;transition:background .2s}
.compare-row:hover{background:rgba(255,255,255,.02)}
.compare-row-lbl{color:rgba(255,255,255,.4)!important;font-weight:300!important;font-size:.84rem!important}
.compare-row-val{font-weight:400!important;font-size:.92rem!important}
.val-neutral{color:#fff!important}
.val-red{color:rgba(255,255,255,.55)!important}
.val-green{color:var(--gold)!important;font-weight:500!important}
.val-gold{color:var(--gold)!important;font-weight:500!important}
.compare-foot{background:rgba(255,255,255,.015)!important;border-top:1px solid rgba(255,255,255,.06)!important}
.col-gold .compare-foot{background:rgba(240,192,64,.04)!important;border-top-color:rgba(240,192,64,.18)!important}
.compare-foot-big{font-weight:300!important}
.col-muted .compare-foot-big{color:rgba(255,255,255,.55)!important}
.compare-foot-lbl{color:rgba(255,255,255,.4)!important;font-weight:300!important;letter-spacing:.04em}
.col-gold .compare-foot-lbl{color:rgba(240,192,64,.7)!important}
/* 11c — stat cards: same label grammar */
#what .what-stat-card .what-stat-num{font-weight:300!important}   /* beats utspay-refinement.css "#what .what-stat-num 600!important" */
.what-stat-lbl{color:rgba(255,255,255,.4)!important;font-weight:300!important;letter-spacing:.06em!important;text-transform:uppercase;font-size:.68rem!important}
/* 11d — mobile: keep the three columns on one line (type column was wrapping to 3 lines) */
@media(max-width:800px){
  .rate-tab{font-size:.66rem!important;letter-spacing:.04em!important;padding:.8rem .25rem!important;white-space:nowrap}
  .rate-panel th{padding:.8rem .8rem .5rem!important;letter-spacing:.14em!important;font-size:.58rem!important}
  .rate-panel td{padding:.7rem .8rem!important;font-size:.8rem!important}
  .rate-panel td:nth-child(2){font-size:.72rem!important;white-space:nowrap}
  .td-bar-cell{gap:.45rem!important}
  .td-bar-track{width:34px!important}
  .compare-row{padding:.75rem 1.25rem!important}
}

/* ============================================================
   §12 HERO — no aura (user 29 Sep 2026: "เอา Aura ที่ Section hero ออก")
   Removes every gold halo inside #hero: the 80px text glow behind "90%",
   the gold glow under the hero buttons (Get Cashback / Check), and any
   radial gold background the old stylesheets painted behind the photo.
   Buttons keep a plain dark drop shadow so they still sit on the photo.
   ============================================================ */
#hero{background:none!important}
#hero .big-pct,#hero .big-pct-sym,#hero .hero-tagline,#hero .hero-kicker{text-shadow:none!important}
#hero .btn-gold,#hero .btn-gold:hover,#hero .hero-status .btn-gold,#hero .hero-status .btn-gold:hover{
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6)!important;
}
#hero .hero-glow3,#hero .hero-glow4,#hero [class*="hero-glow"]{display:none!important}

/* ============================================================
   §13 FULL-WIDTH LAYOUT on desktop (user 29 Sep 2026: "Layout ยังไม่ใช่ full width")
   Reference = JMT home: .container{max-width:none;padding:0 clamp(24px,3.5vw,72px)}.
   Before: content boxed at 1200px (nav/sections) · 1100px (footer) · 980px (compare)
   on every language. Now every wrapper stretches with the viewport and keeps a
   fluid side gutter; the hero text block stays centred (readability).
   ============================================================ */
@media(min-width:1200px){
  .nav-inner,.container,.trust-inner,.foot-inner,.foot-legal,.foot-bottom,
  .rates-inner,.howto-inner,.what-grid,.proof-hero,.ecb-hero-bottom,.ecb-hero-grid,.hero-split{max-width:none!important}
  .nav-inner,.container,.trust-inner{padding-left:clamp(24px,3.5vw,72px)!important;padding-right:clamp(24px,3.5vw,72px)!important}
  .foot-inner,.foot-legal,.foot-bottom{padding-left:clamp(24px,3.5vw,72px);padding-right:clamp(24px,3.5vw,72px)}
  .compare-inner{max-width:1320px!important}
  #testimonials .testi-head,#testimonials .sec-head{max-width:none}
}
@media(min-width:1600px){
  .what-grid{gap:6rem}
  .rates-inner{gap:56px!important}
}

/* ============================================================
   §14 HOW IT WORKS = its own band (owner 2 Oct 2026)
   The 01-04 flow moved out of #what (it sat between the "What is Cashback?"
   text and the stats grid) into <section id="how-it-works"> right after the
   trust bar. Every rule that styled it was #what-scoped (editorial.css l.39-40,
   utspay-refinement.css l.114-116, og-polish §3) so the look is re-declared
   here; §3 selectors were retargeted to #how-it-works. Band grammar = the
   tinted sections (#howto #141415) with the §8a inset seams. Mobile: the four
   boxes stay in ONE row so the travelling dot is visible (was a 2×2 grid with
   the arrows hidden).
   ============================================================ */
#how-it-works{position:relative;background:#141415;padding:56px 0 60px;
  box-shadow:inset 0 34px 40px -34px rgba(0,0,0,.6),inset 0 -34px 40px -34px rgba(0,0,0,.6)}
#how-it-works>.container{position:relative;z-index:1}
/* the card wrapper is just a group now (editorial.css l.39 look, no hairlines: the seams do that) */
#how-it-works .what-card{position:relative;width:100%;margin:0;background:none;border:0;border-radius:0;padding:0;box-shadow:none;overflow:visible}
#how-it-works .what-card::before{display:none}
#how-it-works .what-card>div:first-child{text-align:center}
/* row of 4 (utspay l.114: flex row, content-sized items, centred as a group) */
#how-it-works .flow{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 28px}
#how-it-works .flow-item{flex:0 1 190px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#how-it-works .flow-icon{width:30px;height:30px;font-size:11px;border-radius:50%}
#how-it-works .flow-lbl{font-size:12px}
#how-it-works .flow-val{font-size:15px;margin-top:7px}
/* RTL (ar): the row already runs right→left; mirror the chevron, the track gradient and the dot's travel */
[dir="rtl"] #how-it-works .flow-item{transform:translateX(14px)}
[dir="rtl"] #how-it-works .flow.flow-run .flow-item{transform:none}
[dir="rtl"] #how-it-works .flow-arrow{background:linear-gradient(270deg,rgba(255,255,255,.06),rgba(255,255,255,.16))}
[dir="rtl"] #how-it-works .flow-arrow::before{right:auto;left:0;transform:translateY(-50%) rotate(-135deg)}
[dir="rtl"] #how-it-works .flow-arrow::after{left:auto;right:0}
[dir="rtl"] #how-it-works .flow.flow-run .flow-arrow::after{animation-name:ogFlowDotRtl}
@keyframes ogFlowDotRtl{0%{right:0;opacity:0}5%{opacity:1}17%{right:calc(100% - var(--og-dot,10px));opacity:1}22%{right:calc(100% - var(--og-dot,10px));opacity:0}100%{right:calc(100% - var(--og-dot,10px));opacity:0}}
@media(max-width:800px){
  #how-it-works{padding:40px 0 44px}
  #how-it-works .what-card>div:first-child{margin-bottom:1.1rem!important}
}
/* ≤700px: ONE row of 4 boxes + 3 visible arrows. Budget at 360px: 340 inner − 3×18 arrows − 6×4 gaps = 262 → ~65px per box.
   Labels may wrap to 2-3 lines; number badge + value stay readable. */
@media(max-width:700px){
  /* editorial.css l.151 narrows .container to 88% on phones; this band needs the full width */
  #how-it-works .container{width:100%!important;max-width:none!important;padding-left:10px!important;padding-right:10px!important}
  #how-it-works .flow{flex-wrap:nowrap;gap:0 4px;align-items:stretch}
  #how-it-works .flow-item{flex:1 1 0;min-width:0;align-items:center;text-align:center;gap:7px;padding:10px 5px 11px!important;border-radius:10px!important}
  #how-it-works .flow-item>div:last-child{min-width:0;width:100%}
  #how-it-works .flow-icon{width:24px;height:24px;font-size:10px}
  #how-it-works .flow-lbl{font-size:10px;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
  #how-it-works .flow-val{font-size:11.5px;line-height:1.25;margin-top:4px;overflow-wrap:anywhere;hyphens:auto}
  #how-it-works .flow-arrow{flex:0 0 18px;width:18px;align-self:center;--og-dot:8px}
  #how-it-works .flow-arrow::before{width:5px;height:5px}
  #how-it-works .flow-arrow::after{width:8px;height:8px;margin-top:-4px;box-shadow:0 0 9px 2px rgba(240,192,64,.6)}
}
@media(max-width:400px){
  #how-it-works .flow{gap:0 3px}
  #how-it-works .flow-item{padding:10px 4px 11px!important}
  #how-it-works .flow-arrow{flex-basis:16px;width:16px}
  #how-it-works .flow-lbl{font-size:9.5px}
  #how-it-works .flow-val{font-size:11px}
}