/* tokens-adaptive-ee671e.css
   WCM mobile-first base stylesheet (site: wcm.homes, lang: vi)
   Prefix: surfacee671e-
   Design direction:
     - rounded headings paired with compact body
     - low-radius, sectioned divisions
     - pure-image game cards with short name below
     - step-advancing information rhythm
     - state-color-only motion budget
     - icon + text compact CTA
   Navigation direction:
     - asymmetric brand header, compact route panel,
     - full-width bottom rail, containerized symbol tiles,
     - background-support active state, soft color transitions */

/* ============ design tokens ============ */
:root{
  --surfacee671e-canvas: 430px;            /* mobile canvas width (literal 430 marker) */
  --surfacee671e-bg: #262626;
  --surfacee671e-bg-soft: #2c2c2c;
  --surfacee671e-bg-deep: #1d1d1d;
  --surfacee671e-surface: #303030;
  --surfacee671e-surface-2: #363636;
  --surfacee671e-text: #d3d3d3;
  --surfacee671e-text-strong: #f3f3f3;
  --surfacee671e-text-dim: #979797;
  --surfacee671e-text-faint: #6f6f6f;
  --surfacee671e-accent: #ffb3ff;
  --surfacee671e-accent-deep: #ff86ef;
  --surfacee671e-accent-ink: #262626;
  --surfacee671e-line: #3b3b3b;
  --surfacee671e-line-soft: #333333;
  --surfacee671e-good: #9fe6b6;
  --surfacee671e-warn: #ffd380;
  --surfacee671e-info: #9ccbff;
  --surfacee671e-radius-xs: 4px;
  --surfacee671e-radius-s: 6px;
  --surfacee671e-radius-m: 10px;
  --surfacee671e-radius-l: 14px;
  --surfacee671e-pad: 14px;
  --surfacee671e-pad-tight: 10px;
  --surfacee671e-gap: 10px;
  --surfacee671e-gap-tight: 8px;
  --surfacee671e-header-h: 58px;
  --surfacee671e-bottomnav-h: 66px;
  --surfacee671e-touch: 44px;
  --surfacee671e-font-head: "SF Pro Rounded", "Avenir Next", "Segoe UI Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --surfacee671e-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --surfacee671e-ease: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

/* ============ reset / base ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--surfacee671e-font-body);
  background:#121212;
  color:var(--surfacee671e-text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:break-word;
  overflow-wrap:break-word;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--surfacee671e-accent); text-decoration:none; transition:var(--surfacee671e-ease); }
a:hover{ color:var(--surfacee671e-accent-deep); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--surfacee671e-accent);
  outline-offset:2px;
  border-radius:var(--surfacee671e-radius-xs);
}
button{ font-family:inherit; cursor:pointer; color:inherit; background:none; border:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--surfacee671e-font-head); font-weight:700; color:var(--surfacee671e-text-strong); letter-spacing:.2px; }
p{ margin:0 0 10px; }

/* ============ mobile canvas ============ */
.surfacee671e-canvas{
  position:relative;
  width:100%;
  max-width:430px;                         /* keep the 430px mobile canvas on wide screens */
  margin:0 auto;
  min-height:100vh;
  background:var(--surfacee671e-bg);
  box-shadow:0 0 50px rgba(0,0,0,.55);
  overflow:hidden;
}
.surfacee671e-main{
  padding:calc(var(--surfacee671e-header-h) + 8px) var(--surfacee671e-pad) calc(var(--surfacee671e-bottomnav-h) + 24px);
}

/* ============ skip link ============ */
.surfacee671e-skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--surfacee671e-accent);
  color:var(--surfacee671e-accent-ink);
  padding:8px 14px;
  border-radius:var(--surfacee671e-radius-s);
  font-weight:700;
  z-index:200;
}
.surfacee671e-skip:focus{ left:10px; top:10px; }

