/* =======================================================
   MU Top 100 — production styles
   Match Privacy/ToS layout; no header height changes
   ======================================================= */

/* ---- Tokens (same as Privacy/ToS) ---- */
.muonline-main-content{
  --primary-color: var(--primary-color, #1F2F40);
  --secondary-color: var(--secondary-color, #426A80);
  --accent-color: var(--accent-color, #FF6B35);

  --page-bg:  var(--page-bg-color, #F7F8FB);
  --surface:  var(--surface-color, #FFFFFF);
  --text:     #1F2F40;
  --muted:    #5A6B7C;
  --link:     #053F7A;
  --link-hover: var(--accent-color);
  --border:   rgba(31,47,64,.10);
  --shadow-1: 0 10px 30px rgba(0,0,0,.06);

  /* Section spacing (same feel as privacy section) */
  margin: clamp(16px, 2vw, 32px) auto;

  /* Card (identical to Privacy/ToS) */
  max-width: min(100%, 1100px);
  padding: clamp(16px, 2.5vw, 32px);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  text-wrap: pretty;
  text-align: left;
}

/* ---- Title ---- */
.muonline-main-content h1{
  text-align: center;
  font-weight: 800;
  color: var(--primary-color);
  margin: 0 0 clamp(16px, 2vw, 24px);
  line-height: 1.2;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  letter-spacing: -0.3px;
}

/* ---- Body copy ---- */
.muonline-main-content p{
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.8;
  color: var(--text);
  margin: 0 0 18px;
}

/* ---- H2 with gradient underline (match Privacy/ToS) ---- */
.muonline-main-content h2{
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem);
  color: var(--primary-color);
  margin: clamp(22px, 3vw, 30px) 0 12px;
  line-height: 1.3;
  position: relative;
  scroll-margin-top: 90px;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.muonline-main-content h2::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width:56px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--accent-color), rgba(212,160,25,.2));
}

/* ---- Lists (same rhythm; kill global custom bullets) ---- */
.muonline-main-content ul,
.muonline-main-content ol{ margin:12px 0 20px 1.25rem; padding:0; }
.muonline-main-content li{ margin:6px 0; color:#223; line-height:1.7; }
.muonline-main-content li::before{ content:none !important; } /* defeats sitewide pseudo-bullets */
.muonline-main-content ul.list-none{ list-style:none; margin-left:0; }
.muonline-main-content ul.list-dots{ list-style:disc outside; }
.muonline-main-content ol.list-decimal{ list-style:decimal outside; }

/* ---- Links (scoped overrides) ---- */
.muonline-main-content a{
  color: var(--link) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.muonline-main-content a:hover{
  color: var(--link-hover) !important;
  text-decoration-color: currentColor;
}
.muonline-main-content a:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
  outline-offset: 2px; border-radius: 4px;
}

/* Keep menu links white like other policy pages */
.site-header a, .header a, .navbar a{
  color:#fff !important; text-decoration:none !important;
}

/* ---- On-page nav chips (used by this page) ---- */
.onpage-nav{ margin:10px 0 24px; }
.onpage-nav ul{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.onpage-nav a{
  display:inline-block; padding:8px 12px;
  border:1px solid rgba(31,47,64,.12); border-radius:999px;
  font-weight:700; text-decoration:none;
  color: var(--link) !important; background:#F7FAFE;
  transition: color .15s, background .15s, border-color .15s;
}
.onpage-nav a:hover{ color: var(--link-hover) !important; background:#EDF6FF; border-color:rgba(31,47,64,.18); }

/* ---- Mobile ---- */
@media (max-width: 768px){
  .muonline-main-content{
    padding: clamp(14px, 3vw, 20px);
    border-radius: 12px;
  }
}

/* ---- Reduced motion: opacity only (no transform → no vertical jitter) ---- */
@media (prefers-reduced-motion: no-preference){
  .muonline-main-content{ animation: muFadeIn .28s ease-out both; }
  @keyframes muFadeIn{ from{ opacity:0 } to{ opacity:1 } }
}

/* ---- Print ---- */
@media print{
  .muonline-main-content{ box-shadow:none; border:none; padding:0; margin:0 auto; }
  .muonline-main-content a{ text-decoration:none; }
}

/* ---- Dark mode tokens (match Privacy/ToS) ---- */
@media (prefers-color-scheme: dark){
  .muonline-main-content{
    --page-bg:#0E1522;
    --surface:#0F1B2C;
    --text:#E6EEF8;
    --muted:#93A1B5;
    --border:rgba(255,255,255,.12);
  }
}