/* M2 V4.0 "Ember Stage" design system - prototype stylesheet (mobile-first, 390px reference) */

@font-face { font-family: "M2 Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "M2 Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* colour */
  --v4-lacquer: #140b08;
  --v4-lacquer-2: #1b100b;
  --v4-kiln: #24160f;
  --v4-kiln-2: #2f1d14;
  --v4-ember: #f05934;
  --v4-flare: #ff9a3c;
  --v4-ember-deep: #b8391a;
  --v4-brass: #d9b27c;
  --v4-porcelain: #f7f0e8;
  --v4-porcelain-2: #ede1d2;
  --v4-ink: #24160f;
  --v4-ink-2: #6a5243;
  --v4-cream: #fbf3ea;
  --v4-mute: #c9b4a4;
  --v4-line: rgba(217, 178, 124, .16);
  --v4-line-2: rgba(217, 178, 124, .32);
  --v4-on-ember: #2a0f05;
  --v4-grad-ember: linear-gradient(180deg, #ff9a3c 0%, #f47234 46%, #f05934 100%);
  --v4-grad-brass: linear-gradient(90deg, rgba(217, 178, 124, 0), #d9b27c 50%, rgba(217, 178, 124, 0));
  /* type */
  --v4-font: "M2 Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --v4-wide: 125%;
  --v4-semi: 112%;
  --v4-cond: 87.5%;
  --v4-fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
  --v4-fs-h1: clamp(2.125rem, 1.55rem + 2.6vw, 3.75rem);
  --v4-fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.625rem);
  --v4-fs-h3: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  --v4-fs-body: 1rem;
  --v4-fs-small: .875rem;
  --v4-fs-micro: .75rem;
  /* shape + space */
  --v4-r-s: 10px;   /* chips inside cards, small icon boxes */
  --v4-r-m: 14px;   /* tiles, rows, method logos, steps */
  --v4-r-l: 20px;   /* cards, offers, game art */
  --v4-r-xl: 28px;  /* bands, sheets, ledger, CTA */
  --v4-btn-h: 52px;
  --v4-btn-h-sm: 40px;
  --v4-safe-b: env(safe-area-inset-bottom, 0px);
  --v4-float: 44px;
  --v4-sec-y: 44px;
  --v4-gutter: 16px;
  --v4-max: 1240px;
  --v4-header-h: 60px;
  --v4-bar-h: 64px;
  --v4-shadow: 0 24px 48px -28px rgba(0, 0, 0, .75);
  --v4-glow: 0 10px 24px -12px rgba(240, 89, 52, .6);
  --v4-glow-hover: 0 14px 30px -12px rgba(240, 89, 52, .75);
  --v4-ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--v4-header-h) + 12px); }
body { margin: 0; background: var(--v4-lacquer); color: var(--v4-cream); font-family: var(--v4-font); font-size: var(--v4-fs-body); line-height: 1.6; font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--v4-bar-h) + var(--v4-safe-b)); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--v4-flare); outline-offset: 3px; border-radius: 6px; }
.v4-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v4-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--v4-cream); color: var(--v4-ink); font-weight: 700; }
.v4-skip:focus { top: 10px; }
.v4-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.v4-wrap { width: 100%; max-width: var(--v4-max); margin: 0 auto; padding: 0 var(--v4-gutter); }

/* ---------------------------------------------------------------- type */
.v4-display, .v4-h1, .v4-h2 { font-weight: 800; letter-spacing: -.02em; line-height: 1; font-stretch: var(--v4-wide); text-wrap: balance; }
.v4-display { font-size: var(--v4-fs-display); }
.v4-h1 { font-size: var(--v4-fs-h1); }
.v4-h2 { font-size: var(--v4-fs-h2); line-height: 1.05; }
.v4-h3 { font-size: var(--v4-fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.005em; font-stretch: var(--v4-semi); }
.v4-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--v4-mute); max-width: 60ch; }
.v4-text { color: var(--v4-mute); max-width: 68ch; }
.v4-small { font-size: var(--v4-fs-small); }
.v4-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: var(--v4-fs-small); font-weight: 600; font-stretch: var(--v4-semi); color: var(--v4-brass); }
.v4-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
:lang(zh) .v4-display, :lang(zh) .v4-h1, :lang(zh) .v4-h2 { letter-spacing: .01em; line-height: 1.15; }
:lang(zh) .v4-lead, :lang(zh) .v4-text { line-height: 1.8; }

/* ---------------------------------------------------------------- buttons */
.v4-btn { --_h: var(--v4-btn-h); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--_h); padding: 0 24px; border-radius: 999px; font-weight: 700; font-stretch: var(--v4-semi); font-size: 1rem; letter-spacing: .005em; line-height: 1; white-space: nowrap; transition: transform .18s var(--v4-ease), box-shadow .18s var(--v4-ease), background-color .18s; }
.v4-btn:active { transform: translateY(1px) scale(.99); }
.v4-btn--ember { background: var(--v4-grad-ember); color: var(--v4-on-ember); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .7), inset 0 -2px 0 rgba(150, 40, 10, .35), var(--v4-glow); }
.v4-btn--ember:hover { box-shadow: inset 0 1px 0 rgba(255, 236, 214, .7), inset 0 -2px 0 rgba(150, 40, 10, .35), var(--v4-glow-hover); filter: saturate(1.05); }
.v4-btn--line { color: var(--v4-cream); border: 1px solid var(--v4-line-2); background: rgba(251, 243, 234, .03); }
.v4-btn--line:hover { border-color: var(--v4-brass); background: rgba(217, 178, 124, .08); }
.v4-btn--ink { color: var(--v4-porcelain); background: var(--v4-ink); }
.v4-btn--ink:hover { background: #3a2418; }
.v4-btn--inkline { color: var(--v4-ink); border: 1px solid rgba(36, 22, 15, .3); }
.v4-btn--inkline:hover { border-color: var(--v4-ink); }
.v4-btn--sm { --_h: var(--v4-btn-h-sm); padding: 0 16px; font-size: .875rem; }
.v4-btn--block { width: 100%; }
.v4-btn .v4-icon { width: 18px; height: 18px; }
.v4-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v4-actions > .v4-btn { flex: 1 1 140px; }
.v4-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-stretch: var(--v4-semi); color: var(--v4-flare); }
.v4-link .v4-icon { width: 16px; height: 16px; transition: transform .18s var(--v4-ease); }
.v4-link:hover .v4-icon { transform: translateX(3px); }
.v4-ledger .v4-link, .v4-porcelain .v4-link { color: var(--v4-ember-deep); }

/* ---------------------------------------------------------------- header */
.v4-header { position: sticky; top: 0; z-index: 50; height: var(--v4-header-h); background: rgba(20, 11, 8, .82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--v4-line); }
.v4-header__in { height: 100%; display: flex; align-items: center; gap: 10px; }
.v4-logo { display: block; flex: none; }
.v4-logo img { width: 66px; height: 22px; }
.v4-nav { display: none; }
.v4-header__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.v4-header .v4-btn--sm { --_h: 40px; padding: 0 14px; font-size: .8125rem; transition: opacity .2s, visibility .2s; }
.v4-iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--v4-line); color: var(--v4-cream); }
.v4-iconbtn:hover { border-color: var(--v4-line-2); }
.v4-lang { display: none; }

/* desktop header */
@media (min-width: 1024px) {
  :root { --v4-header-h: 76px; --v4-gutter: 32px; }
  body { padding-bottom: 0; }
  .v4-logo img { width: 84px; height: 28px; }
  .v4-nav { display: flex; align-items: center; gap: 4px; margin-left: 28px; }
  .v4-nav__item { position: relative; }
  .v4-nav__link { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: .9375rem; font-weight: 600; font-stretch: var(--v4-semi); color: rgba(251, 243, 234, .82); }
  .v4-nav__link:hover, .v4-nav__item:focus-within > .v4-nav__link { color: var(--v4-cream); background: rgba(251, 243, 234, .05); }
  .v4-nav__link[aria-current="page"] { color: var(--v4-cream); box-shadow: inset 0 -2px 0 var(--v4-ember); border-radius: 10px 10px 0 0; }
  .v4-nav__link .v4-icon { width: 14px; height: 14px; opacity: .7; }
  .v4-mega { position: absolute; top: calc(100% + 10px); left: -12px; width: 560px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: var(--v4-r-l); background: linear-gradient(180deg, #2a1a12, #1a100b); border: 1px solid var(--v4-line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s var(--v4-ease), visibility 0s .18s; }
  .v4-nav__item:hover > .v4-mega, .v4-nav__item:focus-within > .v4-mega, .v4-nav__item.is-open > .v4-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .v4-mega a { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; }
  .v4-mega a:hover { background: rgba(251, 243, 234, .05); }
  .v4-mega__art { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 80%, rgba(240, 89, 52, .55), transparent 70%), #1a100b; overflow: hidden; }
  .v4-mega__art img { width: 46px; height: 46px; object-fit: contain; }
  .v4-mega b { display: block; font-size: .9375rem; font-stretch: var(--v4-semi); }
  .v4-mega span { display: block; font-size: .8125rem; color: var(--v4-mute); line-height: 1.35; }
  .v4-lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--v4-line); }
  .v4-lang a { min-width: 40px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--v4-mute); }
  .v4-lang a[aria-current="true"] { background: var(--v4-cream); color: var(--v4-ink); }
  .v4-header .v4-btn--sm { --_h: 42px; padding: 0 20px; font-size: .875rem; }
  .v4-header .v4-menu-btn { display: none; }
}

/* ---------------------------------------------------------------- mobile menu sheet */
.v4-sheet { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; visibility: hidden; }
.v4-sheet__scrim { position: absolute; inset: 0; background: rgba(8, 4, 2, .62); opacity: 0; transition: opacity .25s; }
.v4-sheet__panel { position: relative; width: min(100%, 420px); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(90% 40% at 100% 0%, rgba(240, 89, 52, .22), transparent 70%), var(--v4-lacquer-2); transform: translateX(100%); transition: transform .32s var(--v4-ease); padding-bottom: 32px; }
.v4-sheet.is-open { visibility: visible; }
.v4-sheet.is-open .v4-sheet__scrim { opacity: 1; }
.v4-sheet.is-open .v4-sheet__panel { transform: none; }
.v4-sheet__head { position: sticky; top: 0; z-index: 1; height: var(--v4-header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--v4-gutter); background: rgba(27, 16, 11, .94); border-bottom: 1px solid var(--v4-line); }
.v4-sheet__body { padding: 18px var(--v4-gutter) 0; display: grid; gap: 22px; }
.v4-sheet__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v4-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; border: 1px solid var(--v4-line); }
.v4-seg a { height: 38px; display: grid; place-items: center; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--v4-mute); }
.v4-seg a[aria-current="true"] { background: var(--v4-cream); color: var(--v4-ink); }
.v4-sheet__group h2 { font-size: var(--v4-fs-small); font-weight: 600; font-stretch: var(--v4-semi); color: var(--v4-brass); margin-bottom: 8px; }
.v4-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v4-tile { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: var(--v4-r-m); background: radial-gradient(80% 60% at 50% 85%, rgba(240, 89, 52, .38), transparent 70%), var(--v4-kiln); border: 1px solid var(--v4-line); text-align: center; font-size: .8125rem; font-weight: 600; font-stretch: var(--v4-semi); }
.v4-tile img { width: 56px; height: 56px; object-fit: contain; }
.v4-tile[aria-current="page"] { border-color: var(--v4-ember); }
.v4-rows { border-top: 1px solid var(--v4-line); }
.v4-rows a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--v4-line); font-weight: 600; font-stretch: var(--v4-semi); }
.v4-rows a span { font-size: .8125rem; font-weight: 400; color: var(--v4-mute); font-stretch: 100%; }
.v4-rows a .v4-icon { color: var(--v4-brass); width: 16px; height: 16px; }
.v4-rows a[aria-current="page"] { color: var(--v4-flare); }

/* ---------------------------------------------------------------- mobile task bar */
.v4-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--v4-bar-h) + var(--v4-safe-b)); padding: 0 4px var(--v4-safe-b); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; background: rgba(27, 16, 11, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--v4-line); }
.v4-bar a, .v4-bar button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: var(--v4-bar-h); min-width: 0; padding: 0 2px; border-radius: 12px; font-size: .6875rem; line-height: 1.1; font-weight: 600; font-stretch: var(--v4-semi); color: var(--v4-mute); -webkit-tap-highlight-color: transparent; }
.v4-bar a span, .v4-bar button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v4-bar a:active, .v4-bar button:active { background: rgba(251, 243, 234, .06); }
.v4-bar .v4-icon { width: 22px; height: 22px; }
.v4-bar [aria-current="page"] { color: var(--v4-cream); }
.v4-bar [aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 24px; height: 2px; border-radius: 0 0 2px 2px; background: var(--v4-ember); }
.v4-bar__play[aria-current="page"]::before { display: none; }
.v4-bar__play .v4-bar__disc { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--v4-grad-ember); color: var(--v4-on-ember); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .6), 0 6px 14px -6px rgba(240, 89, 52, .7); }
.v4-bar__play .v4-bar__disc .v4-icon { width: 20px; height: 20px; }
.v4-bar__play { color: var(--v4-cream) !important; }
@media (min-width: 1024px) { .v4-bar { display: none; } }

