/* Course sales pages (/courses/7-stages, /courses/mcas), second rebuild from scratch (Cody, 18 Oct 2026).
   Direction from Mobbin: Kajabi's course hero (heavy condensed headline, teacher photo in a blob on a warm gradient,
   a floating lesson card, a gradient band of big numbers, pill buttons), Superpower's product buy box (gallery of the
   real product, price, checklist, one button, plan switch), Sketch's lesson list with a sticky course card,
   MasterClass's price bar that stays on screen. */

:root {
  /* Black and white, royal-blue buttons (Cody's pick from 10 versions, 18 Oct 2026). "--grad" is the black panel
     colour and "--coral" the button colour; the names stayed from the first version. */
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #3a3a3a;
  --muted: #6e6e6e;
  --rule: #e5e5e5;
  --coral: #1d4ed8;
  --coral-2: #1e40af;
  --go-ink: #ffffff;
  --go-glow: rgba(29, 78, 216, .45);
  --tint: #e8eefc;
  --tint-ink: #1d4ed8;
  --grad: #111111;
  --night: #111111;
  --ok: #0f8a5f;
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1200px;
  --r: 22px;
  --r-lg: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.sec { padding: 120px 0; }
.sec--white { background: #f6f6f4; }

/* Type */
.display, .band b, .price b, .rows .n, .chap-n, .trailer-in b, .tl b, .fit-c h3, .story-body .pull {
  font-family: var(--display); font-weight: 800; font-stretch: 72%; font-variation-settings: "wdth" 72; letter-spacing: -0.01em;
}
.display { text-transform: uppercase; line-height: .92; }
.h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.h2 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.h3 { font: 600 1.2rem/1.3 var(--body); letter-spacing: -0.01em; }
.lead { font-size: 1.18rem; line-height: 1.6; color: var(--ink-2); }
.tag { display: block; font: 600 .8rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.head { max-width: 760px; margin-bottom: 56px; }
.head .display { margin-top: 0; }
.head .lead { margin-top: 18px; }
.head--c { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons: pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px;
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; font: 600 1.05rem/1 var(--body); letter-spacing: -0.005em;
  transition: transform .15s ease, background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.btn:hover svg.arr { transform: translateX(3px); }
.btn--go { background: var(--coral); color: var(--go-ink, var(--ink)); }
.btn--go:hover { background: var(--coral-2); }
.btn--line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--line .play { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -10px; border-radius: 999px; background: var(--ink); color: #fff; }
.btn--line:hover .play { background: #fff; color: var(--ink); }
.btn--line .play svg { width: 11px; height: 11px; margin-left: 2px; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .95rem; }

/* Top bar: a floating pill */
.top { position: sticky; top: 12px; z-index: 50; padding: 0 16px; }
.top-in {
  max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 10px 0 22px; border-radius: 999px; background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 rgba(20, 20, 20, .04), 0 10px 30px -14px rgba(20, 20, 20, .25);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 160px; height: auto; display: block; }
.nav { display: flex; gap: 26px; font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--ink); }
.top-r { display: flex; align-items: center; gap: 8px; }
.signin { padding: 0 14px; font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--ink-2); }

/* Hero */
.hero { padding: 64px 0 40px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero .h1 { margin-top: 22px; }
.hero .lead { margin-top: 24px; max-width: 32em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-price { margin-top: 18px; font-size: .98rem; color: var(--muted); }
.hero-price b { color: var(--ink); font-weight: 650; }
/* One review in the hero (Cody, 30 Oct 2026): a pale royal-blue card, stars and name on the first row, the quote whole on
   the second */
.proof-card { display: block; width: 100%; margin-top: 28px; padding: 14px 18px 16px; border-radius: 16px; background: #eef2ff; border: 1px solid #c7d2fe; color: var(--ink); text-decoration: none; }
.proof-card:hover { border-color: var(--coral); }
.proof-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.proof-who { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--coral-2); white-space: nowrap; }
.proof-who img { width: 26px; height: 26px; border-radius: 999px; }
.proof-who b { font-weight: 600; }
.proof-card q { quotes: "\201C" "\201D"; display: block; font-size: 1rem; line-height: 1.4; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proof { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.proof-av { display: flex; }
.proof-av span {
  display: grid; place-items: center; width: 36px; height: 36px; margin-left: -9px; border-radius: 999px; border: 2px solid var(--bg);
  background: var(--paper); font: 700 .72rem/1 var(--body); color: var(--ink-2);
}
.proof-av span:first-child { margin-left: 0; }
.stars { color: #f5a524; letter-spacing: 1px; }

.hero-art { position: relative; aspect-ratio: 1 / 1.08; max-width: 560px; justify-self: end; width: 100%; }
.blob-bg, .blob { position: absolute; border-radius: 28px; }
/* Clean rounded frame (Cody chose it over the soft blob, 18 Oct 2026); the coloured panel sits behind, offset. */
.blob-bg { inset: 8% -4% -4% 10%; background: var(--grad); }
.blob { inset: 0 0 6% 0; overflow: hidden; background: #2a2622; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.blob img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lesson-card {
  position: absolute; right: -6px; bottom: 6%; width: min(330px, 74%); padding: 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 30px 60px -20px rgba(20, 20, 20, .35);
}
.lesson-card small { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--tint, #ffe7e3); color: var(--tint-ink, #c2321f); font: 700 .66rem/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.lesson-card b { display: block; margin: 8px 0 10px; font-size: .98rem; line-height: 1.3; }
.lesson-card li { display: flex; align-items: center; gap: 10px; padding: 7px; margin-top: 6px; border: 1px solid var(--rule); border-radius: 12px; font-size: .84rem; line-height: 1.3; }
.lesson-card li i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); }
.lesson-card li i svg { width: 10px; height: 10px; }
.lesson-card li span { flex: 1; min-width: 0; }
.lesson-card li b { display: inline; margin: 0; font-size: inherit; line-height: inherit; font-weight: 700; color: var(--ink); }
.live-chip {
  position: absolute; left: -4%; top: 12%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff;
  box-shadow: 0 20px 40px -18px rgba(20, 20, 20, .35); font-size: .86rem; font-weight: 600; line-height: 1.25;
}
.live-chip img { width: 34px; height: 34px; border-radius: 999px; }
.live-chip span { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); }
.live-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .18); }

/* Gradient band of numbers */
.band { padding: 24px 0 0; }
.band-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 34px 40px; border-radius: 24px; background: var(--grad); color: #fff; }
.band b { display: block; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; }
.band span { display: block; margin-top: 6px; font-size: .98rem; opacity: .92; }

/* Buy box (product page) */
.buy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: start; }
.gallery { position: sticky; top: 100px; }
.screen { border-radius: 16px; overflow: hidden; background: #f3efe6; border: 1px solid var(--rule); }
.screen-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--rule); }
.screen-bar i { width: 10px; height: 10px; border-radius: 999px; background: #e7e0d6; }
.screen video { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: 14px; background: none; cursor: pointer; text-align: left; transition: border-color .2s; }
.thumb img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 11px; }
.thumb span { display: block; padding: 6px 6px 4px; font-size: .78rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.thumb[aria-selected="true"] { border-color: var(--ink); }
.thumb[aria-selected="true"] span { color: var(--ink); }
.thumbs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; }
.caption { margin-top: 14px; font-size: .95rem; color: var(--ink-2); min-height: 3em; }

.box { padding: 36px; border-radius: 24px; background: var(--paper); border: 1px solid var(--rule); }
.box .display { font-size: clamp(2.1rem, 3.4vw, 2.9rem); margin-top: 16px; }
.box-desc { margin-top: 12px; color: var(--ink-2); font-size: 1rem; }
.switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 24px; padding: 4px; border-radius: 999px; background: var(--bg); }
.switch button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--muted); transition: background .2s, color .2s; }
.switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.box-flag { display: inline-block; margin-top: 18px; padding: 4px 10px; border-radius: 999px; background: var(--grad); color: #fff; font: 700 .74rem/1.4 var(--body); letter-spacing: .04em; }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.price b { font-size: 4rem; line-height: 1; }
.price span { color: var(--muted); }
.box .btn { margin-top: 22px; }
.checks { display: grid; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule); }
.checks li { display: flex; gap: 12px; font-size: .98rem; color: var(--ink-2); }
.checks svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ok); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: .86rem; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 15px; height: 15px; }
.trust a { color: inherit; }
.box-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2); }
.box-note a { font-weight: 600; text-underline-offset: 3px; }

