/* ==========================================================================
   MongolianBettingSites.com - Design System
   Mongolia blue + red accent on NWG design foundation
   ========================================================================== */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* --- Tokens --- */
:root{
  /* Brand */
  --color-primary:#C8102E;
  --color-primary-hover:#A00D25;
  --color-primary-light:#FFF1F3;
  --color-primary-glow:rgba(200,16,46,0.12);
  --color-secondary:#0066B3;
  --color-secondary-light:#E8F2FB;

  /* Surfaces */
  --color-bg:#FAFAFA;
  --color-surface:#ffffff;
  --color-surface-2:#F3F4F6;
  --color-surface-3:#E5E7EB;

  /* Text */
  --color-text:#111827;
  --color-text-secondary:#4B5563;
  --color-text-muted:#6B7280;
  --color-text-inverse:#ffffff;

  /* Borders */
  --color-border:#E5E7EB;
  --color-border-strong:#D1D5DB;

  /* Status */
  --color-success:#16a34a;
  --color-success-bg:#F0FDF4;
  --color-warning:#D97706;
  --color-warning-bg:#FFFBEB;
  --color-danger:#DC2626;
  --color-danger-bg:#FEF2F2;
  --color-info:#0066B3;
  --color-info-bg:#EFF6FF;

  /* Type */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display:'General Sans','Inter',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Spacing */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;

  /* Radius */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-full:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.10);
  --shadow-primary:0 4px 20px rgba(200,16,46,0.20);

  /* Layout */
  --header-height:60px;
  --container-max:1200px;
}

[data-theme="dark"]{
  --color-primary:#E74357;
  --color-primary-hover:#F0576A;
  --color-primary-light:rgba(231,67,87,0.12);
  --color-primary-glow:rgba(231,67,87,0.25);
  --color-secondary:#4FA3E0;
  --color-secondary-light:rgba(79,163,224,0.12);

  --color-bg:#0D1117;
  --color-surface:#161B22;
  --color-surface-2:#21262D;
  --color-surface-3:#30363D;

  --color-text:#F0F6FC;
  --color-text-secondary:#C9D1D9;
  --color-text-muted:#8B949E;

  --color-border:#30363D;
  --color-border-strong:#484F58;

  --color-success:#4ADE80;
  --color-success-bg:rgba(74,222,128,0.08);
  --color-warning:#FBBF24;
  --color-warning-bg:rgba(251,191,36,0.08);
  --color-danger:#F87171;
  --color-danger-bg:rgba(248,113,113,0.08);

  --shadow-sm:0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:0 4px 12px rgba(0,0,0,0.40);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.50);
}

/* --- Base --- */
body{
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  font-size:16px;
  line-height:1.65;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--color-text);
}
h1{font-size:clamp(1.875rem,4vw,2.5rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.375rem}
h4{font-size:1.125rem}
p{margin-bottom:1em}
a{color:var(--color-primary);transition:color 0.15s}
a:hover{color:var(--color-primary-hover)}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}

/* --- Disclosure bar --- */
.disclosure-bar{
  background:var(--color-warning-bg);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-2) 0;
  font-size:0.8125rem;
  color:var(--color-text-secondary);
  text-align:center;
}
.disclosure-bar a{text-decoration:underline}

/* --- Geo warning (Mongolia residents) --- */
.geo-warning{
  background:var(--color-danger-bg);
  border-bottom:1px solid var(--color-danger);
  padding:var(--space-3) 0;
  font-size:0.875rem;
  color:var(--color-danger);
  text-align:center;
  font-weight:500;
}
.geo-warning strong{color:var(--color-danger)}
.geo-warning a{color:var(--color-danger);text-decoration:underline}

/* --- Header --- */
.site-header{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:50;
  height:var(--header-height);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  gap:var(--space-5);
}
.site-logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.125rem;
  color:var(--color-text);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  text-decoration:none;
  flex-shrink:0;
}
.logo-mark{
  width:32px;
  height:32px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:0.875rem;
  flex-shrink:0;
}
.logo-text-short{display:none}
@media (max-width:480px){
  .logo-text-short{display:inline}
  .logo-text-full{display:none}
}

.nav-desktop{display:none;align-items:center;gap:var(--space-5);flex:1}
.nav-desktop a{
  color:var(--color-text-secondary);
  font-weight:500;
  font-size:0.9375rem;
  padding:var(--space-2) 0;
  border-bottom:2px solid transparent;
  transition:all 0.15s;
}
.nav-desktop a:hover,.nav-desktop a.active{
  color:var(--color-text);
  border-bottom-color:var(--color-primary);
}
@media (min-width:900px){.nav-desktop{display:flex}}

.header-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle,.mobile-menu-btn{
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-secondary);
  transition:background 0.15s;
}
.theme-toggle:hover,.mobile-menu-btn:hover{background:var(--color-surface-2)}
.theme-toggle svg,.mobile-menu-btn svg{width:20px;height:20px}
[data-theme="dark"] .theme-toggle .icon-sun,.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-moon,.theme-toggle .icon-sun{display:none}
@media (min-width:900px){.mobile-menu-btn{display:none}}

/* --- Mobile nav --- */
.mobile-nav{
  display:none;
  position:fixed;
  top:var(--header-height);
  left:0;
  right:0;
  bottom:0;
  background:var(--color-surface);
  overflow-y:auto;
  z-index:40;
  padding:var(--space-4) 0;
  border-top:1px solid var(--color-border);
}
.mobile-nav.open{display:block}
.mobile-nav .container{display:flex;flex-direction:column;gap:var(--space-1)}
.mobile-nav a{
  padding:var(--space-3) var(--space-4);
  color:var(--color-text-secondary);
  font-weight:500;
  border-radius:var(--radius-sm);
}
.mobile-nav a:hover{background:var(--color-surface-2);color:var(--color-text)}
@media (min-width:900px){.mobile-nav{display:none !important}}

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-full);
  font-weight:600;
  font-size:0.9375rem;
  transition:all 0.15s;
  white-space:nowrap;
  cursor:pointer;
  border:1px solid transparent;
  line-height:1.2;
}
.btn--primary{
  background:var(--color-primary);
  color:#fff;
  box-shadow:var(--shadow-primary);
}
.btn--primary:hover{background:var(--color-primary-hover);color:#fff;transform:translateY(-1px)}
.btn--outline{
  background:transparent;
  color:var(--color-primary);
  border-color:var(--color-primary);
}
.btn--outline:hover{background:var(--color-primary-light)}
.btn--ghost{
  background:var(--color-surface);
  color:var(--color-text-secondary);
  border-color:var(--color-border);
}
.btn--ghost:hover{background:var(--color-surface-2);color:var(--color-text)}
.btn--lg{padding:var(--space-3) var(--space-6);font-size:1rem}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:0.875rem}
.btn--block{width:100%}

/* --- Hero --- */
.hero{
  background:linear-gradient(135deg,#0B1E4A 0%,#7A0A1F 100%);
  color:#fff;
  padding:var(--space-8) 0;
  position:relative;
  overflow:hidden;
}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#0B1E4A 0%,#3D0612 100%)}
.hero::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:900px;
  height:900px;
  background:radial-gradient(circle,rgba(255,255,255,0.04) 0%,transparent 60%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:1}
.hero h1{
  color:#fff;
  margin-bottom:var(--space-4);
  max-width:900px;
}
.hero-subtitle{
  font-size:1.125rem;
  color:rgba(255,255,255,0.85);
  max-width:700px;
  margin-bottom:var(--space-6);
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-5);
  font-size:0.875rem;
  color:rgba(255,255,255,0.75);
}
.hero-meta span{display:flex;align-items:center;gap:var(--space-2)}
.hero-meta strong{color:#fff;font-weight:600}

/* --- Page hero (smaller, for sub-pages) --- */
.page-hero{
  background:var(--color-surface-2);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-6) 0;
}
.page-hero .breadcrumb{margin-bottom:var(--space-3)}
.page-hero h1{margin-bottom:var(--space-3)}
.page-hero-subtitle{
  color:var(--color-text-secondary);
  font-size:1rem;
  max-width:700px;
}

.breadcrumb{
  font-size:0.8125rem;
  color:var(--color-text-muted);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.breadcrumb a{color:var(--color-text-muted)}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb .separator{color:var(--color-text-muted);opacity:0.5}

/* --- Section --- */
.section{padding:var(--space-7) 0}
.section--alt{background:var(--color-surface-2)}
.section-header{margin-bottom:var(--space-6);text-align:left}
.section-header h2{margin-bottom:var(--space-3)}
.section-header p{color:var(--color-text-secondary);max-width:700px}
.section-header--centered{text-align:center}
.section-header--centered p{margin-left:auto;margin-right:auto}

/* --- Cards --- */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;
}
.card:hover{box-shadow:var(--shadow-md)}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--space-5);
}

