/* MME premium design layer v2 — cardledger */
:root {
  --p-accent: #C9A84C; --p-accent2: #E8CF8E; --p-bg: #121A2B; --p-surface: #1A2440;
  --p-display: 'Fraunces', system-ui, sans-serif;
  --p-shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.18);
  --p-shadow-lg: 0 4px 12px rgba(0,0,0,.30), 0 16px 40px rgba(0,0,0,.28);
  --p-radius: 16px;
}
h1,h2,h3,.hero h1,.best-item-name,.verdict-winner,nav .logo,.site-title {
  font-family: var(--p-display); letter-spacing:-.015em;
}
h1{font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.08;}
h2{font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.2;margin-top:2.2em;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* glass nav */
nav,header nav,.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  background:color-mix(in srgb,var(--p-bg) 78%,transparent)!important;
  border-bottom:1px solid color-mix(in srgb,var(--p-accent) 22%,transparent);}

/* premium hero */
.premium-hero{position:relative;display:grid;grid-template-columns:auto 1fr;gap:24px;
  align-items:center;overflow:hidden;border-radius:0 0 28px 28px;
  background:
    radial-gradient(900px 420px at 12% -10%, color-mix(in srgb,var(--p-accent) 26%,transparent), transparent 60%),
    radial-gradient(700px 380px at 95% 8%, color-mix(in srgb,var(--p-accent2) 16%,transparent), transparent 55%),
    var(--p-bg);}
.premium-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 75%);}
.hero-character{width:min(190px,22vw);height:auto;flex-shrink:0;z-index:1;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.45));
  animation:p-float 7s ease-in-out infinite;}
@keyframes p-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.premium-hero .container{text-align:left;}

/* cards: depth + lift */
.best-item,.faq-item,article,.card,.review-card,.tool-card,.post-card{
  border-radius:var(--p-radius);box-shadow:var(--p-shadow-sm);
  border:1px solid color-mix(in srgb,var(--p-accent) 14%,transparent);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.best-item:hover,article:hover,.card:hover,.review-card:hover,.tool-card:hover,.post-card:hover{
  transform:translateY(-4px);box-shadow:var(--p-shadow-lg);
  border-color:color-mix(in srgb,var(--p-accent) 38%,transparent);}

/* verdict box */
.verdict-box{position:relative;border-radius:var(--p-radius);
  border-left:6px solid var(--p-accent)!important;box-shadow:var(--p-shadow-lg);
  background:linear-gradient(135deg,var(--p-surface), color-mix(in srgb,var(--p-surface) 70%,var(--p-bg)))!important;}
.verdict-avatar{position:absolute;top:-22px;right:18px;width:64px;height:64px;border-radius:50%;
  box-shadow:var(--p-shadow-sm);}

/* score pill */
.best-item-score{font-family:var(--p-display);font-weight:700;
  background:linear-gradient(135deg,var(--p-accent),var(--p-accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* buttons */
.affiliate-btn,button[type=submit],.btn,.cta{
  background:linear-gradient(135deg,var(--p-accent),color-mix(in srgb,var(--p-accent) 70%,var(--p-accent2)))!important;
  border:none;border-radius:12px;box-shadow:0 4px 14px color-mix(in srgb,var(--p-accent) 35%,transparent);
  transition:transform .18s ease, box-shadow .18s ease;}
.affiliate-btn:hover,.btn:hover,.cta:hover{transform:translateY(-2px);
  box-shadow:0 8px 22px color-mix(in srgb,var(--p-accent) 50%,transparent);}

/* tables */
table{border-collapse:separate;border-spacing:0;border-radius:var(--p-radius);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--p-accent) 18%,transparent);}
thead th{background:color-mix(in srgb,var(--p-accent) 14%,var(--p-surface));}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--p-surface) 55%,transparent);}
tbody tr{transition:background .15s ease;}
tbody tr:hover{background:color-mix(in srgb,var(--p-accent) 10%,var(--p-surface));}

/* imagery */
img{border-radius:10px;}
.mme-prod-img{transition:transform .25s ease;}
.best-item:hover .mme-prod-img{transform:scale(1.06);}


/* CONTENT IS NEVER HOSTAGE TO ANIMATION (fix 2026-06-12):
   pages built with scroll-driven fadeUp froze at opacity:0 on anchor
   landings. Sections render always; entrance polish comes from premium2.js
   which is anchor-safe with a 3s failsafe. */
