/* ==========================================================================
   MulVidya AI — Home page redesign
   Loads AFTER style.css, on index.html only. Everything here is scoped to
   body.home so about.html / dashboard.html / the tool pages elsewhere are
   never touched. Every id script.js depends on lives untouched in the HTML;
   this file only restyles existing markup — no functional element was
   renamed, removed, or rewired.

   Contents:
     0. Tone-down of inherited decoration (bg orbs, about-me sparkles)
     1. Palette + base rhythm
     2. Section-header system (shared by How it works / Explore / FAQ)
     3. Header
     4. Hero
     5. Hero visual (browser-chrome mock slide)
     6. Jump nav
     7. How it works
     8. Tool shell (wraps the AI-generate + 4 step cards)
     9. Explore section — shelves of feature cards
     10. About the creator
     11. FAQ
     12. Footer
     13. Step 3 / Step 4 controls (template, color pickers, option grids)
     14. Responsive
   ========================================================================== */

/* ==========================================================================
   0. TONE-DOWN — dial back the decorative flourishes inherited from
   style.css (blurred background orbs, about-me sparkles) so the page reads
   as a real, working product rather than a marketing illustration. Scoped
   to body.home only — about.html keeps the original decoration.
   ========================================================================== */
body.home .bg-decor{ opacity: .35; filter: blur(90px) saturate(85%); }
body.home .abme-orb{ opacity: .28; }
body.home .abme-sparkle{ display: none; }

/* ==========================================================================
   1. Palette + base rhythm — same brand family (violet / amber / teal),
   deepened for more contrast against the new paper-toned background.
   ========================================================================== */
html:not([data-theme="dark"]) body.home{
  --bg:            #F7F4FB;
  --accent:        #6B47E2;   /* chalk-violet */
  --accent-2:      #DB7A15;   /* marker-amber */
  --accent-3:      #0E8F86;   /* highlighter-teal */
  --ink:           #171331;
}
html[data-theme="dark"] body.home{
  --accent:        #F2A93B;
  --accent-2:      #B79CFF;
  --accent-3:      #5FCFC3;
}

body.home{ letter-spacing: -.002em; }
body.home .page{ gap: 0; }

/* Section width rhythm stays consistent everywhere a header appears */
body.home section, body.home .mv-tool-shell{ scroll-margin-top: 88px; }

/* A single hairline divider between every major section — quieter and
   more consistent than the previous "torn ticket" motif, reads as premium
   editorial whitespace rather than a worksheet novelty. */
.mv-divider{
  position: relative;
  height: 1px;
  margin: 64px auto;
  max-width: 1080px;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
.mv-divider::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}

/* ==========================================================================
   2. SECTION-HEADER SYSTEM — one consistent look for the eyebrow + h2 + lede
   used by How it works / Explore / FAQ, so the page reads as one designed
   system instead of several separately-styled blocks.
   ========================================================================== */
body.home .how > h2,
body.home .mv-explore-head h2,
body.home .faq-section > h2{
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  letter-spacing: -.017em;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 14px;
}
body.home .faq-section > h2{ margin-bottom: 30px; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
body.home .topbar{
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: transparent;
  position: relative;
}
body.home .topbar::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}
body.home .ghost-link-explore{
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 6px 13px;
  border-radius: 999px;
  font-weight: 600;
}
body.home .ghost-link-explore:hover{ background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

/* ==========================================================================
   4. HERO
   ========================================================================== */
body.home .hero{ padding: 68px 4px 22px; }
body.home .hero-inner{ align-items: flex-start; gap: 60px; }
body.home .hero-copy{ max-width: 640px; padding-top: 6px; }
body.home .hero-logo{ width: 88px; margin-bottom: 24px; filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--accent) 25%, transparent)); }

body.home .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
body.home .eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
  flex-shrink: 0;
}