/* ============ header ============ */
.surfacee671e-header{
  position:fixed;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  height:var(--surfacee671e-header-h);
  background:rgba(38,38,38,.96);
  border-bottom:1px solid var(--surfacee671e-line);
  backdrop-filter:saturate(120%) blur(8px);
  z-index:120;
  display:flex;
  align-items:center;
}
.surfacee671e-header-inner{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 var(--surfacee671e-pad);
  min-width:0;
}
/* asymmetric brand area */
.surfacee671e-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.surfacee671e-brand-logo{
  width:38px;
  height:38px;
  border-radius:var(--surfacee671e-radius-s);
  object-fit:cover;
  background:var(--surfacee671e-surface-2);
  border:1px solid var(--surfacee671e-line);
  flex:0 0 auto;
}
.surfacee671e-brand-text{ min-width:0; line-height:1.1; }
.surfacee671e-brand-name{
  font-family:var(--surfacee671e-font-head);
  font-weight:800;
  font-size:19px;
  color:var(--surfacee671e-text-strong);
  letter-spacing:.5px;
}
.surfacee671e-brand-name span{ color:var(--surfacee671e-accent); }
.surfacee671e-brand-tag{
  display:block;
  font-size:11px;
  color:var(--surfacee671e-text-dim);
  letter-spacing:.3px;
}
/* action area */
.surfacee671e-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.surfacee671e-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:var(--surfacee671e-touch);
  padding:0 14px;
  border-radius:var(--surfacee671e-radius-s);
  font-family:var(--surfacee671e-font-head);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.2px;
  border:1px solid transparent;
  transition:var(--surfacee671e-ease);
  white-space:nowrap;
}
.surfacee671e-btn svg{ width:16px; height:16px; flex:0 0 auto; }
.surfacee671e-btn-promo{
  background:var(--surfacee671e-accent);
  color:var(--surfacee671e-accent-ink);
  border-color:var(--surfacee671e-accent);
}
.surfacee671e-btn-promo:hover{
  background:var(--surfacee671e-accent-deep);
  border-color:var(--surfacee671e-accent-deep);
  color:var(--surfacee671e-accent-ink);
}
.surfacee671e-btn-outline{
  background:transparent;
  color:var(--surfacee671e-text-strong);
  border-color:var(--surfacee671e-line);
}
.surfacee671e-btn-outline:hover{
  color:var(--surfacee671e-accent);
  border-color:var(--surfacee671e-accent);
}
.surfacee671e-menu-btn{
  width:var(--surfacee671e-touch);
  height:var(--surfacee671e-touch);
  border-radius:var(--surfacee671e-radius-s);
  border:1px solid var(--surfacee671e-line);
  background:var(--surfacee671e-surface);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:var(--surfacee671e-ease);
}
.surfacee671e-menu-btn:hover{ border-color:var(--surfacee671e-accent); color:var(--surfacee671e-accent); }
.surfacee671e-menu-btn svg{ width:20px; height:20px; }

/* compact route panel */
.surfacee671e-routes{
  position:fixed;
  top:calc(var(--surfacee671e-header-h));
  left:50%;
  transform:translate(-50%, -12px);
  width:100%;
  max-width:430px;
  background:var(--surfacee671e-bg-deep);
  border-bottom:1px solid var(--surfacee671e-line);
  padding:10px var(--surfacee671e-pad) 14px;
  z-index:119;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.surfacee671e-routes.is-open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.surfacee671e-routes-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.surfacee671e-route-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:9px 12px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  color:var(--surfacee671e-text);
  font-weight:600;
  font-size:13.5px;
}
.surfacee671e-route-link .surfacee671e-tile{
  width:26px; height:26px; flex:0 0 auto;
  background:var(--surfacee671e-surface-2);
  border-radius:var(--surfacee671e-radius-xs);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--surfacee671e-accent);
}
.surfacee671e-route-link .surfacee671e-tile svg{ width:15px; height:15px; }
.surfacee671e-route-link:hover{
  border-color:var(--surfacee671e-accent);
  color:var(--surfacee671e-text-strong);
  background:var(--surfacee671e-surface-2);
}
.surfacee671e-route-link.is-current{
  background:var(--surfacee671e-accent);
  color:var(--surfacee671e-accent-ink);
  border-color:var(--surfacee671e-accent);
}
.surfacee671e-route-link.is-current .surfacee671e-tile{
  background:rgba(38,38,38,.18);
  color:var(--surfacee671e-accent-ink);
}
.surfacee671e-routes-promo{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.surfacee671e-routes-promo .surfacee671e-btn{ flex:1; }

/* containerized symbol tile (reusable) */
.surfacee671e-tile{
  width:30px; height:30px;
  border-radius:var(--surfacee671e-radius-xs);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surfacee671e-surface-2);
  color:var(--surfacee671e-accent);
  flex:0 0 auto;
}
.surfacee671e-tile svg{ width:17px; height:17px; }

