/* Home page styles — V7 (extracted from inline <style>, shared by both
   themes; Nova re-themes via nova/pages.css). Journey: Discover → Trust →
   Understand → Explore → Convert. The #mx-journey mount (logged-in users)
   gets its own journey layout below. */

.hidden { display: none !important; }
section[id] { scroll-margin-top: calc(var(--nav-h, 66px) + 16px); }

/* --- hero stage (desktop-only decorative mock) --- */
@media (max-width: 1023px) { .hero-stage { display: none; } }
.mx-stage-tilt { transform: rotate(2.5deg); }
.mx-report-card {
  position: relative; max-width: 400px; margin-inline: auto;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg, 1.1rem); box-shadow: var(--e4, 0 30px 60px -30px rgba(0,0,0,.5));
  backdrop-filter: blur(12px);
  padding: 20px 20px 16px; color: #ffffff;
}
.mx-report-chip { position: absolute; top: 12px; inset-inline-end: 14px; }
.mx-report-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .9rem; }
.mx-report-title svg { width: 17px; height: 17px; color: var(--gold-2, #eda922); }
.mx-report-body { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.mx-report-body .gauge { width: 126px; height: 126px; flex: none; }
.mx-report-card .gauge-track { stroke: rgba(255, 255, 255, .14); }
.mx-report-card .gauge-value { font-size: 1.15rem; }
.mx-report-card .gauge-label { color: rgba(244, 242, 234, .55); }
.mx-report-bars { flex: 1; min-width: 150px; display: grid; gap: 11px; }
.mx-report-bars .hbar { margin-bottom: 0; }
.mx-report-bars .hbar-top { color: rgba(244, 242, 234, .65); font-size: .72rem; }
.mx-report-bars .hbar-track { background: rgba(255, 255, 255, .12); height: 8px; }
.mx-report-seal { position: absolute; bottom: -20px; inset-inline-start: -16px; transform: scale(.72); }

/* page-local honest inline-width fills (motion.js data-w is unitless) */
.mx-hfill {
  display: block; height: 100%; width: var(--w, 0%);
  border-radius: 99px; background: var(--gold-grad, linear-gradient(135deg, #eda922, #f59e0b));
}
.mx-hfill--ok { background: linear-gradient(90deg, #35ca8c, #17a05e); }
.js .mx-hfill { width: 0; transition: width 1s var(--e-out, cubic-bezier(.22,1,.36,1)) .2s; }
.js .mx-hfill.is-in { width: var(--w, 0%); }

/* hero mock draw-in */
.mx-report-card .gauge-fill { stroke-dashoffset: var(--mx-arc, 408); }
.js .mx-report-card .gauge-fill { stroke-dashoffset: 408; transition: stroke-dashoffset 1.3s var(--e-out, cubic-bezier(.22,1,.36,1)) .25s; }
.js .mx-report-card.is-in .gauge-fill { stroke-dashoffset: var(--mx-arc, 408); }

/* --- exam meta icons inline --- */
.exam-meta span { display: inline-flex; align-items: center; gap: 5px; }
.exam-meta .omr-strip { align-self: center; }
.exam-meta span svg { width: 14px; height: 14px; color: var(--t3, #8f8a76); }
.exam-foot .btn { min-height: 40px; padding-inline: 13px; font-size: .85rem; }
.exam-foot .btn svg { width: 16px; height: 16px; }

/* --- steps showcase --- */
.mx-steps-showcase { padding-top: 16px; }
.mx-step-ico {
  width: 42px; height: 42px; border-radius: 13px; margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft, rgba(237, 169, 34, .12)); color: var(--gold-ink, #eda922);
}
.mx-step-ico svg { width: 20px; height: 20px; }

/* --- split sections --- */
.mx-split > * { min-width: 0; }
@media (min-width: 1024px) { .mx-split--rev > .mx-split-stage { order: 2; } }
.mx-split-copy .section-title { font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
.mx-split-stage .qcard, .mx-split-stage .panel { max-width: 460px; margin-inline: auto; width: 100%; }
.tick-row { text-align: start; }

/* --- exam experience mock --- */
.qcard .timer { font-size: .84rem; padding: 6px 13px; }
.qcard .flag-btn { margin-inline-start: auto; }

/* --- analytics mock --- */
.mx-analytics-mock .hbar-top { color: var(--t2, inherit); }
.mx-analytics-mock .hbar-track { height: 10px; }

/* --- blog fallback cover --- */
.mx-article-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-soft, rgba(237,169,34,.12)), var(--sunken, rgba(0,0,0,.2)));
  color: var(--gold-ink, #eda922);
}
.mx-article-fallback svg { width: 2rem; height: 2rem; }
.article-meta span { display: inline-flex; align-items: center; gap: 5px; }
.article-meta span svg { width: 13px; height: 13px; }

/* --- discount banners (client-rendered) --- */
.mx-discount-banner { padding: 18px 20px; margin-bottom: 14px; background: linear-gradient(135deg, var(--ink-2, #182038), var(--ink-1, #10131f) 70%); border-color: rgba(255, 255, 255, .22); color: #ffffff; }
.mx-banner-x { position: absolute; top: 10px; inset-inline-end: 10px; color: rgba(255, 255, 255, .7); }
.mx-banner-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.mx-banner-row { justify-content: space-between; gap: 14px; }
.mx-banner-percent { font-size: 2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; flex: none; }
.mx-banner-copy { min-width: 0; flex: 1; }
.mx-banner-actions { flex: none; }

/* Buttons on permanently dark marketing panels must not inherit light-mode
   muted ink or translucent brand surfaces. Solid pairs survive all theme modes. */
html .hero .btn--ghost, html .cta-band .btn--ghost,
html .mx-discount-banner .btn--ghost {
  background: #202536; color: #ffffff; border-color: #a7b0c8;
}
html .hero .btn--ghost:hover, html .cta-band .btn--ghost:hover,
html .mx-discount-banner .btn--ghost:hover { background: #30384f; color: #ffffff; }
.hero-cta .btn, .cta-band .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hero-cta, .cta-band .row-wrap { flex-wrap: wrap; }
@media (max-width: 375px) { .cta-band .btn { width: 100%; padding-inline: 12px; } }


/* --- CTA band outline button on ink background ---
   The CTA band uses --ink-grad (permanently dark in both themes), so the
   outline button must be a permanently-light pill. The previous override
   set border-color: var(--raised) which equals the button bg, making the
   border invisible — and in dark mode --raised itself is dark, so the whole
   button disappeared into the band. */
.cta-band .btn--outline {
  background: #ffffff;
  border: 1px solid var(--gold-2);
  color: #151823;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.cta-band .btn--outline:hover {
  background: #f4f2ea;
  border-color: var(--gold-1);
  color: #151823;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.cta-band .btn--outline:focus-visible { outline-color: var(--gold-2); outline-offset: 3px; }

/* --- 320px safety --- */
@media (max-width: 374px) {
  .hero-stat-value { font-size: 1.25rem; }
  .mx-banner-percent { font-size: 1.6rem; }
  .hero-cta .btn { width: 100%; }
  .exam-foot { flex-wrap: wrap; }
}

/* ================= USER JOURNEY MOUNT (logged-in) =================
   State → Action → Progress → Discovery → Support. Rendered by
   landing.js via the composition engine; hero stays hidden meanwhile. */
#mx-journey { padding-top: 18px; }
#mx-journey .nv-compose { display: grid; gap: 14px; }
.mx-journey-greet {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 4px 2px 2px;
}
.mx-journey-greet .avatar { width: 46px; height: 46px; font-size: 1.1rem; }
.mx-journey-greet b { font-size: 1.05rem; display: block; }
.mx-journey-greet small { color: var(--t3, var(--nv-t3)); font-size: .78rem; }


.mx-intelligence-loop { background: color-mix(in srgb, var(--sunken) 48%, var(--bg)); }
.mx-intelligence-loop__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.mx-intelligence-loop__item { position:relative; min-width:0; padding:18px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--raised); }
.mx-intelligence-loop__num { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; background:var(--gold-soft); color:var(--gold-ink); font-weight:900; font-size:.72rem; }
.mx-intelligence-loop__ico { display:grid; place-items:center; width:42px; height:42px; margin:12px 0 10px; border-radius:13px; background:var(--gold-soft); color:var(--gold-ink); }
.mx-intelligence-loop__ico svg { width:21px; height:21px; }
.mx-intelligence-loop__item h3 { margin:0 0 5px; font-size:.96rem; }
.mx-intelligence-loop__item p { margin:0; color:var(--t2); font-size:.76rem; line-height:1.9; }
.mx-intelligence-loop__arrow { position:absolute; inset-inline-start:-13px; top:52%; width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--raised); color:var(--t3); z-index:2; }
.mx-intelligence-loop__arrow svg { width:13px; height:13px; }
html[data-ui-theme="nova"] .mx-intelligence-loop { background:color-mix(in srgb,var(--nv-sunken) 55%,var(--nv-bg)); }
html[data-ui-theme="nova"] .mx-intelligence-loop__item { background:var(--nv-surface); border-color:var(--nv-line); }
html[data-ui-theme="nova"] .mx-intelligence-loop__arrow { background:var(--nv-surface); border-color:var(--nv-line); }
@media (max-width:1100px) { .mx-intelligence-loop__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .mx-intelligence-loop__arrow { display:none; } }
@media (max-width:640px) { .mx-intelligence-loop__grid { grid-template-columns:1fr; } .mx-intelligence-loop__item { padding:16px; } }