body.home .hero h1{
  font-size: clamp(2.1rem, 4.3vw, 3.05rem);
  letter-spacing: -.023em;
  line-height: 1.08;
  margin-top: 16px;
  color: var(--ink);
}
body.home .hero-tagline{
  font-size: 1.24rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  color: var(--ink);
}
body.home .hero-tagline .mv-mark{ position: relative; white-space: nowrap; color: var(--accent); }
body.home .hero-tagline .mv-mark::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 2px;
}
body.home .hero > .hero-inner > .hero-copy > p:not(.hero-tagline){
  font-size: 1.03rem;
  line-height: 1.68;
  color: var(--ink-soft);
}
body.home .hero-cta-row{ margin-top: 30px; gap: 14px; }
body.home .hero-cta{
  font-size: 1.01rem;
  padding: 15px 27px;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-sm);
}
body.home .hero-cta-secondary{ font-weight: 600; }

/* spec strip: refined stat rail — a quiet row of hard facts, not a badge wall */
.mv-specstrip{
  margin: 30px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 14px;
}
.mv-spec{ display: flex; flex-direction: column; gap: 3px; }
.mv-spec-label{
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mv-spec-value{ font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; color: var(--ink); }
.mv-spec-value em{ font-style: normal; color: var(--accent); }
@media (max-width: 640px){ .mv-specstrip{ column-gap: 22px; row-gap: 14px; } }

/* ==========================================================================
   5. HERO VISUAL — the product itself: a live mock slide. Reuses the
   existing hvsig tilt/spotlight mechanism (hero-signature.js) untouched.
   ========================================================================== */
body.home .hero-visual.hvsig{ width: 386px; }
body.home .hvsig-imgwrap{ max-width: 300px; transform: translateZ(46px) rotate(-2deg); }

.hvsig-slidecard{
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 40px 17px 17px;
  overflow: hidden;
}
/* window chrome — reads as a real screenshot rather than an illustration */
.hvsig-slidecard::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 30px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.hvsig-slidecard::after{
  content: "";
  position: absolute; top: 12px; left: 15px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF5F57;
  box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
}
html[data-theme="dark"] .hvsig-slidecard{ box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04) inset; }
.hvsig-slide-bar{ display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.hvsig-dot{ display: none; }
.hvsig-slide-tag{
  margin-left: 0;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .66rem; font-weight: 600; color: var(--ink-faint); letter-spacing: .02em;
}
.hvsig-slide-q{ font-family: var(--font-display); font-size: .99rem; font-weight: 600; color: var(--ink); line-height: 1.4; margin: 0 0 12px; }
.hvsig-slide-qnum{
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 7px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: .66rem; font-weight: 700; vertical-align: middle;
}
.hvsig-slide-opts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hvsig-slide-opt{
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px;
}
.hvsig-slide-opt em{
  font-style: normal; display: inline-grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--ink-faint); color: var(--ink-faint); font-size: .64rem; font-weight: 700; flex-shrink: 0;
}
.hvsig-slide-opt.is-correct{
  color: var(--ink);
  background: color-mix(in srgb, var(--success) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}
.hvsig-slide-opt.is-correct em{ background: var(--success); border-color: var(--success); color: #fff; }
body.home .hvsig-imgwrap{ animation: hvsigFloat 5s ease-in-out infinite; }
body.home .hvsig-chip-pptx{ top: 6px; right: -4px; }
body.home .hvsig-chip-check{ bottom: 14px; left: -12px; }
@media (prefers-reduced-motion: reduce){ body.home .hvsig-imgwrap{ animation: none; } }

/* ==========================================================================
   5b. SITEWIDE FEATURE MARQUEE — animated, sits right under the hero so a
   first-time visitor instantly registers "this is a whole toolkit" before
   they've scrolled at all. Two rows drift in opposite directions; every
   pill is a real link duplicated once for a seamless loop. Pauses on
   hover/focus and collapses to a manual horizontal scroller for
   prefers-reduced-motion.
   ========================================================================== */
.mv-featurebar{
  max-width: 1180px;
  margin: 8px auto 0;
  padding: 0 4px;
}
.mv-featurebar-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 18px;
}
.mv-featurebar-count{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.mv-featurebar-label{
  margin: 0;
  font-size: .89rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
.mv-featurebar-track{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  margin-bottom: 10px;
}
.mv-featurebar-row{
  display: flex;
  gap: 12px;
  width: max-content;
  animation: mv-fb-scroll-left 42s linear infinite;
}
.mv-featurebar-track[data-dir="right"] .mv-featurebar-row{
  animation-name: mv-fb-scroll-right;
  animation-duration: 36s;
}
.mv-featurebar-track:hover .mv-featurebar-row,
.mv-featurebar-track:focus-within .mv-featurebar-row{
  animation-play-state: paused;
}
@keyframes mv-fb-scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes mv-fb-scroll-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }

.mv-fb-pill{
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 9px 16px 9px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mv-fb-pill:hover, .mv-fb-pill:focus-visible{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--mv-tier-color, var(--accent));
  outline: none;
}
.mv-fb-pill[data-tier="free"]{ --mv-tier-color: var(--accent-3); }
.mv-fb-pill[data-tier="practice"]{ --mv-tier-color: var(--accent); }
.mv-fb-pill[data-tier="premium"]{ --mv-tier-color: var(--accent-2); }
.mv-fb-pill[data-tier="flagship"]{ --mv-tier-color: var(--accent-2); }

.mv-fb-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--mv-tier-color, var(--accent)) 16%, transparent);
  color: var(--mv-tier-color, var(--accent));
}
.mv-fb-icon svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mv-featurebar-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 4px 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.mv-featurebar-cta svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  transition: transform .2s ease;
}
.mv-featurebar-cta:hover svg{ transform: translateX(3px); }

