:root, [data-theme="light"] {
  --bg: #F6F1E9; --surface: #FCFAF6; --surface-2: #EFE8DC; --surface-3: #E7DECF;
  --border: #DCD2C2; --divider: #E6DED1;
  --text: #1D2533; --muted: #565E6D; --faint: #858B96; --inverse: #FCFAF6;
  --navy: #1F2E4A; --navy-2: #2A3D60;
  --primary: #A6472A; --primary-hover: #8C3A21; --primary-soft: #F2DED4;
  --s1: #A6472A; --s1-soft: #F2DED4;
  --s2: #2C6E64; --s2-soft: #D8EAE6;
  --s3: #6B4A8E; --s3-soft: #E6DDF0;
  --alert: #A3262E; --alert-soft: #F6DEDF;
  --success: #3C6E2F;
  --shadow-sm: 0 1px 2px rgba(31,46,74,.06);
  --shadow-md: 0 6px 20px rgba(31,46,74,.08);
  --shadow-lg: 0 18px 50px rgba(31,46,74,.14);
  --font-display: 'Zodiak', 'Georgia', serif;
  --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --text-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.17vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --text-3xl: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px;
  --content: 72rem; --narrow: 44rem;
  --ease: cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"] {
  --bg: #121722; --surface: #19202D; --surface-2: #202939; --surface-3: #283246;
  --border: #33405A; --divider: #283246;
  --text: #ECE6DC; --muted: #AEB4BF; --faint: #7F8796; --inverse: #121722;
  --navy: #0D121B; --navy-2: #1A2232;
  --primary: #E5906F; --primary-hover: #F0A688; --primary-soft: #3A2620;
  --s1: #E5906F; --s1-soft: #3A2620;
  --s2: #6CC2B3; --s2-soft: #1A3330;
  --s3: #BBA0DD; --s3-soft: #2C2340;
  --alert: #F08A8F; --alert-soft: #3A1E22;
  --success: #8FCB7E;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 20px rgba(0,0,0,.35); --shadow-lg: 0 18px 50px rgba(0,0,0,.45);
}