/* Problem: big statement + numbered rows */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.rows li { display: block; padding: 28px 0; border-top: 1px solid var(--rule); }
.rows li:last-child { border-bottom: 1px solid var(--rule); }
.rows .n { font-size: 2.4rem; line-height: 1; }
.rows h3 { margin-bottom: 8px; }
.rows p { color: var(--ink-2); }

/* Trailer */
.trailer { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; aspect-ratio: 16 / 7.5; background: #111; }
.trailer img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .6s ease, opacity .3s; }
.trailer:hover img { transform: scale(1.02); opacity: .72; }
.trailer-in { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 20px; padding: 36px 40px; color: #fff; text-align: left; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); }
.trailer-in i { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 999px; background: var(--coral); color: var(--go-ink, var(--ink)); }
.trailer-in i svg { width: 26px; height: 26px; margin-left: 4px; }
.trailer-in b { display: block; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.trailer-in span { display: block; margin-top: 6px; opacity: .85; font-size: .98rem; }

/* Lessons (Sketch layout) */
.lessons { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.chap { margin-bottom: 12px; border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; }
.chap summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; cursor: pointer; list-style: none; }
.chap summary::-webkit-details-marker { display: none; }
.chap-n { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 12px; background: var(--bg); font-size: 1.3rem; }
.chap--bonus .chap-n { background: var(--grad); color: #fff; font-size: .9rem; }
.chap-t { font-weight: 600; font-size: 1.08rem; line-height: 1.3; }
.chap-d { display: block; margin-top: 4px; font-size: .93rem; color: var(--muted); font-weight: 400; }
.chap-c { font-size: .85rem; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.chap-c::after { content: ""; width: 8px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.chap[open] .chap-c::after { transform: rotate(-135deg); }
.chap ol { border-top: 1px solid var(--rule); background: #fcfbf8; }
.chap li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 22px; border-top: 1px solid #f1ece4; font-size: .96rem; color: var(--ink-2); }
.chap li:first-child { border-top: 0; }
.chap li .ln { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chap li .pl { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--tint, #ffe7e3); color: var(--tint-ink, var(--coral-2)); }
.chap li .pl svg { width: 9px; height: 9px; margin-left: 1px; }
.side { position: sticky; top: 100px; padding: 24px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.side-who { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.side-who img { width: 52px; height: 52px; border-radius: 999px; }
.side-who b { display: block; font-size: 1rem; }
.side-who span { font-size: .86rem; color: var(--muted); }
.facts li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.facts svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.side .btn { margin-top: 18px; }
.side small { display: block; margin-top: 10px; text-align: center; color: var(--muted); font-size: .85rem; }

/* Reviews */
.reviews { background: var(--night); color: #fff; overflow: hidden; }
.reviews .tag { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
.feature-q { max-width: 1000px; }
.feature-q .stars { font-size: 1.4rem; margin-bottom: 16px; }
.feature-q blockquote { font-family: var(--display); font-weight: 700; font-stretch: 85%; font-variation-settings: "wdth" 85; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em; }
.feature-q blockquote strong { font-weight: 800; }
.who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.who .av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; background: #e8eefc; color: var(--ink); font: 700 .85rem/1 var(--body); }
.who b { display: block; font-size: 1rem; line-height: 1.3; }
.who span { font-size: .88rem; opacity: .65; }
/* Every review on the page, three across (Cody, 30 Oct 2026); the featured quote above stays. */
.rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.rcard { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 28px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.rcard blockquote { font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.rcard blockquote strong { color: #fff; font-weight: 600; }
.rcard .stars { margin-bottom: 12px; }

/* What you get */
.gets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.get { grid-column: span 2; padding: 30px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.get:nth-child(4), .get:nth-child(5) { grid-column: span 3; }
.get-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad); color: #fff; margin-bottom: 20px; }
.get-ic svg { width: 22px; height: 22px; }
.get p { color: var(--ink-2); }

/* Teacher */
.teacher { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; align-items: center; }
.teacher-art { position: relative; }
.teacher-art img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 32px; }
.teacher .display { margin-top: 18px; }
.teacher .lead { margin-top: 22px; }
.teacher-body { margin-top: 16px; color: var(--ink-2); }
.creds { margin-top: 28px; border-top: 1px solid var(--rule); }
.creds li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: .97rem; }

.story summary { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; cursor: pointer; list-style: none; font-weight: 600; }
.story summary::-webkit-details-marker { display: none; }
.story summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.story[open] summary::after { transform: rotate(-135deg); }
.story-body { display: grid; gap: 14px; margin-top: 18px; color: var(--ink-2); }
.story-body .pull { text-transform: uppercase; font-size: 1.8rem; line-height: 1; color: var(--ink); }

/* Timeline (MCAS) */
.tl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tl li { padding: 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.tl b { display: block; font-size: 2.6rem; line-height: 1; }
.tl li:last-child { background: var(--grad); color: #fff; border-color: transparent; }
.tl li:last-child p { color: rgba(255, 255, 255, .9); }
.tl h3 { margin-top: 10px; font-size: 1.02rem; font-weight: 600; }
.tl p { margin-top: 8px; color: var(--ink-2); font-size: .93rem; }

/* Fit */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fit-c { padding: 34px; border-radius: 26px; background: var(--paper); border: 1px solid var(--rule); }
.fit-c h3 { text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin-bottom: 22px; }
.fit-c li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.fit-c li::before { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; font: 700 .85rem/1 var(--body); }
.fit-c li::before { background: rgba(255, 255, 255, .2); color: #fff; }
/* Solid green and red boxes (Cody, 18 Oct 2026). */
.fit-y { background: #0f6b45; border-color: #0f6b45; color: #fff; }
.fit-y li::before { content: "\2713"; }
.fit-n { background: #b42318; border-color: #b42318; color: #fff; }
.fit-n li::before { content: "\2715"; }
.fit-y li, .fit-n li { color: rgba(255, 255, 255, .92); border-top-color: rgba(255, 255, 255, .2); }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font-size: 1.1rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font-weight: 400; font-size: 1.3rem; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 60px 26px 0; color: var(--ink-2); }
.faq-a p + p { margin-top: 12px; }

/* Closing */
.end { padding: 0 0 140px; }
.end-in { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: 64px; border-radius: 40px; background: var(--grad); color: #fff; }
.end-in .display { font-size: clamp(2.8rem, 6vw, 5.2rem); }
.end-in p { margin-top: 16px; font-size: 1.12rem; opacity: .92; }
.end-card { padding: 28px; border-radius: 26px; background: rgba(255, 255, 255, .97); color: var(--ink); }
.end-card .price { margin-top: 4px; }
.end-card .price b { font-size: 3.4rem; }
.end-card small { display: block; margin-top: 12px; text-align: center; color: var(--muted); font-size: .86rem; }

.end-in--plans { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.end-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.end-plans .end-card { padding: 30px; }
.end-plans .box-desc { min-height: 3.2em; }
.end-note { margin: 0; font-size: 1rem; opacity: .85; }
.end-note a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.foot { padding: 28px 0 110px; color: var(--muted); font-size: .9rem; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); padding-top: 24px; }
.foot a { color: inherit; text-decoration: none; margin-left: 18px; }
.foot a:hover { color: var(--ink); }

/* Price bar that stays on screen */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); background: rgba(21, 18, 31, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
.bar.on { transform: none; }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bar-t { min-width: 0; font-size: .95rem; line-height: 1.3; }
.bar-t b { font-weight: 600; }
.bar-t span { color: rgba(255, 255, 255, .7); }
.bar .btn { min-height: 46px; }

/* Trailer pop-up */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(10, 8, 16, .86); }
.modal-box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 18px; background: #000; }
.modal-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 18px; }
.modal-x { position: absolute; top: -52px; right: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); cursor: pointer; font-size: 1.4rem; }


@media (max-width: 1240px) { .proof-card q { white-space: normal; } }

/* Wide screens (Cody, 30 Oct 2026): the photo column is as tall as the text column, and the lesson card runs the full
   width of the photo with its bottom level with the review card, bleeding up over the picture. */
@media (min-width: 1041px) {
  .hero-grid { align-items: stretch; }
  .hero-art { aspect-ratio: auto; min-height: 520px; }
  .blob { inset: 0 0 56px 0; }
  .blob-bg { inset: 8% -4% 36px 10%; }
  .lesson-card { left: 0; right: 0; bottom: 0; width: auto; padding: 16px 18px 18px; }
  .lesson-card li { padding: 9px 12px; font-size: .9rem; }
}

@media (max-width: 1040px) {
  .hero-grid, .buy, .split, .lessons, .teacher, .end-in { grid-template-columns: minmax(0, 1fr); }
  .hero-art { justify-self: center; max-width: 520px; }
  .gallery, .side { position: static; }
  .nav { display: none; }
  .tl { grid-template-columns: 1fr 1fr; }
  .split, .teacher { gap: 40px; }
  .teacher-art { max-width: 440px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .sec { padding: 80px 0; }
  .head { margin-bottom: 36px; }
  .top { top: 8px; padding: 0 8px; }
  .top-in { height: 56px; padding: 0 6px 0 16px; }
  .signin { display: none; }
  .brand img { width: 128px; }
  .rail { grid-template-columns: 1fr; margin-top: 40px; }
  .proof-card q { white-space: normal; }
  .hero { padding: 36px 0 24px; }
  .h1 { font-size: 3.1rem; }
  .hero .lead { font-size: 1.05rem; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-art { margin-top: 8px; }
  .live-chip { left: 0; top: 4%; }
  .lesson-card { right: 0; bottom: 0; width: 78%; padding: 12px; }
  .lesson-card li:nth-child(n+3) { display: none; }
  .lesson-card b { font-size: .9rem; margin: 6px 0 4px; }
  .hero-art { aspect-ratio: 1 / 1.15; }
  .top .btn { display: none; }
  .band-in { grid-template-columns: 1fr 1fr; gap: 22px 12px; padding: 28px 24px; border-radius: 26px; }
  .thumbs { grid-template-columns: repeat(5, 120px); overflow-x: auto; margin-right: -20px; padding-right: 20px; scrollbar-width: none; }
  .thumbs::-webkit-scrollbar { display: none; }
  .thumbs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box { padding: 24px; border-radius: 26px; }
  .price b { font-size: 3.3rem; }
  .rows li { padding: 22px 0; }
  .trailer { aspect-ratio: 4 / 5; }
  .trailer img { object-position: 72% 50%; }
  .trailer-in { flex-direction: column; align-items: flex-start; padding: 24px; }
  .chap summary { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .chap-c { grid-column: 2; }
  .chap li { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 11px 16px; }
  .gets { grid-template-columns: 1fr; }
  .get, .get:nth-child(4), .get:nth-child(5) { grid-column: auto; padding: 24px; }
  .tl { grid-template-columns: 1fr; }
  .fit { grid-template-columns: 1fr; }
  .fit-c { padding: 24px; }
  .faq-a { padding-right: 0; }
  .end { padding-bottom: 100px; }
  .end-in { padding: 36px 22px; border-radius: 28px; }
  .end-plans { grid-template-columns: minmax(0, 1fr); }
  .end-plans .end-card { padding: 22px; }
  .bar-name { display: none; }
  .bar-t span { display: block; color: #fff; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar, .btn, .btn svg { transition: none; }
}

/* What you get: bento of feature tiles, each with a small drawn piece of the members area (Attio-style). */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bt { grid-column: span 2; display: flex; flex-direction: column; padding: 14px 14px 26px; border-radius: 22px; background: #f6f6f4; border: 1px solid var(--rule); }
.bt--wide { grid-column: span 4; }
.bento .bt:nth-child(2) { grid-column: span 2; }
.bt h3 { margin: 22px 12px 0; font: 600 1.15rem/1.3 var(--body); letter-spacing: -0.01em; }
.bt h3 small { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); font-size: .72rem; font-weight: 600; vertical-align: 3px; }
.bt p { margin: 8px 12px 0; color: var(--muted); font-size: .96rem; line-height: 1.55; }
.ui { position: relative; flex: none; height: 214px; overflow: hidden; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); font-size: .82rem; }
.ui::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.ui-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.ui-top b { font-weight: 600; font-size: .9rem; }
.ui-top span { color: var(--muted); }
.ui-bar { height: 6px; border-radius: 6px; background: #ececec; margin-bottom: 12px; overflow: hidden; }
.ui-bar i { display: block; height: 100%; background: var(--coral); border-radius: 6px; }
.ui li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--rule); border-radius: 10px; margin-top: 6px; }
.ui li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui li i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); }
.ui li i svg { width: 10px; height: 10px; }
.ui li i.ok { background: #e7f6ef; color: var(--ok); }
.ui li i.dim { background: #f0f0f0; color: #9a9a9a; }
.ui li.cur { border-color: var(--coral); background: #f7f9ff; }
.ui li em.tg { flex: none; font-style: normal; font-weight: 600; font-size: .75rem; color: #fff; background: var(--coral); padding: 4px 10px; border-radius: 999px; }
.ui-weeks ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ui-weeks li { justify-content: center; height: 54px; padding: 0; margin: 0; font-weight: 600; color: var(--muted); }
.ui-weeks li.done { background: var(--ink); border-color: var(--ink); color: #fff; }
.ui-weeks li.now { border: 2px solid var(--coral); color: var(--coral); }
.ui-weeks li span { flex: none; overflow: visible; }
.ui-mods li { gap: 14px; }
.ui-mods li b { font-family: var(--display); font-weight: 800; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 1.2rem; }
.ui-mods li:nth-child(2) { border-color: var(--coral); background: #f7f9ff; }
.ui-live .dot { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.ui-live .dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #16a34a; }
.ui-q { height: 92px; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; color: #9a9a9a; }
.ui-btn { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; }
.ui-files li em.tg { background: #f0f0f0; color: var(--muted); }
@media (max-width: 1040px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt, .bt--wide, .bento .bt:nth-child(2) { grid-column: span 1; }
  .bt--wide { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bt, .bt--wide { grid-column: auto; }
  .ui { height: 190px; }
}
.ui li span em { font-style: normal; }

/* ---- The Roadmap for the Modern Healer (/courses/7-stages, 30 Oct 2026) ---- */
.hero--big .h1 { font-size: clamp(3rem, 7vw, 6rem); }
.prose p { font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); }
.prose p + p { margin-top: 18px; }
.prose strong { color: var(--ink); font-weight: 600; }
/* The seven layers: one column, spirit at the top, ground at the bottom; the numbers count down. */
.layers { list-style: none; max-width: 860px; margin: 0 auto; padding: 0; }
.layer { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 24px; border: 1px solid var(--rule); background: #fff; }
.layer + .layer { border-top: 0; }
.layer:first-child { border-radius: 22px 22px 0 0; }
.layer:last-child { border-radius: 0 0 22px 22px; }
.layer b { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-variation-settings: "wdth" 80; font-size: 2.2rem; line-height: 1; color: var(--coral); }
.layer h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.layer p { color: var(--ink-2); }
.layer-1 { background: #eef2ff; } .layer-2 { background: #f5f7ff; } .layer-3 { background: #fafbff; }
/* Who it is for */
.who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.who-c { padding: 28px; border-radius: 22px; background: var(--paper-2, #f6f6f6); border: 1px solid var(--rule); }
.who-c h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.who-c p { color: var(--ink-2); }
.who-c blockquote { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); font-size: .98rem; }
.who-c cite { display: block; margin-top: 6px; font-style: normal; font-weight: 600; color: var(--ink); font-size: .9rem; }
/* The ten weeks */
.phases { list-style: none; margin: 0; padding: 0; }
.phases li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--rule); }
.phases li:last-child { border-bottom: 1px solid var(--rule); }
.ph-w { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-variation-settings: "wdth" 80; text-transform: uppercase; font-size: 1.1rem; line-height: 1.2; color: var(--coral); padding-top: 3px; }
.phases h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.phases p { color: var(--ink-2); }
/* Gallery and outline on their own */
.buy--solo { grid-template-columns: minmax(0, 1fr); }
.lessons--solo { grid-template-columns: minmax(0, 1fr); }
/* Two paths and the application */
.paths { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.path { margin-top: 22px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--rule); background: #fff; }
.path h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.path p { color: var(--ink-2); }
.paths-note { margin-top: 22px; color: var(--ink-2); }
.apply-box { padding: 28px; border-radius: 22px; background: var(--night); color: #fff; }
.apply label { display: block; margin-top: 14px; }
.apply label span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: rgba(255, 255, 255, .8); }
.apply input, .apply select, .apply textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 1rem; }
.apply select option { color: var(--ink); }
.apply input:focus, .apply select:focus, .apply textarea:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.apply .btn--block { margin-top: 22px; }
.apply-note { margin-top: 16px; font-size: .85rem; color: rgba(255, 255, 255, .65); }
.apply-err { margin-top: 12px; color: #fca5a5; font-size: .95rem; }
.apply-done h3 { font-size: 2.2rem; margin-bottom: 8px; }
.apply-done p { color: rgba(255, 255, 255, .85); }
.end-in--one { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.end-in--one .display { max-width: 20ch; }
@media (max-width: 1040px) {
  .paths { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .who-grid { grid-template-columns: minmax(0, 1fr); }
  .layer { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .layer b { font-size: 1.7rem; }
  .phases li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .apply-grid { grid-template-columns: minmax(0, 1fr); }
  .apply-box { padding: 20px; border-radius: 18px; }
}

/* ---- Hero after amperos.com (Cody, 30 Oct 2026, "copy it exactly, other than the image"), measured on their page at
   1440 and 1920 wide: a warm dark page (#23120b); the card is centred, at most 1552px wide with 24px side margins, 710px
   tall, 12px radius; the nav, the text and the strip under the card share a centred 1378px container with 25px padding;
   headline serif 60/54, -1.2px, cream; kicker 16px with a bordered pill; body 18/25.2 at 90% white; buttons 38px tall,
   16px, 8px radius; the text block is centred vertically. Their fonts (Reckless, Stkmiso) are licensed, so Fraunces and
   Geist stand in. ---- */
.mh-sky { background: #23120b; color: #fcf7f4; padding-bottom: 24px; }
.mh-wrap { width: 100%; max-width: 1378px; margin: 0 auto; padding: 0 25px; }
.mh-top { height: 86px; display: flex; align-items: center; }
.mh-top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mh-brand img { display: block; width: 150px; height: auto; filter: invert(1) brightness(1.2); opacity: .95; }
.mh-nav { display: flex; gap: 28px; font-size: 16px; }
.mh-nav a, .mh-link { color: #fff; text-decoration: none; opacity: .92; }
.mh-nav a:hover, .mh-link:hover { opacity: 1; }
.mh-top-r { display: flex; align-items: center; gap: 22px; font-size: 16px; }
.mh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 10px 12px; border-radius: 8px; font: 400 16px/18px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.mh-btn--light { background: #fff5f0; color: #23120b; border: 0; }
.mh-btn--light:hover { background: #fff; }
.mh-btn--line { background: rgba(35, 18, 11, .1); color: #fff; border: 1px solid rgba(252, 247, 244, .4); }
.mh-btn--line:hover { border-color: #fcf7f4; }
.mh-play { display: grid; place-items: center; width: 18px; height: 18px; } .mh-play svg { width: 14px; height: 14px; }
.mh-hero { position: relative; width: calc(100% - 48px); max-width: 1552px; margin: 0 auto; height: 710px; border-radius: 12px; overflow: hidden; background: #2b1a12; }
.mh-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.mh-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35, 18, 11, .72) 0%, rgba(35, 18, 11, .55) 34%, rgba(35, 18, 11, .12) 58%, rgba(35, 18, 11, 0) 72%), linear-gradient(180deg, rgba(35, 18, 11, 0) 60%, rgba(35, 18, 11, .45) 100%); }
/* The text sits in the same 1392px container as the nav: its left edge is 25px in at 1440 and 112px in at 1920, as on theirs. */
.mh-hero-text { position: absolute; top: 50%; transform: translateY(-50%); left: max(25px, calc((100% - 1378px) / 2 + 25px)); width: 578px; max-width: calc(100% - 50px); }
.mh-kicker { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; font-size: 16px; line-height: 1.3; color: rgba(252, 247, 244, .9); white-space: nowrap; overflow: hidden; }
.mh-kicker a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.mh-pill { flex: none; padding: 2px 5px; border: 1px solid rgba(252, 247, 244, .4); border-radius: 4px; font-size: 16px; line-height: 1.5; }
.mh-h1 { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 60px; line-height: 54px; letter-spacing: -1.2px; color: #fcf7f4; font-variation-settings: "opsz" 72; }
.mh-sub { margin: 20px 0 0; font-size: 18px; line-height: 25.2px; color: rgba(255, 255, 255, .9); }
.mh-sub p { margin: 0; }
.mh-sub strong { color: #fff; font-weight: 600; }
.mh-sub p + p { margin-top: 12px; }
.mh-ctas { display: flex; gap: 11px; margin-top: 24px; }
.mh-trust { display: flex; align-items: center; gap: 40px; padding: 20px 25px 8px; }
.mh-trust p { flex: none; margin: 0; font-size: 14px; line-height: 1.4; color: #fcf7f4; opacity: .9; max-width: 150px; }
.mh-trust ul { display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; color: rgba(252, 247, 244, .62); letter-spacing: .01em; }
body.mh .bar .bar-name { font-weight: 600; }
@media (max-width: 1040px) {
  .mh-nav { display: none; }
  .mh-wrap { padding-left: 24px; padding-right: 24px; }
  .mh-trust { padding-left: 0; padding-right: 0; }
  .mh-hero { height: auto; min-height: 640px; }
  .mh-hero-shade { background: linear-gradient(180deg, rgba(35, 18, 11, 0) 25%, rgba(35, 18, 11, .85) 60%, rgba(35, 18, 11, .96) 100%); }
  .mh-hero-img { object-position: 60% 0; height: 62%; }
  .mh-hero-text { position: relative; top: auto; left: 0; transform: none; width: auto; max-width: none; padding: 300px 20px 24px; }
  .mh-h1 { font-size: 44px; line-height: 42px; letter-spacing: -.8px; }
  .mh-sub { font-size: 16px; line-height: 23px; }
  .mh-kicker a { display: none; }
  .mh-trust { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 720px) {
  .mh-hero { width: calc(100% - 16px); }
  .mh-wrap { padding-left: 16px; padding-right: 16px; }
  .mh-top-r .mh-link { display: none; }
  .mh-ctas { flex-direction: column; }
  .mh-ctas .mh-btn { width: 100%; height: 44px; }
}

/* ---- The whole Modern Healer page in the amperos.com system (Cody, 30 Oct 2026: "everything below the hero looks not
   in line"). Measured on their page: the page stays on the dark brown; headings are the serif at 40/44 (-0.8px) and
   26/29 in cream; body 16/23.2 at 80% white; eyebrows 13px muted; "UI" moments are light cream cards (#fdfaf8, 12px
   radius); one light cream section (their testimonial) breaks the dark; buttons are the cream pill at 8px radius.
   Scoped to body.mh so the MCAS page keeps its own look. ---- */
body.mh {
  --bg: #23120b; --paper: rgba(255, 255, 255, .04); --paper-2: rgba(255, 255, 255, .04);
  --ink: #fcf7f4; --ink-2: rgba(255, 255, 255, .8); --muted: #a39893; --rule: rgba(252, 247, 244, .14);
  --coral: #fff5f0; --coral-2: #ffffff; --go-ink: #23120b; --go-glow: rgba(255, 245, 240, .25);
  --tint: rgba(252, 247, 244, .12); --tint-ink: #fcf7f4; --grad: rgba(255, 255, 255, .05); --night: #23120b;
  --cream: #fdfaf8; --cream-ink: #23120b; --cream-ink-2: rgba(35, 18, 11, .78); --cream-rule: rgba(35, 18, 11, .1);
  --r: 12px; --r-lg: 12px;
  background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45;
}
body.mh :focus-visible { outline-color: var(--ink); }
body.mh .sec { padding: 140px 0; }
body.mh .sec--white { background: transparent; }
body.mh .sec + .sec { padding-top: 0; }
body.mh .display, body.mh .band b, body.mh .chap-n, body.mh .fit-c h3, body.mh .story-body .pull, body.mh .ui-mods li b {
  font-family: "Fraunces", Georgia, serif; font-weight: 400; font-stretch: 100%; font-variation-settings: "opsz" 48; letter-spacing: -0.8px; text-transform: none;
}
body.mh .display { line-height: 1.1; }
body.mh .h2 { font-size: 40px; line-height: 44px; }
body.mh .h3, body.mh .who-c h3, body.mh .phases h3, body.mh .bt h3, body.mh .path h3, body.mh .layer h3, body.mh .fit-c h3 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 26px; line-height: 29px; letter-spacing: -0.13px; text-transform: none; }
body.mh .lead, body.mh .prose p, body.mh .who-c p, body.mh .phases p, body.mh .layer p, body.mh .bt p, body.mh .path p, body.mh .paths-note, body.mh .teacher-body, body.mh .story-body, body.mh .faq-a { font-size: 16px; line-height: 23.2px; color: var(--ink-2); }
body.mh .prose p + p { margin-top: 14px; }
body.mh .tag { font: 400 13px/1.3 var(--body); letter-spacing: normal; text-transform: none; color: var(--muted); }
body.mh .head { margin-bottom: 48px; }
body.mh .head .lead { margin-top: 14px; }
/* Buttons: the cream pill and its outline twin */
body.mh .btn { border-radius: 8px; font-weight: 400; }
body.mh .btn--line { color: var(--ink); border: 1px solid rgba(252, 247, 244, .4); background: rgba(35, 18, 11, .1); }
body.mh .btn--line:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
body.mh .btn--line .play { background: var(--ink); color: #23120b; }
body.mh .btn--line:hover .play { background: var(--ink); color: #23120b; }
/* Numbers band */
body.mh .band { padding: 48px 0 0; }
body.mh .band-in { gap: 16px; padding: 32px 36px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); color: var(--ink); }
body.mh .band b { font-size: 40px; line-height: 44px; }
body.mh .band span { color: var(--ink-2); font-size: 14px; }
/* The seven layers: cream cards, the one "UI" moment on the page */
body.mh .layers { display: grid; gap: 8px; }
body.mh .layer, body.mh .layer + .layer { border: 0; border-radius: 12px; background: var(--cream); color: var(--cream-ink); padding: 22px 26px; }
body.mh .layer:first-child, body.mh .layer:last-child { border-radius: 12px; }
body.mh .layer b { font-size: 26px; line-height: 1; color: var(--muted); font-weight: 400; }
body.mh .layer h3 { color: var(--cream-ink); margin-bottom: 4px; }
body.mh .layer p { color: var(--cream-ink-2); }
body.mh .layer-1, body.mh .layer-2, body.mh .layer-3 { background: var(--cream); }
/* Who it is for */
body.mh .who-c { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); padding: 28px; }
body.mh .who-c h3 { margin-bottom: 10px; }
body.mh .who-c blockquote { border-radius: 10px; background: var(--cream); border: 0; color: var(--cream-ink-2); font-size: 15px; line-height: 1.45; }
body.mh .who-c cite { color: var(--cream-ink); }
/* The ten weeks */
body.mh .phases li { border-top-color: var(--rule); }
body.mh .phases li:last-child { border-bottom-color: var(--rule); }
body.mh .ph-w { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-stretch: 100%; font-variation-settings: "opsz" 48; text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--muted); }
/* Members-area clips */
body.mh .screen { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); }
body.mh .thumb { border-radius: 10px; }
body.mh .thumb img { border-radius: 8px; }
body.mh .thumb[aria-selected="true"] { border-color: var(--ink); }
body.mh .caption { color: var(--ink-2); }
/* What you get: dark tiles with cream UI inside */
body.mh .bt { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); }
body.mh .bt h3 { margin-top: 20px; font-size: 22px; line-height: 26px; }
body.mh .bt h3 small { background: var(--tint); color: var(--ink); }
body.mh .ui { border-radius: 10px; background: var(--cream); border: 0; color: var(--cream-ink); }
body.mh .ui::after { background: linear-gradient(rgba(253, 250, 248, 0), var(--cream)); }
body.mh .ui-top span, body.mh .ui li .ln { color: rgba(35, 18, 11, .55); }
body.mh .ui-bar { background: rgba(35, 18, 11, .1); }
body.mh .ui-bar i { background: var(--cream-ink); }
body.mh .ui li { border-color: var(--cream-rule); }
body.mh .ui li i { background: rgba(35, 18, 11, .08); color: var(--cream-ink); }
body.mh .ui li i.ok { background: rgba(35, 18, 11, .08); color: var(--cream-ink); }
body.mh .ui li i.dim { background: rgba(35, 18, 11, .05); color: rgba(35, 18, 11, .4); }
body.mh .ui li.cur, body.mh .ui-mods li:nth-child(2) { border-color: var(--cream-ink); background: rgba(35, 18, 11, .04); }
body.mh .ui li em.tg { background: var(--cream-ink); color: var(--cream); }
body.mh .ui-weeks li { color: rgba(35, 18, 11, .55); }
body.mh .ui-weeks li.done { background: var(--cream-ink); border-color: var(--cream-ink); color: var(--cream); }
body.mh .ui-weeks li.now { border-color: var(--cream-ink); color: var(--cream-ink); }
body.mh .ui-live .dot { color: var(--cream-ink); }
body.mh .ui-q { border-color: var(--cream-rule); color: rgba(35, 18, 11, .45); }
body.mh .ui-btn { background: var(--cream-ink); color: var(--cream); }
body.mh .ui-files li em.tg { background: rgba(35, 18, 11, .08); color: var(--cream-ink); }
/* The outline */
body.mh .chap { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); }
body.mh .chap-n { background: rgba(255, 255, 255, .06); color: var(--ink); font-size: 20px; border-radius: 8px; }
body.mh .chap--bonus .chap-n { background: var(--cream); color: var(--cream-ink); font-size: 13px; font-family: var(--body); font-weight: 600; }
body.mh .chap-t { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 22px; line-height: 26px; }
body.mh .chap ol { background: rgba(0, 0, 0, .18); border-top-color: var(--rule); }
body.mh .chap li { border-top-color: rgba(252, 247, 244, .08); }
body.mh .chap-c::after { border-color: var(--ink); }
/* Dr. Hoffman */
body.mh .teacher-art img { border-radius: 12px; }
body.mh .creds li { font-size: 15px; }
/* Stories: the one light section, as on theirs */
body.mh .reviews { background: var(--cream); color: var(--cream-ink); }
body.mh .reviews .tag { background: transparent; border: 0; color: rgba(35, 18, 11, .55); }
body.mh .feature-q blockquote { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-stretch: 100%; font-variation-settings: "opsz" 48; font-size: 40px; line-height: 44px; letter-spacing: -0.8px; color: var(--cream-ink); }
body.mh .feature-q blockquote strong { font-weight: 400; }
body.mh .feature-q .who b, body.mh .rcard .who b { color: var(--cream-ink); }
body.mh .feature-q .who span span, body.mh .rcard .who span span { color: rgba(35, 18, 11, .55); }
body.mh .rcard { border-radius: 12px; background: #fff; border: 1px solid var(--cream-rule); }
body.mh .rcard blockquote { color: var(--cream-ink-2); font-size: 16px; line-height: 23.2px; }
body.mh .rcard blockquote strong { color: var(--cream-ink); font-weight: 600; }
/* Is this for you */
body.mh .fit-c, body.mh .fit-y, body.mh .fit-n { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); color: var(--ink); }
body.mh .fit-c h3 { margin-bottom: 18px; }
body.mh .fit-y li, body.mh .fit-n li { color: var(--ink-2); border-top-color: var(--rule); font-size: 16px; line-height: 23.2px; }
body.mh .fit-y li::before, body.mh .fit-n li::before { background: var(--cream); color: var(--cream-ink); }
/* Two paths and the application: the form on a cream card */
body.mh .path { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); }
body.mh .apply-box { border-radius: 12px; background: var(--cream); color: var(--cream-ink); }
body.mh .apply label span { color: rgba(35, 18, 11, .7); }
body.mh .apply input, body.mh .apply select, body.mh .apply textarea { background: #fff; border: 1px solid rgba(35, 18, 11, .18); color: var(--cream-ink); border-radius: 8px; }
body.mh .apply input:focus, body.mh .apply select:focus, body.mh .apply textarea:focus { outline: 2px solid var(--cream-ink); }
body.mh .apply .btn--go { background: var(--cream-ink); color: var(--cream); }
body.mh .apply .btn--go:hover { background: #000; }
body.mh .apply-note { color: rgba(35, 18, 11, .6); }
body.mh .apply-err { color: #b42318; }
body.mh .apply-done p { color: var(--cream-ink-2); }
/* Questions */
body.mh .faq summary { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 22px; line-height: 26px; letter-spacing: -0.13px; }
body.mh .faq summary::after { background: transparent; border: 1px solid var(--rule); color: var(--ink); }
/* Close, footer, bar */
body.mh .end-in { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); color: var(--ink); }
body.mh .end-in .display { font-size: 40px; line-height: 44px; }
body.mh .foot { color: var(--muted); }
body.mh .legal-foot { color: rgba(252, 247, 244, .6) !important; }
body.mh .bar { background: rgba(35, 18, 11, .96); border-top: 1px solid var(--rule); }
@media (max-width: 720px) {
  body.mh .h2, body.mh .feature-q blockquote, body.mh .end-in .display { font-size: 30px; line-height: 34px; }
  body.mh .sec { padding: 88px 0; }
}

/* For anyone called to heal (Cody, 30 Oct 2026, from ten mock-ups): frosted glass cards, three across. Stars, the
   quote in the serif, a hairline, then the name, a role pill and an illustrated face. */
body.mh .who-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-top: 0; }
body.mh .who-q { position: relative; display: flex; flex-direction: column; margin: 0; padding: 24px 24px 20px; border-radius: 12px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 20px 50px -30px rgba(0, 0, 0, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.mh .who-q::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(120% 60% at 0% 0%, rgba(255, 245, 240, .10), transparent 60%); pointer-events: none; }
body.mh .who-q > * { position: relative; }
body.mh .who-q .stars { font-size: 15px; letter-spacing: 1px; color: #f5a524; }
body.mh .who-q blockquote { flex: 1; margin-top: 14px; font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 20px; line-height: 26px; letter-spacing: -0.13px; color: var(--ink); }
body.mh .who-note { display: block; margin-top: 10px; font: 400 13px/1.4 var(--body); letter-spacing: 0; color: var(--muted); }
body.mh .who-q figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.4; }
body.mh .who-q figcaption b { display: block; font-weight: 600; color: var(--ink); }
body.mh .who-q figcaption span { color: var(--muted); }
body.mh .who-q figcaption .who-pill { color: #fff; }
body.mh .who-pill { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.4 var(--body); letter-spacing: .01em; border: 1px solid transparent; }
body.mh .who-pill--physician { background: rgba(147, 197, 253, .22); border-color: rgba(147, 197, 253, .55); color: #fff; }
body.mh .who-pill--practitioner { background: rgba(134, 239, 172, .2); border-color: rgba(134, 239, 172, .55); color: #fff; }
body.mh .who-pill--patient { background: rgba(253, 230, 138, .2); border-color: rgba(253, 230, 138, .55); color: #fff; }
body.mh .who-q .av { width: 40px; height: 40px; border-radius: 999px; flex: none; background: #fff; }
@media (max-width: 1040px) { body.mh .who-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { body.mh .who-row { grid-template-columns: minmax(0, 1fr); } body.mh .who-q { padding: 20px 18px 16px; } }

/* The full outline (Cody, 30 Oct 2026, after amperos.com's feature rows, then condensed): each module is a row, text
   on the dark left, a compact cream card on the right listing its lessons one line each with a small number tag. */
body.mh .mods { display: grid; gap: 48px; }
body.mh .mod { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
body.mh .mod-text .tag { margin-bottom: 12px; }
body.mh .mod-text h3 { margin: 0 0 12px; font: 400 30px/34px "Fraunces", Georgia, serif; letter-spacing: -0.5px; color: var(--ink); }
body.mh .mod-text p { max-width: 46ch; }
body.mh .mod-card { padding: 14px 16px 16px; border-radius: 12px; background: var(--cream); color: var(--cream-ink); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8); }
body.mh .mod-card-h { display: flex; justify-content: flex-end; margin-bottom: 8px; }
body.mh .mod-card-h span { font-size: 12px; color: rgba(35, 18, 11, .55); }
body.mh .mod-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.mh .mod-card li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--cream-rule); }
body.mh .mod-tag { flex: none; min-width: 34px; text-align: center; padding: 2px 7px; border-radius: 6px; background: #dbeafe; color: #1d4ed8; font: 600 12px/1.4 var(--body); font-variant-numeric: tabular-nums; }
body.mh .mod-les { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; font-size: 15px; line-height: 1.3; color: var(--cream-ink); }
body.mh .mod-les i { display: none; }
body.mh .mod-les em { font-style: italic; }
body.mh .mod-tag--bonus { background: #fef3c7; color: #b45309; }
@media (max-width: 1040px) { body.mh .mod { grid-template-columns: minmax(0, 1fr); gap: 20px; } body.mh .mods { gap: 44px; } }

/* ---- The free guide pages in the same system (Cody, 30 Oct 2026): /guides/healers (landing) and
   /guides/healers-roadmap (the guide, readable online). body.mh.gd ---- */
body.gd .mh-note { margin: 14px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
body.gd .mh-kicker { gap: 8px; }
body.gd .gd-pull { font-family: "Fraunces", Georgia, serif; font-size: 22px; line-height: 28px; letter-spacing: -0.2px; color: var(--ink); border-left: 2px solid var(--ink); padding-left: 16px; margin-top: 22px; }
body.gd .mod-dot { flex: none; width: 6px; height: 6px; margin: 0 14px; border-radius: 999px; background: #1d4ed8; }
body.gd .gd-more { margin: 40px 0 0; }
body.gd .gd-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
body.gd .gd-list li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 23.2px; color: var(--ink-2); }
body.gd .gd-list li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
body.gd .gd-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
body.gd .gd-previews img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
body.gd .gd-sign { margin-top: 22px; } body.gd .gd-sign b { font: 500 18px/1.3 "Fraunces", Georgia, serif; color: var(--ink); } body.gd .gd-sign span { font-size: 13px; color: var(--muted); }
body.gd .end-in .tag { margin-bottom: 12px; }
/* the guide itself */
body.gd .gd-head { padding: 24px 0 56px; }
body.gd .gd-head .wrap { max-width: 860px; }
body.gd .gd-title { margin: 14px 0 0; font: 400 60px/62px "Fraunces", Georgia, serif; letter-spacing: -1.2px; color: #fcf7f4; max-width: 15ch; }
body.gd .gd-sub { margin: 22px 0 0; font-size: 18px; line-height: 25.2px; color: rgba(255, 255, 255, .85); max-width: 60ch; }
body.gd .gd-by { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
body.gd .gd-by b { font: 500 18px/1.3 "Fraunces", Georgia, serif; color: var(--ink); }
body.gd .gd-head .mh-ctas { margin-top: 28px; }
body.gd .gd-sec { padding: 72px 0; border-top: 1px solid var(--rule); }
body.gd .gd-sec:first-of-type { border-top: 0; }
body.gd .gd-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
body.gd .gd-side { position: sticky; top: 24px; }
body.gd .gd-num { display: block; font: 400 96px/1 "Fraunces", Georgia, serif; color: rgba(252, 247, 244, .18); margin: -10px 0 6px; }
body.gd .gd-h2 { margin: 6px 0 0; font: 400 34px/38px "Fraunces", Georgia, serif; letter-spacing: -0.6px; color: var(--ink); }
body.gd .gd-stats { display: grid; gap: 14px; margin-top: 28px; }
body.gd .gd-stat { padding-top: 12px; border-top: 1px solid var(--rule); }
body.gd .gd-stat b { display: block; font: 400 40px/44px "Fraunces", Georgia, serif; letter-spacing: -0.8px; color: var(--ink); }
body.gd .gd-stat span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
body.gd .gd-strip { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body.gd .gd-strip li { font-size: 12px; padding: 3px 8px; border: 1px solid rgba(252, 247, 244, .3); border-radius: 4px; color: var(--ink); }
body.gd .gd-sec .prose p { font-size: 17px; line-height: 27px; }
body.gd .gd-sec .prose p + p { margin-top: 16px; }
body.gd .gd-sec .mh-ctas { margin-top: 28px; }
@media (max-width: 1040px) {
  body.gd .gd-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.gd .gd-side { position: static; }
  body.gd .gd-title { font-size: 44px; line-height: 46px; letter-spacing: -.8px; }
  body.gd .gd-num { font-size: 64px; }
  body.gd .gd-sec { padding: 56px 0; }
}
@media (max-width: 720px) { body.gd .gd-previews { grid-template-columns: 1fr 1fr; gap: 10px; } body.gd .gd-head { padding: 8px 0 40px; } }