/* The creator's member site (2026-11-13): sign-in page (body.ml) and member app (body.lm). Her look is her class page
   ("hers" in class-live/v7.css): pink-cream wash, plum ink, rose-pink accent, Fraunces headings with italic pink words,
   Inter for reading, pink-bordered fields and pink gradient pill buttons. Also styles course.js inside the app. */
:root {
  --bg: #FDF7F5; --alt: #FAEDEF; --card: #FFFFFF; --ink: #2B1423; --body: #5A4452; --muted: #8B7180; --line: #F0DCE2;
  --acc: #B8326E; --acc2: #8E2254; --soft: #FBE6EE; --em: #A62B66; --field: #FDF7F5; --field-line: #EBD3DA;
  --btn: linear-gradient(135deg, #C43C7A, #8E2254); --btn-sh: 0 16px 30px -14px rgba(184, 50, 110, .65);
  --ok: #3F8F6B; --warn: #B7791F; --no: #B4505A;
  --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 24px; --r-sm: 14px; --sh: 0 34px 70px -40px rgba(58, 21, 48, .42); --sh-sm: 0 14px 34px -24px rgba(58, 21, 48, .38);
  --wash: radial-gradient(900px 520px at 0% -10%, #FBE1EA, transparent 62%), radial-gradient(760px 520px at 100% 0%, #FCEADF, transparent 60%);
  /* course.js reads CRM variable names: mapped to her palette */
  --panel: var(--card); --surface: var(--card); --surface-2: var(--alt); --surface-3: var(--soft); --border: var(--line);
  --ink-soft: var(--body); --ink-muted: var(--muted); --accent: var(--acc); --accent-strong: var(--acc); --accent-line: #E8B9CB;
  --green: var(--ok); --amber: var(--warn); --amber-soft: #FBF0DF; --red: var(--no); --wash-2: var(--soft);
  --radius: var(--r-sm); --radius-lg: var(--r); --font-display: var(--serif); --shadow-1: var(--sh-sm);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--wash), var(--bg); background-attachment: fixed; color: var(--body); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font-family: inherit; }
b, strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; font-weight: 300; color: var(--em); }
.ml-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- sign-in ---------------- */
.ml-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 0 max(24px, calc((100vw - 1100px) / 2)); background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ml-wordmark, .lm-brand { font: 400 21px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ml-wordmark em, .lm-brand em { font-weight: 400; color: var(--acc); }
.ml-chip, .ml-step { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--acc2); font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ml-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 64px; align-items: center; max-width: 1100px; min-height: calc(100vh - 62px); margin: 0 auto; padding: 48px 24px 64px; }
.ml-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 5px 18px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--acc); font: 700 11.5px/1.25 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ml-pill img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ml-h { margin: 0 0 18px; font: 400 66px/1.02 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.ml-h em { display: block; }
.ml-lede { max-width: 470px; margin: 0 0 28px; font-size: 19px; line-height: 1.55; color: var(--body); }
.ml-note { display: flex; gap: 12px; align-items: flex-start; max-width: 470px; margin: 0; color: var(--muted); font-size: 14.5px; }
.ml-note svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--acc); stroke-width: 1.8; }
.ml-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.ml-card-photo { position: relative; display: flex; align-items: flex-end; height: 186px; padding: 18px 22px; background: var(--soft) center 30% / cover no-repeat; color: #fff; }
.ml-card-photo b { display: block; color: #fff; font: 400 23px/1.15 var(--serif); }
.ml-card-photo span { font-size: 13.5px; color: rgba(255, 255, 255, .9); }
.ml-card-body { padding: 26px 24px 26px; }
.ml-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ml-card-head h2 { margin: 0; font: 400 28px/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.ml-sub { margin: 0 0 18px; font-size: 15px; color: var(--body); }
.ml-form input { width: 100%; padding: 17px 18px; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: var(--field); color: var(--ink); font: 400 17px/1.3 var(--sans); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.ml-form input::placeholder { color: #A98D9B; }
.ml-form input:focus { border-color: var(--acc); background: #fff; box-shadow: 0 0 0 4px rgba(184, 50, 110, .12); }
.ml-code { letter-spacing: .55em; text-align: center; font: 500 26px/1 var(--sans) !important; }
.ml-btn, .lw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; padding: 18px 24px; border: 0; border-radius: 999px; background: var(--btn); color: #fff; font: 600 16px/1 var(--sans); cursor: pointer; box-shadow: var(--btn-sh); transition: transform .15s, opacity .15s; -webkit-tap-highlight-color: transparent; }
.ml-btn:hover, .lw-btn:hover { transform: translateY(-1px); } .ml-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ml-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--acc2); text-align: center; }
.ml-small { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.ml-link { padding: 0; border: 0; background: none; color: var(--acc); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ml-preview { position: relative; z-index: 50; padding: 9px 16px; background: var(--acc2); color: #FBE6EE; font-size: 13px; text-align: center; }
.ml-preview b { color: #fff; }
@media (max-width: 900px) {
  .ml-bar { height: 56px; padding: 0 18px; } .ml-wordmark { font-size: 19px; }
  .ml-wrap { grid-template-columns: 1fr; gap: 26px; min-height: 0; padding: 26px 16px 48px; }
  .ml-pill { margin-bottom: 14px; } .ml-h { font-size: 42px; margin-bottom: 0; } .ml-h em { display: inline; } .ml-lede { display: none; }
  .ml-note { display: none; }
  .ml-card-photo { height: 128px; padding: 14px 18px; } .ml-card-photo b { font-size: 20px; } .ml-card-body { padding: 20px 18px 22px; }
  .ml-preview { font-size: 12px; padding: 7px 12px; }
}

/* ---------------- member app shell ---------------- */
.lm { padding-bottom: env(safe-area-inset-bottom); }
.lm-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; height: 66px; padding: 0 max(22px, calc((100vw - 1180px) / 2)); background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--line); }
.lm-nav { display: flex; gap: 4px; margin-right: auto; }
.lm-nav a { padding: 9px 15px; border-radius: 999px; color: var(--body); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.lm-nav a:hover { background: var(--alt); color: var(--ink); }
.lm-nav a.is-on { background: var(--soft); color: var(--acc2); font-weight: 600; }
.lm-me { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); color: var(--acc2); font: 600 15px/1 var(--sans); cursor: pointer; }
.lm-menu { position: absolute; right: max(22px, calc((100vw - 1180px) / 2)); top: 58px; width: 270px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--sh); }
.lm-menu-who { margin: 0; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
.lm-menu-who b { display: block; } .lm-menu-who span { font-size: 13px; color: var(--muted); word-break: break-all; }
.lm-menu button { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font-size: 14.5px; text-align: left; cursor: pointer; }
.lm-menu button:hover { background: var(--alt); }
.lm-main { max-width: 1180px; margin: 0 auto; padding: 36px 22px 90px; outline: none; }
.lm-tabbar { display: none; }
.lm-noscroll { overflow: hidden; }
.lm-kicker { margin: 0 0 12px; font: 700 11.5px/1.25 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.lm-h1 { margin: 0; font: 400 52px/1.04 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.lm-h1 em { font-weight: 300; }
.lm-muted { color: var(--muted); }
.lm-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--sh-sm); }
.lm-empty { padding: 80px 0; text-align: center; }

/* Home */
.lm-home { display: grid; gap: 30px; animation: lmIn .35s ease-out; }
@keyframes lmIn { from { opacity: 0; transform: translateY(8px); } }
.lm-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 26px; align-items: stretch; }
.lm-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 46px 44px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(700px 360px at 0% 0%, #FCE3EC, transparent 62%), linear-gradient(140deg, #FFFFFF, #FDF3F1); box-shadow: var(--sh); }
.lm-hero-img { position: relative; min-height: 330px; overflow: hidden; border-radius: 28px; background-size: cover; background-position: center 22%; box-shadow: var(--sh); }
.lm-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(142, 34, 84, .28)); }
.lm-continue { display: flex; align-items: center; gap: 18px; max-width: 580px; margin-top: 30px; padding: 16px 22px 16px 16px; border-radius: 22px; background: var(--btn); color: #fff; text-decoration: none; box-shadow: 0 24px 40px -22px rgba(142, 34, 84, .75); transition: transform .15s; }
.lm-continue:hover { transform: translateY(-2px); }
.lm-continue-play { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.lm-continue-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.lm-continue small { display: block; color: #F8D5E3; font-size: 12.5px; }
.lm-continue b { display: block; margin: 2px 0; color: #fff; font: 400 21px/1.22 var(--serif); }
.lm-continue i { font-style: normal; color: #F8D5E3; font-size: 13px; }
.lm-start header, .lm-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lm-start h2, .lm-block-head h2, .lm-askcard h2, .lm-rec h3 { margin: 0; font: 400 28px/1.15 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.lm-rec h3 { font-size: 22px; }
.lm-start header span { padding: 5px 11px; border-radius: 999px; background: var(--soft); color: var(--acc2); font-size: 12.5px; font-weight: 700; }
.lm-block-head a { color: var(--acc); font-size: 14px; font-weight: 600; text-decoration: none; }
.lm-start ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lm-start a { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 15px 16px; border: 1px solid transparent; border-radius: 16px; background: var(--alt); text-decoration: none; transition: background .15s, border-color .15s; }
.lm-start a:hover { background: var(--soft); border-color: #F1CADB; }
.lm-start b { display: block; font-weight: 600; } .lm-start small { color: var(--muted); font-size: 13.5px; }
.lm-tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #E2B5C7; background: #fff; }
.lm-start li.is-done .lm-tick { border-color: var(--acc); background: var(--acc); }
.lm-start li.is-done b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(139, 113, 128, .5); }
.lm-tick svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; }
.lm-go { color: var(--acc); font-size: 18px; }
.lm-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lm-course { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; box-shadow: var(--sh-sm); transition: transform .18s, box-shadow .18s; }
.lm-course:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.lm-course-img { aspect-ratio: 16 / 8.5; background: linear-gradient(135deg, #F6D3E1, #FBE6EE 55%, #F9E2D6) center / cover no-repeat; }
.lm-course-body { display: grid; gap: 6px; padding: 18px 20px 20px; }
.lm-course-body b { font: 400 22px/1.2 var(--serif); color: var(--ink); } .lm-course-body small { color: var(--muted); font-size: 13.5px; }
.lm-bar { display: block; height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.lm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--btn); }
.lm-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.lm-rec ul { list-style: none; margin: 12px 0 10px; padding: 0; }
.lm-rec li a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 15px; }
.lm-rec li a:hover span { color: var(--acc); } .lm-rec li small { color: var(--muted); white-space: nowrap; }
.lm-more { color: var(--acc); font-size: 14px; font-weight: 600; text-decoration: none; }
.lm-askcard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px; align-items: center; border: 1px solid #F1CADB; background: radial-gradient(700px 300px at 100% 0%, #F9D6E4, transparent 60%), linear-gradient(135deg, #FDEFF4, #FBE6EE); }
.lm-askcard p { margin: 8px 0 0; }
.lm-suggest { display: grid; gap: 10px; }
.lm-suggest a { position: relative; padding: 14px 44px 14px 16px; border: 1px solid #F0C9D8; border-radius: 16px; background: rgba(255, 255, 255, .8); color: var(--ink); text-decoration: none; font-size: 14.5px; transition: background .15s, transform .15s; }
.lm-suggest a::after { content: "→"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--acc); }
.lm-suggest a:hover { background: #fff; transform: translateX(2px); }

/* Welcome */
.lm-welcome { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(43, 20, 35, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lmFade .25s ease-out; }
@keyframes lmFade { from { opacity: 0; } }
.lw-card { position: relative; width: 100%; max-width: 880px; max-height: calc(100vh - 36px); overflow: auto; border-radius: 30px; background: var(--wash), var(--bg); box-shadow: 0 50px 100px -40px rgba(43, 20, 35, .7); animation: lmIn .3s ease-out; }
.lw-x { position: absolute; top: 14px; right: 16px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.lw-body { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 430px; }
.lw-photo { background: var(--soft) center 25% / cover no-repeat; border-radius: 30px 0 0 30px; }
.lw-copy { padding: 54px 46px 24px; } .lw-copy p { margin: 0 0 14px; }
.lw-wide { grid-column: 1 / -1; max-width: 700px; }
.lw-h { margin: 0 0 18px; font: 400 46px/1.04 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.lw-first { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; padding: 16px; border-radius: 22px; background: var(--btn); color: #fff; text-decoration: none; box-shadow: var(--btn-sh); }
.lw-first b { display: block; color: #fff; font: 400 21px/1.22 var(--serif); } .lw-first small { color: #F8D5E3; }
.lw-map { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.lw-map li { display: grid; grid-template-columns: 100px 1fr; gap: 14px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.lw-map b { font: 400 21px/1.2 var(--serif); color: var(--acc2); }
.lw-install { display: grid; gap: 4px; padding: 15px 16px; border-radius: 18px; background: var(--soft); font-size: 14.5px; } .lw-install i { font-style: normal; font-weight: 600; color: var(--ink); }
.lw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 46px 32px; }
.lw-dots { display: flex; gap: 6px; margin-right: auto; } .lw-dots i { width: 7px; height: 7px; border-radius: 50%; background: #EBC4D3; } .lw-dots i.is-on { width: 24px; border-radius: 99px; background: var(--acc); }
.lw-btn { width: auto; margin: 0; padding: 15px 28px; font-size: 15px; }
.lw-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }

/* ---------------- course.js inside the member app ---------------- */
.lm .pt-page { max-width: none; animation: lmIn .3s ease-out; }
.lm .page-header { margin: 0 0 24px; }
.lm .page-header h2 { margin: 0; font: 400 44px/1.06 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.lm .page-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 16.5px; }
.lm .card { margin-bottom: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--sh-sm); }
.lm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14.5px/1 var(--sans); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.lm .btn:hover { border-color: #E8B9CB; background: var(--alt); }
.lm .btn-primary { border: 0; background: var(--btn); color: #fff; box-shadow: var(--btn-sh); }
.lm .btn-primary:hover { background: var(--btn); filter: brightness(1.05); }
.lm .btn-sm { padding: 9px 15px; font-size: 13.5px; } .lm .btn-ghost { background: transparent; }
.lm .cr-muted { color: var(--muted); } .lm .cr-num { text-align: right; font-variant-numeric: tabular-nums; }
.lm .loading-state { padding: 60px 0; text-align: center; color: var(--muted); }
.lm .pt-section-title { margin: 32px 0 12px; font: 400 26px/1.2 var(--serif); color: var(--ink); }
.lm .pt-test-note { margin: 0 0 14px; padding: 11px 15px; border: 1px dashed var(--acc); border-radius: 14px; background: var(--soft); color: var(--body); font-size: 14px; }
.lm .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--soft); }
.lm .seg button { padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--body); font-weight: 600; cursor: pointer; }
.lm .cs-hero { background: radial-gradient(600px 240px at 0 0, #FCE3EC, transparent 60%), var(--card); }
.lm .cs-hero h3 { font: 400 30px/1.15 var(--serif); letter-spacing: -.02em; }
.lm .cs-section-head { background: linear-gradient(90deg, var(--alt), transparent); }
.lm .cs-section-head h4 { font: 400 21px/1.25 var(--serif); }
.lm .cs-lesson { font-size: 15px; padding: 13px 20px; } .lm .cs-lesson:hover { background: var(--alt); }
.lm .cs-dot { border-color: #E6BCCC; color: var(--acc); background: #fff; }
.lm .cs-lesson.is-done .cs-dot { border-color: var(--acc); background: var(--acc); }
.lm .cs-lesson-head h3 { font: 400 36px/1.12 var(--serif); letter-spacing: -.025em; }
.lm .cs-eyebrow { color: var(--acc); letter-spacing: .16em; }
.lm .cs-video { border-radius: 24px; box-shadow: 0 30px 60px -36px rgba(43, 20, 35, .7); }
.lm .cs-text { padding: 22px 24px; font-size: 16px; line-height: 1.7; border-radius: 24px; }
.lm .cs-text h1, .lm .cs-text h2, .lm .cs-text h3 { font-weight: 400; }
.lm .cs-text a { color: var(--acc); }
.lm .cs-file { border-radius: 18px; } .lm .cs-file b { color: var(--acc); }
.lm .cs-app { border-radius: 24px; background: #fff; }
.lm .cs-crumb { color: var(--muted); } .lm .cs-crumb:hover { color: var(--acc); }
.lm .cs-ask-lesson { border-color: #F0C9D8; background: var(--soft); color: var(--acc2); }
.lm .cs-msg { border-radius: 18px; }
.lm .cs-msg.is-me { background: var(--btn); } .lm .cs-msg.is-bot { background: var(--alt); border: 1px solid var(--line); }
.lm .cs-askform textarea { border-radius: 16px; border-color: var(--field-line); background: var(--field); font-size: 16px; }
.lm .cs-askform textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px rgba(184, 50, 110, .12); background: #fff; }
.lm .cs-chip { background: var(--soft); color: var(--acc2); }
.lm .cs-chip.is-answered, .lm .cs-chip.is-person_answered { background: #E4F2EA; color: var(--ok); }
.lm .cs-sources a, .lm .cs-sources span:not(:first-child) { background: var(--card); border-color: #F0C9D8; }
.lm .cs-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lm .cs-card { border-radius: var(--r); } .lm .cs-card-body b { font: 400 22px/1.2 var(--serif); }
.lm .cs-card-ph { background: linear-gradient(135deg, #F6D3E1, #FBE6EE 55%, #F9E2D6); color: var(--acc); }
.lm .cs-bar { background: var(--soft); } .lm .cs-bar i { background: var(--btn); }
.lm .cs-empty-lesson { color: var(--muted); font-style: italic; }
/* lesson + outline */
.cs-lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.cs-outline { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--sh-sm); }
.cs-outline-title { margin: 0 0 10px; font: 400 19px/1.25 var(--serif); color: var(--ink); }
.cs-outline-sec > p { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.cs-outline ol { list-style: none; margin: 0; padding: 0; }
.cs-outline a { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 10px; color: var(--body); font-size: 13.5px; line-height: 1.35; text-decoration: none; }
.cs-outline a svg { margin-top: 2px; color: #D59AB3; } .cs-outline a.is-done svg { color: var(--acc); }
.cs-outline a:hover { background: var(--alt); } .cs-outline a.is-on { background: var(--soft); color: var(--acc2); font-weight: 600; }
.cs-outline a[aria-disabled="true"] { opacity: .55; }

@media (max-width: 1020px) { .cs-lesson-layout { grid-template-columns: minmax(0, 1fr); } .cs-outline { position: static; max-height: 420px; } }
@media (max-width: 860px) {
  .lm-top { height: 58px; gap: 12px; } .lm-nav { display: none; } .lm-brand { margin-right: auto; font-size: 19px; }
  .lm-menu { top: 52px; right: 14px; }
  .lm-main { padding: 20px 16px 112px; }
  .lm-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .lm-tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: var(--muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
  .lm-tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .lm-tabbar a.is-on { color: var(--acc); }
  .lm-h1 { font-size: 36px; } .lm-hero { grid-template-columns: 1fr; } .lm-hero-img { display: none; } .lm-hero-copy { padding: 28px 22px; border-radius: 24px; }
  .lm-continue { margin-top: 22px; } .lm-continue b { font-size: 18px; }
  .lm-start h2, .lm-block-head h2, .lm-askcard h2 { font-size: 24px; }
  .lm-askcard { grid-template-columns: 1fr; }
  .lw-body { grid-template-columns: 1fr; min-height: 0; } .lw-photo { min-height: 240px; border-radius: 30px 30px 0 0; background-position: center 44%; }
  .lw-copy { padding: 28px 22px 8px; } .lw-h { font-size: 34px; } .lw-foot { padding: 14px 22px 24px; } .lw-map li { grid-template-columns: 1fr; gap: 2px; }
  .lm .page-header h2 { font-size: 32px; } .lm .cs-lesson-head h3 { font-size: 27px; }
  .lm .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .lm-home, .lw-card, .lm .pt-page { animation: none; } }

.cs-lesson-main { min-width: 0; }
.lm .cs-eyebrow { overflow-wrap: anywhere; line-height: 1.5; }
.lm .cs-text, .lm .cs-lesson-head h3 { overflow-wrap: anywhere; }
.lm-main { overflow-x: clip; }
button:focus { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(184, 50, 110, .35); outline-offset: 2px; }
.lm .cs-hero-img { width: 132px; border-radius: 14px; background: var(--soft); object-fit: contain; }
.lm .cs-card-img { object-fit: contain; background: linear-gradient(135deg, #F6D3E1, #FBE6EE 55%, #F9E2D6); }
.lm .cs-askform textarea { font: 400 16px/1.5 var(--sans); }
@media (max-width: 860px) { .lm .cs-hero-img { width: 84px; } .lm .cs-askform { grid-template-columns: 1fr; } .lm .cs-askform .btn { width: 100%; } }
.lm .cs-continue { display: block; white-space: normal; text-align: left; line-height: 1.35; padding: 15px 22px; border-radius: 18px; }
/* "Not a student yet? Join" (Bro, 14 Nov: small, not the main thing on the page) */
.ml .ml-join{margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(125,10,63,.1);text-align:center;font-size:13.5px;color:#8a7380}
.ml .ml-join a{display:inline-block;margin-left:4px;padding:6px 12px;border-radius:99px;border:1px solid #f0c6d6;color:#b02a63;font-weight:600;text-decoration:none}
.ml .ml-join a:hover{background:#fce7ef}
/* Student Discord card (Home) */
.lm .lm-discordcard { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 22px; }
.lm .lm-discordcard h2 { margin: 0; font: 400 28px/1.15 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.lm .lm-discordcard p { margin: 8px 0 0; max-width: 560px; }
.lm .lm-btn { flex: none; display: inline-block; padding: 13px 22px; border-radius: 999px; background: var(--btn); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 18px 30px -20px rgba(142, 34, 84, .8); }
@media (max-width: 720px) { .lm .lm-discordcard { flex-direction: column; align-items: flex-start; } .lm .lm-discordcard h2 { font-size: 24px; } }