.section{opacity:1!important;transform:none!important;animation:none!important;}

/* scroll reveal */
.p-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.p-reveal.visible{opacity:1;transform:none;}

/* mobile */
@media (max-width:760px){
  .premium-hero{grid-template-columns:1fr;text-align:center;padding-bottom:8px;}
  .hero-character{width:min(150px,42vw);order:-1;margin-top:12px;}
  .best-item{flex-wrap:wrap;}
  .affiliate-btn{width:100%;text-align:center;padding:14px 18px;}
}
@media (prefers-reduced-motion:reduce){
  *,.hero-character{animation:none!important;transition:none!important;}
}
/* === LIQUID GLASS + DROPDOWNS + PREMIUM DISTINCT SECTIONS (deep fix 2026) ===
   Glassmorphism, high contrast, engaging tools, bubble best lists, dropdown navs.
   Applied to make sites look $50k+ premium, money-makers ready. */

.glass, .premium-hero, .video-card, .newsletter-section, .verdict-box, .beehiiv-embed-wrapper, .kit-embed-wrapper {
  background: color-mix(in srgb, var(--p-bg) 60%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid color-mix(in srgb, var(--p-accent) 30%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  overflow: visible !important;
}
.nav-item {
  position: relative !important;
}
.nav-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 170px !important;
  padding: 4px 0 !important;
  z-index: 1000 !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--p-bg) 97%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid color-mix(in srgb, var(--p-accent) 18%, transparent) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.2) !important;
}
.nav-item:hover .nav-dropdown {
  display: block !important;
}
.nav-dropdown a {
  display: block !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  color: var(--p-text, inherit) !important;
}
.nav-dropdown a:hover {
  background: color-mix(in srgb, var(--p-accent) 8%, transparent) !important;
}

/* Engaging Tools - not text posts */
[id="tools-section"] a, .tool-card {
  border-radius: 16px !important;
  transition: transform .2s cubic-bezier(0.2,0,0,1), box-shadow .2s, border-color .2s;
  position: relative;
}
[id="tools-section"] a:hover, .tool-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
  border-color: var(--p-accent) !important;
}
[id="tools-section"] a::after {
  content: ' Launch →'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 12px; opacity: .7; transition: .15s;
}
[id="tools-section"] a:hover::after { opacity: 1; }

/* Bubble style Best Lists */
.best-bubble, .best-item {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--p-surface); border: 2px solid var(--p-accent);
  border-radius: 9999px; padding: 10px 22px; margin: 6px 4px;
  font-size: 14px; font-weight: 700; transition: .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.best-bubble:hover, .best-item:hover {
  transform: scale(1.06); background: color-mix(in srgb, var(--p-accent) 8%, var(--p-surface));
}
.best-bubble .score, .best-item-score {
  background: linear-gradient(135deg, var(--p-accent), var(--p-accent2));
  color: var(--p-bg); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 800;
}

/* High contrast fixes and liquid polish for all */
body, p, .prose { color: var(--p-text, #fff); }
a { color: var(--p-accent); }
.section, .container { position: relative; }

/* Additional nav layout fix to prevent dropdowns from appearing in flow under header */
.nav-links > a, .nav-links > .nav-item {
  flex-shrink: 0;
}
/* ================================================
   PREMIUM DESIGN SYSTEM v3 — FULL AUDIT IMPLEMENTATION
   $60k–$90k authority perception. Liquid glass, luxury minimal, niche personality.
   Built on existing :root (--p-bg, --p-accent, --p-text, etc.)
   Fonts: Satoshi (display) + Inter (body) via system or Fontshare.
   ================================================ */

/* Global resets & premium base */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
}
h1, h2, h3, .section-title, .hero h1, .nav-logo {
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Enhanced Liquid Glass — stronger, more luxurious */
.glass, .premium-hero, .video-card, .newsletter-section, .verdict-box, .beehiiv-embed-wrapper, .kit-embed-wrapper,
.nav-dropdown, .tool-card, .best-bubble {
  background: color-mix(in srgb, var(--p-bg) 55%, transparent) !important;
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
  border: 1px solid color-mix(in srgb, var(--p-accent) 28%, transparent);
  box-shadow: 0 20px 60px -15px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .2s cubic-bezier(0.23,1,0.32,1), box-shadow .2s, border-color .2s;
}
.glass:hover, .premium-hero:hover, .video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
  border-color: color-mix(in srgb, var(--p-accent) 45%, transparent);
}

/* Premium Buttons */
.btn, .cta-link, .optin-btn, button[type="button"], .affiliate-btn {
  background: linear-gradient(135deg, var(--p-accent), color-mix(in srgb, var(--p-accent) 70%, var(--p-accent2, var(--p-accent)))) !important;
  color: var(--p-bg) !important;
  border: none;
  border-radius: 14px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--p-accent) 35%, transparent);
  transition: all .15s cubic-bezier(0.23,1,0.32,1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover, .cta-link:hover, .optin-btn:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--p-accent) 45%, transparent);
}
.btn:active { transform: scale(0.985); }