/* ============ hero carousel ============ */
.surfacee671e-hero{
  position:relative;
  border-radius:var(--surfacee671e-radius-l);
  overflow:hidden;
  background:var(--surfacee671e-bg-deep);
  border:1px solid var(--surfacee671e-line);
}
.surfacee671e-hero-track{
  display:flex;
  transition:transform .32s ease;
}
.surfacee671e-hero-slide{
  min-width:100%;
  position:relative;
}
.surfacee671e-hero-img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.surfacee671e-hero-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px var(--surfacee671e-pad) 16px;
  background:linear-gradient(180deg, rgba(22,22,22,0) 0%, rgba(22,22,22,.82) 70%, rgba(22,22,22,.94) 100%);
}
.surfacee671e-hero-title{
  font-family:var(--surfacee671e-font-head);
  font-weight:800;
  font-size:17px;
  color:var(--surfacee671e-text-strong);
  margin:0 0 4px;
}
.surfacee671e-hero-sub{
  font-size:12.5px;
  color:var(--surfacee671e-text);
  margin:0 0 10px;
}
.surfacee671e-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:0 16px;
  border-radius:var(--surfacee671e-radius-s);
  background:var(--surfacee671e-accent);
  color:var(--surfacee671e-accent-ink);
  font-family:var(--surfacee671e-font-head);
  font-weight:700;
  font-size:13px;
}
.surfacee671e-hero-cta svg{ width:14px; height:14px; }
.surfacee671e-hero-cta:hover{ background:var(--surfacee671e-accent-deep); color:var(--surfacee671e-accent-ink); }
.surfacee671e-hero-dots{
  position:absolute;
  bottom:8px; right:12px;
  display:flex; gap:5px;
}
.surfacee671e-hero-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(211,211,211,.4);
  border:0; padding:0;
  transition:var(--surfacee671e-ease);
}
.surfacee671e-hero-dot.is-active{
  background:var(--surfacee671e-accent);
  width:18px; border-radius:var(--surfacee671e-radius-xs);
}

/* ============ section blocks ============ */
.surfacee671e-section{
  margin-top:22px;
}
.surfacee671e-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--surfacee671e-line);
}
.surfacee671e-section-title{
  font-size:17px;
  line-height:1.2;
}
.surfacee671e-section-title em{
  font-style:normal;
  color:var(--surfacee671e-accent);
}
.surfacee671e-section-kicker{
  display:block;
  font-size:11px;
  color:var(--surfacee671e-text-faint);
  letter-spacing:1.4px;
  text-transform:uppercase;
  margin-bottom:3px;
  font-family:var(--surfacee671e-font-body);
  font-weight:600;
}
.surfacee671e-section-link{
  font-size:12.5px;
  font-weight:600;
  color:var(--surfacee671e-accent);
  white-space:nowrap;
}

/* category quick bar */
.surfacee671e-catbar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  margin-bottom:4px;
  scrollbar-width:none;
}
.surfacee671e-catbar::-webkit-scrollbar{ display:none; }
.surfacee671e-cat{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  min-height:34px;
  border-radius:var(--surfacee671e-radius-s);
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  color:var(--surfacee671e-text);
  font-size:12.5px;
  font-weight:600;
}
.surfacee671e-cat .surfacee671e-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--surfacee671e-accent);
  display:inline-block;
}
.surfacee671e-cat[data-cat="BÀI"] .surfacee671e-dot{ background:var(--surfacee671e-info); }
.surfacee671e-cat[data-cat="BẮN CÁ"] .surfacee671e-dot{ background:var(--surfacee671e-good); }
.surfacee671e-cat[data-cat="casino trực tiếp"] .surfacee671e-dot{ background:var(--surfacee671e-warn); }
.surfacee671e-cat[data-cat="NỔ HŨ"] .surfacee671e-dot{ background:var(--surfacee671e-accent-deep); }