body { font-family: var(--font-body); font-size: var(--text-base); color: var(--text); background: var(--bg); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--text); }
h3 { font-size: var(--text-lg); margin: 2.2rem 0 .8rem; }
h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); margin-bottom: .35rem; }
p + p { margin-top: .9rem; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
.small { font-size: var(--text-sm); }
.muted { color: var(--muted); }
strong { font-weight: 700; }
cite { font-style: normal; font-weight: 500; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: .6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--divider); transition: box-shadow .2s var(--ease); }
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .7rem clamp(1rem, 3vw, 2rem); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); }
.brand svg { flex: none; }
.brand__name { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; letter-spacing: -.01em; }
.brand__name small { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.nav { display: flex; gap: .2rem; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; color: var(--muted); font-size: var(--text-sm); font-weight: 500; padding: .5rem .75rem; border-radius: var(--r-sm); transition: color .15s, background .15s; white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.nav .nav__fac { color: var(--inverse); background: var(--navy); }
[data-theme="dark"] .nav .nav__fac { background: var(--surface-3); color: var(--text); }
.nav .nav__fac:hover, .nav .nav__fac[aria-current="page"] { color: #fff; background: var(--navy-2); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: inline-grid; margin-left: auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); padding: .5rem 1rem 1rem; box-shadow: var(--shadow-md); }
  .nav.open { display: flex; }
  .nav a { padding: .8rem .75rem; font-size: var(--text-base); }
}

/* ---------- Layout ---------- */
main { min-height: 70vh; }
.wrap { max-width: var(--content); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.narrow { max-width: var(--narrow); }
.section-pad { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.eyebrow { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--primary); }
.eyebrow--s1 { color: var(--s1); } .eyebrow--s2 { color: var(--s2); } .eyebrow--s3 { color: var(--s3); } .eyebrow--navy { color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .72rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: var(--text-sm); text-decoration: none; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .15s; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; }
[data-theme="dark"] .btn--primary { color: #1b120e; }
.btn--primary:hover { background: var(--primary-hover); color: #fff; }
[data-theme="dark"] .btn--primary:hover { color: #1b120e; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); color: #fff; }
.btn--ghost { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); }
.btn--sm { padding: .5rem .85rem; font-size: var(--text-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Home ---------- */
.hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero h1 { font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -.02em; margin: .8rem 0 1.2rem; }
.hero h1 em { font-style: italic; color: var(--primary); }
.hero__lede { font-size: var(--text-lg); color: var(--muted); max-width: 34rem; line-height: 1.55; }
.hero__img { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3.2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero .btn-row { margin-top: 1.8rem; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__img { order: -1; aspect-ratio: 16/10; } }

.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.path { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.path:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--text); border-color: var(--faint); }
.path h2 { font-size: var(--text-xl); }
.path p { color: var(--muted); }
.path ul { color: var(--muted); font-size: var(--text-sm); padding-left: 1.1rem; list-style: disc; display: grid; gap: .3rem; }
.path__go { margin-top: auto; font-weight: 700; font-size: var(--text-sm); color: var(--primary); }
.path--fac { background: var(--navy); border-color: var(--navy); color: #EDE7DD; }
.path--fac h2 { color: #fff; } .path--fac p, .path--fac ul { color: #C3CAD6; } .path--fac .path__go { color: #F0A688; } .path--fac .eyebrow { color: #F0A688; }
.path--fac:hover { color: #EDE7DD; border-color: var(--navy-2); }
@media (max-width: 760px) { .paths { grid-template-columns: 1fr; } }

.sec-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.sec-card { padding: 1.5rem; border-radius: var(--r-lg); background: var(--surface); border-top: 4px solid var(--accent, var(--primary)); box-shadow: var(--shadow-sm); }
.sec-card h3 { margin: .4rem 0 .5rem; font-size: var(--text-lg); }
.sec-card p { color: var(--muted); font-size: var(--text-sm); }
@media (max-width: 860px) { .sec-strip { grid-template-columns: 1fr; } }
.h2 { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -.015em; margin: .5rem 0 1rem; }
.lede { font-size: var(--text-lg); color: var(--muted); max-width: 40rem; }

.note-band { background: var(--surface-2); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .note-band { grid-template-columns: 1fr; } }

/* ---------- Journey / lesson layout ---------- */
.page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; }
.page-head h1 { font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -.015em; margin: .5rem 0 .8rem; }
.progress { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s var(--ease); }
.progress-row { display: flex; align-items: center; gap: 1rem; max-width: 28rem; margin-top: 1.2rem; font-size: var(--text-sm); color: var(--muted); }
.progress-row .progress { flex: 1; }

.journey { display: grid; gap: 2.5rem; padding-bottom: 4rem; }
.j-sec { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--divider); }
.j-sec h2 { font-size: var(--text-xl); margin: .4rem 0 .6rem; }
.j-sec__intro p { color: var(--muted); font-size: var(--text-sm); }
.j-list { display: grid; gap: .5rem; }
.j-item { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .9rem; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s var(--ease); }
.j-item:hover { border-color: var(--faint); transform: translateX(3px); color: var(--text); }
.j-item__n { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; background: var(--surface-2); color: var(--muted); }
.j-item.done .j-item__n { background: var(--accent, var(--primary)); color: #fff; }
.j-item__t { font-weight: 600; }
.j-item__m { font-size: var(--text-xs); color: var(--faint); display: flex; gap: .6rem; align-items: center; white-space: nowrap; }
.chip { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: .18rem .5rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
@media (max-width: 860px) { .j-sec { grid-template-columns: 1fr; gap: 1rem; } .j-item__m .chip { display: none; } }

.lesson-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: 2rem 0 4rem; }
.side { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow: auto; font-size: var(--text-sm); }
.side h2 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 1.2rem 0 .5rem; }
.side h2:first-child { margin-top: 0; }
.side a { display: flex; gap: .5rem; align-items: baseline; padding: .38rem .6rem; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; line-height: 1.35; }
.side a:hover { background: var(--surface-2); color: var(--text); }
.side a[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent, var(--primary)); }
.side a .tick { flex: none; width: .9rem; color: var(--accent, var(--primary)); font-weight: 700; }
@media (max-width: 960px) { .lesson-layout { grid-template-columns: 1fr; } .side { display: none; } }

.lesson { max-width: 46rem; }
.lesson__head h1 { font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -.015em; margin: .5rem 0 .9rem; }
.lesson__dek { font-size: var(--text-lg); color: var(--muted); line-height: 1.5; }
.lesson__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: 1.1rem; font-size: var(--text-sm); color: var(--muted); }
.lesson__body { margin-top: 2rem; line-height: 1.68; }
.lesson__body ul:not(.tight):not(.plain):not(.blist) { list-style: disc; padding-left: 1.2rem; display: grid; gap: .45rem; margin: .8rem 0; }
.lesson__body ul.tight { list-style: none; display: grid; gap: .35rem; font-size: var(--text-sm); }
.lesson__body ol:not(.numbered):not(.dtr-steps):not(.ten-steps) { list-style: decimal; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: var(--text-sm); }
ol.numbered { counter-reset: n; display: grid; gap: .7rem; margin: .8rem 0; }
ol.numbered > li { counter-increment: n; position: relative; padding-left: 2.4rem; }
ol.numbered > li::before { content: counter(n); position: absolute; left: 0; top: .05rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: .78rem; font-weight: 700; display: grid; place-items: center; }
ol.numbered.cols-2 { grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; font-size: var(--text-sm); }
@media (max-width: 640px) { ol.numbered.cols-2 { grid-template-columns: 1fr; } }

.callout { background: var(--surface-2); border-left: 4px solid var(--accent, var(--primary)); padding: 1.1rem 1.3rem; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 1.4rem 0; font-size: var(--text-sm); }
.callout h4 { margin-bottom: .4rem; }
.callout--alert { background: var(--alert-soft); border-left-color: var(--alert); }
.callout--alert a { color: var(--alert); }
.pull { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.45; color: var(--text); border-left: 3px solid var(--accent, var(--primary)); padding: .3rem 0 .3rem 1.2rem; margin: 1.8rem 0; }

.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1rem 0; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: var(--text-sm); }
.tile p { color: var(--muted); }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }
.defs { display: grid; grid-template-columns: 9rem 1fr; gap: .8rem 1.2rem; margin: 1.2rem 0; }
.defs dt { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent, var(--primary)); }
@media (max-width: 600px) { .defs { grid-template-columns: 1fr; gap: .2rem; } .defs dd { margin-bottom: .8rem; } }

.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1rem 0 1.5rem; }
.steps4 > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; font-size: var(--text-sm); position: relative; }
.steps4 h4 { font-size: var(--text-sm); }
.steps4 p { color: var(--muted); }
.steps4__n { font-family: var(--font-display); font-size: 1.8rem; color: var(--accent, var(--primary)); line-height: 1; display: block; margin-bottom: .4rem; }
@media (max-width: 700px) { .steps4 { grid-template-columns: 1fr 1fr; } }

.stage-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 1rem 0 1.5rem; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.stage-row > div { padding: 1rem; font-size: var(--text-sm); border-right: 1px solid var(--border); }
.stage-row > div:last-child { border-right: 0; }
.stage-row p { color: var(--muted); }
.stage-row h4 { color: var(--accent, var(--primary)); font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); }
.quote-sm { font-style: italic; color: var(--text) !important; margin-bottom: .4rem; }
@media (max-width: 760px) { .stage-row { grid-template-columns: 1fr 1fr; } .stage-row > div:nth-child(2) { border-right: 0; } .stage-row > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.1rem 1.2rem; }
.panel h4 { color: var(--accent, var(--primary)); }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

.roadmap { display: grid; grid-template-columns: 1fr 9rem 1fr; gap: .8rem; margin: 1.4rem 0; align-items: stretch; }
.roadmap__side { border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: var(--text-sm); }
.roadmap__side p + p { margin-top: .5rem; }
.roadmap__side--pain { background: var(--alert-soft); }
.roadmap__side--pain h4 { color: var(--alert); }
.roadmap__side--pleasure { background: var(--s2-soft); }
.roadmap__side--pleasure h4 { color: var(--s2); }
.roadmap__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center; font-size: var(--text-sm); color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .8rem; }
.roadmap__center strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); font-weight: 500; margin-top: .3rem; }
.roadmap__center small { font-size: .72rem; }
@media (max-width: 700px) { .roadmap { grid-template-columns: 1fr; } .roadmap__center { flex-direction: row; flex-wrap: wrap; } }