@media (prefers-reduced-motion: reduce){
  .mv-featurebar-row{ animation: none !important; }
  .mv-featurebar-track{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 760px){
  .mv-featurebar-row{ animation-duration: 30s; }
  .mv-featurebar-track[data-dir="right"] .mv-featurebar-row{ animation-duration: 26s; }
  .mv-fb-pill{ padding: 8px 14px 8px 8px; font-size: .8rem; }
}

/* ==========================================================================
   6. JUMP NAV — the toolkit's real sections, presented as shortcut tabs,
   in the same order the sections actually appear on the page.
   ========================================================================== */
.mv-jumpnav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 4px 0;
}
.mv-jumpnav a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 17px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mv-jumpnav a svg{
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.mv-jumpnav a:hover{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
/* the "Build a quiz" link is the primary CTA of the group — quietly emphasized */
.mv-jumpnav a[href="#mvTool"]{
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.mv-jumpnav a[href="#mvTool"]:hover{ color: var(--accent-ink); transform: translateY(-1px); filter: brightness(1.05); }

/* ==========================================================================
   7. HOW IT WORKS — now the first content section after the hero: a calm,
   centered overview that earns trust before asking for any input.
   ========================================================================== */
#how-it-works.how{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: 2px 0;
}
body.home .how-steps{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  text-align: left;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
body.home .how-steps li{
  list-style: none;
  min-width: 0;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 12px;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.home .how-steps li:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: 0 10px 24px rgba(23,19,49,.08);
}
body.home .how-num{
  flex: none;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 800;
  width: 24px; height: 24px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  -webkit-text-stroke: 0;
}
body.home .how-blog-link{ margin-top: 13px; font-size: .79rem; }

/* Homepage proof strip: animated, compact, and visually tied to the brand. */
body.home .mv-home-stats{margin-bottom:1.05rem}
body.home .mv-home-stats-inner{position:relative}
body.home .mv-home-stat{min-height:76px;padding:.82rem 1rem;overflow:hidden;transition:transform .2s ease,background .2s ease}
body.home .mv-home-stat:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--surface) 88%,var(--accent) 12%)}
body.home .mv-home-stat::before{content:"";position:absolute;left:1rem;right:1rem;bottom:9px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--accent) 55%,transparent),transparent);opacity:.55}
body.home .mv-home-stat::after{content:"";position:absolute;bottom:7px;left:-28%;width:28%;height:5px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--accent),transparent);filter:blur(.3px);opacity:.5;animation:mvStatSweep 4.8s ease-in-out infinite}
body.home .mv-home-stat:nth-child(2)::after{animation-delay:.9s}
body.home .mv-home-stat:nth-child(3)::after{animation-delay:1.8s}
body.home .mv-home-stat:nth-child(4)::after{animation-delay:2.7s}
body.home .mv-home-stat-icon{position:relative;width:32px;height:32px}
body.home .mv-home-stat-icon::before{content:"";position:absolute;inset:1px;border-radius:10px;background:color-mix(in srgb,var(--accent) 9%,transparent);transform:scale(.8);opacity:0;animation:mvStatPulse 2.8s ease-out infinite}
body.home .mv-home-stat:nth-child(2) .mv-home-stat-icon::before{animation-delay:.5s}
body.home .mv-home-stat:nth-child(3) .mv-home-stat-icon::before{animation-delay:1s}
body.home .mv-home-stat:nth-child(4) .mv-home-stat-icon::before{animation-delay:1.5s}
body.home .mv-home-stat-copy strong{font-variant-numeric:tabular-nums}
@keyframes mvStatSweep{0%,15%{transform:translateX(0);opacity:0}25%{opacity:.55}75%{opacity:.55}90%,100%{transform:translateX(470%);opacity:0}}
@keyframes mvStatPulse{0%{transform:scale(.75);opacity:0}25%{opacity:.8}70%,100%{transform:scale(1.25);opacity:0}}
@media(prefers-reduced-motion:reduce){body.home .mv-home-stat::after,body.home .mv-home-stat-icon::before{animation:none!important}}
@media (max-width: 860px){
  body.home .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   8. TOOL SHELL — wraps AI-generate + the four step cards. Pure layout
   wrapper: no ids inside it are touched, only spacing + a label above it.
   ========================================================================== */
.mv-tool-shell{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mv-tool-eyebrow{
  align-self: center;
  margin: 4px auto 6px;
}

body.home section.card.step-card,
body.home section.card.ai-section{
  position: relative;
  border-radius: 22px;
  padding-top: 30px;
  box-shadow: var(--shadow-sm);
}
body.home section.card.step-card::before,
body.home section.card.ai-section::before{
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  opacity: .6;
}
body.home .step-num{
  background: var(--surface);
  color: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
body.home #stepAI .step-num{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
body.home .step-head h2{ font-size: 1.22rem; letter-spacing: -.012em; }

/* ==========================================================================
   9. EXPLORE — cards for the other eight tools, grouped in three tiers.
   ========================================================================== */
.mv-explore{ padding: 8px 4px 4px; }
.mv-explore-head{ max-width: 660px; margin: 0 auto 44px; text-align: center; }
.mv-explore-head .eyebrow{ margin-bottom: 16px; }
.mv-explore-head p{ color: var(--ink-soft); font-size: 1.01rem; line-height: 1.65; }

.mv-shelf{ margin-bottom: 40px; }
.mv-shelf:last-child{ margin-bottom: 0; }
.mv-shelf-head{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mv-shelf-tag{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ink);
  position: relative;
  padding-left: 17px;
}
.mv-shelf-tag::before{
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--mv-tier-color, var(--accent));
}
.mv-shelf[data-tier="free"] .mv-shelf-tag{ --mv-tier-color: var(--accent-3); }
.mv-shelf[data-tier="practice"] .mv-shelf-tag{ --mv-tier-color: var(--accent); }
.mv-shelf[data-tier="premium"] .mv-shelf-tag{ --mv-tier-color: var(--accent-2); }
.mv-shelf-head p{ font-size: .87rem; color: var(--ink-faint); margin: 0; }

.mv-shelf-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.mv-shelf-grid-2{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.mv-feature-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 19px 19px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mv-feature-card::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mv-tier-color, var(--accent));
  opacity: .85;
}
.mv-shelf[data-tier="free"] .mv-feature-card{ --mv-tier-color: var(--accent-3); }
.mv-shelf[data-tier="practice"] .mv-feature-card{ --mv-tier-color: var(--accent); }
.mv-shelf[data-tier="premium"] .mv-feature-card{ --mv-tier-color: var(--accent-2); }
.mv-feature-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--mv-tier-color, var(--accent)) 40%, var(--border));
}