/* ============ game grid + cards ============ */
.surfacee671e-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--surfacee671e-gap-tight);
}
.surfacee671e-card{
  background:transparent;
  border:0;
  padding:0;
  text-align:center;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.surfacee671e-card-img-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--surfacee671e-radius-s);
  overflow:hidden;
  background:var(--surfacee671e-bg-deep);
  border:1px solid var(--surfacee671e-line-soft);
  transition:var(--surfacee671e-ease);
}
.surfacee671e-card:hover .surfacee671e-card-img-wrap{
  border-color:var(--surfacee671e-accent);
}
.surfacee671e-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}
.surfacee671e-card:hover .surfacee671e-card-img{ transform:scale(1.04); }
.surfacee671e-card-badge{
  position:absolute;
  top:4px; left:4px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.3px;
  padding:2px 6px;
  border-radius:var(--surfacee671e-radius-xs);
  background:rgba(38,38,38,.8);
  color:var(--surfacee671e-accent);
  border:1px solid rgba(255,179,255,.4);
}
.surfacee671e-card-name{
  font-size:11px;
  line-height:1.25;
  color:var(--surfacee671e-text);
  font-weight:600;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:28px;
  padding:0 1px;
}
.surfacee671e-card:hover .surfacee671e-card-name{ color:var(--surfacee671e-text-strong); }

/* ============ info modules ============ */
.surfacee671e-intro{
  margin-top:18px;
  padding:14px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line);
  border-left:3px solid var(--surfacee671e-accent);
  border-radius:var(--surfacee671e-radius-m);
}
.surfacee671e-intro p{ font-size:13.5px; color:var(--surfacee671e-text); margin-bottom:8px; }
.surfacee671e-intro p:last-child{ margin-bottom:0; }
.surfacee671e-intro strong{ color:var(--surfacee671e-text-strong); }

/* feature strip (scannable, comparable) */
.surfacee671e-features{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-top:6px;
}
.surfacee671e-feature{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
}
.surfacee671e-feature .surfacee671e-tile{ width:30px; height:30px; }
.surfacee671e-feature-title{
  font-family:var(--surfacee671e-font-head);
  font-weight:700;
  font-size:13px;
  color:var(--surfacee671e-text-strong);
  margin:0 0 3px;
}
.surfacee671e-feature-text{ font-size:12px; color:var(--surfacee671e-text-dim); margin:0; line-height:1.4; }

/* step list (step-advancing rhythm) */
.surfacee671e-steps{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
  counter-reset:step;
}
.surfacee671e-step{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:11px 12px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  counter-increment:step;
}
.surfacee671e-step::before{
  content:counter(step);
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--surfacee671e-accent);
  color:var(--surfacee671e-accent-ink);
  font-family:var(--surfacee671e-font-head);
  font-weight:800;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.surfacee671e-step-title{
  font-family:var(--surfacee671e-font-head);
  font-weight:700;
  font-size:13px;
  color:var(--surfacee671e-text-strong);
  margin:0 0 2px;
}
.surfacee671e-step-text{ font-size:12px; color:var(--surfacee671e-text-dim); margin:0; line-height:1.45; }

/* FAQ */
.surfacee671e-faq{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.surfacee671e-faq-item{
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  overflow:hidden;
}
.surfacee671e-faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  text-align:left;
  padding:12px;
  min-height:var(--surfacee671e-touch);
  font-family:var(--surfacee671e-font-head);
  font-weight:700;
  font-size:13px;
  color:var(--surfacee671e-text-strong);
}
.surfacee671e-faq-q .surfacee671e-faq-ico{
  flex:0 0 auto;
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--surfacee671e-accent);
  transition:transform .2s ease;
}
.surfacee671e-faq-q .surfacee671e-faq-ico svg{ width:16px; height:16px; }
.surfacee671e-faq-item.is-open .surfacee671e-faq-q .surfacee671e-faq-ico{ transform:rotate(45deg); }
.surfacee671e-faq-a{
  padding:0 12px;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
  font-size:12.5px;
  color:var(--surfacee671e-text-dim);
}
.surfacee671e-faq-item.is-open .surfacee671e-faq-a{
  padding:0 12px 12px;
  max-height:340px;
}
.surfacee671e-faq-a p{ margin:0; }
.surfacee671e-faq-a a{ font-weight:600; }

