/* Member area — premium-minimal course player. Brand drives --ma-brand (injected at build).
   Always light (no system dark-mode override). */
:root {
  color-scheme: light;
  --ma-brand: #1763e6;
  /* The brand as TEXT or a small solid ground: app.js darkens this at boot when the offer's
     brand is too light to hold 4.5:1 against the light surfaces. Defaults to the brand. */
  --ma-brand-strong: var(--ma-brand);
  --ma-accent: #c9a227; /* warm highlight (eyebrows, badges, rules) — offers override at boot */
  --ma-cta: var(--ma-brand); /* action color — offers override at boot */
  --ma-bg: #f6f7f9;
  --ma-surface: #ffffff;
  --ma-ink: #15171c;
  --ma-text: #586072;
  --ma-muted: #636c80; /* AA-contrast on white, surface AND the page bg */
  --ma-line: #ebedf1;
  --ma-good: #15803d; /* deep enough that white button text and the guarantee line both hold AA */
  --ma-soft: color-mix(in srgb, var(--ma-brand) 10%, transparent);
  /* The ground the hero/celebration gradients start from. app.js swaps in a darkened brand at
     boot when the raw brand can't hold white type; dark palettes pass through untouched. */
  --ma-hero-base: var(--ma-brand);
  --ma-hero-grad: linear-gradient(135deg, var(--ma-hero-base), color-mix(in srgb, var(--ma-hero-base) 55%, #000));
  --ma-display: 'Playfair Display', Georgia, serif; /* display serif for the big moments */
  --ma-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 34px rgba(16, 24, 40, .06);
  --ma-shadow-lift: 0 2px 6px rgba(16, 24, 40, .05), 0 22px 60px rgba(16, 24, 40, .12);
  --ma-ease: cubic-bezier(.2, .7, .2, 1);
  --ma-radius: 20px;
}
::selection { background: color-mix(in srgb, var(--ma-accent) 30%, transparent); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--ma-bg);
  color: var(--ma-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ma-brand-strong); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
.ma-error { max-width: 460px; margin: 80px auto; text-align: center; padding: 0 20px; color: var(--ma-text); }
.ma-error h2 { color: var(--ma-ink); font-size: 20px; margin: 0 0 8px; }
.ma-error p { margin: 0 0 18px; font-size: 15px; }
.ma-loading { padding: 80px; color: var(--ma-muted); }

/* ---- shell ---- */
:root { --ma-nav-h: 64px; }
.ma-app { min-height: 100vh; }

/* top nav (always present) */
.ma-nav {
  position: sticky; top: 0; z-index: 50; height: var(--ma-nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 32px;
  background: color-mix(in srgb, var(--ma-surface) 74%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--ma-line) 65%, transparent);
}
.ma-nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--ma-display); font-weight: 700; font-size: 18px; color: var(--ma-ink); letter-spacing: 0; min-width: 0; }
.ma-nav-brand img { height: 26px; width: auto; }
/* the brand name truncates before the nav links ever crush or wrap */
.ma-nav-brand-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-nav-right { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.ma-nav-link { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--ma-text); transition: color .15s; }
.ma-nav-link:hover { color: var(--ma-ink); }
.ma-acct { position: relative; }
.ma-acct-btn { background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ma-ink); cursor: pointer; padding: 6px 4px; }
.ma-acct-menu {
  position: absolute; right: 0; top: 100%; background: var(--ma-surface); border: 1px solid var(--ma-line);
  border-radius: 11px; box-shadow: var(--ma-shadow); padding: 6px; min-width: 150px; display: none;
}
.ma-acct.open .ma-acct-menu { display: block; }
.ma-acct-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ma-text); }
.ma-acct-menu a:hover { background: var(--ma-bg); color: var(--ma-ink); }

/* light/dark theme toggle button (nav header) */
.ma-theme-btn {
  background: none; border: 1px solid var(--ma-line); border-radius: 999px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  cursor: pointer; color: var(--ma-ink); transition: border-color .15s, transform .15s;
}
.ma-theme-btn:hover { border-color: var(--ma-brand); transform: translateY(-1px); }

/* course view: sidebar + content under the nav */
.ma-course { display: flex; }
.ma-side {
  width: 300px; flex-shrink: 0; background: var(--ma-surface); border-right: 1px solid var(--ma-line);
  position: sticky; top: var(--ma-nav-h); height: calc(100vh - var(--ma-nav-h)); overflow-y: auto; padding: 22px 16px 40px;
}
.ma-main { flex: 1; min-width: 0; }
.ma-main-inner { max-width: 760px; margin: 0 auto; padding: 48px 44px 120px; }
.ma-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--ma-muted); padding: 0 8px 16px; }
.ma-back:hover { color: var(--ma-brand-strong); }
.ma-burger, .ma-scrim { display: none; }

/* ---- sidebar ---- */
.ma-brand {
  display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px;
  color: var(--ma-ink); padding: 0 8px 20px; letter-spacing: -.01em;
}
.ma-brand img { height: 26px; width: auto; }
.ma-sideprog { padding: 0 8px 22px; }
.ma-sideprog-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ma-muted); margin-bottom: 7px; }
.ma-bar { height: 4px; border-radius: 99px; background: var(--ma-line); overflow: hidden; }
.ma-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ma-accent), var(--ma-cta)); border-radius: 99px; transition: width .5s var(--ma-ease); }
.ma-nav-mod { margin-bottom: 6px; }
.ma-nav-modhead {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ma-muted);
  padding: 16px 10px 8px;
}
.ma-nav-modhead .lock { margin-left: auto; opacity: .7; }
.ma-navlesson {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px;
  font-size: 14px; color: var(--ma-text); cursor: pointer; line-height: 1.35;
}
.ma-navlesson:hover { background: var(--ma-bg); }
.ma-navlesson.active { background: var(--ma-soft); color: var(--ma-ink); font-weight: 600; }
.ma-dot {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--ma-line);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
}
.ma-navlesson.done .ma-dot { background: var(--ma-good); border-color: var(--ma-good); }
.ma-navlesson.locked { color: var(--ma-muted); cursor: default; }
.ma-navlesson.locked:hover { background: none; }
.ma-nav-unlock {
  display: block; margin: 8px 10px 2px; text-align: center; font-size: 12.5px; font-weight: 700;
  color: var(--ma-brand-strong); border: 1px solid var(--ma-brand-strong); border-radius: 9px; padding: 8px;
}

/* ---- buttons ---- */
.ma-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--ma-cta); color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: .01em;
  padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 6px 18px color-mix(in srgb, var(--ma-cta) 28%, transparent);
  transition: filter .18s var(--ma-ease), transform .18s var(--ma-ease), box-shadow .18s var(--ma-ease);
}
.ma-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 10px 26px color-mix(in srgb, var(--ma-cta) 36%, transparent); }
.ma-btn:active { transform: translateY(0); }
.ma-btn.ghost { background: transparent; color: var(--ma-ink); border: 1px solid var(--ma-line); }
.ma-btn.good { background: var(--ma-good); }
.ma-btn[disabled] { opacity: .45; cursor: default; }

.ma-btn.sm { padding: 9px 16px; font-size: 13.5px; border-radius: 9px; }

/* ---- dashboard ---- */
.ma-dash { max-width: 1180px; margin: 0 auto; padding: 44px 32px 140px; }
/* Soft fade on view entry. ONE animation on the container, opacity only — per-child staggered
   rise animations (fill-mode: both + transforms) wedge embedded Chromium compositors on scroll
   (blank paints); do not reintroduce them. The reduced-motion global rule disables this too. */
@keyframes ma-fade { from { opacity: 0; } to { opacity: 1; } }
.ma-dash { animation: ma-fade .45s var(--ma-ease); }
.ma-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }
.ma-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: 13px; padding: 18px 20px; color: #fff;
}
.ma-banner strong { display: block; font-size: 14.5px; line-height: 1.3; }
/* full-strength white: the 12.5px line must hold 4.5:1 on the brand ground (size mutes it enough) */
.ma-banner span { display: block; font-size: 12.5px; margin-top: 4px; }
.ma-banner.brand { background: var(--ma-brand-strong); }
.ma-banner.dark { background: #1a1f2b; }
.ma-banner.accent { background: linear-gradient(135deg, var(--ma-cta), color-mix(in srgb, var(--ma-accent) 60%, var(--ma-cta))); }
.ma-banner .ma-btn { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.5); }
.ma-banner .ma-btn:hover { background: rgba(0,0,0,.4); filter: none; }