/* ---------------------------------------------------------------- support (bottom sheet on mobile, dock on desktop) */
.v4-dock { display: none; }
@media (min-width: 1024px) {
  .v4-dock { position: fixed; right: 24px; bottom: 24px; z-index: 44; display: block; }
  .v4-dock__btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--v4-grad-ember); color: var(--v4-on-ember); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .6), var(--v4-glow); transition: transform .18s var(--v4-ease), box-shadow .18s; }
  .v4-dock__btn:hover { box-shadow: inset 0 1px 0 rgba(255, 236, 214, .6), var(--v4-glow-hover); }
  .v4-dock__btn:active { transform: scale(.95); }
  .v4-dock__btn .v4-icon { width: 24px; height: 24px; }
}
.v4-support { position: fixed; inset: 0; z-index: 85; visibility: hidden; }
.v4-support__scrim { position: absolute; inset: 0; background: rgba(8, 4, 2, .6); opacity: 0; transition: opacity .2s; }
.v4-support__panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px var(--v4-gutter) calc(20px + var(--v4-safe-b)); border-radius: 24px 24px 0 0; background: var(--v4-lacquer-2); border-top: 1px solid var(--v4-line-2); transform: translateY(100%); transition: transform .3s var(--v4-ease); }
.v4-support__grab { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: var(--v4-line-2); }
.v4-support.is-open { visibility: visible; }
.v4-support.is-open .v4-support__scrim { opacity: 1; }
.v4-support.is-open .v4-support__panel { transform: none; }
.v4-support__list { display: grid; gap: 8px; margin-top: 14px; }
.v4-support__list a, .v4-support__list button { display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 12px; padding: 12px; border-radius: var(--v4-r-m); background: var(--v4-kiln); border: 1px solid var(--v4-line); text-align: left; width: 100%; }
.v4-support__list b { display: block; font-stretch: var(--v4-semi); }
.v4-support__list span { display: block; font-size: .8125rem; color: var(--v4-mute); line-height: 1.35; }
.v4-support__list .v4-chip-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(240, 89, 52, .14); color: var(--v4-flare); }
.v4-support__list > :first-child .v4-chip-ic { background: var(--v4-grad-ember); color: var(--v4-on-ember); }
@media (min-width: 1024px) {
  .v4-support__panel { left: auto; right: 24px; bottom: 92px; width: 360px; border-radius: 22px; border: 1px solid var(--v4-line-2); transform: translateY(12px); opacity: 0; transition: transform .22s var(--v4-ease), opacity .22s; padding-bottom: 16px; }
  .v4-support.is-open .v4-support__panel { opacity: 1; }
  .v4-support__grab { display: none; }
}

/* ---------------------------------------------------------------- the stage (signature) */
.v4-stage { position: relative; isolation: isolate; aspect-ratio: 1 / .86; display: grid; place-items: end center; }
.v4-stage__beam { position: absolute; inset: -8% 8% 18%; z-index: -2; background: conic-gradient(from 180deg at 50% 0%, transparent 155deg, rgba(255, 170, 100, .22) 172deg, rgba(255, 190, 120, .32) 180deg, rgba(255, 170, 100, .22) 188deg, transparent 205deg); filter: blur(6px); }
.v4-stage__glow { position: absolute; left: 6%; right: 6%; bottom: 4%; height: 46%; z-index: -2; background: radial-gradient(50% 60% at 50% 70%, rgba(240, 89, 52, .62), rgba(240, 89, 52, 0) 70%); }
.v4-stage__disc { position: absolute; left: 8%; right: 8%; bottom: 3%; height: 15%; z-index: -1; border-radius: 50%; background: radial-gradient(50% 55% at 50% 40%, #3a2216, #1c100a 72%); box-shadow: inset 0 2px 0 rgba(255, 210, 160, .35), 0 18px 30px -12px rgba(0, 0, 0, .9); }
.v4-stage__ring { position: absolute; left: 8%; right: 8%; bottom: 3%; height: 15%; z-index: 1; width: 84%; overflow: visible; pointer-events: none; }
.v4-stage__ring ellipse { fill: none; stroke: url(#v4-brass-stroke); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.v4-stage__art { position: relative; width: 92%; max-height: 92%; object-fit: contain; object-position: center bottom; margin-bottom: 9%; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .55)); }
.v4-stage--compact { aspect-ratio: 1 / .78; }

/* ---------------------------------------------------------------- T1 home hero */
.v4-hero { position: relative; overflow: hidden; padding: 8px 0 28px; background: radial-gradient(120% 70% at 50% 0%, rgba(240, 89, 52, .2), transparent 60%), var(--v4-lacquer); }
.v4-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--v4-grad-brass); opacity: .5; }
.v4-hero__grid { display: grid; gap: 4px; }
.v4-hero__stagebox { position: relative; margin: 0 -8px; }
.v4-slides { position: relative; }
.v4-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.v4-slide.is-on { position: relative; opacity: 1; }
.v4-hero__caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 8px 0; }
.v4-hero__label { font-size: .875rem; font-weight: 600; font-stretch: var(--v4-semi); }
.v4-hero__label small { display: block; font-size: .75rem; font-weight: 500; color: var(--v4-mute); }
.v4-dots { display: flex; align-items: center; gap: 2px; flex: none; }
.v4-dots button { width: 14px; height: 24px; display: grid; place-items: center; }
.v4-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: rgba(251, 243, 234, .3); transition: width .3s var(--v4-ease), background .3s; }
.v4-dots button[aria-current="true"]::before { width: 18px; background: var(--v4-ember); }
.v4-dots .v4-pause { width: 30px; height: 30px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--v4-line-2); }
.v4-dots .v4-pause::before { display: none; }
.v4-dots .v4-pause .v4-icon { width: 14px; height: 14px; }
.v4-hero__copy { display: contents; }
.v4-hero__grid > .v4-hero__stagebox { order: 3; }
.v4-hero__copy > .v4-kicker { order: 1; margin-top: 10px; }
.v4-hero__copy > .v4-display { order: 2; margin-bottom: 4px; }
.v4-hero__copy > .v4-hero__sub { order: 4; margin-top: 14px; }
.v4-hero__copy > .v4-actions { order: 5; margin-top: 16px; }
.v4-hero__copy > .v4-hero__operated { order: 6; margin-top: 14px; }
.v4-hero .v4-stage { aspect-ratio: 1 / .66; }
.v4-hero .v4-stage__art { width: 84%; }
.v4-hero__copy .v4-display { margin-top: 2px; }
.v4-hero__sub { color: var(--v4-mute); font-size: 1.0625rem; max-width: 36ch; }
.v4-hero__operated { font-size: var(--v4-fs-micro); color: var(--v4-mute); display: flex; align-items: center; gap: 8px; }
.v4-hero__operated b { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--v4-line-2); color: var(--v4-cream); font-weight: 700; }
@media (min-width: 900px) {
  .v4-hero { padding: 24px 0 40px; }
  .v4-hero__grid { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 24px; }
  .v4-hero__copy { display: grid; order: -1; gap: 22px; align-content: center; }
  .v4-hero__copy > * { margin: 0 !important; }
  .v4-hero .v4-stage { aspect-ratio: 1 / .86; }
  .v4-hero .v4-stage__art { width: 92%; }
  .v4-hero__stagebox { margin: 0; }
}

/* the one orchestrated motion moment */
@keyframes v4-rise{from{transform:translateY(18px)}to{transform:none}}
@keyframes v4-stretch{from{transform:scaleX(.94)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .v4-hero .v4-slide.is-on .v4-stage__art{animation:v4-rise .9s .1s var(--v4-ease) both}
  .v4-hero .v4-display{animation:v4-stretch .9s var(--v4-ease) both;transform-origin:left center}
  .v4-hero .v4-stage__ring ellipse{stroke-dasharray:1000;stroke-dashoffset:1000;animation:v4-ring 1.3s .25s var(--v4-ease) forwards}
  .v4-hero .v4-stage__glow{animation:v4-fade 1.2s .15s ease both}
}
.v4-slides.is-dormant .v4-slide:not(.is-on){display:none}
.v4-hero .v4-stage__art{aspect-ratio:563/429}
@keyframes v4-ring { to { stroke-dashoffset: 0; } }
@keyframes v4-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* task rail under the home hero */
.v4-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.v4-task { display: grid; justify-items: center; gap: 8px; padding: 14px 4px 12px; border-radius: var(--v4-r-m); background: var(--v4-kiln); border: 1px solid var(--v4-line); font-size: .8125rem; font-weight: 600; font-stretch: var(--v4-semi); text-align: center; }
.v4-task .v4-icon { width: 24px; height: 24px; color: var(--v4-flare); }
.v4-task:first-child { background: var(--v4-grad-ember); color: var(--v4-on-ember); border-color: transparent; }
.v4-task:first-child .v4-icon { color: var(--v4-on-ember); }
.v4-task:hover { border-color: var(--v4-line-2); }
@media (min-width: 900px) { .v4-tasks { grid-template-columns: repeat(6, 1fr); margin-top: 34px; } .v4-task { grid-template-columns: auto auto; justify-content: center; align-items: center; padding: 16px; font-size: .9375rem; } }

/* ---------------------------------------------------------------- page hero (T2-T6) */
.v4-phero { position: relative; overflow: hidden; padding: 10px 0 28px; background: var(--v4-bg-m, none) center top / cover no-repeat, var(--v4-lacquer); }
.v4-phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--v4-grad-brass); opacity: .45; }
.v4-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8125rem; color: var(--v4-mute); padding: 8px 0 4px; }
.v4-crumbs a:hover { color: var(--v4-cream); }
.v4-crumbs .v4-icon { width: 12px; height: 12px; opacity: .6; }
.v4-crumbs [aria-current="page"] { color: var(--v4-flare); }
.v4-phero__grid { display: grid; gap: 6px; }
.v4-phero__copy { display: grid; gap: 14px; align-content: start; }
.v4-phero__art { margin: 0 -8px; }
.v4-phero__art .v4-stage { aspect-ratio: 1 / .7; }
.v4-phero__art .v4-stage__art { width: 78%; }
.v4-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v4-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v4-line); background: rgba(251, 243, 234, .03); font-size: .8125rem; font-weight: 600; font-stretch: var(--v4-semi); color: var(--v4-cream); }
.v4-chip .v4-icon { width: 16px; height: 16px; color: var(--v4-flare); }
@media (min-width: 900px) {
  .v4-phero { padding: 12px 0 36px; background-image: var(--v4-bg-d, none); }
  .v4-phero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; min-height: 380px; }
  .v4-phero__art { margin: 0; }
}
/* hero type variants per template */
.v4-phero--gateway .v4-phero__art .v4-stage__art { width: 54%; }
.v4-phero--cashier { background: var(--v4-lacquer); }
.v4-phero--trust .v4-phero__grid { grid-template-columns: 1fr; min-height: 0; }
.v4-phero--trust { padding-bottom: 32px; }

/* ---------------------------------------------------------------- sections */
.v4-sec { padding: var(--v4-sec-y) 0; position: relative; }
.v4-sec + .v4-sec { padding-top: 8px; }
.v4-sec--tight { padding: 28px 0; }
.v4-sechead { display: grid; gap: 10px; margin-bottom: 22px; }
.v4-sechead__row { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
@media (min-width: 900px) { :root { --v4-sec-y: 64px; } .v4-sec + .v4-sec { padding-top: 8px; } .v4-sechead { margin-bottom: 28px; } }
.v4-phero + .v4-sec, .v4-phero + .v4-subnav + .v4-sec { padding-top: calc(var(--v4-sec-y) * .75); }

/* porcelain band: light editorial surface for logos, banking and long reading */
.v4-porcelain { background: var(--v4-porcelain); color: var(--v4-ink); }
.v4-porcelain .v4-text, .v4-porcelain .v4-lead { color: var(--v4-ink-2); }
.v4-porcelain .v4-kicker { color: #85572a; }
.v4-sec.v4-porcelain { padding: 44px 0; margin: 28px 0; }
@media (min-width: 900px) { .v4-sec.v4-porcelain { padding: 72px 0; margin: 40px 0; } }

/* ---------------------------------------------------------------- categories bento (home, game hall) */
.v4-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v4-cat { position: relative; overflow: hidden; display: grid; grid-template-rows: 1fr auto; min-height: 168px; padding: 14px; border-radius: var(--v4-r-l); background: radial-gradient(70% 55% at 50% 78%, rgba(240, 89, 52, .5), transparent 70%), linear-gradient(180deg, var(--v4-kiln-2), var(--v4-kiln)); border: 1px solid var(--v4-line); }
.v4-cat img { justify-self: center; align-self: end; width: auto; height: 104px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); transition: transform .3s var(--v4-ease); }
.v4-cat:hover img { transform: translateY(-4px) scale(1.03); }
.v4-cat b { font-size: 1.0625rem; font-stretch: var(--v4-semi); }
.v4-cat span { display: block; font-size: .8125rem; color: var(--v4-mute); line-height: 1.35; }
.v4-cat:last-child { grid-column: 1 / -1; grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; min-height: 120px; }
.v4-cat:last-child img { height: 92px; grid-column: 2; grid-row: 1; }
.v4-cat:last-child > div { grid-column: 1; grid-row: 1; }
.v4-cat--lead { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: end; min-height: 188px; }
.v4-cat--lead img { height: 150px; max-width: none; justify-self: end; margin-right: -14px; grid-column: 2; grid-row: 1; }
.v4-cat--lead > div { grid-column: 1; grid-row: 1; align-self: end; }
.v4-cat--lead b { font-size: 1.375rem; font-stretch: var(--v4-wide); }
@media (min-width: 900px) {
  .v4-cats { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
  .v4-cat--lead { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .v4-cat--lead img { height: 260px; }
  .v4-cat img { height: 120px; }
  .v4-cat:last-child { grid-column: 1 / -1; min-height: 0; }
  .v4-cat:last-child img { height: 120px; }
}

/* game cards rail */
.v4-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--v4-gutter); padding: 2px var(--v4-gutter) 8px; margin: 0 calc(var(--v4-gutter) * -1); scrollbar-width: none; }
.v4-rail::-webkit-scrollbar { display: none; }
.v4-rail > * { scroll-snap-align: start; }
.v4-game { display: grid; gap: 10px; }
.v4-game__art { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 400 / 460; background: var(--v4-kiln); box-shadow: var(--v4-shadow); }
.v4-game__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--v4-ease); }
.v4-game:hover .v4-game__art img { transform: scale(1.04); }
.v4-game__art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 220, 180, .14); }
.v4-game b { font-size: .9375rem; font-stretch: var(--v4-semi); line-height: 1.25; }
.v4-game span { display: block; font-size: .75rem; color: var(--v4-mute); }
.v4-grid-games { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 900px) { .v4-rail { grid-auto-columns: calc((100% - 60px) / 6); overflow: visible; margin: 0; padding: 0; } .v4-grid-games { grid-template-columns: repeat(6, 1fr); gap: 18px; } }

