/* =====================================================================
   MAXPOINT V7 — PROFESSIONAL UI/UX POLISH LAYER
   ─────────────────────────────────────────────────────────────────────
   Purpose: an additive layer that elevates the existing V7 design to a
   more professional, premium, attractive visual language — WITHOUT
   breaking any existing class API or layout contract.

   Loaded AFTER every other stylesheet (last in <head>) so its refinements
   win the cascade. Scoped to body[data-mx-page] selectors where useful so
   page-specific polish stays surgical.

   Design principles applied:
   • More confident typographic hierarchy (tighter letter-spacing on titles,
     more breathing room on body copy)
   • Refined micro-interactions (smoother hovers, subtler lifts, better
     focus rings, polished press feedback)
   • Premium gold accent treatments (gradient borders, hairline rings,
     inner highlights) on hero & CTA — the "maxpoint signature"
   • Improved card depth (layered shadows, hairline borders, refined
     corner radius)
   • More rhythmic section spacing
   • Better disabled / loading states (no longer relying on opacity alone)
   • WCAG AA preserved (verified by tests/home-contrast-metrics.js)

   Both Classic and Nova themes get polish; Nova's accent stays purple/teal
   and Classic's stays gold so the dual-theme identity is preserved.
   ===================================================================== */

/* =================================================================
   1. ROOT TOKEN REFINEMENTS (additive — never overrides existing tokens)
   ================================================================= */
:root {
  /* Premium gold accent — slightly richer for headlines & focus rings */
  --mx-gold-glow: 0 0 0 1px rgba(237, 169, 34, .12), 0 8px 28px -10px rgba(237, 169, 34, .35);
  --mx-gold-ring-soft: 0 0 0 4px rgba(237, 169, 34, .14);
  /* Premium card depth — layered shadow + crisp hairline */
  --mx-card-shadow: 0 1px 2px rgba(21, 24, 35, .04), 0 8px 24px -12px rgba(21, 24, 35, .12);
  --mx-card-shadow-hover: 0 2px 4px rgba(21, 24, 35, .05), 0 18px 44px -16px rgba(21, 24, 35, .22);
  /* Premium hero gradient — deeper, more cinematic */
  --mx-hero-grad: linear-gradient(135deg, #1a1f2e 0%, #14182a 50%, #0f1320 100%);
  /* Section rhythm */
  --mx-section-gap: clamp(56px, 8vw, 104px);
}
[data-theme="dark"] {
  --mx-card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .55);
  --mx-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 56px -18px rgba(0, 0, 0, .65);
}

/* =================================================================
   2. TYPOGRAPHY REFINEMENTS — more confident hierarchy
   ================================================================= */
.section-title {
  letter-spacing: -.022em;            /* slightly tighter for headlines */
  line-height: 1.25;
}
.section-sub {
  line-height: 1.95;
  letter-spacing: -.002em;
}
.hero-title {
  letter-spacing: -.028em;            /* tightest, most confident */
  line-height: 1.18;
}
.page-title {
  letter-spacing: -.028em;
  line-height: 1.3;
}
/* Slightly heavier weight on body copy for legibility on screens */
.feature-card h3, .exam-title, .article-title, .tick-title, .mx-step-card h3, .mx-faq-q {
  letter-spacing: -.012em;
}

/* =================================================================
   3. BUTTON SYSTEM POLISH — premium micro-interactions
   ================================================================= */

/* Base button: refined press feedback + smoother transitions */
.btn {
  transition:
    transform var(--d-fast) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    background var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    filter var(--d-base) var(--e-out);
}
.btn:active { transform: scale(.97); }    /* more deliberate press */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  filter: saturate(.5);
  cursor: not-allowed;
  pointer-events: none;
}