/* The hero carries the funnel's look inside: brand gradient, warm accent eyebrow, white type. */
.ma-hero {
  display: flex; gap: 40px; align-items: center; background: var(--ma-hero-grad);
  border: 0; border-radius: 24px; padding: 56px 52px; margin-bottom: 44px; box-shadow: var(--ma-shadow-lift);
  position: relative; overflow: hidden;
}
.ma-hero::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ma-accent) 26%, transparent), transparent 68%);
  pointer-events: none;
}
/* editorial texture: a faint 8-point-star lattice over the hero ground + an inset accent keyline */
.ma-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1' d='M36 22l3.9 10.1L50 36l-10.1 3.9L36 50l-3.9-10.1L22 36l10.1-3.9z'/%3E%3C/svg%3E");
}
.ma-hero-keyline { position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--ma-accent) 30%, transparent); border-radius: 16px; pointer-events: none; }
.ma-hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ma-hero-text h1 { font-family: var(--ma-display); font-size: 42px; font-weight: 800; color: #fff; margin: 10px 0 16px; letter-spacing: -.01em; line-height: 1.12; }
.ma-hero-text p { font-size: 16px; color: rgba(255,255,255,.92); margin: 0; line-height: 1.7; max-width: 560px; }
/* the concierge hero's computed next action... the one thing the dashboard asks of the member.
   White pill + strong brand text: it holds AA on ANY brand ground, and never melts into the
   hero once the boot guard darkens that ground toward the CTA color. */
.ma-hero .ma-btn { background: #fff; color: var(--ma-brand-strong); box-shadow: 0 1px 2px rgba(16,24,40,.14), 0 8px 22px rgba(0,0,0,.18); }
.ma-hero .ma-btn:hover { background: #f5f2ef; filter: none; }
.ma-hero-cta { display: inline-block; margin-top: 22px; padding: 15px 28px; font-size: 16px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.4; }
.ma-hero-progress { margin-top: 12px !important; font-size: 14px !important; color: rgba(255,255,255,.9) !important; }
.ma-hero-plan { margin-top: 8px !important; font-family: var(--ma-display); font-style: italic; font-size: 15px !important; color: color-mix(in srgb, var(--ma-accent) 80%, #fff) !important; }
.ma-cele-line { font-family: var(--ma-display); font-style: italic; font-size: 17px; color: rgba(255,255,255,.92); margin: 14px auto 0; max-width: 400px; line-height: 1.55; }
/* ---- the advisor-call case: an editorial card on a scrim, never a takeover. The celebration
   owns the full-emerald moment; this is quieter... surface card, gold keyline, honest exits. ---- */
.ma-adv { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 16, 12, .55); opacity: 0; transition: opacity .35s var(--ma-ease); overflow-y: auto; }
.ma-adv.show { opacity: 1; }
.ma-adv-card { position: relative; max-width: 440px; width: 100%; background: var(--ma-surface); border-radius: var(--ma-radius); box-shadow: var(--ma-shadow-lift); padding: 40px 36px 30px; text-align: center; }
.ma-adv-keyline { position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--ma-accent) 45%, transparent); border-radius: 14px; pointer-events: none; }
.ma-adv-star { color: var(--ma-accent); font-size: 14px; margin-bottom: 14px; }
.ma-adv-h { font-family: var(--ma-display); font-size: 25px; font-weight: 700; color: var(--ma-ink); margin: 0 0 14px; line-height: 1.2; }
.ma-adv-b { font-size: 15px; color: var(--ma-text); line-height: 1.6; margin: 0 0 10px; }
.ma-adv-plan { font-family: var(--ma-display); font-style: italic; font-size: 15.5px; color: var(--ma-ink); margin: 14px 0 4px; }
/* The member's own build, quoted at the top of the case: it opens on their work, so it sits above
   the beats with a hairline under it rather than reading as one more line of ours. */
.ma-adv-build { font-family: var(--ma-display); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--ma-ink); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--ma-accent) 32%, transparent); }
.ma-adv-cta { margin-top: 18px; }
.ma-adv-quiet { display: block; margin: 14px auto 0; background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ma-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ma-adv-never { display: block; margin: 10px auto 0; background: none; border: 0; font: inherit; font-size: 11.5px; color: var(--ma-muted); cursor: pointer; }
@media (max-width: 480px) { .ma-adv-card { padding: 30px 22px 24px; } }

/* promo banners demoted below the work: tighter, quieter than the top-row treatment */
.ma-banners-low { margin: 26px 0 6px; }
.ma-banners-low .ma-banner { padding: 16px 20px; }
/* the quiet door to the full curriculum (dashboard shows one rung at a time) */
.ma-mapall { display: block; width: 100%; margin: 18px 0 0; padding: 14px 20px; background: none; cursor: pointer; font-family: inherit; border: 1px dashed color-mix(in srgb, var(--ma-accent) 55%, transparent); border-radius: 12px; text-align: center; font-weight: 700; font-size: 14px; color: var(--ma-ink); }
.ma-mapall:hover { border-style: solid; background: color-mix(in srgb, var(--ma-accent) 8%, transparent); }
.ma-hero .ma-eyebrow { color: var(--ma-accent); letter-spacing: .3em; }
.ma-hero-video { width: 46%; max-width: 460px; flex-shrink: 0; }
.ma-hero-video .ma-video { margin: 0; }

.ma-steps-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 38px; }
.ma-step-row {
  display: flex; align-items: center; gap: 18px; background: var(--ma-surface);
  border: 1px solid var(--ma-line); border-radius: 14px; padding: 18px 22px;
}
.ma-step-row .ma-step-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ma-soft); color: var(--ma-brand-strong); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ma-step-main { flex: 1; min-width: 0; }
.ma-step-main h3 { margin: 0 0 3px; font-size: 16px; color: var(--ma-ink); font-weight: 700; }
.ma-step-main p { margin: 0; font-size: 13.5px; color: var(--ma-text); line-height: 1.5; }
.ma-step-row .ma-btn { flex-shrink: 0; }

.ma-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.ma-bonus .ma-card-in { padding-top: 22px; }
.ma-tag { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ma-brand-strong); background: var(--ma-soft); padding: 4px 9px; border-radius: 6px; margin-bottom: 10px; align-self: flex-start; }
.ma-price { font-size: 20px; color: var(--ma-ink); margin: 0 0 8px; }
.ma-price s { color: var(--ma-muted); font-size: 14px; font-weight: 500; margin-right: 6px; }
.ma-price strong { font-weight: 800; }
.ma-guarantee { font-size: 12.5px; color: var(--ma-good); font-weight: 600; margin: 0 0 14px; }

/* ---- home ---- */
.ma-greet h1 { font-size: 33px; font-weight: 800; color: var(--ma-ink); margin: 0 0 6px; letter-spacing: -.02em; }
.ma-sub { font-size: 15.5px; color: var(--ma-text); margin: 0 0 30px; }
.ma-upnext {
  background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: var(--ma-radius);
  padding: 28px; margin-bottom: 30px; box-shadow: var(--ma-shadow);
  display: flex; align-items: center; gap: 26px;
}
.ma-upnext-body { flex: 1; min-width: 0; }
.ma-eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: color-mix(in srgb, var(--ma-accent) 58%, var(--ma-ink)); margin-bottom: 8px; }
.ma-upnext h2 { font-size: 22px; color: var(--ma-ink); margin: 0 0 16px; letter-spacing: -.01em; line-height: 1.25; }
.ma-upnext-art { width: 132px; height: 132px; border-radius: 13px; flex-shrink: 0; background-size: cover; background-position: center; }