/* feature band (live casino / sports on home) */
.v4-band { position: relative; overflow: hidden; border-radius: var(--v4-r-xl); padding: 24px 18px 0; background: radial-gradient(80% 60% at 70% 100%, rgba(240, 89, 52, .42), transparent 70%), linear-gradient(160deg, var(--v4-kiln-2), var(--v4-lacquer-2)); border: 1px solid var(--v4-line); display: grid; gap: 16px; }
.v4-band__art { margin: 0 -18px; }
.v4-band__art img { width: 100%; max-height: 260px; object-fit: contain; object-position: center bottom; }
.v4-band--sports { background: radial-gradient(80% 60% at 70% 100%, rgba(64, 120, 255, .22), transparent 70%), radial-gradient(60% 50% at 20% 0%, rgba(240, 89, 52, .26), transparent 70%), linear-gradient(160deg, #1d1712, var(--v4-lacquer-2)); }
.v4-list-tick { display: grid; gap: 8px; }
.v4-list-tick li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--v4-mute); }
.v4-list-tick .v4-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--v4-flare); }
.v4-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v4-mini li { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(251, 243, 234, .04); border: 1px solid var(--v4-line); font-size: .8125rem; font-weight: 600; font-stretch: var(--v4-semi); }
.v4-mini img { width: 54px; height: 54px; object-fit: contain; }
@media (min-width: 900px) { .v4-band { grid-template-columns: 1fr 1fr; padding: 48px 48px 0; align-items: end; gap: 32px; } .v4-band > div:first-child { padding-bottom: 48px; } .v4-band__art { margin: 0; } .v4-band__art img { max-height: 380px; } }
.v4-duo { display: grid; gap: 14px; }
@media (min-width: 900px) { .v4-duo { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* ---------------------------------------------------------------- offers (approval-gated) */
.v4-offers { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--v4-gutter); padding: 2px var(--v4-gutter) 8px; margin: 0 calc(var(--v4-gutter) * -1); scrollbar-width: none; }
.v4-offers::-webkit-scrollbar { display: none; }
.v4-offers > * { scroll-snap-align: start; }
.v4-offer { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 112px; gap: 12px; align-items: end; min-height: 150px; padding: 18px; border-radius: var(--v4-r-l); background: radial-gradient(70% 80% at 100% 100%, rgba(240, 89, 52, .5), transparent 70%), var(--v4-kiln); border: 1px solid var(--v4-line); }
.v4-offer__art { align-self: end; margin: 0 -18px -18px 0; }
.v4-offer__art img { width: 128px; height: 132px; object-fit: contain; object-position: right bottom; }
.v4-offer b { display: block; font-size: 1.1875rem; font-stretch: var(--v4-semi); line-height: 1.2; }
.v4-offer p { font-size: .875rem; color: var(--v4-mute); margin: 6px 0 12px; }
.v4-tag { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; font-stretch: var(--v4-semi); background: rgba(217, 178, 124, .12); color: var(--v4-brass); border: 1px solid rgba(217, 178, 124, .28); margin-bottom: 10px; }
.v4-tag .v4-icon { width: 13px; height: 13px; }
.v4-offer__poster { display: none; }
.v4-offer--lead { grid-template-columns: 1fr; min-height: 0; background: radial-gradient(90% 70% at 70% 100%, rgba(240, 89, 52, .62), transparent 70%), linear-gradient(170deg, var(--v4-kiln-2), var(--v4-lacquer-2)); }
.v4-offer--lead .v4-offer__art { margin: 0 -18px -18px; }
.v4-offer--lead .v4-offer__art img { width: 100%; height: 150px; object-position: center bottom; }
.v4-offer--lead b { font-size: 1.5rem; font-stretch: var(--v4-wide); }
html[data-v4-approval="approved"] .v4-offer[data-v4-poster] .v4-offer__poster { display: block; margin: 0 -18px -18px; }
html[data-v4-approval="approved"] .v4-offer[data-v4-poster] .v4-offer__poster img { width: 100%; aspect-ratio: 1; object-fit: cover; }
html[data-v4-approval="approved"] .v4-offer[data-v4-poster] .v4-offer__art, html[data-v4-approval="approved"] .v4-offer[data-v4-poster] .v4-tag--pending { display: none; }
.v4-tag--live { display: none; }
html[data-v4-approval="approved"] .v4-tag--live { display: inline-flex; color: #9be7b0; background: rgba(120, 220, 150, .1); border-color: rgba(120, 220, 150, .3); }
@media (min-width: 900px) {
  .v4-offers { grid-auto-flow: row; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-columns: auto; grid-auto-rows: minmax(190px, auto); gap: 16px; overflow: visible; margin: 0; padding: 0; }
  .v4-offer--lead { grid-row: span 2; }
  .v4-offer--lead .v4-offer__art img { height: 300px; }
}

/* ---------------------------------------------------------------- steps (true sequences only) */
.v4-steps { display: grid; gap: 10px; counter-reset: v4s; }
.v4-step { counter-increment: v4s; position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px; border-radius: var(--v4-r-m); background: var(--v4-kiln); border: 1px solid var(--v4-line); }
.v4-step::before { content: counter(v4s); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-stretch: var(--v4-wide); color: var(--v4-flare); border: 1px solid rgba(240, 89, 52, .5); background: rgba(240, 89, 52, .08); }
.v4-step b { display: block; font-stretch: var(--v4-semi); font-size: 1.0625rem; margin-bottom: 2px; }
.v4-step p { color: var(--v4-mute); font-size: .9375rem; }
.v4-porcelain .v4-step, .v4-ledger .v4-step { background: #fff; border-color: rgba(36, 22, 15, .1); }
.v4-porcelain .v4-step p, .v4-ledger .v4-step p { color: var(--v4-ink-2); }
.v4-porcelain .v4-step::before, .v4-ledger .v4-step::before { color: var(--v4-ember-deep); border-color: rgba(184, 57, 26, .4); background: rgba(240, 89, 52, .06); }
@media (min-width: 900px) { .v4-steps { grid-template-columns: repeat(var(--v4-cols, 3), 1fr); gap: 16px; } .v4-step { grid-template-columns: 1fr; padding: 22px; } .v4-steps--list .v4-step { grid-template-columns: 44px 1fr; padding: 16px 18px; } .v4-steps--list { gap: 10px; } }

/* cards: features / help topics */
.v4-cards { display: grid; gap: 10px; }
.v4-card { display: grid; gap: 8px; padding: 18px; border-radius: var(--v4-r-l); background: var(--v4-kiln); border: 1px solid var(--v4-line); }
.v4-card__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(240, 89, 52, .12); color: var(--v4-flare); margin-bottom: 4px; }
.v4-card__ic .v4-icon { width: 22px; height: 22px; }
.v4-card b { font-size: 1.0625rem; font-stretch: var(--v4-semi); }
.v4-card p { color: var(--v4-mute); font-size: .9375rem; }
.v4-card .v4-link { margin-top: 4px; }
@media (min-width: 700px) { .v4-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .v4-cards--3 { grid-template-columns: repeat(3, 1fr); } .v4-cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* related task rows */
.v4-related { display: grid; border-top: 1px solid var(--v4-line); }
.v4-related a { display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--v4-line); font-weight: 600; font-stretch: var(--v4-semi); }
.v4-related a span { display: block; font-weight: 400; font-stretch: 100%; font-size: .8125rem; color: var(--v4-mute); }
.v4-related .v4-icon { color: var(--v4-brass); width: 18px; height: 18px; }
.v4-related a:hover { color: var(--v4-flare); }
@media (min-width: 900px) { .v4-related { grid-template-columns: repeat(4, 1fr); column-gap: 24px; } }

/* ---------------------------------------------------------------- device (gateway template) */
.v4-device { display: grid; gap: 18px; padding: 22px 18px 0; border-radius: var(--v4-r-xl); overflow: hidden; background: radial-gradient(70% 60% at 50% 100%, rgba(240, 89, 52, .5), transparent 70%), linear-gradient(170deg, var(--v4-kiln-2), var(--v4-lacquer-2)); border: 1px solid var(--v4-line); }
.v4-phones { display: flex; justify-content: center; gap: 12px; align-items: end; }
.v4-phone { width: 42%; max-width: 200px; aspect-ratio: 300 / 600; border-radius: 26px 26px 0 0; padding: 8px 8px 0; background: #0d0806; border: 1px solid rgba(255, 220, 180, .2); border-bottom: 0; box-shadow: 0 -10px 40px -10px rgba(240, 89, 52, .5); overflow: hidden; }
.v4-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 18px 18px 0 0; }
.v4-phone:nth-child(2) { transform: translateY(24px); }
.v4-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v4-store { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--v4-line-2); background: rgba(251, 243, 234, .04); }
.v4-store .v4-icon { width: 26px; height: 26px; color: var(--v4-flare); }
.v4-store small { display: block; font-size: .6875rem; color: var(--v4-mute); line-height: 1.2; }
.v4-store b { display: block; font-size: .9375rem; font-stretch: var(--v4-semi); line-height: 1.2; }
.v4-store--primary { background: var(--v4-grad-ember); color: var(--v4-on-ember); border-color: transparent; }
.v4-store--primary .v4-icon, .v4-store--primary small { color: var(--v4-on-ember); }
@media (min-width: 900px) { .v4-device { grid-template-columns: 1fr 1fr; padding: 48px 48px 0; align-items: end; } .v4-device > div:first-child { padding-bottom: 48px; } }

/* login/register "console" panel (gateway template signature) */
.v4-console { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: var(--v4-r-xl); background: linear-gradient(180deg, rgba(47, 29, 20, .92), rgba(27, 16, 11, .92)); border: 1px solid var(--v4-line-2); box-shadow: var(--v4-shadow); }
.v4-console__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v4-console__top b { font-stretch: var(--v4-semi); }
.v4-console__state { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--v4-mute); }
.v4-console__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v4-flare); box-shadow: 0 0 10px var(--v4-flare); }
.v4-console__opts { display: grid; gap: 8px; }
.v4-opt { display: grid; grid-template-columns: 40px 1fr 16px; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(251, 243, 234, .04); border: 1px solid var(--v4-line); }
.v4-opt .v4-chip-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(240, 89, 52, .14); color: var(--v4-flare); }
.v4-opt b { display: block; font-size: .9375rem; font-stretch: var(--v4-semi); }
.v4-opt span { display: block; font-size: .8125rem; color: var(--v4-mute); line-height: 1.35; }
.v4-opt > .v4-icon { color: var(--v4-brass); width: 16px; height: 16px; }
.v4-note { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(217, 178, 124, .08); border: 1px solid rgba(217, 178, 124, .22); font-size: .8125rem; color: var(--v4-mute); }
.v4-note .v4-icon { width: 18px; height: 18px; color: var(--v4-brass); }
.v4-porcelain .v4-note, .v4-ledger .v4-note { background: #fff; border-color: rgba(36, 22, 15, .12); color: var(--v4-ink-2); }
.v4-porcelain .v4-note .v4-icon, .v4-ledger .v4-note .v4-icon { color: #85572a; }

/* ---------------------------------------------------------------- game hall template */
.v4-subnav { position: sticky; top: var(--v4-header-h); z-index: 30; background: rgba(20, 11, 8, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--v4-line); }
.v4-subnav__in { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--v4-gutter); scrollbar-width: none; max-width: var(--v4-max); margin: 0 auto; }
.v4-subnav__in::-webkit-scrollbar { display: none; }
.v4-subnav a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 999px; background: rgba(251, 243, 234, .04); border: 1px solid var(--v4-line); font-size: .875rem; font-weight: 600; font-stretch: var(--v4-semi); }
.v4-subnav a img { width: 28px; height: 28px; object-fit: contain; }
.v4-subnav a[aria-current="page"] { background: var(--v4-cream); color: var(--v4-ink); border-color: transparent; }
.v4-tables { display: grid; gap: 12px; }
.v4-table { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: var(--v4-r-l); background: radial-gradient(60% 80% at 0% 100%, rgba(240, 89, 52, .35), transparent 70%), var(--v4-kiln); border: 1px solid var(--v4-line); }
.v4-table img { width: 96px; height: 96px; object-fit: contain; }
.v4-table b { display: block; font-size: 1.125rem; font-stretch: var(--v4-semi); }
.v4-table p { font-size: .875rem; color: var(--v4-mute); }
@media (min-width: 900px) { .v4-tables { grid-template-columns: repeat(3, 1fr); gap: 16px; } .v4-table { grid-template-columns: 112px 1fr; padding: 18px; } .v4-table img { width: 112px; height: 112px; } }

/* providers wall (porcelain: the supplied white logo plates sit naturally on light) */
.v4-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v4-plate { height: 64px; display: grid; place-items: center; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid rgba(36, 22, 15, .08); }
.v4-plate img { max-height: 40px; width: auto; object-fit: contain; }
@media (min-width: 900px) { .v4-plates { grid-template-columns: repeat(6, 1fr); gap: 12px; } .v4-plate { height: 84px; } .v4-plate img { max-height: 52px; } }

