/* Mission Made Learning: shared site styles (used by the WordPress theme and the static preview)
   Layout concept: a "transformation" story. Raw source material on the left, finished learning on the right,
   repeated down the page as paired panels on spruce ink and pale paper. */
:root {
  --paper: #F3F5F2;
  --card: #FFFFFF;
  --ink: #12302F;
  --ink-2: #4A5F5D;
  --line: #D3DCD8;
  --deep: #0E2524;
  --deep-2: #1B3A38;
  --on-deep: #E9F0EE;
  --on-deep-2: #A9BDBA;
  --marigold: #F2B632;
  --marigold-ink: #3A2A00;
  --tint: #DCEBEA;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 4vw, 2.6rem);
  --step-4: clamp(2.5rem, 6.2vw, 4.4rem);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 10px;
  color-scheme: light;
}

.mm-site { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.6; }
.mm-site * { box-sizing: border-box; }
.mm-site h1, .mm-site h2, .mm-site h3, .mm-site h4 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; color: inherit; }
.mm-site p { margin: 0; }
.mm-site a { color: inherit; }
.mm-site a:focus-visible, .mm-site button:focus-visible, .mm-site input:focus-visible, .mm-site select:focus-visible, .mm-site textarea:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }

.mm-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mm-eyebrow { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.mm-on-deep .mm-eyebrow { color: var(--on-deep-2); }
.mm-lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 36ch; }

/* Buttons (core/buttons markup) */
.mm-site .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.mm-btn .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--display); font-weight: 600; font-size: 1rem; padding: .85rem 1.25rem; border-radius: 999px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; line-height: 1.2; }
.mm-btn--primary .wp-block-button__link { background: var(--marigold); color: var(--marigold-ink); }
.mm-btn--primary .wp-block-button__link:hover { transform: translateY(-1px); background: #F6C552; }
.mm-btn--ghost .wp-block-button__link { border-color: currentColor; color: var(--ink); background: transparent; }
.mm-on-deep .mm-btn--ghost .wp-block-button__link { color: var(--on-deep); }
.mm-site button.mm-submit { font-family: var(--display); font-weight: 600; font-size: 1rem; padding: .85rem 1.25rem; border-radius: 999px; border: 0; background: var(--marigold); color: var(--marigold-ink); cursor: pointer; justify-self: start; }
.mm-site ul.wp-block-list { padding: 0; margin: 0; }

/* Header */
.mm-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.mm-header .mm-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.mm-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.mm-logo svg { flex: none; }
.mm-nav-static { display: flex; gap: 1.5rem; font-family: var(--display); font-size: .95rem; font-weight: 500; }
.mm-nav-static a { text-decoration: none; color: var(--ink-2); }
.mm-nav-static a:hover { color: var(--ink); }
.mm-header .wp-block-navigation { font-family: var(--display); font-size: .95rem; font-weight: 500; gap: 1.5rem; }
.mm-header .wp-block-site-title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; margin: 0; }
.mm-header .wp-block-site-title a { text-decoration: none; }
header.wp-block-template-part:has(.mm-header) { position: sticky; top: 0; z-index: 20; }
@media (max-width: 860px) { .mm-nav-static, .mm-header .mm-btn { display: none; } }

/* Hero */
.mm-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
.mm-hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mm-hero-grid > * { min-width: 0; }
.mm-hero h1 { font-size: var(--step-4); font-weight: 800; margin-block: 1rem 1.25rem; }
.mm-hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--marigold) 62%, var(--marigold) 90%, transparent 90%); padding-inline: .05em; }
.mm-hero .mm-lede { margin-bottom: 2rem !important; }
.mm-hero-note { margin-top: 1.1rem !important; font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }
@media (max-width: 900px) { .mm-hero-grid { grid-template-columns: 1fr; } }