.ma-section-h { display: flex; align-items: center; gap: 14px; font-family: var(--ma-display); font-size: 21px; font-weight: 700; letter-spacing: 0; color: var(--ma-ink); margin: 54px 0 20px; }
.ma-section-h::before { content: ""; width: 22px; height: 2px; background: var(--ma-accent); }
.ma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ma-card {
  background: var(--ma-surface); border: 0; border-radius: var(--ma-radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ma-shadow);
  transition: box-shadow .3s var(--ma-ease);
  transition: box-shadow .3s var(--ma-ease), transform .3s var(--ma-ease);
}
.ma-card:hover { box-shadow: var(--ma-shadow-lift); transform: translateY(-4px); }
.ma-card-art { height: 168px; background-size: cover; background-position: center; position: relative; transition: transform .6s var(--ma-ease); transform-origin: center; }
.ma-card:hover .ma-card-art { transform: scale(1.035); }
.ma-card:hover { box-shadow: var(--ma-shadow-lift), 0 0 0 1px color-mix(in srgb, var(--ma-accent) 40%, transparent); }
/* editorial placeholder cover: keyline frame + ornament + serif title on the brand ground */
.ma-card-art.ph, .ma-sidecard-art.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.ma-ph-frame { position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--ma-accent) 55%, transparent); border-radius: 8px; pointer-events: none; }
.ma-ph-t { position: relative; font-family: var(--ma-display); font-weight: 600; color: #fff; font-size: 19px; line-height: 1.3; max-width: 86%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ma-ph-t::before { content: "✦"; display: block; color: var(--ma-accent); font-size: 11px; margin-bottom: 9px; }
.ma-sidecard-art.ph .ma-ph-t { font-size: 14.5px; -webkit-line-clamp: 2; }
.ma-sidecard-art.ph .ma-ph-t::before { font-size: 9px; margin-bottom: 6px; }
.ma-sidecard-art.ph .ma-ph-frame { inset: 7px; }
.ma-card-in { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.ma-upgrade-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ma-upgrade-item { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.ma-upgrade-item .ma-btn { width: 100%; }
.ma-upgrade-btns .ma-btn { flex: 1; min-width: 200px; }
.ma-renew-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ma-muted); text-align: center; }
.ma-renew-note a { color: var(--ma-muted); text-decoration: underline; }
.ma-card-in h3 { font-family: var(--ma-display); font-size: 18px; font-weight: 700; color: var(--ma-ink); margin: 0 0 6px; letter-spacing: 0; }
.ma-card-blurb { font-size: 13.5px; color: var(--ma-text); margin: 0 0 16px; line-height: 1.5; flex: 1; }
.ma-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ma-muted); margin-bottom: 12px; }
.ma-card .ma-bar { margin-bottom: 16px; }
.ma-lockbadge {
  position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px; backdrop-filter: blur(4px);
}
.ma-card.locked .ma-card-art { filter: grayscale(.4) brightness(.92); }

/* ---- lesson ---- */
.ma-crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ma-muted); margin-bottom: 18px; }
.ma-crumb a:hover { color: var(--ma-brand-strong); }
.ma-lhead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.ma-lhead h1 { flex: 1; min-width: 220px; font-family: var(--ma-display); font-size: 36px; font-weight: 800; color: var(--ma-ink); margin: 0 0 12px; letter-spacing: -.01em; line-height: 1.16; }
.ma-lmeta { flex-basis: 100%; font-size: 13px; color: var(--ma-muted); margin-bottom: 26px; display: flex; gap: 14px; }
.ma-bookmark-btn {
  flex: 0 0 auto; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--ma-muted); padding: 2px 4px; transition: color .15s, transform .15s;
}
.ma-bookmark-btn:hover { transform: scale(1.1); }
.ma-bookmark-btn.on { color: var(--ma-accent); }
.ma-video { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #0b0c0f; margin-bottom: 28px; }
.ma-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Wire-later placeholder: branded, deliberate — not a dead black box. */
.ma-video.ph { background: var(--ma-hero-grad); }
.ma-video.ph::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; border-radius: 50%;
  transform: translate(-50%, -66%);
  background: color-mix(in srgb, var(--ma-accent) 22%, rgba(255,255,255,.08));
  border: 1px solid color-mix(in srgb, var(--ma-accent) 45%, transparent);
}
.ma-video.ph::after {
  content: '\25B6  Video coming soon'; position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding-top: 34px;
  color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; white-space: pre;
}
.ma-rate { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; opacity: .85; }
.ma-rate:hover { opacity: 1; }
/* the reading room: book measure, loose leading, serif headings, breathing space */
.ma-body { font-size: 17px; line-height: 1.85; color: var(--ma-text); max-width: 660px; }
.ma-body h2, .ma-body h3 { font-family: var(--ma-display); color: var(--ma-ink); letter-spacing: 0; line-height: 1.25; }
.ma-body h2 { font-size: 24px; margin: 40px 0 12px; }
.ma-body h3 { font-size: 20px; margin: 32px 0 10px; }
.ma-body p { margin: 0 0 18px; }
.ma-body strong { color: var(--ma-ink); }
.ma-body ul, .ma-body ol { margin: 0 0 18px; padding-left: 24px; }
.ma-body li { margin-bottom: 8px; }
.ma-body blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--ma-accent); font-family: var(--ma-display); font-style: italic; font-size: 18px; color: var(--ma-ink); }
.ma-body a { color: var(--ma-brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.ma-res { margin: 34px 0 0; background: var(--ma-surface); border-radius: 16px; box-shadow: var(--ma-shadow); padding: 20px 22px; }
.ma-res-h { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ma-muted); margin-bottom: 12px; }
.ma-res-h::before { content: ""; width: 16px; height: 2px; background: var(--ma-accent); }
.ma-res-chip {
  display: inline-flex; align-items: center; gap: 9px; background: var(--ma-surface);
  border: 1px solid var(--ma-line); border-radius: 10px; padding: 11px 15px; font-size: 14px;
  color: var(--ma-ink); font-weight: 600; margin: 0 10px 10px 0;
}
.ma-res-chip:hover { border-color: var(--ma-brand-strong); color: var(--ma-brand-strong); }
.ma-lnav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--ma-line); }
/* the designed ending: hairline-flanked seal, serif next-tease, then the nav (no double rule) */
.ma-lend { margin-top: 54px; text-align: center; }
.ma-lend-seal { display: flex; align-items: center; gap: 16px; }
.ma-lend-seal i { flex: 1; height: 1px; background: color-mix(in srgb, var(--ma-accent) 45%, transparent); }
.ma-lend-seal span { color: var(--ma-accent); font-size: 13px; line-height: 1; }
.ma-lend-t { font-family: var(--ma-display); font-style: italic; font-size: 16.5px; color: var(--ma-text); margin: 18px 0 0; }
.ma-lend-t strong { color: var(--ma-ink); font-weight: 600; }
.ma-lend .ma-lnav { border-top: none; margin-top: 20px; padding-top: 0; }
.ma-done-banner {
  background: color-mix(in srgb, var(--ma-good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ma-good) 40%, transparent);
  border-radius: var(--ma-radius); padding: 26px; text-align: center; color: var(--ma-ink); margin-bottom: 30px;
}
.ma-done-banner h2 { margin: 0 0 6px; font-size: 20px; }
/* completion-tied offer + preview unlock card (it is a .ma-card with no .ma-card-in wrapper) */
.ma-complete-offer { padding: 24px; margin-top: 28px; }
.ma-co-h { font-family: var(--ma-display); font-size: 19px; font-weight: 700; color: var(--ma-ink); margin: 10px 0 8px; letter-spacing: 0; line-height: 1.3; }

