/* Do Your Job in Half the Time: site styles (sales page + member area).
   Tokens (and the Oswald @font-face) live in site/tokens.css, inlined into every page <head> by build.py; copied from course-site/design-system/colors_and_type.css; brand-style tokens in .claude/skills/brand-style/tokens.yml.
   Cover black bands carry the hero, the offer and the footer; warm paper carries everything you read; course cream
   only where the course art shows the product. Amber is a fill (buttons, highlights) or display type on dark, never text on light. */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-base); color: var(--text-primary); font: var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; height: auto; }
a { color: var(--accent-alt); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0 0 16px; letter-spacing: 0.005em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.3; margin: 0 0 8px; }
p { margin: 0 0 14px; }
:focus-visible { outline: 3px solid var(--accent-alt); outline-offset: 2px; border-radius: 2px; }
.band-dark :focus-visible, .top :focus-visible, .foot :focus-visible { outline-color: var(--accent); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--accent); color: var(--bg-dark); padding: 10px 16px; border-radius: var(--r-md); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 24px; }
.text { max-width: var(--wrap-text); }
.narrow { max-width: 760px; }
.pad { padding-top: 48px; padding-bottom: 72px; }
.muted { color: var(--text-secondary); }
.small { font-size: var(--fs-small); }
.lead { font-size: 1.25rem; color: var(--text-secondary); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.right { margin-left: auto; }
.center { text-align: center; }

section { padding: var(--section-pad) 0; }
.band-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.band-dark .muted, .band-dark .lead { color: var(--text-on-dark-muted); }
.band-dark a:not(.btn) { color: var(--text-on-dark); }
.band-cream { background: var(--bg-alt); }
.eyebrow { display: block; font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-alt); margin-bottom: 10px; }
.band-dark .eyebrow { color: var(--brand-band); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 1.0625rem/1.2 var(--font-body); padding: 16px 26px; border-radius: var(--r-md); text-decoration: none; border: 2px solid transparent; cursor: pointer; background: var(--text-primary); color: var(--bg-base); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn { white-space: nowrap; }
@media (max-width: 560px) { .btn { font-size: 1rem; padding-left: 18px; padding-right: 18px; } .btn-sm { font-size: 14px; padding: 9px 14px; } }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary, .btn.gold { background: var(--accent); color: var(--bg-dark); }
.btn-primary:hover, .btn.gold:hover { background: var(--accent-hover); }
.btn-primary:focus-visible, .btn.gold:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.band-cream .btn-primary:focus-visible, main .btn-primary:focus-visible { outline-color: var(--accent-alt); }
.band-dark .btn-primary:focus-visible { outline-color: var(--accent); }
.btn-secondary, .btn.ghost { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.btn-secondary:hover, .btn.ghost:hover { background: var(--accent-bg); }
.band-dark .btn-secondary { color: var(--text-on-dark); border-color: rgba(244, 240, 229, 0.55); }
.btn-sm { padding: 10px 16px; font-size: var(--fs-small); }
.btn-block { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- header and footer ---------- */
.top { background: var(--bg-dark); color: var(--text-on-dark); border-bottom: 1px solid var(--border-dark); position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: block; margin-right: auto; line-height: 0; }
.brand img { width: 132px; height: auto; }
#nav { display: flex; gap: 20px; align-items: center; font-size: var(--fs-small); }
#nav a { color: var(--text-on-dark); text-decoration: none; font-weight: 600; }
#nav a:hover { text-decoration: underline; }
.foot { background: var(--bg-dark); color: var(--text-on-dark-muted); padding: 44px 0 52px; font-size: var(--fs-small); }
.foot .wrap { display: flex; gap: 20px 32px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.foot a { color: var(--text-on-dark); }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- hero ----------
   One action: the amber "Get the course" button is the only amber fill in the hero. Lockup, price and badge stay cream.
   Sized so lockup, subhead, price and button sit above the fold at 1280x720 and on a 375x812 phone. */
.hero { padding: clamp(24px, 5vh, 60px) 0 clamp(32px, 6vh, 72px); }
/* hero uses the shared --wrap-max so it lines up with the header and body sections */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head media" "text media"; column-gap: clamp(32px, 4vw, 64px); row-gap: clamp(14px, 2.4vh, 24px); align-items: center; }
.h-head { grid-area: head; align-self: end; }
.h-text { align-self: start; }
.h-media { grid-area: media; }
.h-text { grid-area: text; min-width: 0; }
.hero .eyebrow { color: var(--text-on-dark-muted); margin-bottom: 8px; }
.lockup { margin: 0; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.02; }
.lockup .l1 { display: block; font-size: clamp(1.2rem, min(2vw, 3.4vh), 2.1rem); letter-spacing: 0.06em; color: var(--text-on-dark-muted); }
.lockup .l2 { display: block; white-space: nowrap; font-size: clamp(2.6rem, min(6.4vw, 10.5vh), 6.6rem); line-height: .95; letter-spacing: 0.01em; color: var(--text-on-dark); }
.hero .sub { font-size: clamp(1.05rem, min(1.6vw, 2.7vh), 1.55rem); line-height: 1.5; max-width: 34em; color: var(--text-on-dark); margin-bottom: 18px; }
.cta-row { display: flex; gap: 12px 14px; flex-wrap: wrap; align-items: center; }
.under-cta { margin: 10px 0 0; font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.credit { margin: 10px 0 0; font-size: 13px; color: var(--text-on-dark-muted); }
.clip { margin: 0; }
.clip .frame { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-dark); background: var(--bg-alt); aspect-ratio: 16 / 9; }
.clip video { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 901px) { .hero .buy-btn { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); padding: clamp(14px, 2.2vh, 20px) clamp(26px, 2.4vw, 36px); } }

/* ---------- offer / price (cream; amber is kept for the button) ---------- */
.offer { margin: 0 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.badge { display: inline-block; border: 1px solid rgba(244, 240, 229, 0.5); color: var(--text-on-dark); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-sm); }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.price s { font-family: var(--font-heading); font-size: clamp(1.25rem, min(1.8vw, 3vh), 1.9rem); color: var(--text-on-dark-muted); text-decoration-thickness: 2px; }
.price b { font-family: var(--font-heading); font-size: clamp(2.2rem, min(3.6vw, 6.2vh), 3.8rem); line-height: 1; color: var(--text-on-dark); font-variant-numeric: tabular-nums; }
.price-note { margin: 0; width: 100%; font-size: 13px; color: var(--text-on-dark-muted); }

/* ---------- faster-way before -> after ---------- */
.ba { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ba li { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.ba p { margin: 0; }
.ba-b { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(122, 111, 96, .55); font-size: var(--fs-small); }
.ba-a { font-weight: 650; margin-top: 4px !important; padding-left: 22px; position: relative; }
.ba-a::before { content: "\2192"; position: absolute; left: 0; color: var(--accent-alt); }
.ba-l { margin-top: 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-alt); }

/* ---------- recent-purchase note (sales page) ---------- */
.toast { position: fixed; left: 16px; bottom: 16px; z-index: 30; max-width: 360px; display: flex; gap: 8px; align-items: flex-start; background: var(--bg-dark); color: var(--text-on-dark); border: 1px solid var(--border-dark); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 12px 8px 12px 14px; font-size: 14px; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.toast.on { opacity: 1; transform: none; }
.toast p { margin: 0; }
.toast-x { background: none; border: 0; color: var(--text-on-dark-muted); font-size: 20px; line-height: 1; padding: 0 6px; cursor: pointer; }
@media (max-width: 560px) { .toast { left: 50%; right: auto; width: calc(100vw - 32px); transform: translate(-50%, 8px); } .toast.on { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- savings stack (math section) ---------- */
.stack-row { margin-top: 112px; }
@media (min-width: 901px) { .stack-row > .text { order: 2; } .stack-row > .stack { order: 1; } }   /* chart left, text right */
.stack { margin: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 18px; }
.bars-h { margin: 0 0 10px; font-weight: 650; font-size: var(--fs-small); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 4.6em 1fr 6.6em; gap: 10px; align-items: center; font-size: var(--fs-small); }
.bars .wk { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bars .track { height: 16px; background: var(--bg-alt); border-radius: 4px; position: relative; overflow: hidden; }
.bars .track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed var(--text-muted); opacity: .6; }
.bars i { display: block; height: 100%; background: var(--bg-dark); border-radius: 4px; }
.bars li:last-child i { background: var(--accent-alt); }
.bars .v { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.stack h3 { margin: 0 0 6px; }
.stack .fields { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 6px 0 14px; }
.stack label { margin-top: 0; }
.stack select { width: 100%; height: 48px; font: inherit; font-size: 1rem; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); color: var(--text-primary); }
.pace-out { background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--r-md); padding: 14px 16px; font-weight: 600; margin: 0 0 14px; }
.stack .fine { font-size: 13px; color: var(--text-secondary); margin: 12px 0 0; }
@media (max-width: 560px) { .stack .fields { grid-template-columns: 1fr; } }
.use-it { margin-top: 40px; }
.use { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, max-content); gap: 10px; }
@media (max-width: 1100px) { .use { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 760px) { .use { grid-template-columns: 1fr; } .use li { justify-self: start; } }
@media (max-width: 560px) { .use { grid-template-columns: 1fr; } .use li { justify-self: start; } }
.use li { background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: var(--fs-small); font-weight: 600; }

/* ---------- hero trailer: tap for sound, end card ---------- */
.tap-sound { position: absolute; right: 8px; top: 8px; z-index: 2; background: rgba(26, 19, 14, 0.82); color: var(--text-on-dark); border: 1px solid rgba(244, 240, 229, 0.35); border-radius: 999px; font: 700 12px/1 var(--font-body); padding: 8px 12px; cursor: pointer; }
.tap-sound:hover { background: rgba(26, 19, 14, 0.95); }
.clip .frame { cursor: pointer; }
.clip .frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vicon { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(26, 19, 14, 0.55); opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
.vicon::before { content: ""; position: absolute; left: 50%; top: 50%; }
.vicon[data-state="pause"]::before { width: 22px; height: 26px; margin: -13px 0 0 -11px; border-left: 7px solid var(--text-on-dark); border-right: 7px solid var(--text-on-dark); box-sizing: border-box; }
.vicon[data-state="play"]::before { margin: -14px 0 0 -8px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent var(--text-on-dark); }
.clip .frame.flash .vicon, .clip .frame.paused .vicon, .clip .frame:focus-visible .vicon { opacity: 1; }
@media (hover: hover) { .clip .frame:hover .vicon { opacity: 1; } }
.endcard:not([hidden]) ~ .vicon, .clip .frame:has(.endcard:not([hidden])) .vicon { opacity: 0; }
.endcard { position: absolute; inset: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; align-content: center; background: rgba(26, 19, 14, 0.72); padding: 16px; }
.endcard .btn-secondary { color: var(--text-on-dark); border-color: rgba(244, 240, 229, 0.6); background: rgba(26, 19, 14, 0.4); }
.endcard form { margin: 0; }

/* ---------- AI band ---------- */
.ai-band .text p { color: var(--text-on-dark); }
.ai-needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-needs li { background: var(--bg-dark-alt); border: 1px solid var(--border-dark); border-radius: var(--r-md); padding: 18px; }
.ai-needs b { display: block; font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: .01em; margin-bottom: 6px; color: var(--text-on-dark); }
.ai-needs span { font-size: var(--fs-small); color: var(--text-on-dark-muted); line-height: 1.5; }
@media (max-width: 560px) { .ai-needs { grid-template-columns: 1fr; } }
.nav-buy { margin: 0; }

/* ---------- book down-sell (never in the hero) ---------- */
.down-sell { margin: 12px 0 0; font-size: var(--fs-small); color: var(--text-on-dark-muted); text-align: center; }
.down-sell a { color: var(--text-on-dark); }
.foot nav a[rel~="sponsored"] { color: var(--text-on-dark); }

/* ---------- dialogs (exit offer, upgrade prompt) ---------- */
.dlg { border: 0; padding: 0; border-radius: var(--r-lg); max-width: min(560px, calc(100vw - 32px)); width: 100%; background: var(--bg-dark); color: var(--text-on-dark); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.dlg::backdrop { background: rgba(26, 19, 14, 0.62); }
.dlg .dlg-body { padding: 28px 26px 26px; }
.dlg .dlg-body > .eyebrow { color: var(--text-on-dark-muted); margin: 0 0 4px; }
.dlg h2 { font-size: 1.8rem; color: var(--text-on-dark); }
.dlg .muted { color: var(--text-on-dark-muted); }
.dlg .m1 { padding: 0; background: none; }
.dlg .m1 h3 { font-family: var(--font-heading); font-size: 1.7rem; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 6px; }
.dlg-x { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: var(--text-on-dark); font-size: 28px; line-height: 1; padding: 6px 10px; cursor: pointer; }
.dlg :focus-visible { outline-color: var(--accent); }

/* ---------- upgrade (signed-in Module 1 members) ---------- */
.upgrade { margin-top: 36px; border-radius: var(--r-lg); padding: 28px; }
.upgrade h2 { color: var(--text-on-dark); font-size: 1.7rem; }
.upgrade .offer { margin-top: 6px; }
.nav-up { margin: 0; }
.nav-up .btn, #nav form.buy .btn { padding: 8px 14px; font-size: 14px; }
.locked-lesson { display: flex; gap: 6px; align-items: center; background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; text-align: left; }
.locked-lesson:hover span { text-decoration: underline; }
.side .locked-lesson { padding: 5px 8px; width: 100%; border-radius: var(--r-sm); }
.lock { flex: none; opacity: .75; }

/* ---------- content sections ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.callout { margin-top: 28px; background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--r-lg); padding: 24px 28px; display: flex; gap: 12px 22px; align-items: baseline; flex-wrap: wrap; }
.callout .n { font-family: var(--font-heading); font-weight: 700; font-size: 2.6rem; color: var(--accent); line-height: 1; }
.callout small { display: block; color: var(--text-on-dark-muted); font-size: 13px; margin-top: 6px; }
.calc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; }
.calc .fields { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 6px 0 18px; }
.calc label { margin-top: 0; }
.calc .hint { font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
.calc .out { background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--r-md); padding: 18px 20px; }
.calc .out b { font-family: var(--font-heading); font-size: 2rem; color: var(--accent); line-height: 1.1; display: block; font-variant-numeric: tabular-nums; }
.calc .fine { font-size: 13px; color: var(--text-secondary); margin: 12px 0 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.step { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; }
.step .num { font-family: var(--font-heading); font-weight: 700; font-size: 2.2rem; color: var(--accent-alt); line-height: 1; margin-bottom: 10px; }
.step p { color: var(--text-secondary); margin: 0; font-size: 1rem; }
.checks { list-style: none; padding: 0; margin: 20px 0 0; }
.checks li { padding: 10px 0 10px 32px; position: relative; border-bottom: 1px solid var(--border); }
.checks li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 12px; height: 7px; border-left: 2px solid var(--accent-alt); border-bottom: 2px solid var(--accent-alt); transform: rotate(-45deg); }
.checks.cols { columns: 2; column-gap: 40px; }
.checks.cols li { break-inside: avoid; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 8px; }
.lcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: box-shadow var(--dur) var(--ease); }
.lcard:hover { box-shadow: var(--shadow-sm); }
.lcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lcard .body { padding: 14px 16px 18px; }
.lcard h3 { margin: 6px 0 4px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-alt); }
.tag.free { background: var(--accent-bg); padding: 3px 8px; border-radius: var(--r-sm); }
.free-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; margin-top: 28px; }
.m1list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; }
.m1list h3 { margin: 0 0 10px; }
.m1list ol { margin: 0; padding-left: 22px; }
.m1list li { padding: 7px 0; border-top: 1px solid var(--border); }
.m1list li:first-child { border-top: 0; }
.m1list li { display: list-item; }
.m1list li span.d { float: right; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: 12px; }
.m1 { background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--r-lg); padding: 26px; }
.m1 h3 { color: var(--text-on-dark); }
.m1 p { color: var(--text-on-dark-muted); }
.m1 label { color: var(--text-on-dark); }
.m1 input[type=email] { border-color: var(--border-dark); }
.m1 .consent { font-size: 13px; color: var(--text-on-dark-muted); margin: 12px 0 0; }
.m1 .msg { margin: 12px 0 0; font-size: var(--fs-small); color: var(--text-on-dark); }
.m1-light { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
.m1-light h3, .m1-light label, .m1-light .msg { color: var(--text-primary); }
.m1-light p, .m1-light .consent { color: var(--text-secondary); }
.m1-light input[type=email] { border-color: var(--border); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.vs > div { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; }
.vs ul { margin: 8px 0 0; padding-left: 20px; }
.vs li + li { margin-top: 6px; }
.book { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: center; }
.book img { width: 180px; border-radius: 4px; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.fit > div { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; }
.fit ul { margin: 10px 0 0; padding-left: 20px; }
.fit li + li { margin-top: 8px; }
blockquote.pull { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); font-size: 1.1875rem; }

/* curriculum */
.modules { margin-top: 24px; border-top: 1px solid var(--border); }
.module { border-bottom: 1px solid var(--border); }
.module summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 16px 4px; align-items: baseline; }
.module summary::-webkit-details-marker { display: none; }
.module summary::after { content: "+"; grid-column: 3; grid-row: 1; justify-self: end; font-weight: 700; color: var(--accent-alt); width: 1em; text-align: center; }
.module[open] summary::after { content: "\2212"; }
.module .mn { font-family: var(--font-heading); font-weight: 700; color: var(--accent-alt); }
.module .mt { font-weight: 650; }
.module .md { color: var(--text-muted); font-size: var(--fs-small); white-space: nowrap; margin-right: 1.6em; grid-column: 3; grid-row: 1; }
.module ol { margin: 0; padding: 0 4px 18px 60px; color: var(--text-secondary); font-size: var(--fs-small); }
.module li { margin: 5px 0; }
.module li .d { color: var(--text-muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.module li.done a::after { content: " \2713"; color: var(--success); font-weight: 700; }
.module li.locked { color: var(--text-muted); }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent-alt); white-space: nowrap; margin-left: 6px; }
.pill.dark { background: var(--bg-dark); color: var(--text-on-dark); }
.includes-note { margin-top: 18px; color: var(--text-secondary); }

/* offer band */
.offer-grid { display: grid; grid-template-columns: 1fr 430px; gap: 56px; align-items: center; }
.price-card { background: var(--bg-dark-alt); border: 1px solid var(--border-dark); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow); }
.includes { list-style: none; margin: 18px 0 22px; padding: 0; }
.includes li { padding: 8px 0; border-bottom: 1px solid var(--border-dark); font-size: var(--fs-small); color: var(--text-on-dark); }
.price-card .under-cta { text-align: center; }

/* faq */
.faq details { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-alt); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; color: var(--text-secondary); }

/* ---------- forms ---------- */
label { display: block; font-weight: 650; margin: 12px 0 6px; font-size: var(--fs-small); }
input[type=text], input[type=email], input[type=number], textarea { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); color: var(--text-primary); }
textarea { min-height: 120px; resize: vertical; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent-alt); flex: none; margin: 2px 0 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 14px 0; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 220px; }
input[type=email] { height: 48px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.inline-form .btn { height: 48px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 560px) { .inline-form { flex-direction: column; align-items: stretch; } .inline-form input { flex: none; } }
.ok { color: var(--success); }
.err { color: var(--danger); }

/* ---------- member area ---------- */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; }
.banner { background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 20px; }
.banner a { color: var(--accent); font-weight: 700; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--bg-alt); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; border: 1px solid var(--border); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--accent); color: var(--bg-dark); font-weight: 700; padding: 14px 24px; border-radius: var(--r-md); white-space: nowrap; box-shadow: 0 4px 18px rgba(0,0,0,.18); border: 0; font-size: 1rem; cursor: pointer; }
.video.live { cursor: default; }
.video .mark { position: absolute; right: 12px; bottom: 44px; font-size: 12px; color: rgba(255,255,255,.35); pointer-events: none; text-shadow: 0 0 2px rgba(0,0,0,.4); }
.band-dark .video { border-color: var(--border-dark); }
.bar { height: 8px; background: var(--bg-alt); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s var(--ease); }
.lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding-top: 28px; padding-bottom: 72px; }
.lesson-grid h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.crumb { font-size: var(--fs-small); color: var(--text-muted); margin: 0 0 6px; }
.side { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 104px); overflow: auto; font-size: 14px; padding: 16px; }
.side a { display: block; padding: 5px 8px; border-radius: var(--r-sm); text-decoration: none; color: var(--text-primary); }
.side a:hover { background: var(--bg-alt); }
.side a.on { background: var(--accent-bg); font-weight: 700; }
.side a.done::before { content: "\2713 "; color: var(--success); font-weight: 700; }
.side h2 { font-family: var(--font-body); margin: 14px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.notes { margin-top: 8px; }
.notes ul { padding-left: 22px; }
.notes li.todo { list-style: none; margin-left: -22px; display: flex; gap: 8px; }
.notes li.todo input { margin-top: 4px; }
.notes blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--gold); color: var(--text-secondary); }
.notes h2 { font-size: 1.5rem; margin-top: 28px; }
.notes h3 { margin-top: 20px; }
.tabs { display: flex; gap: 10px; margin: 22px 0 10px; flex-wrap: wrap; }
.thread { border-top: 1px solid var(--border); padding: 14px 0; }
.meta { font-size: 13px; color: var(--text-secondary); }
.reply { border-left: 3px solid var(--border); padding: 6px 0 6px 14px; margin: 12px 0; }
.reply.admin { border-left-color: var(--gold); }
.skeleton { color: var(--text-secondary); font-size: 14px; }
.notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 520px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px 22px; }
.notice h2 { font-size: 1.4rem; margin-bottom: 6px; }