/* highlight rows (game category highlights) */
.surfacee671e-highlights{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}
.surfacee671e-highlight{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:11px 12px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
}
.surfacee671e-highlight-mark{
  flex:0 0 auto;
  font-family:var(--surfacee671e-font-head);
  font-weight:800;
  font-size:11px;
  letter-spacing:.5px;
  padding:3px 8px;
  border-radius:var(--surfacee671e-radius-xs);
  background:rgba(255,179,255,.14);
  color:var(--surfacee671e-accent);
  border:1px solid rgba(255,179,255,.3);
}
.surfacee671e-highlight h3{
  font-size:13px;
  color:var(--surfacee671e-text-strong);
  margin:0 0 2px;
  font-family:var(--surfacee671e-font-head);
}
.surfacee671e-highlight p{ font-size:12px; color:var(--surfacee671e-text-dim); margin:0; line-height:1.45; }
.surfacee671e-highlight a{ font-weight:600; }

/* prose block */
.surfacee671e-prose{
  margin-top:6px;
  padding:14px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-m);
}
.surfacee671e-prose h3{
  font-size:14px;
  color:var(--surfacee671e-text-strong);
  margin:0 0 7px;
}
.surfacee671e-prose p{ font-size:12.8px; color:var(--surfacee671e-text); line-height:1.6; margin-bottom:8px; }
.surfacee671e-prose p:last-child{ margin-bottom:0; }
.surfacee671e-prose a{ font-weight:600; }

/* inline promo strip */
.surfacee671e-promostrip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding:12px var(--surfacee671e-pad);
  background:linear-gradient(135deg, rgba(255,179,255,.16), rgba(255,134,239,.08));
  border:1px solid rgba(255,179,255,.34);
  border-radius:var(--surfacee671e-radius-m);
}
.surfacee671e-promostrip-text{
  font-size:12.5px;
  color:var(--surfacee671e-text);
  line-height:1.4;
}
.surfacee671e-promostrip-text strong{ color:var(--surfacee671e-text-strong); display:block; font-family:var(--surfacee671e-font-head); }

/* trust row */
.surfacee671e-trust{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:6px;
}
.surfacee671e-trust-cell{
  text-align:center;
  padding:10px 6px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
}
.surfacee671e-trust-num{
  font-family:var(--surfacee671e-font-head);
  font-weight:800;
  font-size:18px;
  color:var(--surfacee671e-accent);
  line-height:1;
}
.surfacee671e-trust-label{ font-size:10.5px; color:var(--surfacee671e-text-dim); margin-top:4px; }

/* partners */
.surfacee671e-partners{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  margin-top:6px;
}
.surfacee671e-partner{
  aspect-ratio:1/1;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:6px;
}
.surfacee671e-partner img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:grayscale(.2) opacity(.9);
}

/* ============ extended footer (home only) ============ */
.surfacee671e-ext{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--surfacee671e-line);
}
.surfacee671e-ext-promos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-bottom:16px;
}
.surfacee671e-ext-promo{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px;
  min-height:var(--surfacee671e-touch);
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  font-family:var(--surfacee671e-font-head);
  font-weight:700;
  font-size:12.5px;
  color:var(--surfacee671e-text-strong);
  transition:var(--surfacee671e-ease);
}
.surfacee671e-ext-promo:hover{ border-color:var(--surfacee671e-accent); color:var(--surfacee671e-accent); }
.surfacee671e-ext-promo .surfacee671e-tile{ width:26px; height:26px; }
.surfacee671e-ext-promo .surfacee671e-tile svg{ width:14px; height:14px; }