/* Transformation panel (hero visual) */
.mm-transform { display: grid; grid-template-columns: .85fr auto 1.35fr; gap: .75rem; align-items: stretch; }
.mm-transform > * { min-width: 0; }
.mm-pile { display: grid; gap: .55rem; align-content: center; }
.mm-src { background: var(--card); border: 1px dashed #AEBDB8; border-radius: 8px; padding: .7rem .8rem; }
.mm-src:nth-child(2) { transform: rotate(-1.2deg); }
.mm-src:nth-child(3) { transform: rotate(0.9deg); }
.mm-src b { display: block; font-family: var(--display); font-weight: 600; font-size: .92rem; line-height: 1.25; }
.mm-src span { font-family: var(--mono); font-size: .72rem; color: var(--ink-2); }
.mm-arrow { display: grid; place-items: center; color: var(--ink-2); }
.mm-module { background: var(--deep); color: var(--on-deep); border-radius: var(--radius); padding: 1.1rem; box-shadow: 0 18px 40px -22px rgba(14,37,36,.55); }
.mm-module-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mm-module h3 { font-size: 1.05rem; font-weight: 700; margin-block: .35rem .8rem; }
.mm-ce { font-family: var(--mono); font-size: .7rem; background: var(--marigold); color: var(--marigold-ink); padding: .15rem .45rem; border-radius: 4px; white-space: nowrap; }
.mm-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mm-lessons li { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .5rem; align-items: center; font-size: .86rem; padding: .45rem .55rem; background: var(--deep-2); border-radius: 6px; }
.mm-lessons i { font-style: normal; font-family: var(--mono); font-size: .7rem; color: var(--on-deep-2); }
.mm-lessons em { font-style: normal; font-family: var(--mono); font-size: .68rem; color: var(--on-deep-2); white-space: nowrap; }
.mm-progress { margin-top: .8rem; height: 6px; border-radius: 99px; background: var(--deep-2); overflow: hidden; }
.mm-progress span { display: block; height: 100%; width: 62%; background: var(--marigold); animation: mm-fill 2.4s ease-out both; }
@keyframes mm-fill { from { width: 8%; } to { width: 62%; } }
.mm-pkg { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.mm-pkg span { font-family: var(--mono); font-size: .66rem; border: 1px solid #3E5D5A; border-radius: 4px; padding: .1rem .4rem; color: var(--on-deep-2); }
@media (max-width: 560px) { .mm-transform { grid-template-columns: 1fr; } .mm-arrow svg { transform: rotate(90deg); } }

/* Formats strip */
.mm-formats { border-block: 1px solid var(--line); background: var(--card); }
.mm-formats .mm-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.25rem; }
.mm-formats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--mono); font-size: .9rem; font-weight: 500; }

/* Sections */
.mm-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.mm-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mm-section-head > * { min-width: 0; }
.mm-section-head h2 { font-size: var(--step-3); font-weight: 700; margin-top: .6rem; }
.mm-section-head p { color: var(--ink-2); max-width: 46ch; }
@media (max-width: 760px) { .mm-section-head { grid-template-columns: 1fr; } }
.mm-on-deep { background: var(--deep); color: var(--on-deep); }
.mm-on-deep .mm-section-head p { color: var(--on-deep-2); }

