/* ════════════════════════════════════════════════════════════════════
 * MISC MARKETING PAGES - how-it-works, who-we-work-with,
 * growth-strategy, page-audit. Reuses tokens + homepage + guide + hub.
 * ════════════════════════════════════════════════════════════════════ */

/* dark hero (shared with service pages) */
.mm-hero{ position:relative; background:var(--bg-dark); color:var(--text-on-dark); padding-block:var(--space-16); overflow:hidden; }
.mm-hero::before{ content:''; position:absolute; top:-30%; right:-12%; width:700px; height:560px; background:radial-gradient(circle, rgba(167,139,250,.20) 0%, transparent 62%); pointer-events:none; }
.mm-hero-inner{ position:relative; z-index:1; max-width:760px; }
.mm-hero .eyebrow{ color:var(--brand-glow); }
.mm-hero h1{ color:var(--text-on-dark); font-size:clamp(34px,5vw,56px); letter-spacing:var(--tracking-tight); line-height:1.06; margin-bottom:var(--space-4); text-wrap:balance; }
.mm-hero h1 .grad{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.mm-hero p{ color:var(--text-mid-dark); font-size:var(--text-body-lg); line-height:var(--leading-relaxed); max-width:560px; margin-bottom:var(--space-6); }
.mm-hero-price{ font-family:var(--font-mono); font-size:var(--text-h4); font-weight:var(--weight-bold); color:var(--text-on-dark); margin-bottom:var(--space-6); }
.mm-hero-cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); }

/* light hero */
.mm-hero-light{ background:var(--bg); padding-block:var(--space-16) var(--space-10); text-align:center; border-bottom:1px solid var(--border-subtle); }
.mm-hero-light-inner{ max-width:720px; margin-inline:auto; }
.mm-hero-light .eyebrow{ color:var(--brand-purple); }
.mm-hero-light h1{ font-size:clamp(34px,5vw,48px); letter-spacing:var(--tracking-tight); line-height:1.08; margin-bottom:var(--space-4); text-wrap:balance; }
.mm-hero-light p{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); max-width:560px; margin-inline:auto; }

/* phase deep dive */
.phase{ }
.phase-eyebrow{ font-family:var(--font-mono); font-size:var(--text-caption); font-weight:var(--weight-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); margin-bottom:var(--space-2); }
.phase h2{ font-size:var(--text-h2); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-2); }
.phase-sub{ font-size:var(--text-body-lg); color:var(--text-secondary); margin-bottom:var(--space-8); }
.phase-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:560px){ .phase-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .phase-grid{ grid-template-columns:repeat(4,1fr); } }
.phase-item{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); border-top:3px solid var(--brand-purple); padding:var(--space-5); }
.phase-item h3{ font-size:var(--text-body); margin-bottom:var(--space-2); }
.phase-item p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin:0; }
.phase-stats{ display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-top:var(--space-6); }
@media (min-width:560px){ .phase-stats{ grid-template-columns:repeat(3,1fr); } }
.phase-stat{ text-align:center; background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); }
.phase-stat .v{ font-family:var(--font-mono); font-size:var(--text-h4); font-weight:var(--weight-bold); color:var(--text-primary); }
.phase-stat .k{ font-size:var(--text-caption); color:var(--text-tertiary); margin-top:var(--space-1); }

/* timeline */
.timeline{ max-width:760px; margin-inline:auto; position:relative; padding-left:var(--space-8); }
.timeline::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--border-default); }
.tl-item{ position:relative; padding-bottom:var(--space-8); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:calc(-1 * var(--space-8) + 1px); top:4px; width:16px; height:16px; border-radius:var(--radius-full); background:var(--brand-gradient); border:3px solid var(--bg); }
.tl-when{ font-family:var(--font-mono); font-size:var(--text-caption); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); margin-bottom:var(--space-1); }
.tl-item h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.tl-item p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin:0; }