.surfacee671e-ext-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.surfacee671e-ext-col h4{
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--surfacee671e-text-faint);
  margin:0 0 8px;
  font-family:var(--surfacee671e-font-body);
  font-weight:700;
}
.surfacee671e-ext-col ul{ display:flex; flex-direction:column; gap:6px; }
.surfacee671e-ext-col a{
  font-size:12.5px;
  color:var(--surfacee671e-text);
  line-height:1.35;
}
.surfacee671e-ext-col a:hover{ color:var(--surfacee671e-accent); }
.surfacee671e-ext-brand p{
  font-size:12px;
  color:var(--surfacee671e-text-dim);
  line-height:1.55;
  margin:0;
}
.surfacee671e-disclaimer{
  margin-top:16px;
  padding:11px;
  background:var(--surfacee671e-bg-deep);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  font-size:11px;
  color:var(--surfacee671e-text-faint);
  line-height:1.5;
}

/* ============ common footer ============ */
.surfacee671e-footer{
  margin-top:18px;
  padding:14px var(--surfacee671e-pad) 6px;
  border-top:1px solid var(--surfacee671e-line);
  text-align:center;
}
.surfacee671e-footer-copy{
  font-size:11.5px;
  color:var(--surfacee671e-text-faint);
}
.surfacee671e-footer-copy strong{ color:var(--surfacee671e-text-dim); }

/* ============ bottom navigation rail ============ */
.surfacee671e-bottomnav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  height:var(--surfacee671e-bottomnav-h);
  background:rgba(29,29,29,.98);
  border-top:1px solid var(--surfacee671e-line);
  display:flex;
  align-items:stretch;
  z-index:120;
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.surfacee671e-navitem{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:var(--surfacee671e-text-dim);
  font-size:10px;
  font-weight:600;
  min-height:var(--surfacee671e-touch);
  position:relative;
  transition:var(--surfacee671e-ease);
  border:0;
  background:none;
}
.surfacee671e-navitem .surfacee671e-navtile{
  width:34px; height:28px;
  border-radius:var(--surfacee671e-radius-s);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  transition:var(--surfacee671e-ease);
}
.surfacee671e-navitem .surfacee671e-navtile svg{ width:18px; height:18px; }
.surfacee671e-navitem .surfacee671e-navlabel{ letter-spacing:.2px; }
.surfacee671e-navitem:hover{ color:var(--surfacee671e-text-strong); }
.surfacee671e-navitem:hover .surfacee671e-navtile{ background:var(--surfacee671e-surface-2); }
/* active: background-support block */
.surfacee671e-navitem.is-active{ color:var(--surfacee671e-accent); }
.surfacee671e-navitem.is-active .surfacee671e-navtile{
  background:rgba(255,179,255,.16);
  color:var(--surfacee671e-accent);
}
.surfacee671e-navitem-promo{ color:var(--surfacee671e-accent); }
.surfacee671e-navitem-promo .surfacee671e-navtile{ color:var(--surfacee671e-accent); }

/* ============ responsive tweaks ============ */
@media (min-width:375px){
  .surfacee671e-grid{ gap:10px; }
  .surfacee671e-card-name{ font-size:11.5px; }
}
@media (min-width:414px){
  .surfacee671e-grid{ grid-template-columns:repeat(5, 1fr); }
  .surfacee671e-partners{ grid-template-columns:repeat(6, 1fr); }
}
@media (max-width:360px){
  .surfacee671e-grid{ grid-template-columns:repeat(4, 1fr); gap:6px; }
  .surfacee671e-card-name{ font-size:10.5px; }
  .surfacee671e-brand-name{ font-size:17px; }
}