/* ---- onboarding (first visit) ---- */
.ma-onboard {
  background: var(--ma-hero-base);
  background: linear-gradient(135deg, var(--ma-hero-base), color-mix(in srgb, var(--ma-hero-base) 62%, #000));
  color: #fff; border-radius: var(--ma-radius); padding: 40px; margin-bottom: 30px;
}
.ma-onboard .ma-eyebrow { color: rgba(255, 255, 255, .85); }
.ma-onboard h1 { font-size: 31px; font-weight: 800; color: #fff; margin: 0 0 12px; letter-spacing: -.02em; }
.ma-onboard p { font-size: 16px; color: rgba(255, 255, 255, .92); margin: 0 0 24px; max-width: 540px; line-height: 1.55; }
.ma-onboard .ma-btn { background: #fff; color: var(--ma-brand-strong); }
.ma-onboard .ma-btn:hover { filter: none; background: #f3f4f7; }
.ma-onboard-meta { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .82); }
.ma-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.ma-step { background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: 14px; padding: 22px; }
.ma-step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--ma-soft); color: var(--ma-brand-strong); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.ma-step h3 { margin: 0 0 6px; color: var(--ma-ink); font-size: 15px; font-weight: 700; }
.ma-step p { margin: 0; font-size: 13.5px; color: var(--ma-text); line-height: 1.55; }

.ma-video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* ---- auth (login) ---- */
.ma-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ma-authcard { background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: 20px; box-shadow: var(--ma-shadow); padding: 40px; max-width: 420px; width: 100%; }
.ma-authcard .ma-brand { padding: 0 0 18px; }
.ma-authcard h1 { font-size: 24px; color: var(--ma-ink); margin: 0 0 8px; letter-spacing: -.01em; }
.ma-authcard p { font-size: 14.5px; color: var(--ma-text); margin: 0 0 22px; line-height: 1.55; }
.ma-input { width: 100%; padding: 14px 16px; border: 1px solid var(--ma-line); border-radius: 11px; font-size: 16px; background: var(--ma-bg); color: var(--ma-ink); margin-bottom: 14px; font-family: inherit; }
.ma-input:focus { outline: none; border-color: var(--ma-brand); }
.ma-authcard .ma-btn { width: 100%; }
.ma-authmsg { margin: 16px 0 0; font-size: 14px; min-height: 1.2em; color: var(--ma-text); text-align: center; }

/* ---- member extras: account, certificate, social ---- */
.ma-certcta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb, var(--ma-good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ma-good) 40%, transparent); border-radius: var(--ma-radius); padding: 18px 22px; margin-bottom: 30px; }
.ma-certcta strong { display: block; color: var(--ma-ink); font-size: 16px; }
/* :not(.ma-btn), because the CTA inside this strip is a <span class="ma-btn">, and a bare `span` rule
   was repainting its label --ma-text on the CTA ground (1.39:1 on the WMB palette). The
   sub-line keeps the muted treatment; the pill keeps its own. */
.ma-certcta span:not(.ma-btn) { color: var(--ma-text); font-size: 13.5px; }
.ma-acctrows { padding: 4px 0; }
.ma-acctrow { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--ma-line); font-size: 14.5px; }
.ma-acctrow:last-child { border-bottom: 0; }
.ma-acctrow > span { color: var(--ma-muted); }
.ma-acctrow strong { color: var(--ma-ink); }
.ma-empty { color: var(--ma-muted); font-size: 14px; padding: 8px 2px; }
.ma-soc { display: flex; align-items: center; gap: 12px; }
.ma-soc strong { display: block; color: var(--ma-ink); font-size: 15px; }
.ma-soc span { color: var(--ma-text); font-size: 13px; }
.ma-soc-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ma-soft); }
.ma-soc-av.ph { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ma-brand-strong); }
.ma-card .ma-soc { padding: 0; }
.ma-quote { font-size: 15px; color: var(--ma-text); line-height: 1.6; margin: 14px 0 0; font-style: italic; }
.ma-certwrap { max-width: 820px; }
.ma-cert { background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: 20px; box-shadow: var(--ma-shadow); padding: 56px 40px; text-align: center; position: relative; }
.ma-cert::before { content: ""; position: absolute; inset: 14px; border: 2px solid var(--ma-soft); border-radius: 12px; pointer-events: none; }
.ma-cert-eyebrow { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--ma-brand-strong); margin-bottom: 26px; }
.ma-cert p { color: var(--ma-muted); font-size: 14px; margin: 14px 0 4px; }
.ma-cert h1 { font-size: 34px; color: var(--ma-ink); margin: 0; letter-spacing: -.02em; }
.ma-cert h2 { font-size: 20px; color: var(--ma-ink); margin: 4px 0 0; }
.ma-cert-date { margin-top: 30px; color: var(--ma-text); font-size: 14px; padding-top: 18px; border-top: 1px solid var(--ma-line); display: inline-block; }
.ma-certbar { display: flex; justify-content: space-between; gap: 14px; margin-top: 22px; }
@media print {
  .ma-nav, .ma-certbar { display: none !important; }
  body { background: #fff; }
  .ma-cert { border: 2px solid var(--ma-brand); box-shadow: none; }
}

/* ---- responsive ---- */
@media (max-width: 920px) {
  .ma-certcta { flex-direction: column; align-items: flex-start; }
  .ma-nav { padding: 0 16px; }
  .ma-nav-link.home { display: none; } /* brand tap goes home; keep Library reachable on mobile */
  .ma-nav-link.month { display: none; } /* the Guided Month keeps its dashboard card on mobile */
  .ma-dash { padding: 20px 16px 90px; }
  .ma-banners, .ma-grid, .ma-grid-3 { grid-template-columns: 1fr !important; }
  .ma-hero { flex-direction: column; align-items: stretch; padding: 24px; gap: 22px; }
  .ma-hero-video { width: 100%; max-width: none; }
  .ma-hero-text h1 { font-size: 25px; }
  .ma-step-row { flex-wrap: wrap; }
  .ma-step-row .ma-btn { width: 100%; }

  .ma-side {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: 60; transform: translateX(-100%);
    visibility: hidden; /* closed drawer leaves the focus order + a11y tree */
    transition: transform .25s ease, visibility .25s;
    box-shadow: var(--ma-shadow);
  }
  .ma-side.open { transform: translateX(0); visibility: visible; }
  .ma-main-inner { padding: 24px 18px 100px; }
  .ma-burger {
    display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0 16px;
    padding: 9px 15px; border-radius: 10px; background: var(--ma-surface);
    border: 1px solid var(--ma-line); color: var(--ma-ink); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .ma-scrim { display: block; position: fixed; inset: 0; background: rgba(8,9,12,.4); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .ma-scrim.show { opacity: 1; pointer-events: auto; }
}

/* Membership cancel save-flow */
.ma-savegrid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; align-items: flex-start; }
.ma-btn.danger { background: transparent; color: #b91c1c; border: 1px solid #fecaca; }
.ma-btn.danger:hover { background: #fef2f2; }

/* Loss-aversion panel: what the member gives up if they cancel (real progress + standing) */
.ma-loss { border: 1px solid var(--ma-line); border-radius: 16px; padding: 16px 18px; margin: 4px 0 18px;
  background: color-mix(in srgb, var(--ma-brand) 5%, var(--ma-surface, #fff)); }
.ma-loss-head { margin: 0 0 12px; font-size: 15px; color: var(--ma-ink, #14110f); }
.ma-loss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 18px; }
.ma-loss-stat { display: flex; flex-direction: column; line-height: 1.15; }
.ma-loss-n { font-size: 26px; font-weight: 800; color: var(--ma-brand-strong); }
.ma-loss-l { font-size: 12px; color: var(--ma-muted, #6b7280); font-weight: 600; margin-top: 2px; }
.ma-loss-cert { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ma-ink, #14110f);
  padding-top: 12px; border-top: 1px dashed var(--ma-line); }

/* Gamification strip */
.ma-gamestrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: 16px; padding: 14px 18px; margin: 4px 0 18px; }
.ma-gm-stats { display: flex; gap: 22px; }
.ma-gm-stat { display: flex; flex-direction: column; line-height: 1.1; }
.ma-gm-n { font-size: 24px; font-weight: 800; color: var(--ma-ink); }
.ma-gm-l { font-size: 12px; color: var(--ma-muted); font-weight: 600; }
.ma-gm-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ma-badge { font-size: 22px; filter: grayscale(1); opacity: .35; transition: filter .2s, opacity .2s; }
.ma-badge.on { filter: none; opacity: 1; }

/* Lesson quiz */
.ma-quiz { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--ma-line); border-radius: 14px; background: var(--ma-surface); }
.ma-quiz-h { font-weight: 800; font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.ma-q-score { font-weight: 600; font-size: 12px; color: var(--ma-muted); }
.ma-q { margin-bottom: 16px; }
.ma-q-t { font-weight: 600; margin-bottom: 8px; }
.ma-q-t em { color: var(--ma-muted); font-weight: 500; font-size: 13px; }
.ma-qopt { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
.ma-q-fb { font-size: 13px; margin-top: 6px; }
.ma-q-fb.ok { color: #15803d; } .ma-q-fb.no { color: #b91c1c; }
.ma-quiz-result { margin-top: 12px; }

/* Lesson workbook (required output) */
.ma-workbook { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--ma-line); border-radius: 14px; background: var(--ma-surface); }
.ma-wb-field { margin-bottom: 14px; }
.ma-wb-label { display: block; font-weight: 600; margin-bottom: 6px; }
.ma-wb-in { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--ma-line); border-radius: 10px; font: inherit; resize: vertical; box-sizing: border-box; }
.ma-wb-status { margin-left: 10px; font-size: 13px; color: var(--ma-muted); }

/* Accountability pod */
.ma-podmates { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ma-podmate { background: color-mix(in srgb, var(--ma-brand) 12%, #fff); color: var(--ma-ink); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.ma-checkin-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.ma-checkins { display: flex; flex-direction: column; gap: 10px; }
.ma-checkin { border-left: 3px solid var(--ma-line); padding: 2px 0 2px 12px; }
.ma-checkin span { color: var(--ma-muted); font-size: 12px; margin-left: 6px; }
.ma-checkin p { margin: 4px 0 0; }

/* AI tutor */
.ma-ai { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--ma-line); border-radius: 14px; background: var(--ma-surface); }
.ma-ai-answer { margin-top: 12px; white-space: pre-wrap; line-height: 1.6; }
.ma-ai-answer:empty { display: none; }

/* Lesson notes (freeform, per member) */
.ma-notes { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--ma-line); border-radius: 14px; background: var(--ma-surface); }

/* Bookmarked lessons (dashboard rail) */
.ma-bm-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 30px; }
.ma-bm-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--ma-surface); border: 1px solid var(--ma-line); font-size: 14px; color: var(--ma-ink); transition: border-color .15s; }
.ma-bm-row:hover { border-color: var(--ma-brand); }
.ma-bm-star { flex: 0 0 auto; color: var(--ma-accent); }
.ma-bm-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-bm-mod { flex: 0 0 auto; font-size: 12px; color: var(--ma-muted); }

/* "Your first 7 days" activation checklist (lib/retention/activation.ts) */
.ma-activation { margin: 4px 0 22px; border: 1px solid color-mix(in srgb, var(--ma-brand) 30%, var(--ma-line)); }
.ma-act-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ma-act-head h2, .ma-act-head h3 { margin: 0; font-size: 16px; font-family: inherit; letter-spacing: 0; }
.ma-act-count { font-size: 12.5px; font-weight: 700; color: var(--ma-muted); }
.ma-act-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ma-act-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ma-line); color: inherit; text-decoration: none; font-size: 14px; }
a.ma-act-item:hover { border-color: var(--ma-brand); }
.ma-act-item.primary { border-color: var(--ma-brand); background: var(--ma-soft, color-mix(in srgb, var(--ma-brand) 8%, transparent)); font-weight: 700; }
/* Done rows mute via a solid AA color, never via opacity (a faded row reads at ~2.6:1).
   The strike + green check carry the done-state; the label stays legible. */
.ma-act-item.done { color: var(--ma-muted); text-decoration: none; }
.ma-act-item.done.primary { background: transparent; border-color: var(--ma-line); font-weight: 600; }
.ma-act-item.done .ma-act-label { text-decoration: line-through; }
.ma-act-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ma-line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.ma-act-check.on { background: var(--ma-brand-strong); border-color: var(--ma-brand-strong); }
.ma-act-min { font-style: normal; font-weight: 600; font-size: 12px; color: var(--ma-text); margin-left: 8px; }

/* PWA install prompt */
.ma-install { position: relative; margin: 4px 0 18px; }
.ma-install h3 { margin: 0 0 6px; font-size: 16px; padding-right: 28px; }
.ma-install .ma-card-blurb { margin: 0 0 10px; }
.ma-install-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--ma-muted); cursor: pointer; padding: 4px 6px; }

/* Onboarding intent capture (first login only, dismissible) */
.ma-intent { margin: 4px 0 18px; }
.ma-intent h3 { margin: 0 0 14px; font-size: 17px; color: var(--ma-ink); }
.ma-intent-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ma-intent-skip { background: none; border: 0; color: var(--ma-muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.ma-intent-skip:hover { color: var(--ma-ink); text-decoration: underline; }

/* Command palette (⌘K / Ctrl+K) */
.ma-palette { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.ma-palette[hidden] { display: none; }
.ma-palette-scrim { position: absolute; inset: 0; background: rgba(8, 9, 12, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ma-palette-box {
  position: relative; width: 100%; max-width: 560px; margin: 0 20px; background: var(--ma-surface);
  border: 1px solid var(--ma-line); border-radius: 16px; box-shadow: var(--ma-shadow-lift); overflow: hidden;
}
.ma-palette-in {
  width: 100%; box-sizing: border-box; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--ma-line);
  background: transparent; color: var(--ma-ink); font: inherit; font-size: 16px;
}
.ma-palette-in:focus { outline: none; }
.ma-palette-list { max-height: 360px; overflow-y: auto; padding: 8px; }
.ma-palette-item { display: flex; align-items: baseline; gap: 10px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--ma-text); font-size: 14px; }
.ma-palette-item .ma-palette-label { color: var(--ma-ink); font-weight: 600; }
.ma-palette-item .ma-palette-sub { margin-left: auto; color: var(--ma-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-palette-item.sel, .ma-palette-item:hover { background: var(--ma-soft); }
.ma-palette-empty { padding: 24px; text-align: center; color: var(--ma-muted); font-size: 14px; }
@media (max-width: 640px) {
  .ma-palette { padding-top: 8vh; }
  .ma-palette-box { margin: 0 14px; }
}

/* Monthly leaderboard + challenge mini-board rows */
.ma-lb, .ma-ch-board { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ma-lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; }
.ma-lb-row.you { background: color-mix(in srgb, var(--ma-brand) 10%, transparent); font-weight: 700; }
.ma-lb-rank { flex: 0 0 26px; font-weight: 800; color: var(--ma-muted); }
.ma-lb-row.you .ma-lb-rank { color: var(--ma-brand-strong); }
.ma-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-lb-pts { font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Monthly challenge card */
.ma-ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ma-ch-head h3 { margin: 0 0 4px; font-size: 16px; }
.ma-ch-meta { font-size: 12.5px; font-weight: 700; color: var(--ma-muted); }
.ma-ch-prompt { margin: 10px 0 12px; }
.ma-ch-board { margin-top: 14px; margin-bottom: 0; }

/* Library (brand catalogue): continue strip, product tiles, view-all */
.ma-continue { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; padding: 16px 24px; border-radius: 999px; background: var(--ma-surface); border: 0; box-shadow: var(--ma-shadow); text-decoration: none; color: var(--ma-ink); font-weight: 600; transition: box-shadow .3s var(--ma-ease), transform .3s var(--ma-ease); }
.ma-continue:hover { box-shadow: var(--ma-shadow-lift); transform: translateY(-2px); }
.ma-continue-k { flex: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ma-brand-strong); }
.ma-continue-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-continue-a { flex: 0 0 auto; color: var(--ma-brand-strong); font-weight: 800; }
a.ma-tile { display: block; text-decoration: none; color: inherit; }
.ma-tile .ma-btn { pointer-events: none; }
.ma-tile.locked .ma-btn { pointer-events: auto; }
.ma-tile-hit { display: block; text-decoration: none; color: inherit; }
.ma-viewall { display: block; margin: 12px 0 22px; font-weight: 700; text-decoration: none; color: var(--ma-brand-strong); }
.ma-viewall:hover { text-decoration: underline; }

/* Library rows (Netflix-style): horizontal scroll-snap, fixed-width tiles */
.ma-row { display: flex; gap: 22px; overflow-x: auto; padding: 4px 4px 18px; margin: 0 -4px 26px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ma-row > .ma-card { flex: 0 0 330px; scroll-snap-align: start; }
.ma-row > .ma-bundle { flex: 0 0 400px; }
.ma-row .ma-card-art { height: 150px; }

/* Tier bundle card: the row's leading offer */
.ma-bundle { border: 1px solid color-mix(in srgb, var(--ma-accent) 45%, transparent); box-shadow: 0 2px 6px rgba(16,24,40,.05), 0 18px 50px color-mix(in srgb, var(--ma-accent) 14%, transparent); }
.ma-bundle-stack { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ma-bundle-stack li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ma-text); line-height: 1.4; }
.ma-bundle-stack li::before { content: "✓"; position: absolute; left: 0; color: var(--ma-accent); font-weight: 800; }

/* Locked-module curriculum (visible lesson list + free previews) */
.ma-cur-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.ma-cur-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; color: var(--ma-text); }
.ma-cur-row .ma-cur-title { flex: 1; min-width: 0; }
.ma-cur-lock { opacity: .5; font-size: 12px; flex: 0 0 auto; }
.ma-cur-min { flex: 0 0 auto; font-size: 12px; color: var(--ma-muted); }
a.ma-cur-row.preview { background: color-mix(in srgb, var(--ma-accent) 9%, transparent); color: var(--ma-ink); font-weight: 600; transition: background .15s; }
a.ma-cur-row.preview:hover { background: color-mix(in srgb, var(--ma-accent) 16%, transparent); }
.ma-cur-badge { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-ink); background: var(--ma-accent); padding: 3px 8px; border-radius: 99px; }
@media (max-width: 920px) {
  .ma-row > .ma-card { flex-basis: 84vw; }
  .ma-row > .ma-bundle { flex-basis: 88vw; }
}

/* Off-screen row cards skip layout+paint until scrolled near (perf: many cover images) */
.ma-row > .ma-card { content-visibility: auto; contain-intrinsic-size: 330px 430px; }

/* Resource-hub dashboard (library offers): banners row -> main column + product sidebar */
.ma-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.ma-col-side { position: sticky; top: calc(var(--ma-nav-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.ma-col-side .ma-section-h { margin: 6px 0 2px; }
.ma-hero-slim { padding: 36px 34px; }
.ma-hero-slim .ma-hero-text h1 { font-size: 32px; }

/* Journey modules as step rows: art thumb left, copy, CTA right (the AC step-row shape) */
.ma-mrows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }
.ma-mrow { display: flex; align-items: center; gap: 18px; background: var(--ma-surface); border-radius: 16px; box-shadow: var(--ma-shadow); padding: 14px 18px 14px 14px; transition: box-shadow .3s var(--ma-ease), transform .3s var(--ma-ease); }
.ma-mrow:hover { box-shadow: var(--ma-shadow-lift); transform: translateY(-2px); }
.ma-mrow-art { flex: 0 0 96px; height: 60px; border-radius: 10px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
/* row-thumb scale of the editorial placeholder: tiny frame, no ornament, 2-line title */
.ma-mrow-art.ph { padding: 6px; }
.ma-mrow-art.ph .ma-ph-frame { inset: 4px; border-radius: 5px; }
.ma-mrow-art.ph .ma-ph-t { font-size: 10.5px; line-height: 1.25; -webkit-line-clamp: 2; }
.ma-mrow-art.ph .ma-ph-t::before { content: none; }
.ma-mrow-art.ph { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 20px; }
.ma-mrow-main { flex: 1; min-width: 0; }
.ma-mrow-main h3 { margin: 0 0 3px; font-size: 15.5px; color: var(--ma-ink); letter-spacing: -.01em; }
.ma-mrow-main p { margin: 0 0 4px; font-size: 13px; color: var(--ma-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ma-mrow-meta { font-size: 12px; color: var(--ma-muted); }
.ma-mrow .ma-btn { flex: 0 0 auto; }

/* Sidebar widget cards: title bar (brand), art, body — the AC "Your Products" rail */
.ma-sidecard { background: var(--ma-surface); border-radius: 16px; overflow: hidden; box-shadow: var(--ma-shadow); }
.ma-sidecard-bar { background: var(--ma-brand-strong); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-align: center; padding: 10px 14px; }
.ma-sidecard-art { height: 120px; background-size: cover; background-position: center; position: relative; }
.ma-sidecard-in { padding: 16px 18px 18px; }
.ma-sidecard-in .ma-btn { width: 100%; }
.ma-sidecard-in .ma-bundle-stack { margin-bottom: 12px; }
.ma-sidecard-in .ma-price { font-size: 17px; margin: 0 0 10px; }
/* "Because you own X": the anchored cross-sell sidecard (top of the rail). The bar carries the
   anchor label, so it reads as a reason, not a pitch: accent ground, room for a longer title. */
.ma-anchor-bar { background: var(--ma-accent, var(--ma-brand)); font-size: 12px; line-height: 1.35; text-transform: none; }
.ma-anchored .ma-anchor-title { margin: 0 0 6px; font-size: 15.5px; line-height: 1.3; }
.ma-anchored .ma-card-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1020px) {
  .ma-cols { grid-template-columns: 1fr; }
  .ma-col-side { position: static; }
}
@media (max-width: 920px) {
  .ma-mrow { flex-wrap: wrap; }
  .ma-mrow-art { flex-basis: 72px; height: 46px; }
}

/* ---- dark theme ----
   The surface/text/border scale itself is swapped inline (app.js applyTheme — it has to win over
   these rules, since the brand palette is also inline). This block only covers what the variables
   don't already carry: shadow tuning (the light-mode shadow rgba reads as a faint gray halo on a
   dark surface instead of a shadow) and the couple of hard-coded rgba() overlays. */
:root[data-theme="dark"] {
  --ma-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 34px rgba(0, 0, 0, .5);
  --ma-shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 22px 60px rgba(0, 0, 0, .65);
}
:root[data-theme="dark"] .ma-card.locked .ma-card-art { filter: grayscale(.4) brightness(.75); }
:root[data-theme="dark"] .ma-input { background: var(--ma-bg); }

/* ---- module-completion celebration: deep brand ground, gold seal, serif. Opacity fade only
   (the global reduced-motion rule makes it instant); no confetti, no badges. ---- */
.ma-cele {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ma-hero-base) 96%, #000), color-mix(in srgb, var(--ma-hero-base) 55%, #000));
  opacity: 0; transition: opacity .45s var(--ma-ease);
}
.ma-cele.show { opacity: 1; }
/* editorial keyline frame, same move as the hero */
.ma-cele::before {
  content: ""; position: absolute; inset: 14px; border-radius: 18px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--ma-accent) 35%, transparent);
}
.ma-cele-card { position: relative; max-width: 480px; text-align: center; color: #fff; }
.ma-cele-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid var(--ma-accent); margin-bottom: 26px;
}
.ma-cele-star { color: var(--ma-accent); font-size: 22px; line-height: 1; }
.ma-cele-h { font-family: var(--ma-display); font-size: 36px; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: -.01em; line-height: 1.15; }
.ma-cele-sub { font-family: var(--ma-display); font-size: 19px; color: rgba(255,255,255,.92); margin: 0 0 10px; line-height: 1.4; }
.ma-cele-next { font-size: 14px; color: color-mix(in srgb, var(--ma-accent) 75%, #fff); margin: 0 0 30px; }
.ma-cele .ma-btn { background: var(--ma-accent); color: #171310; box-shadow: none; }
.ma-cele-home { display: block; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 3px; }
.ma-cele-home:hover { color: #fff; }
.ma-cele a:focus-visible, .ma-cele button:focus-visible { outline-color: var(--ma-accent); }

/* ---- THE FINISHER'S REVEAL: the detail built for the members who go all the way (Morris,
   Key #1, p.32: the carved Beast heads most guests never look up to see). Same visual family
   as the celebration: deep brand ground, gold keyline, gold seal, display serif. No badge, no
   price, no lock. Renders for nobody until the journey is finished. ---- */
.ma-reveal-card {
  position: relative; display: block; margin: 0 0 30px; padding: 40px 36px 34px; text-align: center;
  border-radius: var(--ma-radius); color: #fff; box-shadow: var(--ma-shadow-lift);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ma-hero-base) 96%, #000), color-mix(in srgb, var(--ma-hero-base) 55%, #000));
}
.ma-reveal-keyline { position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--ma-accent) 35%, transparent); border-radius: 14px; pointer-events: none; }
.ma-reveal-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--ma-accent);
  color: var(--ma-accent); font-size: 15px; line-height: 1; margin-bottom: 18px;
}
.ma-reveal-eyebrow { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: color-mix(in srgb, var(--ma-accent) 80%, #fff); margin-bottom: 10px; }
.ma-reveal-h { display: block; font-family: var(--ma-display); font-size: 29px; font-weight: 700; line-height: 1.18; color: #fff; margin: 0 0 12px; }
.ma-reveal-b { display: block; max-width: 470px; margin: 0 auto 24px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.92); text-wrap: balance; }
.ma-reveal-card .ma-reveal-cta { background: var(--ma-accent); color: #171310; box-shadow: none; }
.ma-reveal-card:hover .ma-reveal-cta { filter: brightness(1.05); }
.ma-reveal-card:focus-visible { outline-color: var(--ma-accent); }
/* the reading room it opens into: centred editorial head, then the book measure */
.ma-revealpage { max-width: 820px; }
.ma-reveal-head { text-align: center; margin: 6px 0 42px; }
.ma-reveal-head .ma-eyebrow { margin-top: 14px; }
.ma-reveal-head h1 { font-family: var(--ma-display); font-size: 37px; font-weight: 800; color: var(--ma-ink); margin: 0 0 14px; letter-spacing: -.01em; line-height: 1.16; }
.ma-reveal-lede { font-family: var(--ma-display); font-style: italic; font-size: 17.5px; line-height: 1.6; color: var(--ma-text); margin: 0 auto; max-width: 520px; text-wrap: balance; }
/* the reading column stays one measure wide: body, resources and the closing seal all agree */
.ma-revealpage .ma-body, .ma-revealpage .ma-res, .ma-revealpage .ma-lend { max-width: 660px; margin-left: auto; margin-right: auto; }
.ma-revealpage .ma-lnav { justify-content: center; }

/* ---- THE CALLBACK: a late lesson paying off an early one, quoted in the member's own words.
   An inset block inside the reading room, never a popup, never a nag. ---- */
.ma-callback {
  position: relative; margin: 32px 0; padding: 22px 48px 22px 26px;
  border-left: 2px solid var(--ma-accent); border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--ma-accent) 8%, transparent);
}
.ma-callback-mark { position: absolute; top: 18px; right: 22px; color: var(--ma-accent); font-size: 12px; line-height: 1; }
/* --ma-text, not --ma-muted: the accent tint under this block eats the muted grey's contrast
   (4.23:1 on the default palette). --ma-text clears 4.5 even against a very dark accent. */
.ma-callback-eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ma-text); margin: 0 0 9px; }
.ma-callback-q { font-family: var(--ma-display); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--ma-ink); margin: 0; }

/* ---- My Blueprint: the member's saved workbook answers, read back as one plan ---- */
.ma-nav-link { white-space: nowrap; }
.ma-bp { max-width: 820px; }
.ma-bp-head { margin: 6px 0 40px; }
.ma-bp-head h1 { font-family: var(--ma-display); font-size: 40px; font-weight: 800; color: var(--ma-ink); margin: 0 0 10px; letter-spacing: -.01em; }
.ma-bp-head p { font-size: 15.5px; color: var(--ma-text); margin: 0; }
.ma-bp-group { background: var(--ma-surface); border-radius: var(--ma-radius); box-shadow: var(--ma-shadow); padding: 28px 30px; margin-bottom: 22px; }
.ma-bp-lesson { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--ma-line); padding-bottom: 14px; margin-bottom: 18px; }
.ma-bp-lesson h2 { font-family: var(--ma-display); font-size: 21px; font-weight: 700; color: var(--ma-ink); margin: 0; }
.ma-bp-edit { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-brand-strong); }
.ma-bp-edit:hover { text-decoration: underline; }
.ma-bp-entry { margin-bottom: 20px; }
.ma-bp-entry:last-child { margin-bottom: 0; }
.ma-bp-q { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ma-muted); margin: 0 0 6px; }
.ma-bp-a { font-family: var(--ma-display); font-style: italic; font-size: 17px; line-height: 1.65; color: var(--ma-ink); margin: 0; white-space: pre-wrap; }
.ma-bp-empty { background: var(--ma-surface); border-radius: var(--ma-radius); box-shadow: var(--ma-shadow); padding: 40px 34px; text-align: center; }
.ma-bp-empty p { font-size: 15px; color: var(--ma-text); line-height: 1.6; margin: 0 auto 14px; max-width: 480px; }
.ma-bp-empty .ma-btn { margin-top: 6px; }
/* the quiet ascension bridge: surface card, thin gold keyline, one line, one door */
/* ---- Match Engine (#match) ---- */
.ma-match-runs { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ma-brand-strong); background: color-mix(in srgb, var(--ma-accent) 18%, transparent); border-radius: 999px; padding: 6px 14px; margin-bottom: 22px; }
.ma-match-form { display: grid; gap: 8px; max-width: 640px; margin-bottom: 26px; }
.ma-match-form label { font-size: 13px; font-weight: 700; color: var(--ma-ink); margin-top: 10px; }
.ma-match-form input, .ma-match-form textarea { font: inherit; font-size: 16px; padding: 11px 13px; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-surface); color: var(--ma-ink); }
.ma-match-form .ma-btn { margin-top: 14px; justify-self: start; }
.ma-match-hint { font-size: 13px; color: var(--ma-muted); }
.ma-match-note { font-size: 15px; color: var(--ma-text); background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: var(--ma-radius); padding: 16px 18px; max-width: 640px; }
.ma-match-pair { background: var(--ma-surface); border: 1px solid var(--ma-line); border-left: 3px solid var(--ma-accent); border-radius: var(--ma-radius); padding: 20px 22px; margin: 16px 0; }
.ma-match-pair h3 { margin: 0 0 8px; font-size: 17px; color: var(--ma-ink); }
.ma-match-cand, .ma-match-angle { font-size: 13px; color: var(--ma-muted); margin: 2px 0; }
.ma-match-receipt { border-top: 1px dashed var(--ma-line); padding: 10px 0; font-size: 14px; color: var(--ma-text); }
.ma-match-receipt a { font-size: 13px; font-weight: 600; }
.ma-match-signal, .ma-match-why { font-size: 13px; color: var(--ma-muted); }
.ma-match-corner { font-size: 14px; margin-top: 10px; }
.ma-match-gaps { font-size: 14.5px; color: var(--ma-text); padding-left: 20px; }
.ma-match-gaps-h { font-size: 15px; margin: 18px 0 6px; color: var(--ma-ink); }
.ma-match-fence { font-size: 13px; color: var(--ma-muted); border-top: 1px solid var(--ma-line); padding-top: 12px; }
/* Fenced angles, rendered whole. This is the buyer-protection surface: it carries the one thing on
   the page that can cost a nurse or a teacher their position, so it is set at body size and given
   its own heading rather than shrunk into a footnote. */