.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0 1.4rem; }
.style-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: var(--text-sm); }
.style-card .tag { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, var(--primary)); margin: .1rem 0 .5rem; }
.style-card p:not(.tag) { color: var(--muted); }
@media (max-width: 600px) { .style-grid { grid-template-columns: 1fr; } }
.say-list { display: grid; gap: .5rem; margin: 1.2rem 0; }
.say-list p { margin: 0 !important; font-family: var(--font-display); font-size: var(--text-lg); padding: .7rem 1rem; background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--border); }

.dtr-steps { display: grid; gap: .7rem; margin: 1.4rem 0; }
.dtr-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: var(--text-sm); }
.dtr-steps li > span { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent, var(--primary)); color: #fff; font-family: var(--font-display); font-size: 1.25rem; display: grid; place-items: center; }
[data-theme="dark"] .dtr-steps li > span { color: #1b120e; }
.dtr-steps p { color: var(--muted); }
.stem { font-family: var(--font-display); font-size: var(--text-base); color: var(--text) !important; margin-top: .4rem !important; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: 1rem 0; background: var(--surface); border-radius: var(--r-md); overflow: hidden; }
.table th, .table td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--divider); vertical-align: top; }
.table thead th { background: var(--surface-2); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.table tbody th { font-weight: 600; }
.table--compact td, .table--compact th { padding: .5rem .7rem; }
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }

.jug { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: start; margin: 1rem 0; }
.jug__vessel { display: flex; flex-direction: column; border: 2px solid var(--border); border-radius: 18px 18px 40px 40px; overflow: hidden; text-align: center; font-size: var(--text-xs); font-weight: 700; background: var(--surface); }
.jug__vessel span { padding: .55rem .5rem; }
.jug__lid { background: var(--surface-3); color: var(--muted); font-weight: 500 !important; font-style: italic; }
.jug__l--mad { background: #C24B3B; color: #fff; } .jug__l--sad { background: #3E5C8A; color: #fff; } .jug__l--scared { background: #6B4A8E; color: #fff; }
.jug__l--up { background: var(--s2-soft); color: var(--s2); padding: 1.2rem .6rem !important; font-weight: 600 !important; line-height: 1.5; }
@media (max-width: 600px) { .jug { grid-template-columns: 1fr; } .jug__vessel { max-width: 14rem; } }
.feel-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.feel-row span { padding: .4rem .8rem; border-radius: 99px; font-size: var(--text-sm); font-weight: 700; color: #fff; }
.f-mad { background: #C24B3B; } .f-sad { background: #3E5C8A; } .f-scared { background: #6B4A8E; } .f-glad { background: #3C7A4E; }

.ten-steps { counter-reset: t; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1.2rem 0; }
.ten-steps li { counter-increment: t; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem .9rem .7rem 2.8rem; position: relative; font-size: var(--text-sm); }
.ten-steps li::before { content: counter(t); position: absolute; left: .8rem; top: .62rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--accent, var(--primary)); }
@media (max-width: 640px) { .ten-steps { grid-template-columns: 1fr; } }
.timeout { display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.3rem; font-size: var(--text-sm); }
.timeout__big { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--accent, var(--primary)); text-align: center; align-self: center; }
.timeout__big small { display: block; font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: .4rem; }
@media (max-width: 600px) { .timeout { grid-template-columns: 1fr; } }

.knots { display: grid; gap: .8rem; margin: 1.4rem 0; }
.knot { display: grid; grid-template-columns: 2.4rem 1fr 1fr; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: var(--text-sm); }
.knot__n { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent, var(--primary)); line-height: 1; }
.knot__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .3rem; }
.knot__k { font-style: italic; }
.knot__u { color: var(--text); font-weight: 500; }
.knot__r { grid-column: 2 / -1; color: var(--muted); border-top: 1px dashed var(--border); padding-top: .6rem; }
@media (max-width: 640px) { .knot { grid-template-columns: 2rem 1fr; } .knot__u-wrap { grid-column: 2; } }