/* --- Brand card (homepage and listings) --- */
.brand-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  position:relative;
  transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;
}
.brand-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-strong);transform:translateY(-2px)}
.brand-card--featured{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
.brand-rank{
  position:absolute;
  top:var(--space-3);
  right:var(--space-3);
  width:36px;
  height:36px;
  background:var(--color-primary);
  color:#fff;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
}
.brand-header{display:flex;align-items:center;gap:var(--space-3);padding-right:48px}
.brand-logo{
  width:56px;
  height:56px;
  border-radius:var(--radius-sm);
  background:var(--color-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  color:var(--color-text);
  flex-shrink:0;
  border:1px solid var(--color-border);
}
.brand-info h3{font-size:1.125rem;margin-bottom:var(--space-1)}
.brand-rating-row{display:flex;align-items:center;gap:var(--space-2);font-size:0.8125rem;color:var(--color-text-muted)}
.rating-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  background:var(--color-success-bg);
  color:var(--color-success);
  border-radius:var(--radius-full);
  font-weight:700;
  font-size:0.8125rem;
}
.rating-badge.rating-medium{background:var(--color-warning-bg);color:var(--color-warning)}
.brand-bonus{
  padding:var(--space-3);
  background:var(--color-primary-light);
  border-radius:var(--radius-sm);
  border-left:3px solid var(--color-primary);
}
.brand-bonus .label{font-size:0.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;font-weight:600}
.brand-bonus .amount{font-family:var(--font-display);font-weight:700;color:var(--color-text);font-size:1rem}
.brand-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  padding:3px 10px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  font-size:0.75rem;
  color:var(--color-text-secondary);
  font-weight:500;
}
.brand-card-footer{display:flex;gap:var(--space-2);margin-top:auto}
.brand-card-footer .btn{flex:1}

/* --- Comparison table --- */
.comparison-table{
  width:100%;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  font-size:0.9375rem;
}
.comparison-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.comparison-table th,.comparison-table td{
  padding:var(--space-3) var(--space-4);
  text-align:left;
  border-bottom:1px solid var(--color-border);
  vertical-align:middle;
  white-space:nowrap;
}
.comparison-table th{
  background:var(--color-surface-2);
  font-weight:600;
  font-size:0.8125rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--color-text-secondary);
}
.comparison-table td:first-child{font-weight:600;color:var(--color-text)}
.comparison-table tr:last-child td{border-bottom:none}
.comparison-table tr:hover td{background:var(--color-surface-2)}
.comparison-table .operator-cell{display:flex;align-items:center;gap:var(--space-3)}
.comparison-table .operator-cell .brand-logo{width:36px;height:36px;font-size:0.75rem}

/* --- Pros / Cons --- */
.pros-cons{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  margin:var(--space-5) 0;
}
@media (min-width:700px){.pros-cons{grid-template-columns:1fr 1fr}}
.pros-cons-block{
  padding:var(--space-4);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
}
.pros-cons-block.pros{background:var(--color-success-bg);border-color:var(--color-success)}
.pros-cons-block.cons{background:var(--color-danger-bg);border-color:var(--color-danger)}
.pros-cons-block h4{margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.pros-cons-block.pros h4{color:var(--color-success)}
.pros-cons-block.cons h4{color:var(--color-danger)}
.pros-cons-block ul{display:flex;flex-direction:column;gap:var(--space-2)}
.pros-cons-block li{
  padding-left:var(--space-5);
  position:relative;
  font-size:0.9375rem;
  color:var(--color-text);
}
.pros-cons-block.pros li::before{content:"+";position:absolute;left:0;color:var(--color-success);font-weight:700}
.pros-cons-block.cons li::before{content:"-";position:absolute;left:0;color:var(--color-danger);font-weight:700}

/* --- FAQ --- */
.faq-list{display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-q{
  padding:var(--space-4) var(--space-5);
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  cursor:pointer;
  width:100%;
  text-align:left;
  color:var(--color-text);
}
.faq-q:hover{background:var(--color-surface-2)}
.faq-q::after{content:"+";font-size:1.5rem;color:var(--color-primary);transition:transform 0.2s}
.faq-item.open .faq-q::after{content:"−"}
.faq-a{
  padding:0 var(--space-5) var(--space-5);
  color:var(--color-text-secondary);
  display:none;
}
.faq-item.open .faq-a{display:block}

/* --- Prose --- */
.prose{max-width:800px}
.prose h2{margin-top:var(--space-6);margin-bottom:var(--space-4)}
.prose h3{margin-top:var(--space-5);margin-bottom:var(--space-3)}
.prose p{color:var(--color-text-secondary);line-height:1.75;margin-bottom:var(--space-4)}
.prose ul,.prose ol{margin-bottom:var(--space-4);padding-left:var(--space-5);color:var(--color-text-secondary)}
.prose ul li{list-style:disc;margin-bottom:var(--space-2)}
.prose ol li{list-style:decimal;margin-bottom:var(--space-2)}
.prose a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--color-text);font-weight:600}

/* --- Sidebar layout --- */
.content-layout{display:grid;gap:var(--space-6)}
@media (min-width:900px){
  .content-layout--sidebar{grid-template-columns:minmax(0,1fr) 320px}
}
.content-sidebar{display:flex;flex-direction:column;gap:var(--space-5)}
@media (min-width:900px){
  .content-sidebar{position:sticky;top:calc(var(--header-height) + var(--space-4));align-self:start}
}
.sidebar-widget{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-4);
}
.sidebar-widget h4{
  font-size:0.8125rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--color-text-muted);
  margin-bottom:var(--space-3);
}
.sidebar-widget ul{display:flex;flex-direction:column;gap:var(--space-2)}
.sidebar-widget li a{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2);
  color:var(--color-text-secondary);
  font-size:0.9375rem;
  border-radius:var(--radius-sm);
  font-weight:500;
}
.sidebar-widget li a:hover{background:var(--color-surface-2);color:var(--color-primary)}

/* --- Quick facts box --- */
.quick-facts{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-5);
  padding:var(--space-5);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  margin:var(--space-5) 0;
  align-items:center;
}
@media (max-width:640px){.quick-facts{grid-template-columns:1fr}}
.quick-facts-score{
  text-align:center;
  padding:var(--space-3) var(--space-5);
  border-right:1px solid var(--color-border);
}
@media (max-width:640px){.quick-facts-score{border-right:none;border-bottom:1px solid var(--color-border);padding-right:0;padding-bottom:var(--space-4)}}
.quick-facts-score .score{
  font-family:var(--font-display);
  font-size:3rem;
  font-weight:800;
  color:var(--color-primary);
  line-height:1;
}
.quick-facts-score .label{font-size:0.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-top:var(--space-2)}
.quick-facts dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);font-size:0.9375rem}
.quick-facts dt{color:var(--color-text-muted);font-weight:500}
.quick-facts dd{color:var(--color-text);font-weight:500}

/* --- CTA box --- */
.cta-box{
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
  color:#fff;
  padding:var(--space-6);
  border-radius:var(--radius-lg);
  text-align:center;
  margin:var(--space-6) 0;
}
.cta-box h3{color:#fff;margin-bottom:var(--space-3)}
.cta-box p{color:rgba(255,255,255,0.9);margin-bottom:var(--space-5);max-width:600px;margin-left:auto;margin-right:auto}
.cta-box .btn{background:#fff;color:var(--color-primary)}
.cta-box .btn:hover{background:rgba(255,255,255,0.92);color:var(--color-primary-hover)}

/* --- Score bars --- */
.score-bars{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-5) 0}
.score-bar{display:grid;grid-template-columns:140px 1fr 48px;gap:var(--space-3);align-items:center;font-size:0.875rem}
@media (max-width:640px){.score-bar{grid-template-columns:100px 1fr 40px}}
.score-bar-label{color:var(--color-text-secondary);font-weight:500}
.score-bar-track{height:8px;background:var(--color-surface-2);border-radius:var(--radius-full);overflow:hidden;position:relative}
.score-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-secondary),var(--color-primary));border-radius:var(--radius-full);transition:width 0.5s}
.score-bar-value{font-weight:700;color:var(--color-primary);font-family:var(--font-mono);text-align:right}

/* --- Promo code box --- */
.promo-box{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  background:var(--color-primary-light);
  border:2px dashed var(--color-primary);
  border-radius:var(--radius-md);
  margin:var(--space-4) 0;
  flex-wrap:wrap;
}
.promo-box-info{flex:1;min-width:200px}
.promo-box .label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);margin-bottom:2px;font-weight:600}
.promo-box .code{font-family:var(--font-mono);font-weight:700;font-size:1.25rem;color:var(--color-primary)}