/* ---------- responsive + motion ---------- */
@media (max-width: 900px) {
  section { padding: var(--section-pad-mobile) 0; }
  .hero { padding: 36px 0 40px; }
  .hero-grid, .two, .offer-grid, .fit, .free-grid, .vs, .book { grid-template-columns: 1fr; gap: 32px; }
  .hero-grid { grid-template-areas: "head" "text" "media"; row-gap: 20px; }
  .steps, .cards { grid-template-columns: 1fr; }
  .checks.cols { columns: 1; }
  .lesson-grid { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
  .book img { width: 140px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .pad, .lesson-grid { padding-top: 36px; }   /* breathing room between the header and the first heading */
  .calc .fields { grid-template-columns: 1fr; }
  .brand img { width: 112px; }
  #nav { gap: 14px; }
  .module summary { grid-template-columns: 34px 1fr auto; }
  .module .md { display: none; }
  .module ol { padding-left: 46px; }
  .cta-row .btn, .cta-row form { width: 100%; }
  .hero .sub { font-size: 1rem; margin-bottom: 14px; }
  .lockup .l2 { font-size: min(14vw, 3.6rem); }
  .price b { font-size: 2.2rem; }
  .nav-qa { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* space between page content and the footer on every page (sections bring their own padding) */
main > div.wrap:last-child, main > .pad:last-child { margin-bottom: 0; }
main > :not(section):last-child { padding-bottom: max(56px, var(--pb, 0px)); }
section.faq { padding-bottom: 64px; }
/* footer sits at the bottom on short pages (no paper showing below it) */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { flex: 1 0 auto; }

/* USP line: each point stays whole; points wrap as units, never mid-phrase */
.usps { display: flex; flex-wrap: wrap; gap: 4px 0; }
.usps span { white-space: nowrap; }
.usps span + span::before { content: "·"; margin: 0 .6em; opacity: .6; }
.usps span.ln::before { content: none; }   /* set by app.js when the span starts a new line */