/* Cards & Lists — distinct for tools vs best */
.video-card, .review-preview-card, .tool-card {
  border-radius: 18px;
  overflow: hidden;
  transition: all .2s cubic-bezier(0.23,1,0.32,1);
}
.tool-card {
  border: 2px solid color-mix(in srgb, var(--p-accent) 18%, transparent);
}
.tool-card:hover {
  border-color: var(--p-accent);
  box-shadow: 0 25px 60px -15px rgba(0,0,0,.3);
}
.best-bubble, .best-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--p-surface);
  border: 2px solid var(--p-accent);
  border-radius: 9999px;
  padding: 10px 24px;
  margin: 4px;
  font-weight: 700;
  font-size: 14px;
  transition: .15s;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.best-bubble:hover, .best-item:hover {
  transform: scale(1.06) translateY(-1px);
  background: color-mix(in srgb, var(--p-accent) 6%, var(--p-surface));
}

/* Nav Dropdowns — robust, clean, premium */
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: visible !important;
}
.nav-item {
  position: relative;
}
.nav-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 180px !important;
  padding: 6px 0 !important;
  z-index: 1000 !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--p-bg) 96%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid color-mix(in srgb, var(--p-accent) 22%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}
.nav-item:hover .nav-dropdown {
  display: block !important;
}
.nav-dropdown a {
  display: block !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  color: var(--p-text, inherit) !important;
}
.nav-dropdown a:hover {
  background: color-mix(in srgb, var(--p-accent) 10%, transparent) !important;
}

/* Typography & Hierarchy */
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; }
h2, .section-title { font-size: clamp(1.35rem, 3vw, 1.85rem); margin-top: 2rem; }
.section { padding: 72px 0; }

/* Trust & Micro elements */
.verdict-badge, .hero-trust-item {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* High contrast & accessibility */
body, p, .prose { color: var(--p-text); }
a { color: var(--p-accent); transition: opacity .1s; }
a:hover { opacity: .85; }

/* Light theme polish (deskform, pawrate) */
@media (prefers-color-scheme: light) {
  .glass { box-shadow: 0 10px 30px -10px rgba(0,0,0,.1); }
}

/* AI-specific newsletter aesthetic boost (applied via aiwatch premium2) */
.beehiiv-embed-wrapper, .kit-embed-wrapper {
  border-radius: 16px;
  padding: 12px;
}

/* Performance & polish */
img { border-radius: 10px; }
.hero-character { filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }

/* End of PREMIUM DESIGN SYSTEM v3 */


/* Additional audit-driven premium for all pages including subs */
body { font-feature-settings: 'kern' 'liga' 'tnum'; }
.site-nav { position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; }
.nav-logo { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-links { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 500; transition: color .15s; }
.nav-dropdown a { font-size: 13px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; border-bottom: 2px solid var(--p-accent); padding-bottom: 8px; }
.page-hero { text-align: center; padding: 40px 0; }
.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.card { transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -15px rgba(0,0,0,.3); }
.breadcrumb { font-size: 13px; color: var(--muted); }
/* Fix text color clash on cards - ensure high contrast */
.glass, .card, .review-preview-card, .tool-card, .index-grid .card {
  color: var(--p-text, #fff) !important;
}
.glass p, .card p, .review-preview-card p, .tool-card p {
  color: var(--p-text, #fff) !important;
}
.glass, .card, .review-preview-card, .tool-card { color: var(--p-text) !important; }