.ma-match-fence-h { font-size: 15px; margin: 20px 0 8px; color: var(--ma-ink); }
.ma-match-fences { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ma-match-fences li { border-left: 2px solid var(--ma-line); padding: 2px 0 2px 14px; }
.ma-match-fences b { display: block; font-size: 14.5px; color: var(--ma-ink); margin-bottom: 3px; }
.ma-match-fences span { display: block; font-size: 14px; line-height: 1.6; color: var(--ma-text); }
.ma-match-fence-note { font-size: 13px; line-height: 1.6; color: var(--ma-muted); border-top: 1px solid var(--ma-line); margin-top: 16px; padding-top: 12px; }
.ma-match-manual { font-size: 15px; color: var(--ma-text); }
.ma-match-past { display: block; font: inherit; font-size: 14px; text-align: left; background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: 10px; padding: 10px 14px; margin: 6px 0; cursor: pointer; color: var(--ma-ink); width: 100%; max-width: 640px; }
.ma-match-past:hover { border-color: var(--ma-brand-strong); }
.ma-match-loading { color: var(--ma-muted); }
.ma-match-req { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ma-surface); border: 1px dashed var(--ma-line); border-radius: 10px; padding: 10px 14px; margin: 6px 0; max-width: 640px; font-size: 14px; }
.ma-match-req.ready { border-style: solid; border-color: var(--ma-brand-strong); }
.ma-match-req-status { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ma-muted); }
.ma-match-req.ready .ma-match-req-status { color: var(--ma-brand-strong); }
.ma-match-queued { font-size: 15px; background: color-mix(in srgb, var(--ma-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ma-accent) 45%, transparent); border-radius: var(--ma-radius); padding: 16px 18px; max-width: 640px; }