/* qualification cards (who-we-work-with) */
.qual-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-4); max-width:920px; margin-inline:auto; }
@media (min-width:560px){ .qual-grid{ grid-template-columns:1fr 1fr; } }
.qual-card{ display:flex; gap:var(--space-3); align-items:flex-start; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); }
.qual-card .ic{ flex:none; width:24px; height:24px; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:var(--weight-bold); margin-top:1px; }
.qual-card.yes{ border-top:3px solid var(--color-success); }
.qual-card.yes .ic{ background:var(--color-success-bg); color:var(--color-success-text); }
.qual-card.no{ border-top:3px solid var(--color-danger); }
.qual-card.no .ic{ background:var(--color-danger-bg); color:var(--color-danger-text); }
.qual-card p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin:0; }
.qual-card strong{ color:var(--text-primary); }

/* single pricing tier card */
.tier-single{ max-width:440px; margin-inline:auto; background:var(--bg-card); border:2px solid var(--brand-purple); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl); padding:var(--space-10) var(--space-8); text-align:center; }
.tier-single .amt{ font-family:var(--font-mono); font-size:56px; font-weight:var(--weight-black); letter-spacing:var(--tracking-tighter); line-height:1; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.tier-single .amt-sub{ font-size:var(--text-body); color:var(--text-secondary); margin-top:var(--space-2); margin-bottom:var(--space-2); }
.tier-single .terms{ font-size:var(--text-body-sm); color:var(--text-tertiary); margin-bottom:var(--space-6); }
.tier-single .btn{ width:100%; }

/* decision matrix (vs comparison) */
.matrix{ display:grid; grid-template-columns:1fr; gap:var(--space-6); max-width:920px; margin-inline:auto; }
@media (min-width:680px){ .matrix{ grid-template-columns:1fr 1fr; align-items:start; } }
.matrix-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:var(--space-8); }
.matrix-card.featured{ border:2px solid var(--brand-purple); box-shadow:var(--shadow-lg); }
.matrix-card h3{ font-size:var(--text-h4); margin-bottom:var(--space-1); }
.matrix-card .price{ font-family:var(--font-mono); font-size:var(--text-h3); font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4); }
.matrix-card.featured .price{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.matrix-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-3); }
.matrix-list li{ font-size:var(--text-body-sm); color:var(--text-secondary); display:flex; gap:var(--space-2); line-height:var(--leading-snug); }
.matrix-list li::before{ content:'•'; color:var(--brand-purple); font-weight:var(--weight-bold); }

/* dark CTA (shared) */
.mm-cta{ position:relative; background:var(--bg-dark); color:var(--text-on-dark); padding-block:var(--space-20); text-align:center; overflow:hidden; }
.mm-cta::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:900px; height:440px; background:radial-gradient(ellipse, rgba(124,58,237,.24) 0%, transparent 70%); pointer-events:none; }
.mm-cta-inner{ position:relative; z-index:1; max-width:var(--container-prose); margin-inline:auto; }
.mm-cta h2{ color:var(--text-on-dark); font-size:var(--text-h2); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4); }
.mm-cta p{ color:var(--text-mid-dark); font-size:var(--text-body-lg); line-height:var(--leading-relaxed); margin-bottom:var(--space-8); }

/* PDF mockup placeholder */
.pdf-mock{ aspect-ratio:8.5/11; max-width:280px; margin-inline:auto; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.pdf-mock .bar{ height:8px; border-radius:3px; background:var(--border-subtle); }
.pdf-mock .bar.t{ width:60%; height:14px; background:var(--brand-purple-light); margin-bottom:var(--space-3); }
.pdf-mock .bar.s{ width:90%; } .pdf-mock .bar.m{ width:75%; } .pdf-mock .bar.l{ width:40%; }
.pdf-mock .chart{ margin-top:auto; height:60px; background:linear-gradient(180deg, var(--brand-purple-light), transparent); border-radius:var(--radius-sm); }