/* ============ help-page layouts ============ */
.surfacee671e-pagelead{
  margin-top:4px;
  padding:16px 14px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line);
  border-left:3px solid var(--surfacee671e-accent);
  border-radius:var(--surfacee671e-radius-m);
}
.surfacee671e-pagelead h1{ font-size:23px; line-height:1.18; margin-bottom:9px; }
.surfacee671e-pagelead p{ font-size:13.5px; color:var(--surfacee671e-text); }
.surfacee671e-actionrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.surfacee671e-note{
  margin-top:9px;
  padding:11px 12px;
  background:var(--surfacee671e-bg-deep);
  border-left:3px solid var(--surfacee671e-info);
  color:var(--surfacee671e-text);
  font-size:12.5px;
}
.surfacee671e-checklist{ display:flex; flex-direction:column; gap:8px; }
.surfacee671e-checkitem{
  position:relative;
  padding:11px 12px 11px 42px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  font-size:12.7px;
  color:var(--surfacee671e-text);
}
.surfacee671e-checkitem::before{
  content:"✓";
  position:absolute;
  left:12px; top:11px;
  width:21px; height:21px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(159,230,182,.14);
  color:var(--surfacee671e-good);
  font-weight:800;
}
.surfacee671e-checkitem strong{ color:var(--surfacee671e-text-strong); }
.surfacee671e-termgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.surfacee671e-term{
  padding:11px;
  background:var(--surfacee671e-surface);
  border-top:2px solid var(--surfacee671e-accent);
  border-radius:var(--surfacee671e-radius-s);
}
.surfacee671e-term dt{ color:var(--surfacee671e-text-strong); font-weight:800; font-size:13px; margin-bottom:4px; }
.surfacee671e-term dd{ margin:0; color:var(--surfacee671e-text-dim); font-size:12px; line-height:1.5; }
.surfacee671e-factline{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--surfacee671e-line-soft);
}
.surfacee671e-factline:last-child{ border-bottom:0; }
.surfacee671e-factmark{
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--surfacee671e-radius-xs);
  background:rgba(255,179,255,.14);
  color:var(--surfacee671e-accent);
  font-family:var(--surfacee671e-font-head);
  font-weight:800;
  font-size:12px;
}
.surfacee671e-factline p{ margin:0; font-size:12.6px; }
.surfacee671e-matrix{ width:100%; border-collapse:collapse; font-size:11.7px; }
.surfacee671e-matrix th,.surfacee671e-matrix td{ padding:9px 7px; border-bottom:1px solid var(--surfacee671e-line); text-align:left; vertical-align:top; }
.surfacee671e-matrix th{ color:var(--surfacee671e-accent); background:var(--surfacee671e-bg-deep); font-weight:700; }
.surfacee671e-matrix td{ color:var(--surfacee671e-text); }
.surfacee671e-matrix-wrap{ overflow-x:auto; border:1px solid var(--surfacee671e-line); border-radius:var(--surfacee671e-radius-s); }
.surfacee671e-question-index{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.surfacee671e-question-index a{
  min-height:44px;
  display:flex; align-items:center;
  padding:9px 10px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
  color:var(--surfacee671e-text);
  font-size:12px;
  font-weight:650;
}
.surfacee671e-question-index a:hover{ border-color:var(--surfacee671e-accent); color:var(--surfacee671e-accent); }
.surfacee671e-answer{
  padding:13px;
  background:var(--surfacee671e-surface);
  border:1px solid var(--surfacee671e-line-soft);
  border-radius:var(--surfacee671e-radius-s);
}
.surfacee671e-answer + .surfacee671e-answer{ margin-top:8px; }
.surfacee671e-answer h3{ font-size:14px; margin-bottom:6px; }
.surfacee671e-answer p,.surfacee671e-answer li{ font-size:12.7px; color:var(--surfacee671e-text); line-height:1.6; }
.surfacee671e-answer ul{ list-style:disc; padding-left:18px; }
.surfacee671e-callout{
  padding:13px;
  background:linear-gradient(135deg,rgba(255,179,255,.13),rgba(156,203,255,.07));
  border:1px solid rgba(255,179,255,.3);
  border-radius:var(--surfacee671e-radius-m);
}
.surfacee671e-callout p{ font-size:12.8px; margin-bottom:9px; }

/* keep compact header actions usable on the 320px canvas */
@media (max-width:374px){
  .surfacee671e-actions > .surfacee671e-btn-outline{ display:none; }
  .surfacee671e-actions{ gap:6px; }
  .surfacee671e-btn{ padding-left:10px; padding-right:10px; }
  .surfacee671e-brand{ gap:7px; }
  .surfacee671e-brand-logo{ width:34px; height:34px; }
  .surfacee671e-brand-name{ font-size:16px; }
  .surfacee671e-termgrid,.surfacee671e-question-index{ grid-template-columns:1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}