.ma-bp-bridge { margin-top: 46px; background: var(--ma-surface); border: 1px solid color-mix(in srgb, var(--ma-accent) 45%, transparent); border-radius: var(--ma-radius); padding: 32px 34px; text-align: center; }
.ma-bp-bridge h3 { font-family: var(--ma-display); font-size: 21px; font-weight: 700; color: var(--ma-ink); margin: 0 0 8px; }
.ma-bp-bridge p { font-size: 14.5px; color: var(--ma-text); margin: 0 0 20px; }
@media (max-width: 920px) {
  .ma-nav-right { gap: 14px; }
  .ma-cele-h { font-size: 27px; }
  .ma-cele-sub { font-size: 17px; }
  .ma-bp-head h1 { font-size: 30px; }
  .ma-bp-group, .ma-bp-empty, .ma-bp-bridge { padding: 22px 18px; }
  .ma-reveal-card { padding: 30px 20px 26px; }
  .ma-reveal-h { font-size: 23px; }
  .ma-reveal-head h1 { font-size: 27px; }
  .ma-reveal-lede { font-size: 16px; }
  .ma-callback { padding: 20px 42px 20px 20px; }
  .ma-callback-q { font-size: 17px; }
  .ma-bp-lesson { flex-wrap: wrap; }
  /* display-serif scale for phone columns: big enough to lead, small enough to keep its line */
  .ma-lhead h1 { font-size: 27px; }
  .ma-greet h1 { font-size: 27px; }
  .ma-section-h { font-size: 19px; margin: 40px 0 16px; }
  .ma-hero-slim .ma-hero-text h1 { font-size: 25px; }
  .ma-cert { padding: 40px 22px; }
  .ma-cert h1 { font-size: 26px; }
  .ma-lnav, .ma-certbar { flex-wrap: wrap; }
}