/* --- Footer --- */
.site-footer{
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  padding:var(--space-7) 0 var(--space-5);
  margin-top:var(--space-8);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-6);
  margin-bottom:var(--space-6);
}
.footer-col h5{
  font-size:0.8125rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--color-text);
  margin-bottom:var(--space-3);
  font-weight:700;
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-2)}
.footer-col a{
  color:var(--color-text-secondary);
  font-size:0.875rem;
  font-weight:500;
}
.footer-col a:hover{color:var(--color-primary)}
.footer-brand{margin-bottom:var(--space-4)}
.footer-brand .site-logo{margin-bottom:var(--space-3)}
.footer-brand p{color:var(--color-text-secondary);font-size:0.875rem;max-width:400px;line-height:1.6}
.footer-rg{
  padding:var(--space-4);
  background:var(--color-surface-2);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-4);
  font-size:0.8125rem;
  color:var(--color-text-secondary);
  line-height:1.6;
}
.footer-rg strong{color:var(--color-text)}
.footer-bottom{
  padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-3);
  font-size:0.8125rem;
  color:var(--color-text-muted);
}

/* --- Tier badge --- */
.tier-badge{
  display:inline-block;
  padding:2px 8px;
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  border-radius:var(--radius-full);
}
.tier-badge.tier-1{background:var(--color-primary);color:#fff}
.tier-badge.tier-2{background:var(--color-surface-3);color:var(--color-text-secondary)}

/* --- Feature grid (homepage categories) --- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--space-4);
}
.feature-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-5);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  text-decoration:none;
  color:inherit;
  transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;
}
.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-primary);color:inherit}
.feature-card-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary-light);
  color:var(--color-primary);
  border-radius:var(--radius-md);
  font-size:1.25rem;
}
.feature-card h3{font-size:1rem;margin-bottom:0}
.feature-card p{font-size:0.875rem;color:var(--color-text-secondary);margin-bottom:0}

/* --- News card --- */
.news-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-5);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  text-decoration:none;
  color:inherit;
  transition:transform 0.15s,box-shadow 0.15s;
}
.news-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);color:inherit}
.news-card-meta{font-size:0.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:600}
.news-card h3{font-size:1.125rem;line-height:1.35;margin-bottom:0}
.news-card p{font-size:0.9375rem;color:var(--color-text-secondary);margin:0}

/* --- Form --- */
.form-group{margin-bottom:var(--space-4)}
.form-label{display:block;font-size:0.875rem;font-weight:500;color:var(--color-text);margin-bottom:var(--space-2)}
.form-input,.form-select,.form-textarea{
  width:100%;
  padding:var(--space-3);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:0.9375rem;
  color:var(--color-text);
  transition:border-color 0.15s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}

/* --- Author byline --- */
.author-byline{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface-2);
  border-radius:var(--radius-md);
  margin:var(--space-4) 0;
  font-size:0.875rem;
  flex-wrap:wrap;
}
.author-avatar{
  width:40px;
  height:40px;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.875rem;
  flex-shrink:0;
}
.author-name{font-weight:600;color:var(--color-text)}
.author-meta{color:var(--color-text-muted);font-size:0.8125rem}

/* --- Calc / tool widget --- */
.calc-widget{
  padding:var(--space-6);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  margin:var(--space-5) 0;
}
.calc-widget h3{margin-bottom:var(--space-4)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:640px){.calc-grid{grid-template-columns:1fr}}
.calc-result{
  padding:var(--space-5);
  background:var(--color-primary-light);
  border:1px solid var(--color-primary);
  border-radius:var(--radius-md);
  margin-top:var(--space-4);
}
.calc-result .label{font-size:0.8125rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-2);font-weight:600}
.calc-result .value{font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:var(--color-primary)}