/* Audiences */
.mm-aud { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.mm-aud > * { padding: 1.5rem 1.5rem 0 0; display: grid; gap: .75rem; align-content: start; min-width: 0; }
.mm-aud > * + * { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.mm-aud h3 { font-size: var(--step-1); font-weight: 700; }
.mm-aud p { color: var(--ink-2); }
.mm-aud ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-family: var(--mono); font-size: .8rem; }
.mm-aud li::before { content: "→ "; color: var(--ink-2); }
@media (max-width: 860px) { .mm-aud { grid-template-columns: 1fr; } .mm-aud > div, .mm-aud > * + * { padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* Services */
.mm-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2C4A48; border: 1px solid #2C4A48; border-radius: var(--radius); overflow: hidden; }
.mm-service { background: var(--deep); padding: 1.6rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.mm-service h3 { font-size: 1.2rem; font-weight: 600; }
.mm-service p { color: var(--on-deep-2); font-size: .98rem; }
.mm-service .mm-tag { font-family: var(--mono); font-size: .72rem; color: var(--marigold); }
@media (max-width: 900px) { .mm-services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mm-services { grid-template-columns: 1fr; } }

/* Process */
.mm-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: step; }
.mm-process > * { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: .5rem; align-content: start; min-width: 0; }
.mm-process > *::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }
.mm-process h3 { font-size: 1.1rem; font-weight: 700; }
.mm-process p { font-size: .95rem; color: var(--ink-2); }
.mm-process .mm-when { font-family: var(--mono); font-size: .72rem; background: var(--tint); padding: .15rem .45rem; border-radius: 4px; justify-self: start; }
@media (max-width: 960px) { .mm-process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mm-process { grid-template-columns: 1fr; } }

/* Deliverables (package anatomy) */
.mm-anatomy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mm-anatomy > * { min-width: 0; }
.mm-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mm-checklist li { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding-block: .85rem; border-bottom: 1px solid var(--line); }
.mm-checklist strong { grid-column: 1; font-family: var(--display); font-weight: 600; }
.mm-checklist span { grid-column: 1; color: var(--ink-2); font-size: .95rem; }
.mm-checklist code { grid-column: 2; grid-row: 1 / span 2; font-family: var(--mono); font-size: .75rem; color: var(--ink-2); white-space: nowrap; align-self: center; }
.mm-code { background: var(--deep); color: var(--on-deep); border-radius: var(--radius); padding: 1.25rem; font-family: var(--mono); font-size: .8rem; line-height: 1.65; overflow-x: auto; }
.mm-code .c { color: #7F9E9A; }
.mm-code .k { color: var(--marigold); }
.mm-code-cap { margin-top: .6rem; font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
@media (max-width: 860px) { .mm-anatomy { grid-template-columns: 1fr; } .mm-checklist code { white-space: normal; } }

/* Pricing */
.mm-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mm-plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.mm-plan > ul { flex: 1; }
.mm-plan--feature { border: 2px solid var(--ink); }
.mm-plan .mm-price { color: var(--ink); }
.mm-plan h3 { font-size: 1.25rem; font-weight: 700; }
.mm-price { font-family: var(--display); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mm-price small { font-size: .9rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.mm-plan p { color: var(--ink-2); font-size: .97rem; }
.mm-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .95rem; align-content: start; }
.mm-plan li { padding-left: 1.3rem; position: relative; }
.mm-plan li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; border-radius: 2px; background: var(--marigold); }
.mm-plan .wp-block-buttons, .mm-plan .mm-btn, .mm-plan .mm-btn .wp-block-button__link { width: 100%; }
.mm-plan .mm-badge { margin: 0; position: absolute; top: 1.4rem; right: 1.4rem; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; background: var(--ink); color: var(--paper); padding: .2rem .5rem; border-radius: 4px; }
@media (max-width: 900px) { .mm-pricing { grid-template-columns: 1fr; } }

/* FAQ */
.mm-faq { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.mm-faq details { border-bottom: 1px solid var(--line); padding-block: 1.1rem; }
.mm-faq summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.mm-faq summary::-webkit-details-marker { display: none; }
.mm-faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-2); }
.mm-faq details[open] summary::after { content: "–"; }
.mm-faq details p { margin-top: .6rem; color: var(--ink-2); max-width: 68ch; }

/* CTA + contact */
.mm-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mm-cta-grid > * { min-width: 0; }
.mm-cta-grid h2 { font-size: var(--step-3); font-weight: 700; margin-block: .6rem 1rem; }
.mm-cta-grid .mm-lede { color: var(--on-deep-2); }
.mm-form { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 1rem; }
.mm-form .mm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mm-form label { display: grid; gap: .3rem; font-family: var(--display); font-size: .88rem; font-weight: 600; }
.mm-form input, .mm-form select, .mm-form textarea { font: inherit; font-family: var(--body); font-weight: 400; font-size: 1rem; padding: .65rem .75rem; border: 1px solid #B9C6C2; border-radius: 6px; background: var(--paper); color: var(--ink); width: 100%; }
.mm-form textarea { min-height: 6rem; resize: vertical; }
.mm-form-msg { font-family: var(--mono); font-size: .82rem; color: #1D6B4A; }
@media (max-width: 860px) { .mm-cta-grid, .mm-form .mm-row { grid-template-columns: 1fr; } }

/* Footer */
.mm-footer { background: var(--deep); color: var(--on-deep-2); border-top: 1px solid #2C4A48; font-size: .92rem; }
.mm-footer .mm-wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3rem; }
.mm-footer h4 { font-size: .8rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--on-deep); margin-bottom: .75rem; }
.mm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mm-footer a { text-decoration: none; }
.mm-footer a:hover { color: var(--on-deep); }
.mm-footer .mm-logo { color: var(--on-deep); margin-bottom: .75rem; }
.mm-legal { border-top: 1px solid #2C4A48; }
.mm-legal .mm-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-block: 1.1rem; grid-template-columns: none; font-family: var(--mono); font-size: .75rem; }
@media (max-width: 760px) { .mm-footer .mm-wrap { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) { .mm-site * { animation: none !important; transition: none !important; } }

/* Additions */
.mm-module .mm-eyebrow { color: var(--on-deep-2); font-size: .68rem; }
.mm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mm-logo-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--on-deep); }
.mm-footer-brand p { max-width: 30ch; }
.mm-cta-copy { display: grid; gap: 0; align-content: start; }
.mm-cta-email { margin-top: 1.5rem !important; font-family: var(--mono); font-size: .85rem; color: var(--on-deep-2); }
.mm-cta-email strong { color: var(--on-deep); font-weight: 500; user-select: all; }
.mm-anatomy-copy h2 { font-size: var(--step-3); font-weight: 700; margin-block: .6rem 1.5rem; }
.mm-site pre.mm-code { margin: 0; white-space: pre; }
.mm-lessons { counter-reset: none; }
.mm-header .mm-wrap > * { min-width: 0; }
/* WordPress-only: neutralise default flow spacing inside our sections, keep it for normal page content */
.mm-site .wp-block-post-content > * + * { margin-block-start: 1.2em; }
.mm-site .wp-block-post-content { max-width: 70ch; margin-inline: auto; padding: 3rem var(--gutter); }
/* Inner pages and blog */
.mm-main.mm-wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mm-page-title { font-size: var(--step-4); font-weight: 800; max-width: 22ch; margin-block: .5rem 2rem !important; }
.mm-post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.mm-post-list > li { padding-block: 1.5rem; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
.mm-post-list h2 { font-size: var(--step-2); }
.mm-post-list h2 a { text-decoration: none; }