.powergram-viz { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 1.2rem 0; font-size: var(--text-xs); font-weight: 700; text-align: center; }
.powergram-viz span { padding: .9rem .4rem; background: var(--s3-soft); color: var(--s3); border-radius: var(--r-sm); display: grid; place-items: center; }
.powergram-viz .ours { background: var(--s3); color: #fff; }
[data-theme="dark"] .powergram-viz .ours { color: #1b1426; }

.loop { display: grid; grid-template-columns: 1fr 4rem 1fr; gap: .8rem; margin: 1.3rem 0; align-items: stretch; }
.loop__side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: var(--text-sm); }
.loop__side dl { display: grid; gap: .15rem; }
.loop__side dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: .5rem; }
.loop__mid { display: grid; place-items: center; align-content: center; font-family: var(--font-display); font-size: 2.6rem; color: var(--alert); line-height: 1; }
.loop__mid small { font-family: var(--font-body); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.loop--warm .loop__mid { color: var(--s2); }
@media (max-width: 640px) { .loop { grid-template-columns: 1fr; } .loop__mid { font-size: 2rem; } }

/* ---------- Slide strip ---------- */
.slides { margin: 2rem 0 0; }
.slides__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--muted); margin-bottom: .6rem; display: flex; justify-content: space-between; gap: 1rem; }
.slides__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.slides__row button { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: transform .15s var(--ease), box-shadow .15s; aspect-ratio: 481/271; }
.slides__row button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.slides__row img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Worksheets ---------- */
.ws { margin: 2.6rem 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.ws__head { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem; background: var(--accent-soft, var(--primary-soft)); border-bottom: 1px solid var(--border); }
.ws__num { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--accent, var(--primary)); min-width: 2.4rem; }
.ws__kicker { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent, var(--primary)); }
.ws__head h3 { margin: .15rem 0 .35rem; font-size: var(--text-lg); }
.ws__head p { font-size: var(--text-sm); color: var(--muted); }
.ws__body { padding: 1.2rem 1.4rem 1.4rem; display: grid; gap: 1rem; }
.ws__group-h { font-weight: 700; margin-top: .4rem; }
.field { display: grid; gap: .35rem; }
.field label, .field .lbl { font-weight: 600; font-size: var(--text-sm); display: flex; gap: .55rem; align-items: baseline; }
.field label .n { color: var(--accent, var(--primary)); font-family: var(--font-display); font-size: 1.05rem; min-width: 1.3rem; }
.field .hint { font-size: var(--text-xs); color: var(--muted); font-weight: 400; margin-left: 1.85rem; margin-top: -.2rem; }
textarea, input[type="text"], input[type="time"], select { width: 100%; font: inherit; font-size: var(--text-sm); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .65rem .8rem; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 4.2rem; resize: vertical; line-height: 1.5; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--primary)) 20%, transparent); }
.ws-grid { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ws-grid th, .ws-grid td { padding: .6rem .5rem; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.ws-grid thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; font-weight: 700; vertical-align: bottom; }
.ws-grid thead th:first-child { text-align: left; }
.ws-grid td.c { text-align: center; }
.ws-grid .rl { font-weight: 600; }
.ws-grid .rs { font-size: var(--text-xs); color: var(--muted); font-style: italic; margin-top: .15rem; }
input[type="checkbox"], input[type="radio"] { width: 1.2rem; height: 1.2rem; accent-color: var(--accent, var(--primary)); cursor: pointer; }
.pg-cell { display: inline-flex; gap: .3rem; }
.pg-cell label { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .65rem; color: var(--faint); cursor: pointer; }
.score { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--text-sm); }
.score strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }
.score.ok { background: var(--s2-soft); }
.ws__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.4rem; border-top: 1px solid var(--divider); font-size: var(--text-xs); color: var(--muted); background: var(--surface); }
.saved { display: inline-flex; gap: .4rem; align-items: center; }
.saved::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--success); }
.examples { font-size: var(--text-xs); color: var(--muted); }
.examples button { font-size: var(--text-xs); color: var(--accent, var(--primary)); text-decoration: underline; text-underline-offset: 2px; margin-right: .6rem; }

.reflect { margin-top: 2.2rem; padding: 1.3rem 1.4rem; border: 1px dashed var(--border); border-radius: var(--r-lg); display: grid; gap: .9rem; }
.reflect h3 { margin: 0; font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; }

.lesson__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--divider); }
.lesson__nav a { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: var(--r-md); border: 1px solid var(--border); text-decoration: none; color: var(--text); background: var(--surface); }
.lesson__nav a:hover { border-color: var(--faint); color: var(--text); }
.lesson__nav small { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.lesson__nav .next { text-align: right; grid-column: 2; }
.complete-btn[aria-pressed="true"] { background: var(--success); border-color: var(--success); color: #fff; }

/* ---------- Toolkit ---------- */
.tk-filter { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 1.6rem; }
.tk-filter button { padding: .5rem .9rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: var(--text-sm); color: var(--muted); transition: all .15s; }
.tk-filter button:hover { color: var(--text); border-color: var(--faint); }
.tk-filter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.tk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; display: grid; gap: .6rem; align-content: start; font-size: var(--text-sm); }
.tk-card__p { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.tk-card h3 { margin: 0; font-size: var(--text-lg); }
.tk-card dl { display: grid; gap: .5rem; }
.tk-card dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); }
.tk-card dd { color: var(--text); }
.tk-card a { font-weight: 700; font-size: var(--text-sm); }

/* ---------- Workbook ---------- */
.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; }
.wb-card { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; padding: 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); align-items: center; }
.wb-card:hover { border-color: var(--faint); color: var(--text); }
.wb-card .ws__num { font-size: 1.5rem; min-width: 0; }
.wb-card small { display: block; color: var(--muted); font-size: var(--text-xs); }
.tracker { display: grid; grid-template-columns: repeat(10, 1fr); gap: .4rem; max-width: 36rem; }
.tracker button { aspect-ratio: 1; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); font-size: var(--text-xs); font-weight: 700; color: var(--muted); transition: all .15s; }
.tracker button:hover { border-color: var(--primary); }
.tracker button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .tracker button[aria-pressed="true"] { color: #1b120e; }
@media (max-width: 520px) { .tracker { grid-template-columns: repeat(6, 1fr); } }
.privacy { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--text-sm); color: var(--muted); }
.privacy svg { flex: none; color: var(--s2); margin-top: .1rem; }