/* --- Utility --- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.flex{display:flex}
.items-center{align-items:center}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.wrap{flex-wrap:wrap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Print --- */
@media print{
  .site-header,.site-footer,.mobile-nav,.disclosure-bar,.geo-warning,.cta-box,.btn{display:none}
  body{background:#fff;color:#000}
}

/* ========================================================================
   v2 additions: logos, ratings scale, sticky CTA, Mongolian pattern,
   compare tables, author pages, search, corrections, diaspora hero
   ======================================================================== */

/* Real operator logos (replaces text monograms) */
.brand-logo{
  width:96px;height:48px;border-radius:8px;padding:6px;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-surface-2);overflow:hidden;flex-shrink:0;
}
.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand-logo[data-id="stake"]{background:#1A73E8}
.brand-logo[data-id="1xbet"]{background:#1A74D4}
.brand-logo[data-id="melbet"]{background:#FFCE00}
.brand-logo[data-id="bet365"]{background:#007B5B}
.brand-logo[data-id="linebet"]{background:#F5A623}
.brand-logo[data-id="betwinner"]{background:#0A1E5C}
.brand-logo[data-id="1win"]{background:#1E3A8A}
.brand-logo[data-id="paripesa"]{background:#D32027}
.brand-logo[data-id="rainbet"]{background:#6D28D9}

/* Rating colour scale */
.rating-badge{color:#065F46;background:#D1FAE5}
.rating-badge.rating-excellent{color:#065F46;background:#D1FAE5}
.rating-badge.rating-good{color:#92400E;background:#FEF3C7}
.rating-badge.rating-average{color:#991B1B;background:#FEE2E2}
[data-theme="dark"] .rating-badge{color:#86efac;background:rgba(16,185,129,.15)}
[data-theme="dark"] .rating-badge.rating-good{color:#fde68a;background:rgba(245,158,11,.15)}
[data-theme="dark"] .rating-badge.rating-average{color:#fca5a5;background:rgba(239,68,68,.15)}

/* Mongolian Soyombo-inspired watermark pattern in hero */
.hero{position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;top:0;right:-40px;bottom:0;width:420px;
  background:
    radial-gradient(circle at 60% 30%, rgba(255,206,0,.06) 0 2px, transparent 2px 100%),
    radial-gradient(circle at 80% 70%, rgba(255,206,0,.05) 0 2px, transparent 2px 100%);
  background-size:28px 28px,36px 36px;
  mask:linear-gradient(270deg,#000 0%, transparent 85%);
  -webkit-mask:linear-gradient(270deg,#000 0%, transparent 85%);
  pointer-events:none;opacity:.9;
}
.hero::before{
  content:"";position:absolute;right:40px;top:50%;transform:translateY(-50%);
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,206,0,.10), transparent 70%);
  pointer-events:none;
}

/* MNT conversion chip */
.mnt-chip{
  display:inline-block;font-size:.78rem;color:var(--color-text-muted);
  margin-left:.4rem;padding:.1rem .45rem;border-radius:4px;
  background:var(--color-surface-2);font-weight:500;letter-spacing:0;
}
[data-theme="dark"] .mnt-chip{background:rgba(255,255,255,.06)}

/* Sticky mobile CTA on review pages */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:none;padding:.6rem .9rem;
  background:var(--color-surface);border-top:1px solid var(--color-border);
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
}
.sticky-cta-row{display:flex;align-items:center;gap:.8rem;max-width:1200px;margin:0 auto}
.sticky-cta-info{flex:1;min-width:0}
.sticky-cta-info strong{display:block;font-size:.95rem;line-height:1.2}
.sticky-cta-info span{font-size:.8rem;color:var(--color-text-muted)}
.sticky-cta .btn{flex-shrink:0}
@media (max-width:720px){.sticky-cta{display:block} body.has-sticky-cta{padding-bottom:76px}}

/* Promo code copy button */
.promo-code-box{
  display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;
  border:2px dashed var(--color-primary);border-radius:var(--radius-md);
  background:var(--color-primary-light);margin:1rem 0;
}
[data-theme="dark"] .promo-code-box{background:rgba(200,16,46,.12)}
.promo-code-label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.promo-code-value{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.1rem;color:var(--color-primary);letter-spacing:.04em}
.promo-code-copy{margin-left:auto;background:var(--color-primary);color:#fff;border:none;padding:.5rem .9rem;border-radius:999px;font-weight:600;cursor:pointer;font-size:.85rem;transition:background .2s}
.promo-code-copy:hover{background:var(--color-primary-hover)}
.promo-code-copy.copied{background:#16a34a}

/* Compare table (operator vs operator) */
.compare-table{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin:1.5rem 0;background:var(--color-surface)}
.compare-cell{padding:.9rem 1rem;border-bottom:1px solid var(--color-border);font-size:.92rem}
.compare-cell.compare-label{font-weight:600;background:var(--color-surface-2);color:var(--color-text)}
.compare-cell.compare-winner{background:rgba(16,163,74,.07);position:relative}
.compare-cell.compare-winner::after{content:"✓";position:absolute;top:.5rem;right:.6rem;color:#16a34a;font-weight:700}
[data-theme="dark"] .compare-cell.compare-winner{background:rgba(16,163,74,.14)}
.compare-header{background:var(--color-primary) !important;color:#fff !important;text-align:center;font-weight:700;padding:1rem .5rem !important;font-size:1rem}

/* Author byline v2 */
.byline{display:flex;align-items:center;gap:.8rem;padding:.8rem 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);margin:1.2rem 0;font-size:.88rem;flex-wrap:wrap}
.byline-avatar{width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0}
.byline-info{line-height:1.35}
.byline-info a{color:var(--color-text);font-weight:600;text-decoration:none}
.byline-info a:hover{color:var(--color-primary)}
.byline-meta{color:var(--color-text-muted);font-size:.82rem}
.byline-fc{margin-left:auto;color:var(--color-text-muted);font-size:.82rem}
.byline-fc a{color:var(--color-text-muted);text-decoration:none;border-bottom:1px dotted var(--color-border)}

/* Test log block */
.test-log{background:var(--color-surface-2);border-left:4px solid var(--color-primary);padding:1.2rem 1.4rem;border-radius:var(--radius-sm);margin:1.5rem 0}
.test-log h3{margin-top:0;font-size:1.1rem}
.test-log dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem;margin:0;font-size:.92rem}
.test-log dt{font-weight:600;color:var(--color-text-muted)}
.test-log dd{margin:0;color:var(--color-text)}

/* Author page */
.author-card{display:flex;align-items:flex-start;gap:1.4rem;padding:1.4rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin-bottom:1rem}
.author-card-photo{width:96px;height:96px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:2rem;flex-shrink:0}
.author-card-info h3{margin:0 0 .2rem}
.author-card-info .role{color:var(--color-text-muted);font-size:.9rem;margin-bottom:.6rem}
.author-card-info p{margin:.4rem 0 0;color:var(--color-text-muted);line-height:1.65}

/* Corrections log */
.correction-entry{padding:1rem 1.2rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:.7rem;background:var(--color-surface)}
.correction-entry time{font-weight:600;color:var(--color-primary);font-size:.85rem}
.correction-entry .page{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--color-text-muted);display:block;margin:.2rem 0 .5rem}

/* Search overlay */
.search-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.search-overlay.open{display:flex}
.search-panel{width:min(600px,92vw);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.search-input{width:100%;border:none;padding:1rem 1.2rem;font-size:1.05rem;background:transparent;color:var(--color-text);outline:none;border-bottom:1px solid var(--color-border)}
.search-results{max-height:60vh;overflow-y:auto}
.search-result{display:block;padding:.7rem 1.2rem;border-bottom:1px solid var(--color-border);color:var(--color-text);text-decoration:none}
.search-result:hover{background:var(--color-surface-2);color:var(--color-primary)}
.search-result strong{display:block;font-size:.95rem}
.search-result span{font-size:.8rem;color:var(--color-text-muted)}
.search-trigger{background:transparent;border:1px solid var(--color-border);padding:.4rem .9rem .4rem .7rem;border-radius:999px;font-size:.82rem;color:var(--color-text-muted);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;margin-right:.6rem}
.search-trigger:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* BonusBrowser */
.bb-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.5rem;padding:1rem;background:var(--color-surface-2);border-radius:var(--radius-md)}
.bb-filter-group{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem}
.bb-filter-group label{font-weight:600;color:var(--color-text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.bb-filter-group select,.bb-filter-group input{padding:.45rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:.9rem;min-width:140px}
.bb-results{display:grid;gap:1rem}
.bb-count{font-size:.9rem;color:var(--color-text-muted);margin-bottom:.6rem}
.bb-empty{padding:2rem;text-align:center;color:var(--color-text-muted);border:2px dashed var(--color-border);border-radius:var(--radius-md)}

/* Diaspora hero variant */
.hero--diaspora{background:linear-gradient(135deg,#0A1440 0%,#6B0F1D 100%)}

/* Number differentiator for top-3 cards */
.brand-rank{position:absolute;top:12px;right:12px;left:auto;width:auto;height:auto;min-width:32px;padding:3px 9px;border-radius:12px;background:var(--color-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;letter-spacing:.02em;box-shadow:0 2px 6px rgba(200,16,46,.28);font-family:inherit;line-height:1.2}
.brand-rank::before{content:"#"}
.brand-card{position:relative;transition:transform .18s,box-shadow .18s}
.brand-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.brand-card--rank-1{border-color:var(--color-primary);border-width:2px}
.brand-card--rank-1::before{content:"Top pick";position:absolute;top:-10px;left:14px;background:var(--color-primary);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;z-index:3}


/* ============================================================
   V3 — Mongolian cultural identity + mobile polish
   ============================================================ */

/* ---------- Mongolian watermarks & accents ---------- */

/* Hero gets a soft steppe silhouette along the bottom */
.page-hero{position:relative;overflow:hidden}
.page-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:200px;
  background:url('/assets/mongol/steppe.svg') center bottom/cover no-repeat;
  color:#fff;
  opacity:.09;
  pointer-events:none;
  mask-image:linear-gradient(to top,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 55%,transparent 100%);
}

/* Hero watermark icon (floats top-right behind content) */
.page-hero[data-mongol]::before{
  content:"";
  position:absolute;
  top:-20px;right:-30px;
  width:320px;height:320px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.07;
  color:#fff;
  pointer-events:none;
  transform:rotate(-8deg);
}
.page-hero[data-mongol="soyombo"]::before{background-image:url('/assets/mongol/soyombo.svg')}
.page-hero[data-mongol="horse"]::before{background-image:url('/assets/mongol/horse.svg');width:420px;height:320px;top:30px;right:-40px}
.page-hero[data-mongol="eagle"]::before{background-image:url('/assets/mongol/eagle.svg');width:480px;height:360px;top:20px;right:-60px}
.page-hero[data-mongol="wrestler"]::before{background-image:url('/assets/mongol/wrestler.svg')}
.page-hero[data-mongol="archer"]::before{background-image:url('/assets/mongol/archer.svg');width:460px;height:340px}
.page-hero[data-mongol="ger"]::before{background-image:url('/assets/mongol/ger.svg')}

/* Endless-knot divider between sections */
.ulzii-divider{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:3rem 0;
  color:var(--color-primary);
  opacity:.55;
}
.ulzii-divider::before,.ulzii-divider::after{
  content:"";flex:1;max-width:160px;height:1px;
  background:linear-gradient(to right,transparent,currentColor,transparent);
}
.ulzii-divider svg{width:32px;height:32px}

/* Soyombo badge beside the wordmark in header */
.site-header .brand-mark{display:flex;align-items:center;gap:.6rem}
.soyombo-mini{width:14px;height:24px;color:var(--color-primary);flex-shrink:0;display:inline-block}
.soyombo-mini svg{width:100%;height:100%}

/* Hammer-pattern stripe that sits above the footer */
.ornament-band{
  height:32px;
  background:url('/assets/mongol/pattern.svg') repeat-x center/32px 32px;
  color:var(--color-primary);
  opacity:.25;
  margin-top:3rem;
}
[data-theme="dark"] .ornament-band{opacity:.35}

/* Small inline cultural badges for specific categories */
.culture-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:999px;
  background:var(--color-primary-light);
  color:var(--color-primary);
  font-size:.8rem;font-weight:600;
}
.culture-badge svg{width:14px;height:14px}

/* Hero title gets a subtle left-accent stripe in Mongolia red */
.page-hero h1{position:relative;z-index:1}
.page-hero--with-accent h1{padding-left:1.2rem;border-left:4px solid var(--color-primary)}

/* ============================================================
   Mobile polish
   ============================================================ */

/* Touch target minimum 44px on tappable elements */
@media (max-width:900px){
  .site-header a,
  .site-header button,
  .btn,
  .brand-card .btn,
  .mobile-nav a,
  .search-trigger{
    min-height:44px;
  }
  .btn--sm{min-height:38px}
}

/* Mobile header: hamburger + compact layout */
.mobile-menu-toggle{
  display:none;
  background:none;border:1px solid var(--color-border);
  width:40px;height:40px;
  border-radius:10px;
  align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--color-text);
}
.mobile-menu-toggle svg{width:22px;height:22px}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon{display:none}
.mobile-menu-toggle[aria-expanded="true"] .close-icon{display:block}
.mobile-menu-toggle .close-icon{display:none}

/* Mobile drawer */
.mobile-drawer{
  position:fixed;inset:0;z-index:200;
  background:var(--color-surface);
  transform:translateX(100%);
  transition:transform .22s ease;
  display:flex;flex-direction:column;
  padding:1rem 1.25rem 2rem;
  padding-top:calc(env(safe-area-inset-top,0) + 1rem);
  overflow-y:auto;
}
.mobile-drawer.is-open{transform:translateX(0)}
.mobile-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1rem;border-bottom:1px solid var(--color-border);
}
.mobile-drawer nav{margin-top:1rem}
.mobile-drawer nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem .5rem;
  font-size:1.05rem;font-weight:600;
  color:var(--color-text);
  border-bottom:1px solid var(--color-border);
  text-decoration:none;
}
.mobile-drawer nav a:hover,
.mobile-drawer nav a:focus{color:var(--color-primary)}
.mobile-drawer nav a::after{
  content:"›";color:var(--color-text-muted);font-size:1.3rem;
}
.mobile-drawer-foot{
  margin-top:auto;padding-top:1.5rem;
  display:flex;gap:.75rem;
}
.mobile-drawer-foot .btn{flex:1}

/* Disable body scroll when drawer is open */
body.drawer-open{overflow:hidden}
.drawer-backdrop{
  position:fixed;inset:0;z-index:199;
  background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity .22s;
}
.drawer-backdrop.is-visible{opacity:1;pointer-events:auto}

@media (max-width:900px){
  .mobile-menu-toggle{display:inline-flex}
  .site-header nav.desktop-nav{display:none}
  .site-header .search-trigger span{display:none}
  .site-header .search-trigger{padding:0;width:44px;justify-content:center}
}

/* Mobile typography */
@media (max-width:640px){
  html{font-size:15px}
  .page-hero h1,
  h1{font-size:1.75rem;line-height:1.25}
  h2{font-size:1.4rem;line-height:1.3}
  h3{font-size:1.15rem}
  .page-hero{padding:1.5rem 0 2rem}
  .page-hero-subtitle{font-size:1rem}
  .section{padding:2rem 0}
  .container{padding-left:1rem;padding-right:1rem}
  .prose{font-size:1rem;line-height:1.65}
  .hero-stats{flex-wrap:wrap;gap:1rem}
}

/* Mobile brand cards: tighter, full-width feel */
@media (max-width:640px){
  .brand-card{padding:1rem}
  .brand-header{gap:.75rem;padding-right:44px}
  .brand-logo{width:72px;height:44px}
  .brand-logo img{max-width:56px;max-height:28px}
  .brand-rank{top:10px;right:10px;font-size:.7rem;padding:2px 7px}
  .brand-card--rank-1::before{font-size:.65rem;padding:.15rem .45rem;top:-9px}
  .brand-bonus{padding:.75rem .9rem;margin-top:.9rem}
  .brand-bonus .amount{font-size:1.1rem}
  .brand-tags{gap:.3rem;margin-top:.75rem}
  .brand-tags .tag{font-size:.72rem;padding:.25rem .55rem}
  .brand-card-footer{flex-direction:column;gap:.5rem;margin-top:1rem}
  .brand-card-footer .btn{width:100%}
}

/* Comparison tables stack below 640px */
@media (max-width:640px){
  .compare-table{display:block}
  .compare-table thead{display:none}
  .compare-table tbody,.compare-table tr,.compare-table td{display:block;width:100%}
  .compare-table tr{
    border:1px solid var(--color-border);
    border-radius:10px;
    margin-bottom:.75rem;
    overflow:hidden;
  }
  .compare-table td{
    padding:.7rem 1rem;
    border:none;border-bottom:1px solid var(--color-border);
    display:flex;justify-content:space-between;gap:1rem;
  }
  .compare-table td:last-child{border-bottom:none}
  .compare-table td::before{
    content:attr(data-label);
    font-weight:600;color:var(--color-text-muted);
    flex-shrink:0;
  }
  .compare-table td:first-child{
    background:var(--color-surface-2);font-weight:700;
    justify-content:flex-start;
  }
  .compare-table td:first-child::before{display:none}
}

/* Wide data tables scroll horizontally on mobile */
@media (max-width:640px){
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -1rem;
    padding:0 1rem;
  }
  .table-wrap table{min-width:560px}
}

/* BonusBrowser mobile: stack filters */
@media (max-width:640px){
  .bb-filters{grid-template-columns:1fr 1fr;gap:.75rem}
  .bb-filter-group select{width:100%;min-height:44px;font-size:16px}
  .bb-count{font-size:.9rem;margin:1rem 0 .5rem}
}
@media (max-width:420px){
  .bb-filters{grid-template-columns:1fr}
}

/* Sticky CTA improvements — iOS safe area + notch */
.sticky-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  padding:.75rem 1rem;
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0));
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  box-shadow:0 -4px 16px rgba(0,0,0,.08);
  z-index:100;
  display:none;
}
.sticky-cta .btn{width:100%;font-size:1rem;min-height:48px;font-weight:700}
.sticky-cta-label{
  font-size:.8rem;color:var(--color-text-muted);
  margin-bottom:.35rem;text-align:center;
}
body.has-sticky-cta{padding-bottom:96px}
@media (max-width:900px){
  .sticky-cta{display:block}
}

/* Content sidebar collapses below main on tablet/mobile */
@media (max-width:900px){
  .content-layout--sidebar{grid-template-columns:1fr !important;gap:2rem}
  .content-sidebar{position:static !important}
}

/* Mobile disclosure bars: allow wrap, smaller text */
@media (max-width:640px){
  .disclosure-bar,.affiliate-bar{
    font-size:.78rem;line-height:1.45;padding:.6rem 1rem;
  }
}

/* Mobile footer */
@media (max-width:640px){
  .site-footer{padding:2rem 0 1.5rem}
  .site-footer .footer-cols{grid-template-columns:1fr 1fr;gap:1.5rem}
  .site-footer .footer-brand{grid-column:1 / -1}
}

/* Prevent iOS form zoom by guaranteeing 16px form inputs */
@media (max-width:640px){
  select,input,textarea{font-size:16px !important}
}

/* Search overlay mobile fix */
@media (max-width:640px){
  .search-overlay{padding:0}
  .search-overlay-inner{
    width:100%;max-width:100%;height:100%;
    border-radius:0;max-height:100vh;
  }
  .search-input{font-size:16px}
}

/* Quick Facts on review pages: stack */
@media (max-width:640px){
  .quick-facts{flex-direction:column;gap:1rem}
  .quick-facts .rating{font-size:2.2rem}
}

/* Author byline: wrap gracefully */
@media (max-width:640px){
  .byline-row{flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem}
  .byline-fact-check{width:100%;border-top:1px solid var(--color-border);padding-top:.6rem;margin-top:.3rem}
}

/* Compare narrative: better mobile rhythm */
@media (max-width:640px){
  .compare-narrative p{font-size:1rem}
}

/* Dark-mode tuning for cultural elements */
[data-theme="dark"] .page-hero::after{opacity:.14}
[data-theme="dark"] .page-hero[data-mongol]::before{opacity:.09}

/* ==========================================================================
   V4 — Premium polish, subtle Mongolian themes throughout
   ========================================================================== */

/* --- Refined tokens --- */
:root{
  --color-ink:#0E1116;
  --color-ink-soft:#2A2F38;
  --color-paper:#FBFAF7;          /* warm parchment */
  --color-paper-2:#F4F1EA;        /* steppe sand */
  --color-edge:#E7E2D7;           /* warm border */
  --color-gold:#C9A24B;            /* Mongol gold accent */
  --color-gold-soft:#E8D9B0;
  --color-sky:#5B89C7;
  --shadow-soft:0 1px 2px rgba(15,17,22,.04),0 8px 24px -8px rgba(15,17,22,.10);
  --shadow-lift:0 2px 6px rgba(15,17,22,.06),0 18px 40px -16px rgba(15,17,22,.18);
  --shadow-ring:0 0 0 1px rgba(200,16,46,.12),0 8px 24px -8px rgba(200,16,46,.18);
  --gradient-steppe:linear-gradient(180deg,#FBFAF7 0%,#F4F1EA 100%);
  --gradient-flag:linear-gradient(135deg,#C8102E 0%,#0066B3 100%);
  --gradient-dawn:linear-gradient(180deg,#FFF6EC 0%,#FBE8DC 60%,#F0DCC9 100%);
}
[data-theme="dark"]:root{
  --color-paper:#0E1116;
  --color-paper-2:#161A22;
  --color-edge:#252B36;
  --color-gold:#D4B871;
  --color-gold-soft:#3A3424;
  --gradient-steppe:linear-gradient(180deg,#0E1116 0%,#161A22 100%);
  --gradient-dawn:linear-gradient(180deg,#1A140E 0%,#231811 60%,#2A1B12 100%);
}

body{background:var(--color-paper);color:var(--color-text)}
.section{background:transparent}
.section--alt{background:var(--color-paper-2)}

/* --- Type rhythm --- */
h1,h2,h3,h4{letter-spacing:-.02em;font-feature-settings:"ss01","cv11"}
h1{font-weight:800;line-height:1.05}
h2{font-weight:700;line-height:1.15}
.section-header{text-align:center;max-width:760px;margin:0 auto var(--space-6);position:relative}
.section-header h2{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:.6rem}
.section-header p{color:var(--color-text-secondary);font-size:1rem;line-height:1.7}
.section-header::after{
  content:"";display:block;width:64px;height:10px;margin:1rem auto 0;
  background:url("mongol/knot.svg") center/contain no-repeat;
  color:var(--color-gold);opacity:.55;
}

/* --- Eyebrow chip --- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .7rem;border-radius:999px;
  background:rgba(201,162,75,.12);color:var(--color-gold);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(201,162,75,.25);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--color-gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.18);
}

/* --- Hero polish --- */
.hero{
  background:linear-gradient(135deg,#08183C 0%,#1A2956 45%,#5C0E1F 100%);
  padding:5rem 0 6.5rem;position:relative;overflow:hidden;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 300px at 92% 110%, rgba(200,16,46,.30), transparent 60%),
    url("mongol/pattern.svg");
  background-size:auto,auto,140px 140px;
  background-blend-mode:screen,normal,overlay;
  opacity:.85;mix-blend-mode:normal;
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:120px;pointer-events:none;
  background:url("mongol/steppe.svg") bottom center/cover no-repeat;
  color:var(--color-paper);
  filter:drop-shadow(0 -8px 14px rgba(0,0,0,.15));
}
.hero .container{position:relative;z-index:2}
.hero h1{
  font-size:clamp(2rem,4vw,3.2rem);max-width:880px;margin-bottom:1rem;
  text-wrap:balance;color:#fff;
}
.hero h1 .accent{
  background:linear-gradient(90deg,#FFD37A,#FF7A8A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-subtitle{font-size:clamp(1rem,1.4vw,1.15rem);max-width:680px;color:rgba(255,255,255,.85);line-height:1.65}
.hero-meta{margin-top:1.6rem;gap:1rem 1.4rem;flex-wrap:wrap}
.hero-meta span{
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);
  padding:.5rem .85rem;border-radius:999px;font-size:.85rem;color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);
}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.hero-cta-row .btn--primary{background:#fff;color:var(--color-ink);border-color:#fff}
.hero-cta-row .btn--primary:hover{background:#FFD37A;color:var(--color-ink)}
.hero-cta-row .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero-cta-row .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero-soyombo{
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:160px;height:auto;color:rgba(255,211,122,.18);pointer-events:none;
  filter:drop-shadow(0 0 30px rgba(255,211,122,.18));
  animation:float 12s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-52%)}50%{transform:translateY(-48%)}}
@media (max-width:900px){.hero-soyombo{display:none}}

/* --- Page hero (interior) polish --- */
.page-hero{
  background:var(--gradient-dawn);
  padding:3rem 0 3.5rem;position:relative;overflow:hidden;border-bottom:1px solid var(--color-edge);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;
  background:url("mongol/steppe.svg") bottom/cover no-repeat;color:var(--color-paper);
}
.page-hero h1{font-size:clamp(1.7rem,2.8vw,2.4rem);color:var(--color-ink);text-wrap:balance}
.page-hero-subtitle{color:var(--color-ink-soft);font-size:1.05rem;max-width:720px;line-height:1.7}
.page-hero[data-mongol]::before{
  content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:260px;height:260px;background-position:center;background-repeat:no-repeat;background-size:contain;
  opacity:.10;color:var(--color-primary);pointer-events:none;
}
.page-hero[data-mongol="soyombo"]::before{background-image:url("mongol/soyombo.svg")}
.page-hero[data-mongol="wrestler"]::before{background-image:url("mongol/wrestler.svg")}
.page-hero[data-mongol="horse"]::before{background-image:url("mongol/horse.svg")}
.page-hero[data-mongol="eagle"]::before{background-image:url("mongol/eagle.svg")}
.page-hero[data-mongol="ger"]::before{background-image:url("mongol/ger.svg")}
.page-hero[data-mongol="knot"]::before{background-image:url("mongol/knot.svg");width:200px;height:200px;opacity:.08}
.page-hero[data-mongol="archer"]::before{background-image:url("mongol/archer.svg")}
@media (max-width:900px){.page-hero[data-mongol]::before{width:160px;height:160px;opacity:.07;right:-30px}}

/* --- Cards: brand --- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem}
.brand-card{
  background:var(--color-surface);border:1px solid var(--color-edge);border-radius:18px;
  padding:1.4rem;display:flex;flex-direction:column;gap:1rem;
  position:relative;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s;
  box-shadow:var(--shadow-soft);overflow:hidden;
}
.brand-card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--gradient-flag);opacity:0;transition:opacity .25s;
}
.brand-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--color-border-strong)}
.brand-card:hover::before{opacity:1}
.brand-card--featured{border-color:rgba(200,16,46,.35);box-shadow:var(--shadow-ring)}
.brand-card--featured::before{opacity:1}
.brand-card--rank-1{background:linear-gradient(180deg,rgba(255,246,236,.6),var(--color-surface) 60%)}
[data-theme="dark"] .brand-card--rank-1{background:linear-gradient(180deg,rgba(58,52,36,.4),var(--color-surface) 60%)}

.brand-rank{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--color-paper-2);color:var(--color-text-secondary);
  font-weight:800;font-size:.95rem;letter-spacing:-.02em;
  border:1px solid var(--color-edge);
}
.brand-card--rank-1 .brand-rank{background:var(--color-gold);color:#1A1206;border-color:var(--color-gold)}
.brand-card--rank-2 .brand-rank{background:#C0C5CC;color:#1A1206;border-color:#C0C5CC}
.brand-card--rank-3 .brand-rank{background:#D9A87A;color:#1A1206;border-color:#D9A87A}

.brand-header{display:flex;align-items:center;gap:.85rem;padding-right:46px}
.brand-logo{
  width:64px;height:64px;border-radius:14px;background:var(--color-paper-2);
  display:grid;place-items:center;flex-shrink:0;border:1px solid var(--color-edge);overflow:hidden;
}
.brand-logo img{max-width:80%;max-height:60%;object-fit:contain}
.brand-info h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.brand-rating-row{display:flex;align-items:center;gap:.5rem;margin-top:.25rem;flex-wrap:wrap;font-size:.82rem;color:var(--color-text-muted)}

.rating-badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .5rem;border-radius:6px;font-size:.8rem;font-weight:700;
  font-feature-settings:"tnum";
}
.rating-excellent{background:rgba(22,163,74,.12);color:#15803D}
.rating-good{background:rgba(217,119,6,.12);color:#B45309}
.rating-poor{background:rgba(220,38,38,.12);color:#B91C1C}
[data-theme="dark"] .rating-excellent{background:rgba(34,197,94,.18);color:#86EFAC}
[data-theme="dark"] .rating-good{background:rgba(251,191,36,.18);color:#FCD34D}

.brand-bonus{
  background:linear-gradient(180deg,var(--color-paper-2),transparent);
  border:1px dashed var(--color-edge);border-radius:12px;padding:.75rem .9rem;
}
.brand-bonus .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);font-weight:600}
.brand-bonus .amount{font-size:1.05rem;font-weight:700;color:var(--color-ink);margin-top:.15rem;line-height:1.3}
.mnt-chip{
  font-size:.7rem;color:var(--color-text-secondary);font-weight:500;
  background:var(--color-surface);padding:.1rem .4rem;border-radius:6px;
  border:1px solid var(--color-edge);margin-left:.35rem;
}

.brand-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.brand-tags .tag{
  font-size:.72rem;color:var(--color-text-secondary);
  background:var(--color-paper-2);border:1px solid var(--color-edge);
  padding:.2rem .55rem;border-radius:999px;font-weight:500;
}

.brand-card-footer{display:flex;gap:.5rem;margin-top:auto}
.brand-card-footer .btn{flex:1;justify-content:center}

/* --- Buttons polish --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-weight:600;font-size:.95rem;
  padding:.7rem 1.1rem;border-radius:10px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s,background .15s,box-shadow .15s,border-color .15s;
  text-align:center;line-height:1.2;
}
.btn--sm{padding:.5rem .85rem;font-size:.85rem;border-radius:8px}
.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(200,16,46,.55)}
.btn--ghost{background:transparent;color:var(--color-text);border-color:var(--color-edge)}
.btn--ghost:hover{background:var(--color-paper-2);border-color:var(--color-border-strong)}

/* --- Tables polish --- */
.compare-table,.data-table,table.ranking-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--color-surface);border:1px solid var(--color-edge);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft);
}
.data-table th,table.ranking-table th{
  background:var(--color-paper-2);text-transform:uppercase;letter-spacing:.06em;
  font-size:.72rem;color:var(--color-text-muted);font-weight:700;
  padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--color-edge);
}
.data-table td,table.ranking-table td{
  padding:.95rem 1rem;border-bottom:1px solid var(--color-edge);
  font-size:.92rem;color:var(--color-text);
}
.data-table tr:last-child td,table.ranking-table tr:last-child td{border-bottom:none}
.data-table tbody tr,table.ranking-table tbody tr{transition:background .15s}
.data-table tbody tr:hover,table.ranking-table tbody tr:hover{background:var(--color-paper-2)}

/* --- Quick facts polish --- */
.quick-facts{
  background:linear-gradient(180deg,var(--color-paper-2),var(--color-surface));
  border:1px solid var(--color-edge);border-radius:16px;padding:1.5rem;
  box-shadow:var(--shadow-soft);
}
.quick-facts-score .score{
  font-size:3rem;font-weight:800;color:var(--color-primary);
  font-feature-settings:"tnum";letter-spacing:-.04em;
}
.quick-facts-score .score::after{
  content:"";display:block;width:36px;height:8px;margin:.4rem auto 0;
  background:url("mongol/knot.svg") center/contain no-repeat;color:var(--color-gold);opacity:.6;
}

/* --- Score bar polish --- */
.score-bar-fill{
  background:linear-gradient(90deg,var(--color-secondary),var(--color-primary));
  position:relative;
}
.score-bar-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(255,255,255,.3) 70%,transparent 80%);
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* --- Pros & Cons --- */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
@media (max-width:640px){.pros-cons{grid-template-columns:1fr}}
.pros-cons > div{
  border-radius:14px;padding:1.1rem 1.2rem;border:1px solid var(--color-edge);
  background:var(--color-surface);
}
.pros-cons .pros{border-left:3px solid #16a34a;background:linear-gradient(180deg,rgba(22,163,74,.05),transparent)}
.pros-cons .cons{border-left:3px solid #DC2626;background:linear-gradient(180deg,rgba(220,38,38,.05),transparent)}
.pros-cons h4{font-size:.95rem;font-weight:700;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.pros-cons ul li{padding:.3rem 0;padding-left:1.4rem;position:relative;font-size:.92rem;line-height:1.5}
.pros-cons .pros li::before{content:"";position:absolute;left:0;top:.55rem;width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round'><path d='M2 7l3 3 7-7'/></svg>") center/contain no-repeat}
.pros-cons .cons li::before{content:"";position:absolute;left:0;top:.55rem;width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23DC2626' stroke-width='2.5' stroke-linecap='round'><path d='M2 2l10 10M12 2L2 12'/></svg>") center/contain no-repeat}

/* --- Mongol micro accents --- */
.knot-bullets li{position:relative;padding-left:1.7rem;margin:.5rem 0}
.knot-bullets li::before{
  content:"";position:absolute;left:0;top:.35rem;width:14px;height:14px;
  background:url("mongol/knot.svg") center/contain no-repeat;
  color:var(--color-gold);opacity:.75;
}

.ulzii-divider{display:flex;justify-content:center;margin:3rem 0;color:var(--color-gold);opacity:.55}
.ulzii-divider svg{width:60px;height:60px}
.ulzii-divider::before,.ulzii-divider::after{
  content:"";flex:1;align-self:center;height:1px;
  background:linear-gradient(90deg,transparent,var(--color-edge) 50%,transparent);
}
.ulzii-divider::before{margin-right:1rem}
.ulzii-divider::after{margin-left:1rem}

.ornament-band{
  height:6px;background-image:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary) 33%,var(--color-gold) 33%,var(--color-gold) 66%,var(--color-secondary) 66%,var(--color-secondary) 100%);
  position:relative;
}
.ornament-band::after{
  content:"";display:block;height:6px;background:url("mongol/pattern.svg") center/40px 40px repeat-x;
  color:var(--color-text);opacity:.08;
}

/* Soyombo mini in header --- */
.brand-mark{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:-.02em}
.soyombo-mini{display:inline-flex;align-items:center;color:var(--color-primary);width:14px;height:24px}
.soyombo-mini svg{width:100%;height:100%}

/* --- Featured Yak game tile on homepage --- */
.yak-tile{
  position:relative;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:1.5rem;
  background:linear-gradient(135deg,#1A2956 0%,#5C0E1F 100%);color:#fff;
  border-radius:20px;padding:2rem;overflow:hidden;margin:2.5rem 0;
  box-shadow:var(--shadow-lift);
}
.yak-tile::before{
  content:"";position:absolute;inset:0;
  background:url("mongol/pattern.svg") center/120px 120px;opacity:.07;
}
.yak-tile h3{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:.5rem;color:#fff;text-wrap:balance}
.yak-tile p{color:rgba(255,255,255,.85);max-width:520px;font-size:1rem;line-height:1.6}
.yak-tile .btn{margin-top:1rem;background:#FFD37A;color:#1A1206;border-color:#FFD37A}
.yak-tile .btn:hover{background:#fff;color:#1A1206;border-color:#fff}
.yak-tile-art{
  position:relative;height:160px;display:grid;place-items:center;
}
.yak-tile-art svg{width:200px;height:auto;color:#FFD37A;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.yak-tile-art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30px;
  background:url("mongol/steppe.svg") bottom/cover no-repeat;color:rgba(0,0,0,.35);
}
@media (max-width:720px){
  .yak-tile{grid-template-columns:1fr;text-align:center;padding:1.6rem}
  .yak-tile-art{height:120px}
  .yak-tile-art svg{width:140px}
}

/* --- News and content cards --- */
.news-card,.content-card{
  background:var(--color-surface);border:1px solid var(--color-edge);border-radius:14px;
  overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-soft);
}
.news-card:hover,.content-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--color-border-strong)}

/* --- Footer polish --- */
.site-footer{background:var(--color-paper-2);border-top:1px solid var(--color-edge);padding-top:3rem}
.site-footer a:hover{color:var(--color-primary)}

/* --- Header polish --- */
.site-header{
  background:rgba(251,250,247,.85);backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--color-edge);
}
[data-theme="dark"] .site-header{background:rgba(14,17,22,.85)}

/* --- Compare table refinement --- */
.compare-table{display:grid;grid-template-columns:1.3fr 1fr 1fr;background:var(--color-surface)}
.compare-table > div{padding:1rem 1.1rem;border-bottom:1px solid var(--color-edge);font-size:.93rem}
.compare-table > div:nth-child(3n+1){background:var(--color-paper-2);font-weight:600;color:var(--color-text-secondary)}
.compare-table > div:nth-child(-n+3){background:var(--color-paper-2);font-weight:700;color:var(--color-ink);border-bottom:2px solid var(--color-edge)}

/* --- Reduce motion preference --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Footer Mongolia notice (replaces top geo-warning bar) */
.footer-notice{
  background:rgba(200,16,46,.06);
  border:1px solid rgba(200,16,46,.18);
  border-left:3px solid var(--color-primary);
  border-radius:10px;padding:.95rem 1.1rem;margin:1rem 0;
  font-size:.92rem;color:var(--color-text);line-height:1.55;
}
.footer-notice strong{color:var(--color-primary)}
.footer-notice a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
[data-theme="dark"] .footer-notice{background:rgba(200,16,46,.10);color:var(--color-text)}

/* ==========================================================================
   V5 — Dark mode contrast fixes
   ========================================================================== */

[data-theme="dark"]{
  --color-paper:#0E1116;
  --color-paper-2:#171B23;
  --color-surface:#1A1F2A;
  --color-surface-2:#222732;
  --color-edge:#2A3140;
  --color-border:#2A3140;
  --color-border-strong:#3A4252;
  --color-text:#E6E8EC;
  --color-text-secondary:#B6BCC7;
  --color-text-muted:#8C93A0;
  --color-ink:#E6E8EC;
  --color-ink-soft:#C8CCD4;
  --color-gold:#E6C77A;
  --color-gold-soft:#3A3424;
  --gradient-dawn:linear-gradient(180deg,#1A1410 0%,#241712 60%,#2C1B14 100%);
  --shadow-soft:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lift:0 2px 6px rgba(0,0,0,.3),0 18px 40px -16px rgba(0,0,0,.6);
}
[data-theme="dark"] body{background:var(--color-paper);color:var(--color-text)}

/* Page hero: dark dawn gradient and white-ish text */
[data-theme="dark"] .page-hero{
  background:linear-gradient(180deg,#1A1410 0%,#241712 60%,#2C1B14 100%);
  border-bottom-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .page-hero h1{color:#FFF6EC}
[data-theme="dark"] .page-hero .page-hero-subtitle,
[data-theme="dark"] .page-hero p{color:rgba(255,246,236,.78)}
[data-theme="dark"] .page-hero .breadcrumb,
[data-theme="dark"] .page-hero .breadcrumb a{color:rgba(255,246,236,.65)}
[data-theme="dark"] .page-hero .breadcrumb a:hover{color:#FFD37A}
[data-theme="dark"] .page-hero[data-mongol]::before{color:#FFD37A;opacity:.10}
[data-theme="dark"] .page-hero::after{color:var(--color-paper)}

/* Diaspora hero override — already on dark gradient */
[data-theme="dark"] .hero--diaspora h1,
[data-theme="dark"] .hero--diaspora .page-hero-subtitle{color:#fff !important}

/* Cards in dark */
[data-theme="dark"] .brand-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .content-card{background:var(--color-surface);border-color:var(--color-edge)}
[data-theme="dark"] .brand-card:hover,
[data-theme="dark"] .news-card:hover,
[data-theme="dark"] .content-card:hover{border-color:var(--color-border-strong)}
[data-theme="dark"] .brand-card h3,
[data-theme="dark"] .news-card h3,
[data-theme="dark"] .content-card h3,
[data-theme="dark"] .content-card h2{color:var(--color-text)}
[data-theme="dark"] .brand-bonus .amount{color:#FFE9C0}
[data-theme="dark"] .brand-rank{background:#222732;color:var(--color-text-secondary);border-color:var(--color-edge)}
[data-theme="dark"] .brand-card--rank-1 .brand-rank{background:#E6C77A;color:#1A1206;border-color:#E6C77A}
[data-theme="dark"] .brand-card--rank-2 .brand-rank{background:#CFD3DA;color:#1A1206;border-color:#CFD3DA}
[data-theme="dark"] .brand-card--rank-3 .brand-rank{background:#D9A87A;color:#1A1206;border-color:#D9A87A}
[data-theme="dark"] .brand-tags .tag{background:#222732;border-color:var(--color-edge);color:var(--color-text-secondary)}
[data-theme="dark"] .mnt-chip{background:#222732;border-color:var(--color-edge);color:var(--color-text-secondary)}

/* Tables in dark */
[data-theme="dark"] .compare-table,
[data-theme="dark"] .data-table,
[data-theme="dark"] table.ranking-table{background:var(--color-surface);border-color:var(--color-edge)}
[data-theme="dark"] .compare-table > div{border-bottom-color:var(--color-edge)}
[data-theme="dark"] .compare-table > div:nth-child(3n+1),
[data-theme="dark"] .compare-table > div:nth-child(-n+3){background:#222732;color:var(--color-text)}
[data-theme="dark"] .data-table th,
[data-theme="dark"] table.ranking-table th{background:#222732;color:var(--color-text-secondary);border-bottom-color:var(--color-edge)}
[data-theme="dark"] .data-table td,
[data-theme="dark"] table.ranking-table td{color:var(--color-text);border-bottom-color:var(--color-edge)}
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] table.ranking-table tbody tr:hover{background:#222732}

/* Quick facts, score bars, pros/cons in dark */
[data-theme="dark"] .quick-facts{background:linear-gradient(180deg,#222732,#1A1F2A);border-color:var(--color-edge)}
[data-theme="dark"] .quick-facts dt,
[data-theme="dark"] .quick-facts dd{color:var(--color-text)}
[data-theme="dark"] .quick-facts dt{color:var(--color-text-muted)}
[data-theme="dark"] .quick-facts-score .label{color:var(--color-text-muted)}
[data-theme="dark"] .score-bar-track{background:#222732}
[data-theme="dark"] .score-bar-label{color:var(--color-text-secondary)}
[data-theme="dark"] .score-bar-value{color:#FFB1B8}
[data-theme="dark"] .pros-cons > div{background:var(--color-surface);border-color:var(--color-edge)}
[data-theme="dark"] .pros-cons .pros{background:linear-gradient(180deg,rgba(34,197,94,.10),transparent)}
[data-theme="dark"] .pros-cons .cons{background:linear-gradient(180deg,rgba(248,113,113,.10),transparent)}

/* Brand bonus & dashed boxes */
[data-theme="dark"] .brand-bonus{background:linear-gradient(180deg,#222732,transparent);border-color:var(--color-edge)}

/* Section header rule */
[data-theme="dark"] .section-header p{color:var(--color-text-secondary)}

/* Disclosure bar + footer notice in dark */
[data-theme="dark"] .disclosure-bar{background:#1A1F2A;color:var(--color-text-secondary);border-color:var(--color-edge)}
[data-theme="dark"] .disclosure-bar a{color:#FFB1B8}
[data-theme="dark"] .footer-notice{background:rgba(220,80,100,.10);border-color:rgba(220,80,100,.30);color:var(--color-text)}
[data-theme="dark"] .footer-notice strong,
[data-theme="dark"] .footer-notice a{color:#FFB1B8}

/* Footer in dark */
[data-theme="dark"] .site-footer{background:#0B0E13;border-top-color:var(--color-edge);color:var(--color-text-secondary)}
[data-theme="dark"] .footer-col h5{color:var(--color-text)}
[data-theme="dark"] .footer-col a{color:var(--color-text-secondary)}
[data-theme="dark"] .footer-col a:hover{color:#FFB1B8}
[data-theme="dark"] .footer-rg,
[data-theme="dark"] .footer-brand p{color:var(--color-text-secondary)}
[data-theme="dark"] .footer-bottom{color:var(--color-text-muted);border-top-color:var(--color-edge)}
[data-theme="dark"] .footer-bottom a{color:var(--color-text-secondary)}

/* Header in dark */
[data-theme="dark"] .site-header{background:rgba(14,17,22,.85);border-bottom-color:var(--color-edge)}
[data-theme="dark"] .desktop-nav a,
[data-theme="dark"] .nav-desktop a{color:var(--color-text-secondary)}
[data-theme="dark"] .desktop-nav a:hover,
[data-theme="dark"] .nav-desktop a:hover,
[data-theme="dark"] .desktop-nav a.active,
[data-theme="dark"] .nav-desktop a.active{color:#FFB1B8}
[data-theme="dark"] .site-logo,
[data-theme="dark"] .brand-mark{color:var(--color-text)}
[data-theme="dark"] .logo-mark{background:#222732;color:#FFB1B8}
[data-theme="dark"] .search-trigger,
[data-theme="dark"] .theme-toggle{background:transparent;color:var(--color-text-secondary);border-color:var(--color-edge)}
[data-theme="dark"] .search-trigger:hover,
[data-theme="dark"] .theme-toggle:hover{background:#222732;color:var(--color-text)}

/* Mobile drawer in dark */
[data-theme="dark"] .mobile-drawer{background:var(--color-paper);border-color:var(--color-edge)}
[data-theme="dark"] .mobile-drawer a{color:var(--color-text);border-bottom-color:var(--color-edge)}

/* Buttons ghost in dark */
[data-theme="dark"] .btn--ghost{color:var(--color-text);border-color:var(--color-edge)}
[data-theme="dark"] .btn--ghost:hover{background:#222732;border-color:var(--color-border-strong)}

/* Section alt background */
[data-theme="dark"] .section--alt{background:#171B23}

/* Prose & content */
[data-theme="dark"] .prose,
[data-theme="dark"] .content-main{color:var(--color-text)}
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4,
[data-theme="dark"] .content-main h2,
[data-theme="dark"] .content-main h3{color:var(--color-text)}
[data-theme="dark"] .prose a,
[data-theme="dark"] .content-main a{color:#FFB1B8}
[data-theme="dark"] .prose a:hover,
[data-theme="dark"] .content-main a:hover{color:#FFD37A}
[data-theme="dark"] .prose strong,
[data-theme="dark"] .content-main strong{color:var(--color-text)}
[data-theme="dark"] .prose blockquote,
[data-theme="dark"] .content-main blockquote{color:var(--color-text-secondary);border-left-color:var(--color-edge)}
[data-theme="dark"] .prose code,
[data-theme="dark"] .content-main code{background:#222732;color:#FFD37A}

/* Sidebar widgets */
[data-theme="dark"] .sidebar-widget,
[data-theme="dark"] .author-byline{background:var(--color-surface);border-color:var(--color-edge);color:var(--color-text)}
[data-theme="dark"] .sidebar-widget h4{color:var(--color-text)}
[data-theme="dark"] .sidebar-widget a{color:var(--color-text)}
[data-theme="dark"] .sidebar-widget a:hover{color:#FFB1B8}

/* FAQ accordion */
[data-theme="dark"] .faq-item{border-color:var(--color-edge);background:var(--color-surface)}
[data-theme="dark"] .faq-question{color:var(--color-text)}
[data-theme="dark"] .faq-answer{color:var(--color-text-secondary)}

/* Eyebrow chip in dark */
[data-theme="dark"] .eyebrow{background:rgba(230,199,122,.12);border-color:rgba(230,199,122,.30);color:#FFD37A}

/* Section header knot color */
[data-theme="dark"] .section-header::after{color:#E6C77A;opacity:.45}
[data-theme="dark"] .ulzii-divider{color:#E6C77A;opacity:.45}

/* Yak tile is already dark on both themes */