/* ---- touch ergonomics: interactive targets hold 44px on phones and coarse pointers ---- */
@media (max-width: 920px), (pointer: coarse) {
  .ma-nav-link, .ma-acct-btn, .ma-back, .ma-crumb a, .ma-bp-edit,
  .ma-viewall:not(.ma-mapall) { display: inline-flex; align-items: center; min-height: 44px; }
  .ma-nav-brand { min-height: 44px; }
  /* the overlay's quiet exit keeps its own line under the button (inline-flex would ride beside it) */
  .ma-cele-home { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .ma-acct-menu a { display: flex; align-items: center; min-height: 44px; }
  .ma-btn, .ma-burger, .ma-navlesson, .ma-act-item, a.ma-cur-row, .ma-res-chip, .ma-qopt,
  .ma-continue { min-height: 44px; }
  .ma-rate { min-height: 34px; min-width: 44px; padding: 6px 12px; }
  .ma-install-x { width: 44px; height: 44px; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; padding: 0; }
  .ma-install h3 { padding-right: 48px; }
}

/* narrow phones: keep the nav on one calm line and give the overlay its breathing room */
@media (max-width: 480px) {
  .ma-nav { padding: 0 14px; }
  .ma-nav-right { gap: 12px; }
  .ma-nav-brand { font-size: 16px; gap: 8px; }
  .ma-banner { flex-wrap: wrap; }
  .ma-cele { padding: 20px 16px; }
  .ma-cele::before { inset: 8px; }
}

/* ---- The Guided Month (#month): roadmap plan + week cards ---- */
.ma-match-form select { font: inherit; font-size: 16px; padding: 11px 13px; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-surface); color: var(--ma-ink); }
.ma-month-framing { font-size: 16px; color: var(--ma-text); max-width: 640px; margin-bottom: 10px; }
.ma-month-start { font-size: 15px; color: var(--ma-text); background: color-mix(in srgb, var(--ma-accent) 10%, transparent); border-radius: 10px; padding: 12px 16px; max-width: 640px; margin-bottom: 14px; }
.ma-month-week { background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: var(--ma-radius); padding: 16px 18px; margin: 0 0 12px; max-width: 640px; }
.ma-month-week h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--ma-brand-strong); margin: 0 0 8px; }
.ma-month-note { font-size: 14px; color: var(--ma-muted); margin: 0 0 10px; }
.ma-month-days { display: flex; flex-direction: column; gap: 6px; }
.ma-month-day { display: block; font-size: 14px; color: var(--ma-ink); background: color-mix(in srgb, var(--ma-accent) 8%, transparent); border: 1px solid var(--ma-line); border-radius: 8px; padding: 8px 12px; text-decoration: none; }
a.ma-month-day:hover { border-color: var(--ma-brand-strong); }
.ma-month-regen { max-width: 640px; margin-top: 18px; }
.ma-month-regen summary { cursor: pointer; font-size: 14px; color: var(--ma-muted); margin-bottom: 10px; }