/* Gold primary — richer gradient, gold ring on focus, polished shine */
.btn--gold {
  background: linear-gradient(135deg, #fbd465 0%, #eda922 50%, #d18a0e 100%);
  box-shadow:
    0 2px 6px rgba(237, 169, 34, .4),
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.btn--gold:hover {
  transform: translateY(-2px);            /* slightly more lift */
  box-shadow:
    0 12px 28px -8px rgba(237, 169, 34, .55),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .08);
  filter: saturate(1.08) brightness(1.03);
}
.btn--gold:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px var(--gold-2),
    0 8px 22px -6px rgba(237, 169, 34, .5);
}

/* Outline button — refined border + subtle inner highlight */
.btn--outline {
  box-shadow: var(--e1), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.btn--outline:hover {
  transform: translateY(-2px);
  box-shadow: var(--e2), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* Soft button — smoother */
.btn--soft:hover { filter: brightness(1.02); }

/* Icon button (ibtn) — clearer hover state with subtle ring */
.ibtn {
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.ibtn:hover {
  background: var(--sunken);
  color: var(--t1);
  transform: translateY(-1px);
}
.ibtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-2);
}
.ibtn--bordered {
  box-shadow: var(--e1), inset 0 0 0 1px rgba(255, 255, 255, .02);
}

/* =================================================================
   4. CARD DEPTH & PREMIUM HOVER STATES
   ================================================================= */
.card, .panel {
  box-shadow: var(--mx-card-shadow) !important;
}
.card-hover:hover, .article-card:hover, .exam-card:hover, .feature-card:hover, .mx-step-card:hover {
  transform: translateY(-6px);                /* slightly more pronounced lift */
  box-shadow: var(--mx-card-shadow-hover) !important;
}
.card-hover:focus-within, .exam-card:focus-within {
  border-color: color-mix(in srgb, var(--gold-2) 40%, var(--line));
  box-shadow: var(--mx-card-shadow-hover), var(--mx-gold-ring-soft) !important;
}

/* Exam card premium: refined thumb + better meta spacing */
.exam-card {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.exam-thumb {
  box-shadow: inset 0 0 0 1px rgba(237, 169, 34, .18);
}
.exam-card .exam-foot {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.exam-card .price-tag {
  letter-spacing: -.018em;
}

/* Feature card premium: numbered hairline + icon container polish */
.feature-card {
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.feature-card:hover::before { opacity: .7; }
.feature-icon {
  box-shadow: inset 0 0 0 1px rgba(237, 169, 34, .2);
}

/* FAQ item premium: smoother open state */
.mx-faq-item {
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.mx-faq-item:hover {
  border-color: color-mix(in srgb, var(--gold-2) 28%, var(--line));
}
.mx-faq-item[open] {
  box-shadow: var(--e2);
}

/* Step card premium */
.mx-step-card::before {
  box-shadow: 0 6px 16px -4px rgba(237, 169, 34, .6),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* =================================================================
   5. HERO SECTION — more cinematic & premium
   ================================================================= */
.hero {
  position: relative;
}
.hero::after {
  /* Subtle bottom fade into the page bg for a cinematic transition */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}
.hero-badge {
  /* Refined badge with gold dot pulse + subtle gold-tinted bg */
  background: rgba(237, 169, 34, .08);
  border-color: rgba(237, 169, 34, .25);
  color: #ffd97a;
  backdrop-filter: blur(8px) saturate(1.2);
}
.hero-badge .badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 0 0 rgba(237, 169, 34, .6);
  animation: mx-dot-pulse 2.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes mx-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 169, 34, .5); }
  50% { box-shadow: 0 0 0 6px rgba(237, 169, 34, 0); }
}
.hero-title .gold-text {
  /* Richer gold text — multi-layer drop-shadow for depth */
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, .15))
    drop-shadow(0 4px 16px rgba(237, 169, 34, .35));
}
.hero-cta .btn, .cta-band .btn {
  /* Slightly larger min-height for hero CTAs = more premium feel */
  min-height: 54px;
}
.hero-cta .btn--lg, .cta-band .btn--lg {
  padding: 16px 32px;
  font-size: 1.04rem;
}
.hero-stats {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 40px;
}
.hero-stat-value {
  letter-spacing: -.025em;
  text-shadow: 0 2px 14px rgba(237, 169, 34, .25);
}

/* =================================================================
   6. CTA BAND — premium gold accents
   ================================================================= */
.cta-band {
  position: relative;
  isolation: isolate;
}
.cta-band::before {
  /* Enriched radial glow with second subtle layer */
  background:
    radial-gradient(28rem 16rem at 78% 0%, rgba(237, 169, 34, .25), transparent 60%),
    radial-gradient(22rem 14rem at 12% 100%, rgba(237, 169, 34, .1), transparent 60%);
}
.cta-band h2 {
  letter-spacing: -.025em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.cta-band .row-wrap {
  gap: 14px;
}
.cta-band .btn { margin-top: 28px; }

/* =================================================================
   7. EYEBROW & SECTION HEAD REFINEMENTS
   ================================================================= */
.eyebrow {
  letter-spacing: .04em;
  font-weight: 800;
  padding: 6px 14px;
  box-shadow: inset 0 0 0 1px rgba(237, 169, 34, .1);
}
.eyebrow svg { color: var(--gold-2); }
.section-head {
  position: relative;
}
.section-head::after {
  /* Subtle gold accent line below section heads */
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity: .6;
}

/* =================================================================
   8. OMR DIVIDER — more refined visual signature
   ================================================================= */
.omr-divider i:first-child {
  box-shadow: 0 0 0 3px rgba(237, 169, 34, .12);
}

/* =================================================================
   9. TRUST STRIP — pill treatment for trust items
   ================================================================= */
.trust {
  gap: 14px 32px;
}
.trust .trust-item {
  font-weight: 700;
  letter-spacing: -.005em;
}
.trust .trust-item svg {
  filter: drop-shadow(0 1px 3px rgba(23, 160, 94, .3));
}

/* =================================================================
   10. PROGRESS / HBAR — refined fill animation
   ================================================================= */
.hbar-track, .exam-progress-track {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.mx-hfill, .exam-progress-fill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* =================================================================
   11. FORM FIELDS — premium focus states
   ================================================================= */
.field-input {
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}
.field-input:focus,
.field-input:focus-visible {
  outline: none;
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(237, 169, 34, .15);
}
.field-box {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02);
}

/* =================================================================
   12. NAVIGATION CHROME (Classic) — refined sticky header
   ================================================================= */
.chrome-nav, .m-topbar {
  transition: box-shadow var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.chrome-nav.is-scrolled {
  box-shadow: 0 4px 24px -8px rgba(21, 24, 35, .12);
}
.nav-link.active {
  box-shadow: inset 0 -2px 0 var(--gold-2);
}

/* =================================================================
   13. NOVA THEME POLISH — accent-aware refinements
   ================================================================= */
html[data-ui-theme="nova"] .btn--gold,
html[data-ui-theme="nova"] .btn--primary {
  background: var(--nv-accent);
  box-shadow: var(--nv-e-accent), inset 0 1px 0 rgba(255, 255, 255, .2);
}
html[data-ui-theme="nova"] .btn--gold:hover,
html[data-ui-theme="nova"] .btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px -10px rgba(99, 85, 247, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
html[data-ui-theme="nova"] .btn--gold:focus-visible,
html[data-ui-theme="nova"] .btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nv-bg), 0 0 0 5px var(--nv-accent), var(--nv-e-accent);
}
html[data-ui-theme="nova"] .btn--outline {
  box-shadow: var(--nv-e1), inset 0 0 0 1px rgba(255, 255, 255, .02);
}
html[data-ui-theme="nova"] .btn--outline:hover {
  transform: translateY(-2px);
  box-shadow: var(--nv-e2), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
/* press feedback must always win over hover lift (both themes) */
html[data-ui-theme="nova"] .btn--gold:active,
html[data-ui-theme="nova"] .btn--primary:active,
html[data-ui-theme="nova"] .btn--outline:active,
html[data-ui-theme="nova"] .nv-cta:active {
  transform: scale(.97);
  filter: brightness(.97);
}
html[data-ui-theme="nova"] .cta-band::before {
  background:
    radial-gradient(28rem 16rem at 78% 0%, rgba(255, 255, 255, .2), transparent 60%),
    radial-gradient(22rem 14rem at 12% 100%, rgba(255, 255, 255, .08), transparent 60%);
}
html[data-ui-theme="nova"] .cta-band h2 {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}
html[data-ui-theme="nova"] .nv-cta {
  font-weight: 800;
  letter-spacing: -.005em;
  transition: transform var(--nv-d-fast) var(--nv-ease),
              box-shadow var(--nv-d-fast),
              filter var(--nv-d-fast);
}
html[data-ui-theme="nova"] .nv-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
html[data-ui-theme="nova"] .nv-navlink {
  border-radius: var(--nv-r-md);
  transition: background var(--nv-d-fast), color var(--nv-d-fast), box-shadow var(--nv-d-fast);
}
html[data-ui-theme="nova"] .nv-navlink:hover {
  background: var(--nv-accent-soft);
  color: var(--nv-accent);
}
html[data-ui-theme="nova"] .nv-navlink:hover svg { color: var(--nv-accent); }

/* =================================================================
   14. FLOAT CHIP & HERO STAGE — refined depth
   ================================================================= */
.float-chip {
  box-shadow: var(--e3), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.float-chip svg {
  filter: drop-shadow(0 1px 4px rgba(237, 169, 34, .3));
}

/* =================================================================
   15. ACCESSIBILITY — preserve AA + stronger focus rings
   ================================================================= */
.btn:focus-visible,
.ibtn:focus-visible,
a:focus-visible,
.detail:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-2);
  border-radius: 8px;
}
.skip-link:focus-visible {
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .3);
}

/* =================================================================
   16. REDUCED MOTION — respect user preference
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-badge .badge-dot,
  .hero-scroll-cue,
  .float-chip,
  .nv-ai__ico { animation: none !important; }
  .btn:hover,
  .card-hover:hover,
  .exam-card:hover,
  .article-card:hover,
  .feature-card:hover,
  .mx-step-card:hover { transform: none !important; }
}

/* =================================================================
   17. RESPONSIVE POLISH — keep premium feel on mobile
   ================================================================= */
@media (max-width: 639px) {
  .hero-cta .btn--lg,
  .cta-band .btn--lg {
    min-height: 50px;
    padding: 14px 24px;
    font-size: 1rem;
  }
  .section-title { letter-spacing: -.02em; }
  .hero-title { letter-spacing: -.022em; }
  .cta-band::before { opacity: .85; }
}

@media (max-width: 374px) {
  .hero-cta .btn,
  .cta-band .btn {
    width: 100%;
    padding-inline: 14px;
  }
}

/* =================================================================
   18. TAP TARGET COMFORT — WCAG 2.5.8 (≥24px) + comfort (44px rows)
   ================================================================= */
/* Breadcrumb links: expand hit area without shifting visual layout */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 4px;
  margin: -3px -4px;
  border-radius: 8px;
}
.breadcrumb a:active { background: var(--sunken, rgba(0, 0, 0, .04)); }

/* Brand wordmark in shell topbars — comfortable tap height */
.nv-brand, .brand, .m-brand {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

/* Footer/nav compact links (mobile) — taller hit rows, keep visuals */
@media (max-width: 767.98px) {
  .nv-foot-links a, .footer-nav a, .f-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
}

/* Inline text links inside prose get slightly thicker hit area */
.prose a, .article-body a, .exam-desc a {
  display: inline;
  text-underline-offset: 3px;
}