.mv-feature-icon{
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--mv-tier-color, var(--accent)) 15%, var(--surface-2));
  color: var(--mv-tier-color, var(--accent));
  flex-shrink: 0;
}
.mv-feature-icon svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.mv-feature-card h4{
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.006em;
}
.mv-feature-card p{
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}
.mv-feature-go{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--mv-tier-color, var(--accent));
  margin-top: 2px;
}
.mv-feature-go svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.mv-feature-card:hover .mv-feature-go svg{ transform: translateX(3px); }

.mv-feature-badge{
  position: absolute;
  top: 16px; right: 16px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--mv-tier-color, var(--accent-2));
  color: #fff;
}

/* progressive-enhancement reveal for the explore cards */
.mv-reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.mv-reveal.mv-revealed{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   10. ABOUT THE CREATOR
   ========================================================================== */
body.home .about-me{ padding: 30px 30px; box-shadow: var(--shadow-sm); }
body.home .abme-copy h2{ font-size: 1.26rem; }
body.home .abme-copy p{ font-size: .94rem; line-height: 1.6; }

/* ==========================================================================
   11. FAQ — quiet accordion-card treatment, sits just before the footer.
   ========================================================================== */
body.home .mv-divider:has(+ .faq-section){ margin: 26px auto 12px; }
body.home .faq-section{
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
body.home .faq-section > h2{
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: 16px;
}
body.home .faq-section{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
body.home .faq-section > h2{ grid-column: 1 / -1; }
body.home .faq-item{
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0;
  margin: 0;
  box-shadow: none;
  overflow: hidden;
  min-width: 0;
}
body.home .faq-item summary{
  list-style: none;
  cursor: pointer;
  min-height: 46px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .84rem;
  line-height: 1.25;
  font-weight: 700;
}
body.home .faq-item summary::-webkit-details-marker{ display: none; }
body.home .faq-item summary::after{
  content: "+";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  opacity: .7;
}
body.home .faq-item[open] summary::after{ content: "−"; }
body.home .faq-item summary:hover{ background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
body.home .faq-item p{
  margin: 0;
  padding: 0 13px 11px;
  font-size: .77rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 700px){
  body.home .faq-section{ grid-template-columns: 1fr; gap: 7px; }
  body.home .faq-section > h2{ margin-bottom: 11px; }
  body.home .faq-item summary{ min-height: 43px; padding: 9px 12px; font-size: .82rem; }
  body.home .faq-item p{ padding: 0 12px 10px; font-size: .76rem; }
}

/* ==========================================================================
   11b. FAQ MOBILE OVERRIDE — keep the homepage FAQ genuinely compact.
   These rules intentionally use !important because the legacy .faq-item
   rules live in style.css and older deployed caches have overridden the
   visual footprint on small screens.
   ========================================================================== */
@media (max-width:720px){
  body.home section.faq-section{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    padding:8px 10px 0 !important;
    margin:0 auto !important;
    gap:6px !important;
  }
  body.home section.faq-section > h2{
    font-size:1.28rem !important;
    line-height:1.12 !important;
    margin:0 auto 10px !important;
    max-width:100% !important;
  }
  body.home section.faq-section .faq-item{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }
  body.home section.faq-section .faq-item summary{
    min-height:0 !important;
    height:auto !important;
    padding:9px 10px !important;
    font-size:.76rem !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    gap:8px !important;
  }
  body.home section.faq-section .faq-item summary::after{
    width:18px !important;
    height:18px !important;
    border-radius:5px !important;
    font-size:12px !important;
    flex:0 0 18px !important;
  }
  body.home section.faq-section .faq-item p{
    padding:0 10px 9px !important;
    font-size:.70rem !important;
    line-height:1.42 !important;
  }
}

@media (max-width:420px){
  body.home section.faq-section{
    padding-left:6px !important;
    padding-right:6px !important;
    gap:5px !important;
  }
  body.home section.faq-section > h2{
    font-size:1.16rem !important;
    margin-bottom:8px !important;
  }
  body.home section.faq-section .faq-item summary{
    padding:8px 9px !important;
    font-size:.72rem !important;
    line-height:1.17 !important;
  }
  body.home section.faq-section .faq-item summary::after{
    width:17px !important;
    height:17px !important;
    flex-basis:17px !important;
    font-size:11px !important;
  }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
body.home .site-footer{ position: relative; padding: 44px 24px 58px; margin-top: 8px; }
body.home .site-footer::before{
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1032px, calc(100% - 48px)); height: 1px;
  background: var(--border);
}
body.home .site-footer p{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: .87rem; }

/* ==========================================================================
   13. STEP 3 / STEP 4 CONTROLS — template picker, color pickers, the
   "Card style" / "Text position" option grids, cover fields, generate row.
   These are the densest part of the wizard; the base styling (shared with
   other tool pages) left them visually flat, so this gives them the same
   card-elevation + rhythm as the rest of the redesigned homepage. No ids,
   inputs, or button data-values are touched — purely surface + spacing.
   ========================================================================== */
body.home .field > label,
body.home .accent-tile label strong,
body.home .switch-field-text strong{
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body.home .switch-field-text strong{ font-family: var(--font-display); letter-spacing: -.005em; text-transform: none; font-size: .93rem; color: var(--ink); }

/* option grids ("Card style", "Text position/layout", theme/orientation
   pickers) — even grid instead of ragged flex-wrap rows, distinct active
   state so the current choice is obvious at a glance. */
body.home .seg-group{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 7px;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 8px;
}
body.home .seg-btn{
  border-radius: 9px;
  padding: 10px 10px;
  background: var(--surface);
  border: 1px solid transparent;
  font-size: .82rem;
}
body.home .seg-btn:hover{ border-color: var(--border); }
body.home .seg-btn.active{
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: none;
  font-weight: 700;
}

/* grouped tiles — color pickers, cover-slide fields, PDF design panel —
   get a shared card treatment instead of a bare border sitting on the
   step card's own background. */
body.home .accent-tile{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
body.home .cover-fields,
body.home .format-fields{
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 2px;
  margin: 6px 0 22px;
}
body.home .field input[type="text"],
body.home .field select{
  border-color: var(--border);
  background: var(--bg);
}
body.home .field input[type="text"]:focus,
body.home .field select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

body.home .switch-field{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

body.home .template-card{ border-radius: var(--radius-md); }
body.home .template-card.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
body.home .template-check{ background: var(--accent); }

body.home .pdf-design-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

body.home .upload-tile{
  border-radius: var(--radius-md);
  background: var(--surface);
}

body.home .generate-row{ margin-top: 4px; }
body.home .download-row{ margin-top: 12px; }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 860px){
  body.home .hero-inner{ gap: 32px; }
  .mv-shelf-grid{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 640px){
  body.home .hero{ padding: 38px 0 12px; }
  .mv-divider{ margin: 40px auto; }
  body.home .about-me{ padding: 24px 20px; }
  .mv-jumpnav{ justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; margin-left: 0; margin-right: 0; -webkit-overflow-scrolling: touch; }
  .mv-jumpnav a{ flex-shrink: 0; }
  .mv-shelf-grid,
  .mv-shelf-grid-2{ grid-template-columns: 1fr; }
  .mv-explore-head h2{ font-size: 1.5rem; }
}

/* Homepage proof strip */
.mv-home-stats{position:relative;z-index:2;max-width:1260px;margin:0 auto 1.45rem;padding:0 1.15rem}
.mv-home-stats-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid rgba(17,24,39,.08);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 10px 34px rgba(15,23,42,.08);backdrop-filter:blur(16px)}
.mv-home-stat{position:relative;display:flex;align-items:center;justify-content:center;gap:.72rem;min-height:88px;padding:1rem 1.15rem}
.mv-home-stat+.mv-home-stat{border-left:1px solid rgba(17,24,39,.07)}
.mv-home-stat-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;color:#4169e1}
.mv-home-stat-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mv-home-stat-copy{display:flex;flex-direction:column;gap:.06rem;min-width:0}
.mv-home-stat-copy strong{font-size:1.04rem;line-height:1.05;letter-spacing:-.02em;color:#2453c7}
.mv-home-stat-copy span{font-size:.72rem;line-height:1.35;color:#667085;white-space:nowrap}
html[data-theme="dark"] .mv-home-stats-inner,body.dark .mv-home-stats-inner{border-color:rgba(255,255,255,.08);background:rgba(17,24,39,.78);box-shadow:0 14px 40px rgba(0,0,0,.2)}
html[data-theme="dark"] .mv-home-stat+.mv-home-stat,body.dark .mv-home-stat+.mv-home-stat{border-left-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .mv-home-stat-icon,body.dark .mv-home-stat-icon{color:#7ea6ff}
html[data-theme="dark"] .mv-home-stat-copy strong,body.dark .mv-home-stat-copy strong{color:#8db0ff}
html[data-theme="dark"] .mv-home-stat-copy span,body.dark .mv-home-stat-copy span{color:#aeb7c8}
@media (max-width:900px){
  .mv-home-stats{padding:0 .78rem}
  .mv-home-stats-inner{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:16px}
  .mv-home-stat{min-height:78px;padding:.8rem .72rem;justify-content:flex-start}
  .mv-home-stat:nth-child(odd){border-left:0}
  .mv-home-stat:nth-child(n+3){border-top:1px solid rgba(17,24,39,.07)}
  html[data-theme="dark"] .mv-home-stat:nth-child(n+3),body.dark .mv-home-stat:nth-child(n+3){border-top-color:rgba(255,255,255,.07)}
}
@media (max-width:520px){
  .mv-home-stat{gap:.52rem;padding:.72rem .58rem}
  .mv-home-stat-icon{width:29px;height:29px}
  .mv-home-stat-icon svg{width:23px;height:23px}
  .mv-home-stat-copy strong{font-size:.94rem}
  .mv-home-stat-copy span{font-size:.64rem;white-space:normal}
}


/* ==========================================================================
   15. Mobile refinement pass
   ========================================================================== */
body.home .abme-sigwrap{width:156px;height:156px}
body.home .abme-sig-ring{border-style:solid;border-width:1px;opacity:.9}
body.home .abme-sig{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  border-radius:50%;
  filter:none !important;
  animation:none;
  border:3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

/* The AI tools remain available on mobile but are tucked into one clean control. */
.mv-mobile-ai{display:block}
.mv-mobile-ai>summary{display:none}
.mv-mobile-ai-content{display:contents}

@media (max-width:720px){
  body.home .page{padding-bottom:42px;gap:14px}
  body.home .hero{padding:28px 0 2px}
  body.home .hero-inner{gap:18px}
  body.home .hero-copy{padding-top:0}
  body.home .hero-logo{width:68px;margin-bottom:15px}
  body.home .hero h1{font-size:clamp(1.85rem,8.2vw,2.5rem);margin-top:12px}
  body.home .hero-tagline{font-size:1.03rem}
  body.home .hero> .hero-inner > .hero-copy > p:not(.hero-tagline){font-size:.92rem;line-height:1.5}
  body.home .hero-cta-row{margin-top:18px;gap:8px}
  body.home .hero-cta{padding:12px 18px;font-size:.94rem}
  body.home .mv-specstrip{margin-top:20px;padding-top:14px;gap:10px 18px}
  body.home .mv-spec-value{font-size:.92rem}
  body.home .mv-spec-label{font-size:.60rem}

  /* Smaller, calmer product preview. */
  body.home .hero-visual.hvsig{width:min(100%,300px);margin:0 auto}
  body.home .hvsig-imgwrap{max-width:250px;margin:0 auto}
  body.home .hvsig-slidecard{padding:31px 13px 13px;border-radius:12px}
  body.home .hvsig-slide-q{font-size:.86rem;margin-bottom:9px}
  body.home .hvsig-slide-opt{font-size:.70rem;padding:6px 7px;gap:5px;border-radius:8px}
  body.home .hvsig-slide-opts{gap:6px}
  body.home .hvsig-chip-pptx{font-size:.68rem;padding:5px 8px}

  /* Proof strip becomes the primary trust signal, without eating the screen. */
  .mv-home-stats{padding:0 .15rem;margin-bottom:.3rem}
  .mv-home-stats-inner{border-radius:15px}
  .mv-home-stat{min-height:68px;padding:.62rem .58rem;gap:.48rem}
  .mv-home-stat-icon{width:26px;height:26px}
  .mv-home-stat-icon svg{width:21px;height:21px}
  .mv-home-stat-copy strong{font-size:.88rem}
  .mv-home-stat-copy span{font-size:.60rem}

  /* Redundant desktop-style navigation rails are hidden on phones. */
  body.home .mv-featurebar,
  body.home .mv-jumpnav{display:none}
  body.home .mv-divider{margin:16px auto}
  body.home .how#how-it-works{padding:16px 0;margin:0}
  body.home .how#how-it-works h2{font-size:1.18rem;margin-bottom:10px}
  body.home .how#how-it-works .how-steps{grid-template-columns:1fr;gap:8px;margin-top:12px}
  body.home .how#how-it-works .how-steps li{padding:11px 12px;font-size:.78rem;line-height:1.45;margin-bottom:0}

  /* One compact row lets users reveal advanced AI tools only when needed. */
  .mv-mobile-ai{margin:0}
  .mv-mobile-ai>summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    list-style:none;
    cursor:pointer;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--ink);
    font-weight:700;
    box-shadow:var(--shadow-sm);
  }
  .mv-mobile-ai>summary::-webkit-details-marker{display:none}
  .mv-mobile-ai>summary::after{content:'+';font-size:1.15rem;color:var(--accent);font-weight:800}
  .mv-mobile-ai[open]>summary::after{content:'−'}
  .mv-mobile-ai-hint{margin-left:auto;color:var(--ink-faint);font-size:.68rem;font-weight:600}
  .mv-mobile-ai[open] .mv-mobile-ai-hint{display:none}
  .mv-mobile-ai-content{display:block;padding-top:10px}

  /* Main wizard cards: tighter rhythm, never cramped. */
  body.home .step-card{padding:14px !important;margin:0}
  body.home .step-head{gap:10px}
  body.home .step-head h2{font-size:1.08rem}
  body.home .step-sub{font-size:.74rem;line-height:1.4}
  body.home .step-num{width:30px;height:30px;flex:0 0 30px}

  /* MCQ → PPT slide designs: genuinely small 2-column picker on phones. */
  body.home #templateGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-bottom:10px;
  }
  body.home #templateGrid .template-card{border-width:1.5px;border-radius:10px}
  body.home #templateGrid .template-label{padding:6px 7px 7px;font-size:.67rem;line-height:1.2}
  body.home #templateGrid .template-check{width:19px;height:19px;top:6px;right:6px}
  body.home #templateGrid .template-check svg{width:11px;height:11px}
  body.home .template-pager{gap:5px;margin:4px 0 10px}
  body.home .template-pager-btn{font-size:.72rem;padding:6px 9px}
  body.home .template-pager-page{min-width:28px;height:28px;font-size:.72rem}

  /* Inputs/buttons keep comfortable touch targets without giant vertical gaps. */
  body.home input,body.home select,body.home textarea{font-size:16px !important}
  body.home .btn,body.home .btn-primary,body.home .btn-secondary,body.home .btn-ghost{min-height:42px}

  /* Creator card: compact editorial split rather than the oversized stacked block. */
  body.home .about-me{padding:18px 16px;margin-top:8px;margin-bottom:18px}
  body.home .abme-inner{gap:14px}
  body.home .abme-sigwrap{width:104px;height:104px}
  body.home .abme-copy h2{font-size:1.16rem;margin:7px 0 7px}
  body.home .abme-copy p{font-size:.82rem;line-height:1.45;margin-bottom:13px}
  body.home .abme-link{width:100%;justify-content:center;padding:10px 14px;font-size:.82rem}
  body.home .abme-copy .abme-link + .abme-link{margin-top:7px !important}
}

@media (max-width:420px){
  body.home .hero-visual.hvsig{width:min(100%,270px)}
  body.home .hvsig-imgwrap{max-width:230px}
  body.home .mv-home-stat{min-height:64px;padding:.56rem .5rem}
  body.home #templateGrid{gap:6px !important}
  body.home #templateGrid .template-label{font-size:.62rem;padding:5px 6px 6px}
}