/* ---------------------------------------------------------------- cashier template (porcelain ledger) */
.v4-ledger { background: var(--v4-porcelain); color: var(--v4-ink); border-radius: var(--v4-r-xl) var(--v4-r-xl) 0 0; margin-top: -18px; position: relative; z-index: 1; }
.v4-ledger .v4-text, .v4-ledger .v4-lead { color: var(--v4-ink-2); }
.v4-ledger .v4-kicker { color: #85572a; }
.v4-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: var(--v4-porcelain-2); }
.v4-tabs button { height: 40px; border-radius: 999px; font-size: .875rem; font-weight: 600; font-stretch: var(--v4-semi); color: var(--v4-ink-2); }
.v4-tabs button[aria-selected="true"] { background: var(--v4-ink); color: var(--v4-porcelain); }
.v4-panel { margin-top: 14px; }
.v4-panel[hidden] { display: none; }
.v4-method { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--v4-r-l); background: #fff; border: 1px solid rgba(36, 22, 15, .08); }
.v4-method + .v4-method { margin-top: 10px; }
.v4-method__logo { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--v4-porcelain-2); color: var(--v4-ink); overflow: hidden; }
.v4-method__logo img { width: 52px; height: 26px; object-fit: contain; }
.v4-method b { display: block; font-stretch: var(--v4-semi); }
.v4-method p { font-size: .875rem; color: var(--v4-ink-2); margin: 2px 0 8px; }
.v4-method [data-v4-gated="payments"] { display: none; }
html[data-v4-approval="approved"] .v4-method [data-v4-gated="payments"] { display: block; }
html[data-v4-approval="approved"] .v4-method [data-v4-generic] { display: none; }
.v4-checklist { display: grid; gap: 8px; }
.v4-checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(36, 22, 15, .08); color: var(--v4-ink-2); font-size: .9375rem; }
.v4-checklist .v4-icon { color: #3b8a55; width: 20px; height: 20px; margin-top: 2px; }
.v4-ledgergrid { display: grid; gap: 24px; }
@media (min-width: 900px) { .v4-ledger { margin-top: -28px; } .v4-ledgergrid { grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; } }

/* ---------------------------------------------------------------- trust template (reading) */
.v4-read { display: grid; gap: 24px; }
.v4-toc { border-radius: var(--v4-r-l); background: #fff; border: 1px solid rgba(36, 22, 15, .1); }
.v4-toc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 700; font-stretch: var(--v4-semi); cursor: pointer; }
.v4-toc summary::-webkit-details-marker { display: none; }
.v4-toc ol { padding: 0 8px 10px; counter-reset: toc; }
.v4-toc li a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 9px 8px; border-radius: 10px; color: var(--v4-ink-2); font-size: .9375rem; }
.v4-toc li a::before { counter-increment: toc; content: counter(toc); font-weight: 700; color: #85572a; }
.v4-toc li a:hover, .v4-toc li a.is-active { background: var(--v4-porcelain); color: var(--v4-ink); }
.v4-prose { max-width: 68ch; }
.v4-prose section { padding: 22px 0; border-top: 1px solid rgba(36, 22, 15, .1); scroll-margin-top: calc(var(--v4-header-h) + 16px); }
.v4-prose section:first-child { border-top: 0; padding-top: 0; }
.v4-prose h2 { font-size: 1.375rem; font-weight: 800; font-stretch: var(--v4-semi); line-height: 1.2; margin-bottom: 10px; }
.v4-prose p, .v4-prose li { color: var(--v4-ink-2); line-height: 1.75; }
.v4-prose ul { display: grid; gap: 6px; margin-top: 12px; }
.v4-prose ul li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.v4-prose ul li::before { content: ""; width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--v4-ember); }
.v4-pending { display: grid; gap: 12px; padding: 22px; border-radius: var(--v4-r-l); background: #fff; border: 1px dashed rgba(36, 22, 15, .25); }
.v4-pending b { font-size: 1.125rem; font-stretch: var(--v4-semi); }
.v4-pending p { color: var(--v4-ink-2); }
html[data-v4-approval="public"] [data-v4-gated="policy"] { display: none; }
html[data-v4-approval="approved"] [data-v4-public-only] { display: none; }
@media (min-width: 1024px) { .v4-read { grid-template-columns: 280px 1fr; gap: 56px; align-items: start; } .v4-toc { position: sticky; top: calc(var(--v4-header-h) + 20px); } .v4-toc[open] summary { pointer-events: none; } }

/* contact channels */
.v4-channels { display: grid; gap: 12px; }
.v4-channel { position: relative; overflow: hidden; display: grid; gap: 10px; padding: 20px; border-radius: var(--v4-r-xl); background: var(--v4-kiln); border: 1px solid var(--v4-line); }
.v4-channel--primary { background: radial-gradient(80% 90% at 100% 0%, rgba(240, 89, 52, .55), transparent 65%), linear-gradient(170deg, var(--v4-kiln-2), var(--v4-lacquer-2)); border-color: rgba(240, 89, 52, .45); }
.v4-channel__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(240, 89, 52, .16); color: var(--v4-flare); }
.v4-channel--primary .v4-channel__ic { background: var(--v4-grad-ember); color: var(--v4-on-ember); }
.v4-channel__ic .v4-icon { width: 26px; height: 26px; }
.v4-channel b { font-size: 1.25rem; font-stretch: var(--v4-wide); }
.v4-channel p { color: var(--v4-mute); font-size: .9375rem; }
@media (min-width: 900px) { .v4-channels { grid-template-columns: repeat(3, 1fr); gap: 16px; } .v4-channel { padding: 24px; align-content: start; } }

/* ---------------------------------------------------------------- FAQ */
.v4-faq { border-top: 1px solid var(--v4-line); }
.v4-faq details { border-bottom: 1px solid var(--v4-line); }
.v4-faq summary { list-style: none; display: grid; grid-template-columns: 1fr 32px; gap: 14px; align-items: center; padding: 18px 2px; font-weight: 700; font-stretch: var(--v4-semi); cursor: pointer; }
.v4-faq summary::-webkit-details-marker { display: none; }
.v4-faq summary .v4-plus { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--v4-line-2); display: grid; place-items: center; transition: transform .25s var(--v4-ease), background .2s; }
.v4-faq summary .v4-plus .v4-icon { width: 14px; height: 14px; }
.v4-faq details[open] summary .v4-plus { transform: rotate(45deg); background: var(--v4-ember); border-color: transparent; color: var(--v4-on-ember); }
.v4-faq details > div { padding: 0 2px 18px; color: var(--v4-mute); max-width: 68ch; }
.v4-faq details > div a { color: var(--v4-flare); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .v4-faqwrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } }

/* closing CTA band */
.v4-cta { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 26px 20px; border-radius: var(--v4-r-xl); background: radial-gradient(70% 120% at 100% 100%, rgba(240, 89, 52, .7), transparent 60%), linear-gradient(150deg, var(--v4-kiln-2), var(--v4-lacquer-2)); border: 1px solid rgba(240, 89, 52, .4); }
.v4-cta .v4-h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.v4-cta p { color: var(--v4-mute); }
@media (min-width: 900px) { .v4-cta { grid-template-columns: 1fr auto; align-items: center; padding: 40px 48px; } }

/* SEO glance block */
.v4-glance { display: grid; gap: 14px; }
.v4-glance p { color: var(--v4-mute); }
.v4-glance a { color: var(--v4-cream); text-decoration: underline; text-decoration-color: rgba(240, 89, 52, .7); text-underline-offset: 3px; }
@media (min-width: 900px) { .v4-glance { grid-template-columns: .8fr 1.2fr; gap: 56px; } }

/* ---------------------------------------------------------------- footer */
.v4-footer { margin-top: 24px; background: linear-gradient(180deg, var(--v4-lacquer-2), #0d0705); border-top: 1px solid var(--v4-line); }
.v4-footer__mark { overflow: hidden; padding: 28px 0 0; }
.v4-footer__mark span { display: block; font-size: clamp(4.5rem, 2rem + 10vw, 9.5rem); font-weight: 900; font-stretch: var(--v4-wide); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(217, 178, 124, .28); white-space: nowrap; user-select: none; }
.v4-footer__top { display: grid; gap: 18px; padding: 26px 0; }
.v4-footer__top p { color: var(--v4-mute); max-width: 46ch; }
.v4-footer__cols { display: grid; border-top: 1px solid var(--v4-line); }
.v4-footer__col { border-bottom: 1px solid var(--v4-line); }
.v4-footer__col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 700; font-stretch: var(--v4-semi); cursor: pointer; }
.v4-footer__col summary::-webkit-details-marker { display: none; }
.v4-footer__col summary .v4-icon { width: 16px; height: 16px; color: var(--v4-brass); transition: transform .2s; }
.v4-footer__col[open] summary .v4-icon { transform: rotate(180deg); }
.v4-footer__col ul { display: grid; gap: 2px; padding-bottom: 14px; }
.v4-footer__col a { display: block; padding: 7px 0; color: var(--v4-mute); font-size: .9375rem; }
.v4-footer__col a:hover { color: var(--v4-cream); }
.v4-footer__pay { display: none; padding: 20px 0 0; }
html[data-v4-approval="approved"] .v4-footer__pay { display: block; }
.v4-footer__pay ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.v4-footer__pay li { width: 72px; height: 36px; border-radius: 8px; background: #fff; display: grid; place-items: center; padding: 4px; }
.v4-footer__pay img { max-height: 28px; width: auto; }
.v4-footer__base { display: grid; gap: 14px; padding: 22px 0 calc(28px + var(--v4-float)); font-size: .8125rem; color: var(--v4-mute); }
.v4-age { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.v4-age b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--v4-ember); color: var(--v4-cream); font-size: .875rem; font-stretch: var(--v4-wide); }
.v4-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.v4-footer__legal a:hover { color: var(--v4-cream); }
@media (min-width: 900px) {
  .v4-footer__top { grid-template-columns: 1fr auto; align-items: center; }
  .v4-footer__cols { grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 0; padding-top: 12px; }
  .v4-footer__col { border-bottom: 0; }
  .v4-footer__col summary { pointer-events: none; min-height: 40px; }
  .v4-footer__col summary .v4-icon { display: none; }
  .v4-footer__base { grid-template-columns: 1.2fr 1fr auto; align-items: center; border-top: 1px solid var(--v4-line); margin-top: 18px; }
}

/* ---------------------------------------------------------------- promo wheel + offer sheet (popup) */
.v4-wheel { position: fixed; right: 12px; bottom: calc(var(--v4-bar-h) + var(--v4-safe-b) + 12px); z-index: 44; width: var(--v4-float); height: var(--v4-float); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ff9a3c, #f05934, #d9b27c, #ff9a3c); color: var(--v4-on-ember); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8), 0 6px 16px -8px rgba(240, 89, 52, .7); transition: transform .18s var(--v4-ease), opacity .2s, visibility .2s; }
.v4-wheel:active { transform: scale(.94); }
html.v4-lock .v4-wheel { opacity: 0; visibility: hidden; }
.v4-wheel::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--v4-lacquer-2); }
.v4-wheel span { position: relative; font-weight: 900; font-stretch: var(--v4-wide); font-size: .8125rem; color: var(--v4-flare); }
@media (min-width: 1024px) { .v4-wheel { --v4-float: 48px; left: auto; right: 28px; bottom: 96px; } }
.v4-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; visibility: hidden; }
.v4-modal__scrim { position: absolute; inset: 0; background: rgba(8, 4, 2, .7); opacity: 0; transition: opacity .2s; }
.v4-modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 26px 26px 0 0; background: var(--v4-lacquer-2); border: 1px solid var(--v4-line-2); transform: translateY(100%); transition: transform .3s var(--v4-ease); }
.v4-modal.is-open { visibility: visible; }
.v4-modal.is-open .v4-modal__scrim { opacity: 1; }
.v4-modal.is-open .v4-modal__card { transform: none; }
.v4-modal__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; background: rgba(27, 16, 11, .96); border-bottom: 1px solid var(--v4-line); }
.v4-modal__head b { font-stretch: var(--v4-semi); }
.v4-modal__body { padding: 16px 18px 20px; display: grid; gap: 14px; }
.v4-modal__media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1; background: radial-gradient(60% 50% at 50% 75%, rgba(240, 89, 52, .6), transparent 70%), var(--v4-kiln); display: grid; place-items: end center; }
.v4-modal__media img { width: 74%; height: 86%; object-fit: contain; object-position: bottom; }
.v4-modal__media img[data-v4-gated] { display: none; }
html[data-v4-approval="approved"] .v4-modal__media img[data-v4-gated] { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-v4-approval="approved"] .v4-modal__media img[data-v4-public-art] { display: none; }
.v4-modal__nav { display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 600px) { .v4-modal { place-items: center; } .v4-modal__card { border-radius: 26px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .25s var(--v4-ease), opacity .25s; } .v4-modal.is-open .v4-modal__card { opacity: 1; } }
html.v4-lock, html.v4-lock body { overflow: hidden; }

/* approval-gated content (mirrors V3.5 m2-content-release.php: payments, promotions, policy) */
html[data-v4-approval="public"] [data-v4-gated] { display: none !important; }
.v4-hide-m { flex: none; }

/* porcelain overrides for shared rows */
.v4-porcelain .v4-related, .v4-ledger .v4-related { border-color: rgba(36, 22, 15, .12); }
.v4-porcelain .v4-related a, .v4-ledger .v4-related a { color: var(--v4-ink); border-color: rgba(36, 22, 15, .12); }
.v4-porcelain .v4-related a span, .v4-ledger .v4-related a span { color: var(--v4-ink-2); }
.v4-porcelain .v4-related .v4-icon, .v4-ledger .v4-related .v4-icon { color: #85572a; }
.v4-porcelain .v4-related a:hover, .v4-ledger .v4-related a:hover { color: var(--v4-ember-deep); }
.v4-related--stack { grid-template-columns: 1fr !important; }
@media (min-width: 900px) {
  .v4-duo .v4-band { grid-template-columns: 1.25fr 1fr; padding: 40px 40px 0; gap: 20px; }
  .v4-duo .v4-band > div:first-child { padding-bottom: 40px; }
  .v4-duo .v4-band__art img { max-height: 300px; }
}
.v4-wrap.v4-sec { padding-left: var(--v4-gutter); padding-right: var(--v4-gutter); }
:lang(zh) .v4-display { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem); }
html[data-v4-approval="public"] .v4-read { grid-template-columns: 1fr; }
.v4-prose a { color: var(--v4-ember-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) and (max-height: 700px) { .v4-hero .v4-stage { aspect-ratio: auto; height: 170px; } .v4-hero__caption { margin-top: 0; } }
.v4-sechead__row { flex-wrap: wrap; row-gap: 6px; }
@media (min-width: 1024px) {
  .v4-mega { width: min(560px, 92vw); }
  .v4-nav__item:nth-last-child(-n+2) > .v4-mega { left: auto; right: -12px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .v4-nav { margin-left: 12px; gap: 0; }
  .v4-nav__link { padding: 0 8px; font-size: .875rem; }
  .v4-header .v4-btn--sm { padding: 0 14px; }
}
@media (min-width: 1024px) {
  .v4-nav { position: relative; }
  .v4-nav__item { position: static; }
  .v4-nav .v4-mega, .v4-nav__item:nth-last-child(-n+2) > .v4-mega { left: 0; right: auto; }
}
.v4-nav__link, .v4-lang a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .v4-nav { display: none; }
  .v4-header .v4-menu-btn { display: inline-grid; }
}

/* ================================================================ V4.0 FINAL: interaction states */
a.v4-card, a.v4-cat, a.v4-task, a.v4-tile, .v4-offer, .v4-table, .v4-channel, a.v4-opt, a.v4-store, .v4-related a, .v4-rows a { transition: border-color .18s, transform .18s var(--v4-ease), background-color .18s; }
a.v4-cat:hover, a.v4-task:hover, a.v4-tile:hover, a.v4-opt:hover, button.v4-opt:hover, a.v4-store:not(.v4-store--primary):hover, .v4-offer:hover, .v4-table:hover, .v4-channel:hover, .v4-card:hover { border-color: var(--v4-line-2); }
a.v4-cat:active, a.v4-task:active, a.v4-tile:active, a.v4-opt:active, button.v4-opt:active, a.v4-store:active, .v4-support__list > *:active { transform: scale(.985); }
.v4-btn--line:active, .v4-btn--inkline:active { background: rgba(217, 178, 124, .12); }
.v4-chip:hover, .v4-subnav a:hover { border-color: var(--v4-line-2); }
.v4-link:focus-visible, .v4-related a:focus-visible, .v4-rows a:focus-visible { outline-offset: 4px; }
.v4-porcelain :focus-visible, .v4-ledger :focus-visible { outline-color: var(--v4-ember-deep); }

/* ================================================================ V4.0 FINAL: home action hierarchy */
.v4-hero__copy > .v4-actions > .v4-btn--ember { flex: 1.6 1 0; }
.v4-hero__copy > .v4-actions > .v4-btn--line { flex: 1 1 0; }
.v4-quick { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--v4-gutter); margin: 18px calc(var(--v4-gutter) * -1) 0; padding: 0 var(--v4-gutter) 2px; scrollbar-width: none; }
.v4-quick::-webkit-scrollbar { display: none; }
.v4-quick a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--v4-line); background: rgba(251, 243, 234, .04); font-size: .875rem; font-weight: 600; font-stretch: var(--v4-semi); white-space: nowrap; }
.v4-quick .v4-icon { width: 18px; height: 18px; color: var(--v4-flare); }
.v4-tasks { display: none; }
@media (max-width: 1023px) {
  html.v4-hero-cta-in[data-v4-template="T1"] .v4-header__end > .v4-btn { opacity: 0; visibility: hidden; }
}
@media (min-width: 1024px) {
  .v4-quick { display: none; }
  .v4-tasks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 34px; }
  .v4-task:first-child { background: var(--v4-kiln); color: var(--v4-cream); border-color: var(--v4-line); }
  .v4-task:first-child .v4-icon { color: var(--v4-flare); }
  .v4-footer__base { padding-bottom: 28px; }
}