/* ---- desktop left rail (owner call 2026-08-23): the nav becomes a fixed sidebar so the whole
   area reads in one glance; phones and tablets keep the top bar untouched ---- */
@media (min-width: 1100px) {
  :root { --ma-nav-h: 0px; } /* nothing sticky sits under a top bar any more */
  .ma-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 236px; height: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px;
    padding: 26px 16px 20px;
    background: var(--ma-surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: none; border-right: 1px solid var(--ma-line);
  }
  .ma-nav-brand { margin: 0 8px 14px; }
  .ma-nav-right { flex-direction: column; align-items: stretch; gap: 4px; flex: 1; min-height: 0; }
  .ma-nav-link { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
  .ma-nav-link:hover { background: var(--ma-soft); color: var(--ma-ink); }
  .ma-theme-btn { margin-top: auto; align-self: flex-start; margin-left: 8px; }
  .ma-acct { margin: 6px 4px 0; }
  .ma-acct-btn { width: 100%; justify-content: space-between; }
  /* the account menu opens UPWARD from the rail's foot instead of off the bottom of the screen */
  .ma-acct-menu { bottom: calc(100% + 6px); top: auto; left: 0; right: auto; min-width: 100%; }
  main#ma-view { margin-left: 236px; min-width: 0; }
}

/* ---- lesson-sidebar accordion: programs first, lessons within (owner call 2026-08-23) ---- */
.ma-side-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ma-muted); margin: 18px 0 6px; }
.ma-nav-modhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ma-ink); background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.ma-nav-modhead:hover { background: var(--ma-soft); }
.ma-nav-mod:not(.open) .ma-nav-modhead { color: var(--ma-text); }
.ma-modhead-t { min-width: 0; }
.ma-modhead-n { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--ma-muted); display: inline-flex; align-items: center; gap: 5px; }
.ma-modhead-chev { font-size: 10px; }

/* ---- rail "My Programs": the nav holds the whole shelf on desktop; phones keep the burger
   and dashboard cards, so this block only exists in rail mode ---- */
.ma-nav-programs { display: none; }
@media (min-width: 1100px) {
  .ma-nav-programs { display: flex; flex-direction: column; margin-top: 8px; min-height: 0; }
  .ma-nav-programs-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 10px 0 6px; padding: 6px 8px; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ma-muted); background: none; border: 0; border-radius: 8px; cursor: pointer; }
  .ma-nav-programs-h:hover { background: var(--ma-soft); color: var(--ma-ink); }
  .ma-nav-programs-chev { font-size: 12px; opacity: .8; }
  .ma-nav-programs-list { min-height: 0; overflow-y: auto; }
  .ma-nav-programs.closed .ma-nav-programs-list { display: none; }
  .ma-nav-plink { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ma-text); }
  .ma-nav-plink:hover { background: var(--ma-soft); color: var(--ma-ink); }
  .ma-nav-plink-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ma-nav-plink-n { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--ma-muted); }
}

/* ---- My Blueprint as a printable plan document ---- */
.ma-bp-tools { margin: 0 0 16px; }
@media print {
  .ma-nav, .ma-bp-tools, .ma-bp-bridge, .ma-bp-edit, .ma-burger, .ma-crumb { display: none !important; }
  main#ma-view { margin-left: 0 !important; }
  body { background: #fff; }
  .ma-bp-group { break-inside: avoid; border: none; box-shadow: none; }
}

/* ---- Completion Challenge run card ---- */
/* Sits on the activation card's chassis so the member home keeps one card language. The clock is
   the only element allowed to shout: it is the mechanic, and a deadline that reads like body copy
   does not move anybody. */
.ma-challenge { border-color: color-mix(in srgb, var(--ma-brand) 45%, var(--ma-line)); }
.ma-cc-line { margin: 12px 0 4px; font-size: 15px; font-weight: 600; }
.ma-cc-sub { margin: 0; font-size: 14px; color: var(--ma-muted); line-height: 1.55; }
.ma-cc-clock {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-size: 15px; font-weight: 700; color: var(--ma-brand); white-space: nowrap;
}
.ma-cc-grace { display: inline-block; margin-top: 4px; font-size: 13px; opacity: 0.8; }
.ma-cc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: 5px;
  background: color-mix(in srgb, var(--ma-brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ma-brand) 30%, var(--ma-line));
  color: var(--ma-brand); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) { .ma-cc-clock { transition: color 0.2s ease; } }

/* ---- The decision page (#decision) ---- */
/* The member's own words sit above everything that is for sale, and the doors are deliberately
   unequal: the primary one gets the weight, the refund is a text link. */
.ma-decision { max-width: 720px; margin: 0 auto; }
.ma-dec-h { font-size: 26px; line-height: 1.25; margin: 6px 0 18px; }
.ma-dec-proof {
  margin: 0 0 22px; padding: 16px 18px; border-left: 3px solid var(--ma-brand);
  background: color-mix(in srgb, var(--ma-brand) 6%, transparent);
  border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.6; font-style: italic;
}
.ma-dec-proof cite { display: block; margin-top: 8px; font-size: 12px; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ma-muted); }
.ma-dec-credit { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }
.ma-dec-credit.expired { color: var(--ma-muted); font-size: 15px; }
.ma-dec-amt { font-size: 34px; font-weight: 800; color: var(--ma-brand); line-height: 1; }
.ma-dec-meta { font-size: 15px; color: var(--ma-muted); }
.ma-dec-meta .ma-cc-clock { display: block; margin-top: 3px; font-size: 13px; }
.ma-doors { display: grid; gap: 16px; }
.ma-door { border: 1px solid var(--ma-line); border-radius: 14px; padding: 20px; background: var(--ma-card); }
.ma-door.primary { border-color: color-mix(in srgb, var(--ma-brand) 55%, var(--ma-line)); border-width: 2px; padding: 24px; }
.ma-door-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ma-door-head h3 { margin: 0; font-size: 18px; }
.ma-door.primary .ma-door-head h3 { font-size: 21px; }
.ma-door-price { font-size: 15px; font-weight: 700; color: var(--ma-muted); white-space: nowrap; }
.ma-door-blurb { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ma-muted); }
.ma-door-list { margin: 14px 0 18px; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.ma-door-list li { margin-bottom: 7px; }
.ma-door .ma-btn { width: 100%; text-align: center; }
.ma-dec-quiet { margin: 22px 0 0; font-size: 14px; }
.ma-dec-quiet a { color: var(--ma-muted); text-decoration: underline; }
.ma-dec-nothing { margin: 10px 0 0; font-size: 14px; color: var(--ma-muted); line-height: 1.55; }
.ma-dec-back { margin: 28px 0 0; font-size: 14px; }
@media (min-width: 720px) { .ma-doors { grid-template-columns: 1fr; } }