/* ---------- Facilitator ---------- */
.fac-hero { background: var(--navy); color: #E7E2D9; }
.fac-hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.fac-hero h1 { color: #fff; font-size: var(--text-2xl); line-height: 1.08; margin: .6rem 0 1rem; letter-spacing: -.015em; }
.fac-hero p { color: #C3CAD6; font-size: var(--text-lg); line-height: 1.5; }
.fac-hero .eyebrow { color: #F0A688; }
.fac-hero img { border-radius: var(--r-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.fac-hero .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.fac-hero .btn--ghost:hover { border-color: #fff; color: #fff; }
@media (max-width: 860px) { .fac-hero .wrap { grid-template-columns: 1fr; } .fac-hero img { aspect-ratio: 16/9; } }
.fac-sub { background: var(--navy); color: #C3CAD6; padding: 1.6rem 0 1.4rem; }
.fac-sub h1 { color: #fff; font-size: var(--text-xl); margin: .4rem 0 .3rem; }
.fac-sub .eyebrow { color: #F0A688; }
.fac-sub a { color: #F0A688; }
.crumbs { font-size: var(--text-xs); color: #9AA4B5; display: flex; gap: .4rem; flex-wrap: wrap; }
.crumbs a { color: #C3CAD6; text-decoration: none; } .crumbs a:hover { color: #fff; }

.seg { display: inline-flex; background: var(--surface-2); border-radius: 99px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { padding: .45rem .9rem; border-radius: 99px; font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.fac-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.2rem 0; }
.fac-controls label { font-size: var(--text-sm); color: var(--muted); display: inline-flex; align-items: center; gap: .5rem; }
.fac-controls input[type="time"] { width: auto; padding: .4rem .6rem; }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }
.fcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: var(--text); border-top: 4px solid var(--accent, var(--primary)); transition: transform .2s var(--ease), box-shadow .2s; }
a.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--text); }
.fcard h3 { margin: 0; font-size: var(--text-lg); }
.fcard p { font-size: var(--text-sm); color: var(--muted); }
.fcard .meta { font-size: var(--text-xs); color: var(--faint); margin-top: auto; padding-top: .4rem; }

.runsheet { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--surface); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.runsheet th, .runsheet td { padding: .75rem .9rem; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: middle; }
.runsheet thead th { background: var(--surface-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.runsheet .clock { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; width: 6rem; }
.runsheet .min { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; width: 5rem; white-space: nowrap; }
.runsheet tr.break td { color: var(--muted); font-style: italic; background: var(--bg); }
.runsheet tfoot td { font-weight: 700; background: var(--surface-2); }
.runsheet a { font-weight: 600; text-decoration: none; color: var(--text); }
.runsheet a:hover { color: var(--accent, var(--primary)); text-decoration: underline; }
.runsheet .act { text-align: right; white-space: nowrap; width: 1%; }

.checklist { display: grid; gap: .3rem; }
.checklist label { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem .6rem; border-radius: var(--r-sm); font-size: var(--text-sm); cursor: pointer; }
.checklist label:hover { background: var(--surface-2); }
.checklist input { margin-top: .1rem; flex: none; }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; }

.fac-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.5rem, 4vw, 3rem); padding-top: 2rem; padding-bottom: 4rem; }
@media (max-width: 960px) { .fac-grid { grid-template-columns: 1fr; } }
.fac-aside { display: grid; gap: 1rem; align-content: start; }
.box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; }
.box h2, .box h3 { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; margin: 0 0 .8rem; }
.fac-main h2 { font-size: var(--text-xl); margin: 2.2rem 0 .8rem; }
.fac-main h2:first-child { margin-top: 0; }
.blist { display: grid; gap: .55rem; }
.blist li { position: relative; padding-left: 1.2rem; line-height: 1.55; }
.blist li::before { content: ''; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent, var(--primary)); }
.qlist { counter-reset: q; display: grid; gap: .5rem; }
.qlist li { counter-increment: q; position: relative; padding: .7rem .9rem .7rem 2.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--text-sm); }
.qlist li::before { content: counter(q); position: absolute; left: .9rem; top: .62rem; font-family: var(--font-display); color: var(--accent, var(--primary)); font-size: 1.1rem; }
.exercise { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin: 1rem 0; background: var(--surface); }
.exercise__h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.2rem; background: var(--accent-soft, var(--primary-soft)); }
.exercise__h h3 { margin: 0; font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; }
.exercise__b { padding: 1.1rem 1.2rem; display: grid; gap: 1rem; font-size: var(--text-sm); }
.exercise__b h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .5rem; }
ol.steps { counter-reset: s; display: grid; gap: .5rem; }
ol.steps li { counter-increment: s; position: relative; padding-left: 2rem; line-height: 1.55; }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent, var(--primary)); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
[data-theme="dark"] ol.steps li::before { color: #121722; }
.say { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; padding: 1.2rem 1.4rem; border-radius: var(--r-lg); background: var(--surface-2); margin: 1rem 0; }
.say::before { content: 'Say it this way'; display: block; font-family: var(--font-body); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent, var(--primary)); margin-bottom: .5rem; }
.slide-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .4rem; }
.slide-mini a { display: block; aspect-ratio: 481/271; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); position: relative; }
.slide-mini a span { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.65); color: #fff; font-size: .62rem; padding: 0 4px; border-radius: 3px; }
.slide-mini img { width: 100%; height: 100%; object-fit: cover; }

.acorn { display: grid; gap: .6rem; }
.acorn li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .9rem 1rem; font-size: var(--text-sm); }
.acorn b { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--primary); font-weight: 500; text-align: center; }
.acorn h4 { margin: 0 0 .2rem; }
.lead-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; counter-reset: l; }
.lead-list li { counter-increment: l; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .9rem 1rem .9rem 3rem; position: relative; font-size: var(--text-sm); }
.lead-list li::before { content: counter(l); position: absolute; left: 1rem; top: .8rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--primary); }
@media (max-width: 760px) { .lead-list { grid-template-columns: 1fr; } }
details.faq { border-bottom: 1px solid var(--divider); }
details.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-size: 1.3rem; color: var(--muted); line-height: 1; }
details.faq[open] summary::after { content: '−'; }
details.faq p { padding: 0 0 1.1rem; color: var(--muted); font-size: var(--text-sm); max-width: 48rem; }
.toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.toc a { font-size: var(--text-sm); padding: .4rem .8rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.toc a:hover { border-color: var(--faint); }

/* ---------- Presenter ---------- */
.presenter { position: fixed; inset: 0; z-index: 80; background: #0B0F16; color: #E7E2D9; display: grid; grid-template-rows: auto 1fr auto; }
.pr-top { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid #1E2635; font-size: var(--text-sm); }
.pr-top .t { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-top .c { color: #8C96A8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-top .sp { flex: 1; }
.pr-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: var(--r-sm); color: #C3CAD6; border: 1px solid #2A3446; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.pr-btn:hover { color: #fff; border-color: #4A5670; }
.pr-btn[aria-pressed="true"] { background: #E5906F; border-color: #E5906F; color: #1b120e; }
.pr-main { display: grid; grid-template-columns: 1fr 22rem; min-height: 0; }
.pr-main.no-notes { grid-template-columns: 1fr; }
.pr-main.no-notes .pr-notes { display: none; }
.pr-stage { position: relative; display: grid; place-items: center; padding: 1.2rem; min-height: 0; }
.pr-stage img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); border-radius: 4px; background: #fff; }
.pr-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; }
.pr-nav:hover { background: rgba(255,255,255,.18); }
.pr-nav.prev { left: 1rem; } .pr-nav.next { right: 1rem; }
.pr-notes { border-left: 1px solid #1E2635; overflow: auto; padding: 1.1rem 1.2rem; font-size: var(--text-sm); background: #0F141D; }
.pr-notes h3 { font-family: var(--font-body); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #E5906F; font-weight: 700; margin: 1.2rem 0 .5rem; }
.pr-notes h3:first-child { margin-top: 0; }
.pr-notes h2 { color: #fff; font-size: var(--text-lg); margin: 0 0 .3rem; }
.pr-notes li { margin: .35rem 0; line-height: 1.5; color: #C9CFDA; padding-left: 1rem; position: relative; }
.pr-notes li::before { content: '·'; position: absolute; left: 0; color: #E5906F; font-weight: 700; }
.pr-notes .say { background: #1A2130; color: #EDE7DD; font-size: var(--text-base); }
.pr-bottom { display: flex; gap: .3rem; overflow-x: auto; padding: .5rem .8rem; border-top: 1px solid #1E2635; }
.pr-bottom button { flex: none; width: 96px; aspect-ratio: 481/271; border-radius: 3px; overflow: hidden; opacity: .5; border: 2px solid transparent; }
.pr-bottom button[aria-current="true"] { opacity: 1; border-color: #E5906F; }
.pr-bottom button:hover { opacity: .9; }
.pr-bottom img { width: 100%; height: 100%; object-fit: cover; }
.pr-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; color: #fff; padding: .3rem .7rem; border-radius: var(--r-sm); background: #1A2130; min-width: 4.6rem; text-align: center; }
.pr-timer.warn { background: #E2B04A; color: #1b1406; } .pr-timer.late { background: #D9534F; color: #fff; }
.cue { position: absolute; top: 1.4rem; right: 1.4rem; width: 5.5rem; height: 4rem; background: #FCFAF6; color: #1D2533; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.6rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
@media (max-width: 860px) { .pr-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .pr-notes { max-height: 34vh; border-left: 0; border-top: 1px solid #1E2635; } .pr-nav { width: 40px; height: 40px; } .pr-top .c.hide-sm { display: none; } }

/* Timekeeper */
.tk-screen { position: fixed; inset: 0; z-index: 80; background: #0B0F16; color: #fff; display: grid; grid-template-rows: auto 1fr auto; }
.tk-big { display: grid; place-items: center; text-align: center; }
.tk-big .digits { font-family: var(--font-display); font-size: clamp(5rem, 22vw, 16rem); line-height: 1; font-variant-numeric: tabular-nums; }
.tk-big .card { background: #FCFAF6; color: #1D2533; font-family: var(--font-display); font-size: clamp(8rem, 40vw, 26rem); line-height: 1; padding: 0 .3em; border-radius: 12px; }
.tk-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 1rem; }
.tk-controls .pr-btn { font-size: var(--text-sm); padding: .6rem 1rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8,11,17,.9); display: grid; place-items: center; padding: 1.5rem; }
.lightbox img { max-width: min(1100px, 100%); max-height: 82vh; width: 100%; height: auto; object-fit: contain; border-radius: 6px; background: #fff; }
.lightbox .cap { color: #C3CAD6; font-size: var(--text-sm); margin-top: .8rem; text-align: center; }
.lightbox .x { position: absolute; top: 1rem; right: 1rem; color: #fff; }
.lightbox .pr-nav { position: fixed; }

/* Footer */
.site-footer { border-top: 1px solid var(--divider); padding: 2.5rem 0 3rem; margin-top: 2rem; font-size: var(--text-sm); color: var(--muted); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer h2 { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text); font-weight: 700; margin-bottom: .6rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer p + p { margin-top: .4rem; }
.hotline { color: var(--alert) !important; font-weight: 700; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 99px; font-size: var(--text-sm); opacity: 0; transition: opacity .2s, transform .2s var(--ease); z-index: 100; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Accent scoping */
[data-accent="s1"] { --accent: var(--s1); --accent-soft: var(--s1-soft); }
[data-accent="s2"] { --accent: var(--s2); --accent-soft: var(--s2-soft); }
[data-accent="s3"] { --accent: var(--s3); --accent-soft: var(--s3-soft); }
[data-accent="navy"] { --accent: var(--primary); --accent-soft: var(--surface-2); }

.fade-in { animation: fade .35s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media print {
  .site-header, .site-footer, .side, .lesson__nav, .slides, .btn-row, .ws__foot, .no-print, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .ws { break-inside: avoid; box-shadow: none; }
  textarea { border: 1px solid #999; min-height: 3rem; }
  .lesson-layout { display: block; }
}

.cue[hidden]{display:none}
.pr-notes ul{list-style:none;padding-left:0;margin:0}
.pr-stage img{background:transparent;box-shadow:none}
.pr-stage img{position:absolute;top:1.2rem;left:4.5rem;width:calc(100% - 9rem);height:calc(100% - 2.4rem);border-radius:0}
@media (max-width:640px){.pr-stage img{left:.5rem;width:calc(100% - 1rem)}}
/* mobile fixes */
.presenter, .tk-screen { grid-template-columns: minmax(0, 1fr); }
.pr-top .t { min-width: 0; }
.tk-big > div { padding: 0 1rem; max-width: 100%; }
@media (max-width: 960px) { .fac-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pr-top { flex-wrap: wrap; gap: .4rem; }
  .pr-top .t { flex: 1 1 100%; }
  .pr-top .sp { display: none; }
  .pr-btn { padding: .4rem .6rem; }
  .btn-row { flex-wrap: wrap; }
  .btn { white-space: normal; text-align: center; }
}
@media (max-width: 640px) { .runsheet .act .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .runsheet .act .btn { padding: .45rem .6rem; position: relative; } .runsheet { min-width: 0; } }
@media (max-width: 640px) { .runsheet th, .runsheet td { padding-left: .5rem; padding-right: .5rem; } .runsheet .clock { white-space: nowrap; font-size: var(--text-xs); } }

/* ================= Accounts ================= */
.nav [hidden] { display: none !important; }
.nav__user { display: inline-flex; align-items: center; gap: .45rem; }
.avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--navy); color: #fff; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .03em; }
[data-theme="dark"] .avatar { background: var(--primary); color: #1b120e; }
.auth { display: grid; place-items: center; padding-top: clamp(2rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.auth-card { width: 100%; max-width: 30rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.4rem, 4vw, 2.4rem); box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: var(--text-2xl); margin: .3rem 0 .6rem; }
.auth-lede { color: var(--muted); font-size: var(--text-sm); margin-bottom: 1.4rem; }
.auth-foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--divider); font-size: var(--text-sm); display: grid; gap: .45rem; }
.f { display: grid; gap: .35rem; margin-bottom: 1rem; min-width: 0; }
.f label { font-weight: 700; font-size: var(--text-sm); }
.f-hint { font-size: var(--text-xs); color: var(--muted); margin: -.15rem 0 .1rem; }
input[type="email"], input[type="password"], input[type="date"], input[type="url"], input[type="number"] { width: 100%; font: inherit; font-size: var(--text-sm); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .65rem .8rem; }
.code-input { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace !important; letter-spacing: .08em; text-transform: uppercase; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.2rem; }
.pw-show { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); font-size: var(--text-xs); font-weight: 700; color: var(--muted); padding: .35rem .55rem; border-radius: var(--r-sm); }
.pw-show:hover { color: var(--text); background: var(--surface-2); }
.btn--block { width: 100%; justify-content: center; }
.btn--danger { background: var(--alert); color: #fff; }
.btn--danger:hover { filter: brightness(.92); color: #fff; }
[data-theme="dark"] .btn--danger { color: #1b0f10; }
.btn[disabled] { opacity: .6; cursor: wait; }
.form-err { background: var(--alert-soft); color: var(--alert); border-radius: var(--r-sm); padding: .6rem .8rem; font-size: var(--text-sm); margin: 0 0 1rem; }
.help-steps { display: grid; gap: 1.2rem; }
.help-steps h2 { font-size: var(--text-lg); margin-bottom: .3rem; }
.help-steps p { font-size: var(--text-sm); }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; align-items: start; }
.panel-h { font-size: var(--text-lg); margin-bottom: .8rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: var(--text-sm); margin-bottom: 1rem; }
.kv dt { color: var(--muted); }
code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .92em; }
ul.plain { list-style: none; padding: 0; display: grid; gap: .7rem; margin-bottom: 1rem; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; align-items: end; border-top: 1px solid var(--divider); padding-top: 1rem; }
.inline-form .f { margin-bottom: 0; }
.inline-form .form-err { grid-column: 1 / -1; margin-top: .8rem; }
/* modal */
.modal { position: fixed; inset: 0; z-index: 120; background: rgba(13,18,27,.55); display: grid; place-items: center; padding: 1rem; animation: fadeIn .15s; }
.modal__card { background: var(--surface); color: var(--text); border-radius: var(--r-lg); padding: 1.6rem; width: 100%; max-width: 27rem; box-shadow: var(--shadow-lg); }
.modal__card h2 { font-size: var(--text-xl); margin-bottom: .4rem; }
.modal__card .btn-row { margin-top: 1.2rem; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.cred { display: grid; gap: .1rem; margin: 1rem 0; background: var(--surface-2); border-radius: var(--r-md); padding: .4rem 1rem; }
.cred > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--divider); font-size: var(--text-sm); flex-wrap: wrap; }
.cred > div:last-child { border-bottom: 0; }
.cred span { color: var(--muted); }
.cred__pw strong code { font-size: 1.1em; color: var(--primary); }
.big-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 700; letter-spacing: .12em; color: var(--text); margin: .4rem 0 .6rem; word-break: break-all; }
/* classes */
.h2.sm { font-size: var(--text-xl); margin: 2rem 0 1rem; }
.new-class summary { list-style: none; cursor: pointer; }
.new-class summary::-webkit-details-marker { display: none; }
.new-class[open] summary { margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.f--full { grid-column: 1 / -1; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.class-card { display: grid; gap: .5rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
.class-card:hover { border-color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text); }
.class-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.class-card h3 { font-size: var(--text-lg); }
.class-card__foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); border-top: 1px solid var(--divider); padding-top: .6rem; margin-top: .2rem; }
.code-pill { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .8rem; letter-spacing: .08em; background: var(--surface-2); padding: .2rem .5rem; border-radius: var(--r-sm); white-space: nowrap; }
.enroll-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.enroll-form { margin-bottom: 1.2rem; }
.enroll-form h3, .code-form h3 { font-size: var(--text-lg); margin-bottom: .2rem; }
.enroll-form > p, .code-form > p { margin-bottom: .9rem; }
.enroll-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 .8rem; align-items: end; }
.f--btn { align-self: end; }
.f--btn .btn { width: 100%; justify-content: center; }
.roster td { vertical-align: middle; }
.btn-row.nowrap { flex-wrap: nowrap; }
.table td.act { text-align: right; }
.mini-prog { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; width: 9rem; margin-bottom: .3rem; }
.mini-prog span { display: block; height: 100%; background: var(--s2); }
.badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: .14rem .45rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.badge--warn { background: #F5E6C4; color: #6B4A0B; }
.badge--active { background: var(--s2-soft); color: var(--s2); }
.badge--used { background: var(--surface-3); color: var(--text); }
.badge--revoked, .badge--expired { background: var(--alert-soft); color: var(--alert); }
[data-theme="dark"] .badge--warn { background: #3A3018; color: #E8C877; }
.switch { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; cursor: pointer; }
.fac-aside details summary { cursor: pointer; }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; }
.tabs a { padding: .6rem .9rem; font-weight: 700; font-size: var(--text-sm); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); }
.code-form { margin-bottom: 1.2rem; }
.activity { list-style: none; padding: 0; display: grid; }
.activity li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--divider); font-size: var(--text-sm); }
@media (max-width: 640px) {
  .activity li { grid-template-columns: 1fr; gap: .1rem; }
  .nav__user-name { display: none; }
  .btn-row.nowrap { flex-wrap: wrap; justify-content: flex-end; }
}
.badge, .roster th, .table thead th { white-space: nowrap; }
.roster .btn, .table td.act .btn { white-space: nowrap; }
.enroll-form h3, .code-form h3 { margin-top: 0; }
.roster td:first-child { min-width: 11rem; }
@media (max-width: 640px) {
  .roster, .roster tbody, .roster tr, .roster td { display: block; width: 100%; }
  .roster thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .roster tr { border-bottom: 1px solid var(--divider); padding: .7rem .2rem; }
  .roster td { border: 0; padding: .2rem .6rem; }
  .roster td.act { text-align: left; padding-top: .5rem; }
  .roster td.act .btn-row { justify-content: flex-start; }
  .roster td:nth-child(2)::before { content: 'Username: '; color: var(--muted); font-size: var(--text-xs); }
  .roster td:nth-child(4)::before { content: 'Last sign-in: '; color: var(--muted); }
}

/* ---------- Video clips ---------- */
.vids { margin: 1.75rem 0 2rem; }
.vids__total { text-transform: none; letter-spacing: 0; font-weight: 600; }
.vids__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.vids__grid.one { grid-template-columns: 1fr; }
.vids__help { font-size: var(--text-xs); color: var(--muted); margin-top: .6rem; }
.vid { margin: 0; min-width: 0; }
.vid__play, .vid__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0B0F16; border: 0; padding: 0; cursor: pointer; box-shadow: var(--shadow-sm); }
.vid__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, opacity .2s; }
.vid__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,22,0) 55%, rgba(11,15,22,.55)); }
.vid__play:hover img { transform: scale(1.025); }
.vid__btn { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent, var(--primary)); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: scale .2s; }
.vid--big .vid__btn { width: 4.5rem; height: 4.5rem; }
.vid__btn svg { width: 45%; height: 45%; margin-left: 8%; }
.vid__play:hover .vid__btn, .vid__play:focus-visible .vid__btn { scale: 1.08; }
.vid__len { position: absolute; z-index: 1; right: .6rem; bottom: .55rem; color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(11,15,22,.7); padding: .12rem .45rem; border-radius: 5px; }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__cap { display: flex; flex-direction: column; gap: .1rem; padding-top: .55rem; }
.vid__t { font-weight: 700; font-size: var(--text-sm); line-height: 1.3; }
.vid__m { font-size: var(--text-xs); color: var(--muted); }
.vid__seen { color: var(--success); font-weight: 700; }
.chip--vid { display: inline-flex; align-items: center; gap: .3rem; background: var(--accent-soft, var(--primary-soft)); color: var(--accent, var(--primary)); }
.chip--vid svg { width: .7rem; height: .7rem; }
.clip-chip { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; padding: .2rem .6rem .2rem .45rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--accent, var(--primary)); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; white-space: nowrap; }
.clip-chip:hover { background: var(--accent-soft, var(--primary-soft)); }
.clip-chip svg { width: .8rem; height: .8rem; flex: none; }
.rs-clip { line-height: 1; }
.intro-vid { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.intro-vid__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.intro-vid .vids { margin: 0; }
@media (max-width: 860px) { .intro-vid__grid { grid-template-columns: 1fr; } }
.vlib { margin: 2rem 0 2.5rem; }
.vlib__h { font-family: var(--font-display); font-size: var(--text-xl); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; border-bottom: 2px solid var(--accent); padding-bottom: .4rem; margin-bottom: 1.1rem; }
.vlib__h span { font-family: inherit; font-size: var(--text-base); color: var(--muted); font-weight: 500; }
.vlib__grid { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.vlib__l { display: inline-block; font-size: var(--text-xs); font-weight: 600; margin-top: .25rem; }

.vmodal { position: fixed; inset: 0; z-index: 120; background: rgba(8,11,17,.88); display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2rem); }
.vmodal__box { width: min(1100px, 100%); max-height: 100%; overflow: auto; background: #121826; color: #E7E2D9; border-radius: 14px; padding: clamp(.9rem, 2vw, 1.4rem); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.vmodal__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.vmodal__top h2 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; color: #fff; }
.vmodal__k { font-size: var(--text-xs); color: #9AA3B5; margin: 0 0 .2rem; letter-spacing: .04em; }
.vmodal .x { color: #fff; flex: none; }
.vmodal .vid__frame { max-height: 72vh; }
.vmodal__bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; }
.vmodal__bar .sp { flex: 1; }
.vmodal .btn--ghost { color: #E7E2D9; background: transparent; border-color: #3A4560; }
.vmodal .btn--ghost:hover { background: #1E2738; }
.vmodal .btn[disabled] { opacity: .4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .vid__play img, .vid__btn { transition: none; } }

/* ---------- Password reset & email settings ---------- */
.auth-sub { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-family: inherit; margin: 1.8rem 0 .9rem; padding-top: 1.2rem; border-top: 1px solid var(--divider); }
.forgot-sent { background: var(--s2-soft); border-radius: var(--r-md, 10px); padding: 1rem 1.1rem; outline: none; }
.forgot-sent h2 { font-size: var(--text-lg); margin: 0 0 .35rem; }
.forgot-sent p { font-size: var(--text-sm); margin: 0 0 .5rem; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.email-edit { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--divider); }
.email-edit summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); color: var(--primary); }
.email-edit form { margin-top: .8rem; display: grid; gap: .2rem; justify-items: start; }
.email-edit .f { width: 100%; }
.email-admin { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.email-admin h3 { margin-top: 0; }
@media (max-width: 900px) { .email-admin { grid-template-columns: 1fr; } }
.status-line { font-size: var(--text-sm); font-weight: 600; padding: .5rem .75rem; border-radius: 8px; background: var(--alert-soft); color: var(--alert); }
.status-line.ok { background: var(--s2-soft); color: var(--s2); }

/* Lists that draw their own markers: suppress the browser marker so only one bullet/number shows */
.blist, .qlist, .lead-list, .ten-steps, ol.numbered, ol.steps, .pr-notes ul, .pr-notes ol,
.lesson__body ul.blist, .lesson__body ol.numbered, .lesson__body ol.steps { list-style: none; padding-left: 0; }
.blist > li::marker, .qlist > li::marker, .lead-list > li::marker, .ten-steps > li::marker,
ol.numbered > li::marker, ol.steps > li::marker, .pr-notes li::marker { content: none; }