/* ================================================================ V4.0 FINAL: gateway console (login) */
.v4-console--wide .v4-console__opts { display: grid; gap: 8px; }
@media (min-width: 900px) {
  .v4-console--wide { padding: 22px; }
  .v4-console--wide .v4-console__opts { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .v4-console--wide .v4-opt { grid-template-columns: 40px 1fr; align-items: start; min-height: 120px; padding: 16px; }
  .v4-console--wide .v4-opt > .v4-icon { display: none; }
}

/* ================================================================ V4.0 FINAL: policy pages (three states) */
.v4-review { display: none; }
html[data-v4-approval="review"] .v4-review { display: grid; }
html[data-v4-approval="review"] [data-v4-public-only] { display: none !important; }
html[data-v4-approval="review"] [data-v4-gated="policy"] { display: block !important; }
html[data-v4-approval="review"] .v4-toc[data-v4-gated="policy"] { display: block !important; }
.v4-review { gap: 6px; padding: 14px 16px; border-radius: var(--v4-r-m); border: 1.5px dashed #b8391a; background: repeating-linear-gradient(135deg, rgba(184, 57, 26, .06) 0 10px, transparent 10px 20px), #fff; color: var(--v4-ink); }
.v4-review b { font-size: .9375rem; font-stretch: var(--v4-semi); color: #8f2b12; }
.v4-review p { font-size: .875rem; color: var(--v4-ink-2); }
.v4-prose--draft { position: relative; padding-left: 16px; border-left: 3px solid rgba(184, 57, 26, .35); }
.v4-facts { display: grid; gap: 0; border-radius: var(--v4-r-l); background: #fff; border: 1px solid rgba(36, 22, 15, .1); overflow: hidden; }
.v4-facts div { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid rgba(36, 22, 15, .08); font-size: .875rem; }
.v4-facts div:first-child { border-top: 0; }
.v4-facts dt { color: var(--v4-ink); font-weight: 600; }
.v4-facts dd { margin: 0; font-size: .75rem; font-weight: 700; color: #8f2b12; background: rgba(184, 57, 26, .08); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.v4-facts-h { font-size: .875rem; font-weight: 700; font-stretch: var(--v4-semi); margin: 18px 0 8px; color: var(--v4-ink); }
.v4-read__side { display: grid; gap: 16px; align-content: start; }
.v4-prose .v4-note { margin-top: 14px; }
@media (min-width: 1024px) {
  html[data-v4-approval="review"] .v4-read { grid-template-columns: 280px 1fr; }
  .v4-read__side { position: sticky; top: calc(var(--v4-header-h) + 20px); }
  .v4-read__side .v4-toc { position: static; }
}
.v4-pending { max-width: 760px; }
.v4-pending__row { display: grid; gap: 12px; }
@media (min-width: 900px) { .v4-pending { padding: 32px; } .v4-pending__row { grid-template-columns: 1fr auto; align-items: center; } }
html[data-v4-approval="review"] [data-v4-gated]:not([data-v4-gated="policy"]) { display: none !important; }
.v4-facts div { grid-template-columns: 1fr; gap: 6px; }
.v4-facts dd { justify-self: start; }
@media (max-width: 1023px) {
  .v4-read__side { display: contents; }
  .v4-read__side .v4-toc { order: 1; }
  .v4-read > .v4-prose { order: 2; }
  .v4-read__side > div[data-v4-gated] { order: 3; }
}
html[data-v4-approval="public"] .v4-ledger .v4-sec > div:first-child { margin-bottom: 0 !important; }
.v4-footer__mark { padding-top: 20px; }
.v4-footer__mark span { line-height: .76; }
.v4-footer__top { padding-top: 14px; }
@media (max-width: 899px) and (max-height: 620px) {
  .v4-hero .v4-stage { height: 132px; }
  .v4-hero__caption { display: none; }
  .v4-hero__copy > .v4-hero__sub { margin-top: 8px; font-size: 1rem; }
  .v4-hero__copy > .v4-actions { margin-top: 12px; }
}
@media (max-width: 899px) and (max-height: 700px) { .v4-hero .v4-stage__art { height: 90%; width: auto; max-width: 92%; margin-bottom: 4%; } }
@media (max-width: 1023px) { html.v4-hero-cta-in .v4-wheel { opacity: 0; visibility: hidden; } }
@media (max-width: 899px) and (max-height: 700px) { .v4-hero .v4-stage__art { height: 152px; } }
@media (max-width: 899px) and (max-height: 620px) { .v4-hero .v4-stage__art { height: 118px; } }
.v4-wheel.is-clear { opacity: 0; visibility: hidden; }
/* desktop: the support dock and promo wheel live in a reserved side gutter, never over content */
@media (min-width: 1024px) {
  .v4-dock { right: 24px; }
}
@media (min-width: 900px) { .v4-pending .v4-actions { flex-wrap: nowrap; } .v4-pending .v4-actions > .v4-btn { flex: 0 0 auto; } }




/* WordPress / preserved-content adapter. Tokens and approved component values unchanged. */
#m2-navigation{display:contents}
.v4-main{min-width:0}
.v4-main *{min-width:0}
.v4-main .v4-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
.v4-main .m2-watermark{display:none}
.v4-main .m2-crumbs ol,.v4-crumbs ol{display:flex;align-items:center;gap:8px}
.v4-main .m2-chapter{display:contents}
.v4-main .v4-sechead{display:grid;gap:12px}
.v4-main .v4-sechead__aside{justify-self:start}
.v4-main .m2-split{display:grid;gap:28px;align-items:center}
.v4-main .v4-bodyart img{max-width:100%;max-height:440px;width:auto;height:auto;object-fit:contain;margin:auto}
.v4-main .v4-bodyart{display:grid;place-items:center;min-width:0}
.v4-main .v4-card__media{display:grid;place-items:center;min-width:0}
.v4-main .v4-card__media img{width:100%;height:160px;object-fit:contain}
.v4-main .v4-card h3{font-size:var(--v4-fs-h3);font-stretch:var(--v4-semi)}
.v4-main .v4-card p,.v4-main .v4-card small{color:var(--v4-mute)}
.v4-main .v4-porcelain .v4-card p{color:var(--v4-ink-2)}
.v4-main .v4-card>div{min-width:0;display:grid;gap:8px}
.v4-main .v4-btn{white-space:normal;text-align:center}
.v4-main .v4-steps>li{min-width:0;display:grid;gap:8px}
.v4-main .v4-faq summary h3{font:inherit;letter-spacing:inherit}
.v4-main .v4-game .m2-game__cap{display:grid;gap:8px}
.v4-main .v4-rail{overflow-x:auto;overscroll-behavior-x:contain}
.v4-main .m2-carousel__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory}
.v4-main .m2-carousel__track>.v4-game{min-width:170px;flex:0 0 170px;scroll-snap-align:start}
.v4-main .m2-carousel__nav{display:flex;gap:12px;align-items:center;margin-top:18px}
.v4-main .m2-carousel__btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--v4-line-2);border-radius:var(--v4-r-m)}
.v4-main .m2-pcard__body{display:grid;gap:12px}
.v4-main .m2-phones,.v4-main .m2-steps-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v4-main .m2-pays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4-main .m2-pays img{object-fit:contain}
.v4-main .v4-ledger-section{margin-bottom:28px}
.v4-main .v4-ledger-section>.v4-wrap{width:100%;padding:0;max-width:none}
.v4-main .v4-opt{min-width:0}
.v4-main .m2-hero__chip{display:none}
.v4-main .v4-subnav__in>ul{display:flex;gap:12px;white-space:nowrap}
.v4-main .v4-subnav__in{overflow-x:auto}
.v4-main .m2-paywrap,.v4-main .m2-market,.v4-main .m2-vip,.v4-main .m2-agent{min-width:0}
.v4-main .m2-cat__text,.v4-main .m2-cat__body{display:grid;gap:6px}
.v4-main .v4-cat img{max-height:200px;object-fit:contain}
.v4-main .m2-cats-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4-main .m2-catmini{min-width:0;overflow:hidden}
.v4-main .m2-marquee__list{display:flex;flex-wrap:wrap;gap:12px}
.v4-main .v4-plate{display:grid;place-items:center}
.v4-main .v4-glance{display:grid;gap:18px}
.v4-main .m2-zone__copy{display:grid;gap:16px}
.v4-main .v4-porcelain{color:var(--v4-ink)}
.v4-main .v4-porcelain .v4-text,.v4-main .v4-ledger .v4-text{color:var(--v4-ink-2)}
html[data-v4-approval="review"] [data-v4-gated="payments"],html[data-v4-approval="review"] [data-v4-gated="promotions"]{display:block}
html[data-v4-approval="review"] .v4-review{display:grid}
.v4-support-chrome .v4-support[aria-hidden="true"]{visibility:hidden}
.v4-main .v4-phero .v4-chip{font-size:var(--v4-fs-micro)}
@media(min-width:900px){.v4-main .m2-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.v4-main .v4-cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:599px){.v4-main .m2-cats-mini{grid-template-columns:1fr}.v4-main .v4-phero__copy>.v4-actions{gap:8px}.v4-main .v4-phero__copy>.v4-actions>.v4-btn{padding:0 12px;flex-basis:120px}}

/* final WordPress adapter fixes */
.v4-main .v4-related>a.v4-opt{grid-template-columns:40px minmax(0,1fr) 18px}
.v4-main .m2-carousel__track>li{flex:0 0 280px;min-width:0}
.v4-main .m2-carousel__track .v4-offer__body{display:grid;gap:12px}
.v4-main .m2-pcard__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.v4-main .v4-hero__caption{flex-wrap:wrap}
.v4-main .v4-slide-arrow{width:44px;height:44px}
.v4-main [data-m2-prev] .v4-icon{transform:rotate(180deg)}
.v4-main .m2-rowlink__text{overflow-wrap:anywhere}
.v4-main .v4-game .v4-h3{overflow-wrap:anywhere}
.v4-main .v4-hero__copy{min-width:0}
@media(max-width:899px){.v4-main .v4-grid-games.v4-rail{grid-template-columns:none;grid-auto-columns:42%}}

/* BM long policy title: preserve words on narrow displays. */
@media(max-width:599px){.v4-main[lang="ms-MY"][data-v4-policy] .v4-h1{font-size:clamp(1.75rem,7.4vw,2.5rem);overflow-wrap:anywhere}}

/* post-audit compatibility */
.v4-main .v4-steps--list{grid-template-columns:1fr}
.v4-main .v4-h1,.v4-main .v4-h3{overflow-wrap:break-word;word-break:normal}
.v4-main .v4-porcelain p{color:var(--v4-ink-2)}
.v4-main .v4-porcelain .v4-glance h2{color:var(--v4-ink)}
.v4-main .m2-app__platforms{display:grid;gap:12px}
.v4-main .m2-marquee{overflow:hidden;padding-block:8px}
.v4-main .m2-marquee__track{display:flex;width:max-content;animation:m2-v4-marquee 35s linear infinite}
.v4-main .m2-marquee--rev .m2-marquee__track{animation-direction:reverse}
.v4-main .m2-marquee__list{flex-wrap:nowrap;flex:none;gap:12px;padding-inline:6px}
.v4-main .m2-marquee:hover .m2-marquee__track,.v4-main .m2-marquee:focus-within .m2-marquee__track{animation-play-state:paused}
@keyframes m2-v4-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.v4-main .m2-marquee__track{animation:none}}
/* Preserve the approved width-reveal motion without changing line layout during animation. */
.v4-display{transform-origin:left center}
.v4-main .v4-dots button{width:24px;height:24px}
.v4-main .v4-hero__label{min-height:44px;display:grid;align-content:center}
.v4-main .v4-hero__caption{min-height:44px}@media(max-width:599px){.v4-main .v4-hero__caption{min-height:88px}}
body.m2-chrome .cwp-scroll-to-top{display:none!important}

/* Review-only payment references must fit the same responsive grid. */
.v4-main .m2-pays>.v4-method{display:grid;grid-template-columns:minmax(0,1fr);margin:0;justify-items:center;gap:8px;text-align:center;padding:10px}
.v4-main .m2-pays .v4-method__logo{width:100%;max-width:82px;height:42px}
.v4-main .m2-pays .v4-method__logo img{width:100%;height:100%;object-fit:contain}

.v4-stage__link{display:contents}.v4-stage__link:focus-visible .v4-stage__art{outline:2px solid var(--v4-flare);outline-offset:4px}

/* Keep original carousel arrows without pushing the primary action below the mobile fold. */
@media(min-width:360px) and (max-width:599px){.v4-main .v4-hero__caption{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;column-gap:4px;row-gap:0;min-height:68px}.v4-main .v4-hero__label{grid-column:1/-1;min-height:24px}.v4-main .v4-hero__caption .v4-dots{justify-self:start;gap:1px}}

/* Preserve the longer BM source lead and keep its complete action above the mobile bar. */
@media(max-width:899px){.v4-main[lang="ms-MY"] .v4-hero__copy>.v4-actions{margin-top:8px}}

/* The mapped Agent portrait stays fully contained in the approved compact stage. */
.v4-main[data-m2-slug="/agent/"] .v4-stage__art{position:absolute;left:50%;bottom:4%;margin:0;width:auto;height:90%;max-width:90%;object-fit:contain;transform:translateX(-50%)}

/* Escape/toggle dismissal must also override prototype hover and focus-within. */
.v4-nav__item.is-dismissed>.v4-mega{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px)}

/* Claude frozen final correction F-1 through F-7; brand tokens unchanged. */
.v4-main :is(.v4-porcelain,.v4-ledger) :is(.v4-cat,.v4-card,.v4-offer){color:var(--v4-cream)}
.v4-main :is(.v4-porcelain,.v4-ledger) :is(.v4-cat,.v4-card,.v4-offer) :is(h3,.v4-h3,.m2-cat__name,b,h3 a){color:var(--v4-cream)}
.v4-main :is(.v4-porcelain,.v4-ledger) :is(.v4-cat,.v4-card,.v4-offer) :is(p,small,.v4-text){color:var(--v4-mute)}
.v4-main :is(.v4-porcelain,.v4-ledger) :is(.v4-cat,.v4-card,.v4-offer) a:not(.v4-btn):not(h3 a){color:var(--v4-flare)}
.v4-main :is(.v4-porcelain,.v4-ledger) .v4-opt{background:#fff;border-color:rgba(36,22,15,.12)}
.v4-main :is(.v4-porcelain,.v4-ledger) .v4-opt b{color:var(--v4-ink)}
.v4-main :is(.v4-porcelain,.v4-ledger) .v4-opt span:not(.v4-chip-ic){color:var(--v4-ink-2)}
.v4-main :is(.v4-porcelain,.v4-ledger) .v4-list-tick li{color:var(--v4-ink-2)}
.v4-main :is(.v4-porcelain,.v4-ledger) .v4-btn--line{color:var(--v4-ink);border-color:rgba(36,22,15,.3);background:transparent}
.v4-main :is(.v4-porcelain,.v4-ledger) :is(.v4-card,.v4-offer) .v4-btn--line{color:var(--v4-cream);border-color:var(--v4-line-2)}
.v4-main .m2-prov--more .v4-link,.v4-main .v4-plate .v4-link{color:var(--v4-ember-deep)}
.v4-main .v4-card .v4-link{color:var(--v4-flare)}
@media (min-width:1024px){.v4-main .v4-wrap,.v4-footer .v4-wrap,.v4-subnav__in{max-width:min(var(--v4-max),calc(100vw - 2*92px))}}
.v4-sheet__head img{width:auto;height:22px}
@media(min-width:1024px){.v4-main .v4-cards--3:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.v4-main .v4-wrap>.v4-cards:not(.v4-cards--3):not(.v4-cards--4):has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.v4-main .v4-channels:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.v4-main .m2-split--even:has(>.m2-zone__copy>.v4-cards>:nth-child(3):last-child){grid-template-columns:1fr} .v4-main .m2-split--even>.m2-zone__copy>.v4-cards:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} .v4-main .m2-split--even>.v4-console:has(>.v4-opt:nth-of-type(3)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start} .v4-main .m2-split--even>.v4-console>:not(.v4-opt){grid-column:1/-1}}
@media(min-width:1024px){.v4-main .v4-plates:has(>:nth-child(7):last-child){grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(min-width:700px){.v4-main .v4-band .v4-cards:has(>:nth-child(3):last-child)>:last-child{grid-column:1/-1}}
@media(min-width:900px){.v4-main .v4-offers:has(>:nth-child(3):last-child){grid-template-columns:1.25fr 1fr;grid-template-rows:repeat(2,minmax(190px,auto))} .v4-main .v4-offers:has(>:nth-child(3):last-child)>:first-child{grid-row:1/3}}
.v4-main .v4-offer:not(.v4-offer--lead){grid-template-columns:1fr minmax(128px,44%)}
.v4-main .v4-offer:not(.v4-offer--lead) .v4-h3{font-size:1.125rem;overflow-wrap:normal;hyphens:manual}
.v4-main .m2-sechead--sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.v4-main .v4-sechead__aside:has(>.m2-carousel__btn){display:flex;gap:8px}
.v4-main .m2-carousel__btn[data-dir="-1"] .v4-icon{transform:rotate(180deg)}
.m2promo-root .m2promo-claim,.m2promo-root .m2promo-btn{text-transform:none!important;letter-spacing:0!important}
@media (min-width:1024px) and (max-width:1439px){
  .v4-hero__copy,.v4-phero__copy{container-type:inline-size}
  .v4-main:not([lang^="zh"]) .v4-hero .v4-display{font-size:min(var(--v4-fs-display),14cqi)}
  .v4-main:not([lang^="zh"]) .v4-phero .v4-h1{font-size:min(var(--v4-fs-h1),9.8cqi)}
}
@media (max-width:359px){.v4-main[lang="ms-MY"] .v4-phero .v4-h1{font-size:1.5rem}}

@media (min-width:360px) and (max-width:374px){.v4-main[lang="ms-MY"][data-m2-slug="/payment/"] .v4-phero .v4-h1{font-size:9vw}}

@media (min-width:360px) and (max-width:389px){.v4-main[lang="ms-MY"] .v4-hero__sub{font-size:1rem}}

/* M2 V4.1.1 "Ember Atelier" refinement layer. Appended after m2-v4.min.css. Visual only: no content, URL, H1 or SEO change. */

:root {
  /* palette */
  --v41-night: #0f0907;
  --v41-lacquer: #170e0a;
  --v41-umber: #22150f;
  --v41-umber-2: #2b1b13;
  --v41-champagne: #e2c9a3;
  --v41-bone: #f2eeea;
  --v41-bone-2: #e6dfd8;
  --v41-ink: #1d120d;
  --v41-ink-2: #5e4a3e;
  --v41-text: #f6eee6;
  --v41-mute: #c4b2a4;
  --v41-hair: rgba(226, 201, 163, .12);
  --v41-hair-2: rgba(226, 201, 163, .26);
  --v41-hair-3: rgba(226, 201, 163, .5);
  --v41-hair-ink: rgba(29, 18, 13, .12);
  /* surfaces */
  --v41-card: linear-gradient(180deg, #25170f 0%, #1c110c 100%);
  --v41-edge: inset 0 1px 0 rgba(255, 236, 214, .07);
  --v41-lift: 0 14px 24px -18px rgba(0, 0, 0, .8);
  --v41-lift-hover: 0 22px 34px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(240, 89, 52, .22);
  --v41-ring: 0 0 0 2px var(--v41-night), 0 0 0 4px var(--v4-flare);
  /* type */
  --v41-display: clamp(2.75rem, 1.6rem + 5vw, 6rem);
  --v41-h2: clamp(1.875rem, 1.35rem + 1.9vw, 3.125rem);
  /* shape */
  --v41-r-btn: 12px;
  --v41-r-card: 18px;
  --v41-r-panel: 28px;
  --v41-ease: cubic-bezier(.22, .8, .2, 1);

  /* re-point V4.0 tokens so every template inherits the refinement */
  --v4-lacquer: var(--v41-lacquer);
  --v4-lacquer-2: #1a100b;
  --v4-kiln: var(--v41-umber);
  --v4-kiln-2: var(--v41-umber-2);
  --v4-brass: var(--v41-champagne);
  --v4-cream: var(--v41-text);
  --v4-mute: var(--v41-mute);
  --v4-line: var(--v41-hair);
  --v4-line-2: var(--v41-hair-2);
  --v4-porcelain: var(--v41-bone);
  --v4-porcelain-2: var(--v41-bone-2);
  --v4-ink: var(--v41-ink);
  --v4-ink-2: var(--v41-ink-2);
  --v4-grad-ember: linear-gradient(180deg, #ff8a42 0%, #f56634 55%, #ec5530 100%);
  --v4-grad-brass: linear-gradient(90deg, rgba(226, 201, 163, 0), rgba(226, 201, 163, .7) 50%, rgba(226, 201, 163, 0));
  --v4-fs-display: var(--v41-display);
  --v4-fs-h2: var(--v41-h2);
  --v4-sec-y: 56px;
  --v4-shadow: var(--v41-lift);
}
@media (min-width: 900px) { :root { --v4-sec-y: 96px; } }

body { background: var(--v41-lacquer); }
::selection { background: rgba(240, 89, 52, .35); color: #fff; }

/* ------------------------------------------------------------ type */
.v4-display { font-weight: 780; font-stretch: 118%; letter-spacing: -.035em; line-height: .92; }
.v4-h2 { font-weight: 740; font-stretch: 112%; letter-spacing: -.028em; line-height: 1.02; }
.v4-h3 { letter-spacing: -.01em; }
.v4-lead { font-size: 1.0625rem; line-height: 1.65; max-width: 52ch; }
.v4-kicker { gap: 12px; font-size: .8125rem; font-weight: 600; font-stretch: 108%; letter-spacing: .01em; color: var(--v41-champagne); }
.v4-kicker::before { width: 28px; background: linear-gradient(90deg, var(--v4-ember), rgba(226, 201, 163, .6)); }
.v4-main .m2-eyebrow--num b { display: none; }
:lang(zh) .v4-display { letter-spacing: 0; line-height: 1.06; }
:lang(zh) .v4-h2 { letter-spacing: .01em; line-height: 1.12; }

/* ------------------------------------------------------------ buttons: primary, secondary, text, nav, icon */
.v4-btn { border-radius: var(--v41-r-btn); font-stretch: 108%; letter-spacing: .01em; position: relative; isolation: isolate; transition: transform .2s var(--v41-ease), box-shadow .2s var(--v41-ease), background-color .2s, border-color .2s, color .2s; }
.v4-btn--ember { overflow: hidden; background: var(--v4-grad-ember); color: #210b03; box-shadow: inset 0 0 0 1px rgba(255, 210, 170, .28), inset 0 1px 0 rgba(255, 232, 210, .6), 0 10px 22px -12px rgba(240, 89, 52, .8); }
.v4-btn--ember::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 244, 230, .4) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--v41-ease); }
.v4-btn--ember:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 210, 170, .34), inset 0 1px 0 rgba(255, 232, 210, .65), 0 16px 28px -12px rgba(240, 89, 52, .95); filter: none; }
.v4-btn--ember:hover::after { transform: translateX(120%); }
.v4-btn--ember:active { transform: translateY(0) scale(.985); background: linear-gradient(180deg, #f2753a, #e04f2b); box-shadow: inset 0 1px 2px rgba(80, 20, 4, .35); }
.v4-btn--line { border: 1px solid var(--v41-hair-2); background: rgba(246, 238, 230, .025); color: var(--v41-text); }
.v4-btn--line:hover { border-color: var(--v41-hair-3); background: rgba(246, 238, 230, .065); transform: translateY(-1px); }
.v4-btn--line:active { transform: scale(.985); background: rgba(246, 238, 230, .1); }
.v4-btn:focus-visible { outline: 0; box-shadow: var(--v41-ring); }
.v4-link { gap: 8px; }
.v4-link .v4-icon { transition: transform .2s var(--v41-ease); }
.v4-link:focus-visible { outline: 0; border-radius: 6px; box-shadow: var(--v41-ring); }
.v4-iconbtn { width: 44px; height: 44px; border-radius: 12px; border-color: var(--v41-hair-2); transition: border-color .2s, background-color .2s; }
.v4-iconbtn:hover { border-color: var(--v41-hair-3); background: rgba(246, 238, 230, .05); }
.v4-iconbtn:focus-visible { outline: 0; box-shadow: var(--v41-ring); }

/* ------------------------------------------------------------ header (solid, no backdrop blur: cheaper to paint) */
.v4-header { background: rgba(15, 9, 7, .9); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; transition: background-color .3s, border-color .3s, height .3s var(--v41-ease); }
.v4-header.is-scrolled { background: rgba(15, 9, 7, .97); border-bottom-color: var(--v41-hair); }
@media (min-width: 1024px) {
  :root { --v4-header-h: 80px; }
  .v4-header { background: var(--v41-night); }
  .v4-header.is-scrolled { height: 68px; background: rgba(15, 9, 7, .97); }
  .v4-nav { gap: 2px; margin-left: 36px; }
  .v4-nav__link { position: relative; height: 40px; padding: 0 14px; border-radius: 10px; font-size: .9375rem; font-stretch: 106%; color: rgba(246, 238, 230, .76); transition: color .2s; }
  .v4-nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--v4-ember); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--v41-ease); }
  .v4-nav__link:hover, .v4-nav__item:focus-within > .v4-nav__link { background: transparent; color: var(--v41-text); }
  .v4-nav__link:hover::after, .v4-nav__item:focus-within > .v4-nav__link::after, .v4-nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .v4-nav__link[aria-current="page"] { box-shadow: none; border-radius: 10px; color: var(--v41-text); }
  .v4-nav__link:focus-visible { outline: 0; box-shadow: var(--v41-ring); }
  .v4-mega { top: calc(100% + 14px); padding: 12px; border-radius: 20px; background: linear-gradient(180deg, #24160f, #160d09); border-color: var(--v41-hair); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95), var(--v41-edge); }
  .v4-mega a { border-radius: 12px; transition: background-color .2s; }
  .v4-lang { padding: 3px; border-color: var(--v41-hair); background: rgba(246, 238, 230, .02); }
  .v4-lang a { height: 30px; transition: color .2s, background-color .2s; }
  .v4-lang a:hover { color: var(--v41-text); }
  .v4-lang a[aria-current="true"] { background: var(--v41-text); color: var(--v41-ink); }
  .v4-header .v4-btn--sm { --_h: 42px; padding: 0 20px; border-radius: 11px; }
}

/* ------------------------------------------------------------ hero: the showroom */
.v4-hero { padding-bottom: 28px; background:
  radial-gradient(70% 46% at 62% 34%, rgba(240, 89, 52, .26), transparent 72%),
  linear-gradient(180deg, var(--v41-night) 0%, #130b08 72%, var(--v41-lacquer) 100%); }
.v4-hero::after { display: none; }
.v4-hero .v4-display { color: #fff7ef; }
.v4-hero .v4-display span { color: transparent; background: linear-gradient(180deg, #fff1e2 0%, #f3c39b 100%); -webkit-background-clip: text; background-clip: text; }
.v4-hero__sub { color: #dccbbd; line-height: 1.6; }
.v4-hero__operated { color: #a8968a; }
.v4-hero__operated b { border-color: var(--v41-hair-2); border-radius: 6px; }
.v4-stage__beam { filter: none; background: conic-gradient(from 180deg at 50% 0%, transparent 158deg, rgba(255, 176, 110, .16) 170deg, rgba(255, 196, 130, .26) 180deg, rgba(255, 176, 110, .16) 190deg, transparent 202deg); }
.v4-stage__glow { background: radial-gradient(50% 60% at 50% 70%, rgba(240, 89, 52, .72), rgba(240, 89, 52, 0) 72%); }
.v4-stage__disc { background: radial-gradient(50% 55% at 50% 38%, #42271a, #140b08 74%); box-shadow: inset 0 2px 0 rgba(255, 214, 170, .42), 0 22px 34px -16px rgba(0, 0, 0, .95); }
.v4-hero .v4-stage__art { filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .55)); }
.v4-hero__stagebox { isolation: isolate; }
.v4-hero__stagebox > .v4-slides { position: relative; z-index: 1; }
.v4-hero__caption { position: relative; z-index: 2; }

/* carousel controls */
.v4-dots button::before { width: 12px; height: 3px; border-radius: 2px; background: rgba(246, 238, 230, .26); transition: width .35s var(--v41-ease), background-color .35s; }
.v4-dots button[aria-current="true"]::before { width: 24px; background: var(--v4-ember); }
.v4-main .v4-dots button { width: 18px; }
.v4-main .v4-dots button[aria-current="true"] { width: 30px; }
.v4-dots .v4-pause, .v4-main .v4-slide-arrow { border-radius: 12px; border: 1px solid var(--v41-hair-2); background: rgba(15, 9, 7, .55); transition: border-color .2s, background-color .2s; }
.v4-dots .v4-pause:hover, .v4-main .v4-slide-arrow:hover { border-color: var(--v41-hair-3); background: rgba(40, 25, 18, .8); }
.v4-dots button:focus-visible, .v4-main .v4-slide-arrow:focus-visible { outline: 0; box-shadow: var(--v41-ring); }
.v4-hero__label { font-stretch: 108%; }
.v4-hero__label a { transition: color .2s; }
.v4-hero__label a:hover { color: var(--v4-flare); }

/* phone composition (< 600): headline, a bigger edge-to-edge stage with the caption laid over it, then the actions */
@media (max-width: 599px) {
  .v4-hero { padding-top: 2px; padding-bottom: 20px; }
  .v4-hero__copy > .v4-kicker { margin-top: 8px; }
  .v4-hero__copy > .v4-display { margin-bottom: 2px; }
  .v4-hero__stagebox { margin: 0 calc(var(--v4-gutter) * -1); }
  .v4-hero .v4-stage { aspect-ratio: 1 / .74; }
  .v4-hero .v4-stage__art { width: 88%; margin-bottom: 7%; }
  .v4-main .v4-hero__caption { position: absolute; inset: 6px var(--v4-gutter) 4px; margin: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; grid-template-rows: 1fr auto; column-gap: 6px; pointer-events: none; }
  .v4-main .v4-hero__caption > * { pointer-events: auto; }
  .v4-main .v4-hero__label { grid-column: 1 / -1; grid-row: 1; align-self: start; justify-self: start; min-height: 0; padding: 7px 12px 8px; border-radius: 12px; background: rgba(15, 9, 7, .72); box-shadow: inset 0 0 0 1px var(--v41-hair); font-size: .8125rem; line-height: 1.25; }
  .v4-main .v4-hero__label small { font-size: .6875rem; }
  .v4-main .v4-hero__caption .v4-dots { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; }
  .v4-main .v4-hero__caption [data-m2-prev] { grid-column: 2; grid-row: 2; }
  .v4-main .v4-hero__caption [data-m2-next] { grid-column: 3; grid-row: 2; }
  .v4-hero__copy > .v4-hero__sub { margin-top: 10px; font-size: 1rem; }
  .v4-hero__copy > .v4-actions { margin-top: 14px; gap: 10px; }
  .v4-hero__copy > .v4-actions > .v4-btn { min-height: 52px; }
  .v4-hero__copy > .v4-hero__operated { margin-top: 12px; }
  .v4-main[lang="ms-MY"] .v4-hero__sub { font-size: .9375rem; }
}
@media (max-width: 359px) { .v4-hero__copy > .v4-actions > .v4-btn { padding: 0 14px; gap: 8px; } }

/* tablet composition (600 - 899): two columns, stage at its natural resolution */
@media (min-width: 600px) and (max-width: 899px) {
  .v4-hero { padding: 24px 0 28px; }
  .v4-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; }
  .v4-hero__copy { display: grid; order: -1; gap: 18px; align-content: center; }
  .v4-hero__copy > * { margin: 0 !important; }
  .v4-hero__stagebox { margin: 0; order: 0; }
  .v4-main:not([lang^="zh"]) .v4-hero .v4-display { font-size: clamp(2.5rem, 1rem + 4.6vw, 3.4rem); }
  .v4-hero .v4-stage { aspect-ratio: 1 / .86; }
  .v4-hero .v4-stage__art { width: 96%; }
  .v4-main .v4-hero__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; min-height: 0; }
  .v4-main .v4-hero__label { flex: 1 1 100%; min-height: 0; }
  .v4-main .v4-hero__caption .v4-dots { margin-right: auto; }
  .v4-hero__copy > .v4-actions > .v4-btn { flex: 1 1 0; }
}

/* desktop composition (>= 900): copy and stage stand on one floor line */
@media (min-width: 900px) {
  .v4-hero { padding: 36px 0 0; background:
    radial-gradient(36% 50% at 72% 46%, rgba(255, 128, 56, .30), transparent 72%),
    linear-gradient(90deg, rgba(8, 5, 4, .55) 0%, rgba(8, 5, 4, 0) 48%),
    linear-gradient(180deg, var(--v41-night) 0%, #140b08 78%, var(--v41-lacquer) 100%); }
  .v4-hero__grid { position: relative; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: end; gap: 40px; padding-bottom: 28px; }
  .v4-hero__grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(226, 201, 163, 0), rgba(226, 201, 163, .34) 30%, rgba(255, 170, 110, .6) 72%, rgba(226, 201, 163, 0)); }
  .v4-hero__copy { gap: 26px; padding-bottom: 6px; }
  .v4-hero__sub { font-size: 1.125rem; max-width: 38ch; }
  .v4-hero__copy > .v4-actions { max-width: 520px; }
  .v4-main:not([lang^="zh"]) .v4-hero .v4-display { font-size: min(var(--v41-display), 5.6rem); }
  .v4-hero .v4-stage__art { width: 100%; max-width: 600px; }
  .v4-main .v4-hero__caption { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; min-height: 44px; }
  .v4-main .v4-hero__label { margin-right: auto; }
  /* brand monogram: a solid, softly lit M2 plate behind the stage */
  .v4-hero__stagebox::before { content: "M2" / ""; position: absolute; z-index: 0; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: clamp(15rem, 8rem + 18vw, 28rem); font-weight: 900; font-stretch: 125%; line-height: .8; letter-spacing: -.06em; color: transparent; background: linear-gradient(180deg, rgba(240, 89, 52, .2) 0%, rgba(240, 89, 52, .06) 46%, rgba(240, 89, 52, 0) 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1px rgba(226, 201, 163, .16); pointer-events: none; white-space: nowrap; user-select: none; }
  /* floor reflection under the plinth, sitting on the floor line */
  .v4-hero__stagebox::after { content: ""; position: absolute; z-index: 0; left: 4%; right: 4%; bottom: -28px; height: 64px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 150, 80, .22), transparent 70%); }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .v4-hero__copy { container-type: inline-size; }
  .v4-main:not([lang^="zh"]) .v4-hero .v4-display { font-size: min(5.6rem, 12.6cqi); }
}
@media (min-width: 1280px) { .v4-hero { padding-top: 44px; } }

/* quick access: desktop rail and phone chips */
@media (min-width: 1024px) {
  .v4-tasks { gap: 0; margin-top: 28px; margin-bottom: 8px; border-radius: 18px; background: linear-gradient(180deg, #23150f, #1a100b); border: 1px solid var(--v41-hair); box-shadow: var(--v41-edge), var(--v41-lift); overflow: hidden; }
  .v4-task, .v4-task:first-child { position: relative; grid-template-columns: 1fr; justify-items: center; text-align: center; white-space: normal; gap: 10px; padding: 20px 8px 18px; border: 0; border-radius: 0; background: transparent; color: var(--v41-text); font-size: .875rem; line-height: 1.25; transition: background-color .25s, color .25s; }
  .v4-task + .v4-task::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--v41-hair); }
  .v4-task::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 0; height: 2px; background: var(--v4-ember); transform: scaleX(0); transition: transform .3s var(--v41-ease); }
  .v4-task:hover { background: rgba(246, 238, 230, .04); border-color: transparent; }
  .v4-task:hover::after { transform: scaleX(1); }
  .v4-task:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--v4-flare); }
  .v4-task .v4-icon, .v4-task:first-child .v4-icon { width: 26px; height: 26px; color: var(--v4-flare); transition: transform .3s var(--v41-ease); }
  .v4-task:hover .v4-icon { transform: translateY(-2px); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .v4-task, .v4-task:first-child { font-size: .8125rem; } }
.v4-quick { gap: 8px; }
.v4-quick a { height: 44px; border-radius: 12px; border-color: var(--v41-hair); background: linear-gradient(180deg, #22150f, #1b100c); box-shadow: var(--v41-edge); transition: border-color .2s, background-color .2s; }
.v4-quick a:active { background: #2a1a12; }
.v4-quick a:focus-visible { outline: 0; box-shadow: var(--v41-ring); }

/* ------------------------------------------------------------ section rhythm */
.v4-sechead { margin-bottom: 30px; }
@media (min-width: 900px) { .v4-sechead { margin-bottom: 40px; } }
.v4-main .m2-sechead--center { justify-items: center; text-align: center; }
.v4-main .m2-sechead--center .v4-lead { margin-inline: auto; }
.v4-sec.m2-discover { background: linear-gradient(180deg, var(--v41-lacquer), #1a100b 60%, var(--v41-lacquer)); }
.v4-sec.m2-section--live, .v4-sec.m2-section--slots, .v4-sec.m2-section--sports { padding-top: 24px; }
.v4-main .m2-sechead--sub { margin-top: 40px; }

/* ------------------------------------------------------------ product cards: category bento */
.v4-cat { border-radius: var(--v41-r-card); border-color: var(--v41-hair); background: radial-gradient(70% 60% at 70% 92%, rgba(240, 89, 52, .4), transparent 70%), var(--v41-card); box-shadow: var(--v41-edge), var(--v41-lift); transition: transform .3s var(--v41-ease), box-shadow .3s var(--v41-ease), border-color .3s; }
a.v4-cat:hover { transform: translateY(-3px); border-color: var(--v41-hair-2); box-shadow: var(--v41-edge), var(--v41-lift-hover); }
a.v4-cat:focus-visible { outline: 0; box-shadow: var(--v41-ring); }
.v4-cat img { filter: none; transition: transform .45s var(--v41-ease); }
.v4-cat:hover img { transform: translateY(-6px) scale(1.04); }
.v4-cat > div { position: relative; z-index: 1; }
.v4-cat b { font-weight: 720; font-stretch: 110%; letter-spacing: -.01em; }
.v4-main .v4-cat .m2-cat__kicker { color: var(--v41-champagne); font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
.v4-cat--lead { background: radial-gradient(80% 70% at 78% 88%, rgba(240, 89, 52, .52), transparent 72%), var(--v41-card); }
@media (max-width: 899px) {
  .v4-main .v4-cat--lead { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .v4-main .v4-cat--lead img { max-width: 100%; height: auto; max-height: 160px; margin-right: -6px; }
}
@media (min-width: 900px) {
  .v4-cats { grid-auto-rows: 224px; gap: 16px; }
  .v4-cat { padding: 22px; }
  .v4-cat--lead { padding: 30px; }
  .v4-main .v4-cat--lead img { max-height: none; height: 340px; margin-right: -30px; margin-bottom: -6px; }
  .v4-cat--lead b { font-size: 2rem; font-stretch: 116%; }
  .v4-cat--lead span:not(.m2-cat__kicker) { font-size: .9375rem; }
  .v4-main .v4-cat:not(.v4-cat--lead):not(:last-child) img { height: 132px; }
  .v4-cat:last-child { background: radial-gradient(50% 120% at 85% 100%, rgba(240, 89, 52, .38), transparent 70%), var(--v41-card); }
}

/* product cards: game posters */
.v4-main .v4-game > img { width: 100%; aspect-ratio: 400 / 460; height: auto; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 228, 200, .10), 0 18px 28px -20px rgba(0, 0, 0, .9); transition: transform .35s var(--v41-ease), box-shadow .35s var(--v41-ease); }
.v4-main .v4-game:hover > img { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(240, 89, 52, .5), 0 26px 36px -22px rgba(0, 0, 0, .95); }
.v4-main .v4-game:focus-visible { outline: 0; }
.v4-main .v4-game:focus-visible > img { box-shadow: var(--v41-ring); }
.v4-main .v4-game .v4-h3 { font-size: .9375rem; font-weight: 640; font-stretch: 106%; color: #eadbcf; transition: color .2s; }
.v4-main .v4-game:hover .v4-h3 { color: #fff; }

/* ------------------------------------------------------------ feature showrooms */
.v4-band { border-radius: var(--v41-r-panel); border-color: var(--v41-hair); background: radial-gradient(70% 80% at 80% 100%, rgba(240, 89, 52, .36), transparent 70%), linear-gradient(160deg, #26180f, #160d09 70%); box-shadow: var(--v41-edge), 0 20px 34px -26px rgba(0, 0, 0, .9); }
.v4-band__art img { filter: none; transition: transform .6s var(--v41-ease); }
.v4-band:hover .v4-band__art img, .v4-band__art:hover img { transform: translateY(-6px); }
.m2-section--slots .v4-band { background: radial-gradient(70% 80% at 22% 100%, rgba(255, 154, 60, .32), transparent 70%), linear-gradient(160deg, #27180f, #160d09 70%); }
@media (min-width: 900px) {
  .v4-band { padding: 64px 64px 0; gap: 48px; }
  .v4-band > div:first-child { padding-bottom: 64px; }
  .v4-band__art img { max-height: 420px; }
  .m2-section--slots .v4-band { grid-template-columns: 1fr 1fr; }
  .m2-section--slots .v4-band > .m2-zone__copy { order: 2; }
  .m2-section--slots .v4-band > .v4-band__art { order: 1; }
}
.v4-chip { border-radius: 10px; border-color: var(--v41-hair); background: rgba(246, 238, 230, .03); }
.v4-plate { border-radius: 12px; }
.v4-main .v4-plates .v4-plate { box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .8); transition: transform .25s var(--v41-ease); }
.v4-main .v4-plates .v4-plate:hover { transform: translateY(-2px); }

/* sports */
.v4-main .m2-section--sports .v4-bodyart { position: relative; margin-top: 8px; padding: 24px 0 0; border-radius: var(--v41-r-panel); background: radial-gradient(50% 60% at 50% 88%, rgba(240, 89, 52, .38), transparent 70%); }
.v4-main .m2-section--sports .v4-bodyart img { max-height: 340px; transition: transform .6s var(--v41-ease); }
.v4-main .m2-section--sports .v4-bodyart:hover img { transform: translateY(-6px) rotate(-2deg); }
.v4-main .m2-section--sports .v4-plates { margin-top: 20px; }
@media (min-width: 1024px) {
  .v4-main .m2-section--sports > .v4-wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: center; }
  .v4-main .m2-section--sports .v4-sechead { grid-column: 1; grid-row: 1; margin: 0; }
  .v4-main .m2-section--sports .v4-bodyart { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
  .v4-main .m2-section--sports .v4-cards { grid-column: 1 / -1; grid-row: 2; margin-top: 40px; }
  .v4-main .m2-section--sports .v4-plates { grid-column: 1 / -1; grid-row: 3; }
}

/* 4D and fishing pair */
.v4-duo .v4-band { padding: 0; gap: 0; grid-template-columns: 1fr; align-items: stretch; }
.v4-duo .v4-band > img { width: 100%; max-height: 200px; object-fit: contain; object-position: center bottom; margin-top: 20px; transition: transform .6s var(--v41-ease); }
.v4-duo .v4-band:hover > img { transform: translateY(-6px); }
.v4-duo .m2-duo__body { display: grid; gap: 12px; padding: 22px 22px 24px; }
.v4-duo .m2-duo__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v4-duo .m2-duo__row > .v4-plate { height: 44px; width: auto; padding: 4px 12px; flex: none; }
.v4-duo .m2-duo__row > .v4-plate img { height: 32px; width: auto; }
.v4-duo .m2-duo__row > .v4-actions { flex: 1 1 220px; flex-wrap: wrap; }
.v4-duo .m2-duo__row > .v4-actions > .v4-btn { flex: 1 1 140px; }
.v4-duo .v4-h3 { font-size: 1.5rem; font-stretch: 112%; }
@media (min-width: 900px) {
  .v4-duo { gap: 20px; }
  .v4-duo .v4-band { grid-template-columns: .9fr 1.1fr; min-height: 300px; }
  .v4-duo .v4-band > img { max-height: 260px; margin: 0; align-self: end; padding: 24px 0 0 12px; }
  .v4-duo .m2-duo__body { align-content: center; padding: 36px 32px 36px 8px; }
  .v4-duo .m2-duo__row { flex-direction: column; align-items: stretch; }
  .v4-duo .m2-duo__row > .v4-plate, .v4-duo .m2-duo__row > .v4-card__ic { align-self: flex-start; }
  .v4-duo .m2-duo__row > .v4-actions { flex: none; }
}

/* ------------------------------------------------------------ cards and offers (shared by all templates) */
.v4-card { border-radius: var(--v41-r-card); border-color: var(--v41-hair); background: var(--v41-card); box-shadow: var(--v41-edge), var(--v41-lift); transition: transform .3s var(--v41-ease), box-shadow .3s var(--v41-ease), border-color .3s; }
a.v4-card:hover, .v4-card:hover { transform: translateY(-3px); border-color: var(--v41-hair-2); box-shadow: var(--v41-edge), var(--v41-lift-hover); }
a.v4-card:focus-visible { outline: 0; box-shadow: var(--v41-ring); }
.v4-card__ic { border-radius: 10px; background: rgba(240, 89, 52, .12); color: var(--v4-flare); box-shadow: inset 0 0 0 1px rgba(240, 89, 52, .22); }
.v4-offer { border-radius: var(--v41-r-card); border-color: var(--v41-hair); box-shadow: var(--v41-edge), var(--v41-lift); transition: transform .3s var(--v41-ease), box-shadow .3s var(--v41-ease), border-color .3s; }
.v4-offer:hover { transform: translateY(-3px); box-shadow: var(--v41-edge), var(--v41-lift-hover); }
.v4-offer__art img { transition: transform .5s var(--v41-ease); }
.v4-offer:hover .v4-offer__art img { transform: translateY(-5px) scale(1.03); }
.v4-tag { border-radius: 8px; background: rgba(226, 201, 163, .10); color: var(--v41-champagne); border-color: rgba(226, 201, 163, .24); }
.v4-main .m2-carousel__btn { border-radius: 12px; border-color: var(--v41-hair-2); transition: border-color .2s, background-color .2s; }
.v4-main .m2-carousel__btn:hover { border-color: var(--v41-hair-3); background: rgba(246, 238, 230, .05); }

/* ------------------------------------------------------------ app */
.v4-device { border-radius: var(--v41-r-panel); border-color: var(--v41-hair); box-shadow: var(--v41-edge), 0 20px 34px -26px rgba(0, 0, 0, .9); }
.v4-store { border-radius: 14px; border-color: var(--v41-hair); background: rgba(246, 238, 230, .03); transition: border-color .2s, background-color .2s, transform .25s var(--v41-ease); }
a.v4-store:hover { transform: translateX(3px); border-color: var(--v41-hair-2); background: rgba(246, 238, 230, .06); }
a.v4-store:focus-visible { outline: 0; box-shadow: var(--v41-ring); }
.v4-phone { border-radius: 30px; box-shadow: 0 0 0 1px rgba(255, 228, 200, .12), 0 30px 50px -26px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(240, 89, 52, .35); }

/* ------------------------------------------------------------ bone sections */
.v4-sec.v4-porcelain { background: radial-gradient(70% 90% at 100% 0%, rgba(240, 89, 52, .07), transparent 60%), var(--v41-bone); }
.v4-porcelain .v4-kicker { color: #8a5a32; }
.v4-porcelain .v4-kicker::before { background: linear-gradient(90deg, var(--v4-ember), rgba(138, 90, 50, .5)); }
.v4-main :is(.v4-porcelain, .v4-ledger) .v4-opt { border-radius: 14px; border-color: var(--v41-hair-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 22px -18px rgba(29, 18, 13, .45); transition: transform .25s var(--v41-ease), box-shadow .25s; }
.v4-main :is(.v4-porcelain, .v4-ledger) a.v4-opt:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 28px -18px rgba(29, 18, 13, .55); }
.v4-main .v4-porcelain .v4-h2 { color: var(--v41-ink); }
@media (min-width: 900px) {
  .v4-main .m2-paywrap > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .v4-main .m2-paywrap .v4-sechead { margin: 0; }
  .v4-main .v4-porcelain .m2-paywrap .v4-related { grid-template-columns: 1fr; gap: 10px; border-top: 0; }
}
.v4-main .v4-porcelain .m2-paywrap .v4-related > a.v4-opt { padding: 16px 18px; background: #fff; }
.v4-main .v4-porcelain .m2-paywrap .v4-related > a.v4-opt b { font-size: 1rem; }
.v4-main .m2-pays:empty { display: none; }

/* ------------------------------------------------------------ FAQ */
.v4-main .v4-faq details, .v4-faq__item { border-color: var(--v41-hair); }
.v4-faq summary { transition: color .2s; }
.v4-faq summary:hover { color: #fff; }
.v4-faq summary:focus-visible { outline: 0; border-radius: 8px; box-shadow: var(--v41-ring); }

/* ------------------------------------------------------------ footer */
.v4-footer { margin-top: 0; background: radial-gradient(60% 80% at 15% 0%, rgba(240, 89, 52, .08), transparent 60%), linear-gradient(180deg, #120a07, var(--v41-night)); border-top-color: var(--v41-hair); }
.v4-footer__mark span { -webkit-text-stroke: 1px rgba(226, 201, 163, .22); }
.v4-footer__col a { transition: color .2s; }
.v4-footer__col b, .v4-footer__col summary { font-stretch: 108%; }
.v4-age b { border-color: var(--v4-ember); }

/* ------------------------------------------------------------ floating support (desktop dock) */
@media (min-width: 1024px) {
  .v4-dock__btn { width: 56px; height: 56px; background: var(--v4-grad-ember); color: #210b03; box-shadow: inset 0 0 0 1px rgba(255, 210, 170, .3), inset 0 1px 0 rgba(255, 232, 210, .6), 0 12px 24px -10px rgba(240, 89, 52, .7), 0 0 0 6px rgba(15, 9, 7, .55); transition: transform .2s var(--v41-ease), box-shadow .2s var(--v41-ease); }
  .v4-dock__btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 210, 170, .36), inset 0 1px 0 rgba(255, 232, 210, .65), 0 16px 28px -10px rgba(240, 89, 52, .9), 0 0 0 6px rgba(15, 9, 7, .6); }
  .v4-dock__btn:active { transform: scale(.95); }
  .v4-dock__btn:focus-visible { outline: 0; box-shadow: var(--v41-ring); }
}

/* ------------------------------------------------------------ mobile bottom navigation */
@media (max-width: 1023px) {
  .v4-bar { background: rgba(15, 9, 7, .97); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--v41-hair); box-shadow: 0 -12px 24px -16px rgba(0, 0, 0, .8); }
  .v4-bar a, .v4-bar button { color: rgba(246, 238, 230, .62); font-stretch: 104%; transition: color .2s; }
  .v4-bar a:active, .v4-bar button:active { background: rgba(246, 238, 230, .06); }
  .v4-bar [aria-current="page"] { color: var(--v41-text); }
  .v4-bar [aria-current="page"]::before { width: 20px; height: 2px; border-radius: 0 0 2px 2px; }
  .v4-bar [aria-current="page"] .v4-icon { color: var(--v4-flare); }
  .v4-bar__play .v4-bar__disc { width: 40px; height: 40px; border-radius: 13px; color: #210b03; box-shadow: inset 0 0 0 1px rgba(255, 210, 170, .3), inset 0 1px 0 rgba(255, 232, 210, .6), 0 6px 14px -6px rgba(240, 89, 52, .8), 0 0 0 4px var(--v41-night); }
  .v4-bar a:focus-visible, .v4-bar button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--v4-flare); }
}

/* ------------------------------------------------------------ closed menu sheet: artwork is not fetched until needed */
html:not(.v41-menu-art) #v4-menu .v4-tile img { display: none; }

/* ------------------------------------------------------------ motion: one orchestrated hero moment, quiet reveals */
@keyframes v41-up { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .v4-hero .v4-display { animation: v41-up .9s .05s var(--v41-ease) both; }
  .v4-hero__copy > .v4-kicker { animation: v41-up .9s 0s var(--v41-ease) both; }
  .v4-hero__copy > .v4-hero__sub { animation: v41-up .9s .12s var(--v41-ease) both; }
  .v4-hero__copy > .v4-actions { animation: v41-up .9s .18s var(--v41-ease) both; }
  html.v41-reveal [data-m2-reveal]:not(.v41-in) { opacity: 0; transform: translateY(22px); }
  html.v41-reveal [data-m2-reveal] { transition: opacity .8s var(--v41-ease), transform .8s var(--v41-ease); }
}
@media (prefers-reduced-motion: reduce) { .v4-btn--ember::after { display: none; } }
.v4-phero .v4-phero__copy .v4-lead { color: var(--v4-cream); text-shadow: 0 1px 2px rgba(15,9,7,.85), 0 0 18px rgba(15,9,7,.75); }
.v4-phero .v4-phero__copy .v4-kicker, .v4-phero .v4-phero__copy h1 { text-shadow: 0 0 22px rgba(15,9,7,.55); }

/* V4.1.2 accessibility hotfix: larger hero carousel touch targets; visual indicators unchanged. */
.v4-main .v4-dots { gap: 2px; }
.v4-main .v4-dots button[data-v4-dot],
.v4-main .v4-dots button[data-v4-dot][aria-current="true"] { width: 30px; min-width: 30px; height: 32px; min-height: 32px; padding: 0; }
.v4-main .v4-dots .v4-pause { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }

/* M2 V4.1.3 candidate A03: isolate 360-389px hero dots/pause from arrow touch targets. */
@media (min-width:360px) and (max-width:389px) {
  .v4-main .v4-hero__caption { grid-template-columns: minmax(0,1fr) 44px 44px; row-gap: 6px; min-height: 108px; }
  .v4-main .v4-hero__caption .v4-dots { grid-column: 1 / -1; grid-row: 2; justify-self: center; position: relative; z-index: 5; }
  .v4-main .v4-hero__caption [data-m2-prev] { grid-column: 2; grid-row: 3; }
  .v4-main .v4-hero__caption [data-m2-next] { grid-column: 3; grid-row: 3; }
}