/* Courses front end. Storefront design language (black/white + ochre), reusing
   the site.css :root tokens (--ink/--paper/--ochre/--ochre-dark/--hairline...).
   Mobile-first, RTL-correct, no fixed widths (container handles width). */

/* ---------- index grid + cards ---------- */
.crs-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .crs-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .crs-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.crs-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  display: flex;
}
.crs-card__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  width: 100%;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .15s ease, transform .15s ease;
}
.crs-card__link:hover { box-shadow: 0 10px 30px var(--shadow-08); transform: translateY(-2px); }
.crs-badge {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--badge-ink);
  background: var(--badge-bg);
  border: 1px solid var(--brand-wash-30);
  border-radius: 999px;
  padding: 3px 12px;
}
.crs-card__title { font-family: var(--font-display); font-size: 22px; margin: 4px 0 0; }
/* The description is the ONLY flexible row: it absorbs the variable text length so
   the meta + price + cta block is pinned flush to the card bottom at a consistent
   vertical position across every card, regardless of how long the description is.
   (Cards in a grid row stretch to equal height, so equal bottoms => aligned prices.) */
.crs-card__promise { color: var(--ink-soft); margin: 0; line-height: 1.6; flex: 1 1 auto; }
.crs-card__meta { color: var(--ink-soft); font-size: 14px; margin: 0; }
.crs-card__price { margin: 6px 0 4px; font-size: 18px; }
.crs-card__was { color: var(--muted); text-decoration: line-through; margin-inline-end: 6px; }
.crs-card__free { color: var(--ochre-dark); font-weight: 800; }
.crs-card__now { font-weight: 800; }
/* No margin-top:auto here: the flexible description above already pushes this group
   to the bottom. A second auto distributor would split the free space and unpin the price. */
.crs-card__cta { text-align: center; }
.crs-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* ---------- prose / landing ---------- */
.crs-prose { line-height: 1.85; color: var(--ink); }
.crs-prose + .crs-prose { margin-top: 1em; }
.crs-prose--lead { font-size: 19px; }
.crs-prose-h, .crs-h2 { font-family: var(--font-display); font-size: 26px; margin: 0 0 .6em; }
.crs-body :is(h2,h3) { font-family: var(--font-display); margin: 1.2em 0 .4em; }
.crs-body p { line-height: 1.85; margin: 0 0 1em; }
.crs-body ul, .crs-body ol { line-height: 1.8; padding-inline-start: 1.4em; }
.crs-landing__meta { color: var(--ink-soft); font-size: 16px; margin-top: 8px; }

.crs-outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.crs-outcomes li { position: relative; padding-inline-start: 30px; line-height: 1.7; }
.crs-outcomes li::before {
  content: "✓";
  position: absolute; inset-inline-start: 0; top: 0;
  color: var(--ochre-dark); font-weight: 900;
}

.crs-modlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: mod; }
.crs-mod { border-inline-start: 3px solid var(--ochre); padding-inline-start: 16px; }
.crs-mod__title { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }
.crs-mod__summary { color: var(--ink-soft); margin: 0 0 8px; }
.crs-mod__lessons { margin: 0; padding-inline-start: 1.3em; color: var(--ink-soft); line-height: 1.8; }

/* ---------- gate (join + unlock) ---------- */
.crs-gate {
  max-width: 460px;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 28px 24px;
}
.crs-gate__title { font-family: var(--font-display); font-size: 24px; text-align: center; margin: 6px 0 8px; }
.crs-gate__note { text-align: center; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.6; }
.crs-gate__free { text-align: center; color: var(--ochre-dark); font-weight: 800; margin: 0 0 18px; }
.crs-gate__fine { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: 16px; }
.crs-form { display: grid; gap: 14px; }
.crs-field { display: grid; gap: 6px; }
.crs-label { font-weight: 700; font-size: 14px; }
.crs-input {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--mist);
  border-radius: var(--radius-input);
  background: var(--paper);
  width: 100%;
}
.crs-input:focus { outline: 2px solid var(--ochre-dark); outline-offset: 1px; border-color: var(--ochre-dark); }
.crs-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.crs-consent input { margin-top: 3px; }
.crs-form__err { color: var(--error); font-size: 14px; margin: 0; }
.crs-form__submit { width: 100%; }

/* honest graduate-reward coupon banner (additive; tokens only, raw-hex guard). */
.crs-coupon { background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius-card); padding: var(--space-3); margin: 0 auto var(--space-3); max-width: 560px; text-align: center; }
.crs-coupon__t { font-weight: 800; color: var(--brand-strong); margin: 0 0 4px; }
.crs-coupon__p { color: var(--ink-soft); margin: 0; }
.crs-coupon__p s { color: var(--muted); }

/* ---------- pay ---------- */
/* nowrap so the checkout price + ₪ stay on one line (the course_checkout partial
   markup is on the money path and stays byte-identical, so the fix is CSS-only here). */
.crs-pay__price { text-align: center; font-size: 26px; font-weight: 800; margin: 4px 0 18px; white-space: nowrap; }
.crs-pay__btn { margin: 8px 0; min-height: 48px; }
.crs-pay__or { text-align: center; color: var(--mist); position: relative; margin: 14px 0; }
.crs-pay__or span { background: var(--paper); padding: 0 12px; position: relative; z-index: 1; }
.crs-pay__or::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--hairline); }
.crs-pay__msg { color: var(--error); text-align: center; margin: 10px 0 0; min-height: 1em; }
/* Optional order bump on the paywall: a clearly separated, opt-in box before pay. */
.crs-bump { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0 0 16px;
  background: var(--paper-warm); border: 2px solid var(--ochre); border-radius: var(--radius-card);
  padding: 12px 14px; text-align: start; }
.crs-bump__check { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ochre); cursor: pointer; }
.crs-bump__title { display: block; font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.4; }
.crs-bump__price { color: var(--ochre); white-space: nowrap; font-weight: 800; }
.crs-bump__benefit { display: block; color: var(--ink-soft); font-size: 14px; margin-top: 3px; }
/* The bonus link surfaced on course pages to a student who bought the bump. */
.crs-bonus-link { display: block; margin: 14px 0 0; text-align: center; font-weight: 700; color: var(--ochre); text-decoration: underline; }

/* ---------- lesson reader ---------- */
.crs-reader { padding-block: 32px 56px; }
.crs-progress { margin-bottom: 22px; }
.crs-progress__label { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.crs-progress__track { height: 8px; background: var(--paper-warm); border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; }
.crs-progress__fill { height: 100%; background: var(--ochre); border-radius: 999px; transition: width .3s ease; }

.crs-lesson__eyebrow { color: var(--ochre-dark); font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.crs-lesson__title { font-family: var(--font-display); font-size: 30px; line-height: 1.25; margin: 0 0 10px; }
.crs-lesson__idea { font-size: 19px; color: var(--ink-soft); font-style: italic; margin: 0 0 20px; line-height: 1.6; }
.crs-lesson__body { font-size: 18px; line-height: 1.9; }
.crs-lesson__body :is(h2,h3) { font-family: var(--font-display); margin: 1.3em 0 .4em; }
.crs-lesson__body p { margin: 0 0 1em; }
.crs-lesson__body ul, .crs-lesson__body ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.crs-lesson__body blockquote { border-inline-start: 3px solid var(--ochre); padding-inline-start: 14px; color: var(--ink-soft); margin: 1em 0; }

/* copy-paste prompt block (emitted by the courses renderer) */
.crs-prompt { border: 1px solid var(--hairline); background: var(--paper-warm); border-radius: var(--radius-card); margin: 1.2em 0; overflow: hidden; }
.crs-prompt__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--brand-wash-08); border-bottom: 1px solid var(--hairline); }
.crs-prompt__tag { font-size: 13px; font-weight: 700; color: var(--ochre-dark); }
.crs-prompt__copy { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--ochre); background: var(--paper); color: var(--ochre-dark); border-radius: var(--radius-btn); padding: 5px 12px; }
.crs-prompt__copy:hover { background: var(--ochre); color: var(--paper); }
.crs-prompt__copy.is-copied { background: var(--ochre-dark); color: var(--paper); border-color: var(--ochre-dark); }
.crs-prompt__text { font: inherit; white-space: pre-wrap; word-break: break-word; margin: 0; padding: 14px; line-height: 1.7; }

/* annotated screenshot (emitted by the courses renderer :::shot block). The image
   is LTR (the ChatGPT UI is English); the legend + caption below are RTL Hebrew.
   Numbered pins NEVER sit over the screenshot: each pin lives in a fixed-width
   GUTTER just outside the image, on the side nearest its target, with a thin
   leader line pointing in. So no pin can ever hide text or UI. Every pin is the
   exact same fixed size everywhere (defined once below, no per-image variation).
   The numbered legend underneath maps 1:1 to the pins. */
.crs-shot {
  margin: 1.6em 0;
  /* the gutters that hold the pins, one fixed value reused on both sides */
  --crs-pin-gutter: 40px;
  padding-left: var(--crs-pin-gutter); padding-right: var(--crs-pin-gutter);
}
.crs-shot__frame { position: relative; } /* the image box + the pins' coordinate space */
.crs-shot__img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--paper-warm); box-shadow: 0 4px 18px var(--shadow-10);
}
/* one annotation = a thin leader line + a numbered pin, anchored at top:Y% (set
   inline) and pointing at --tx (the target x, set inline). */
.crs-shot__ann { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; }
.crs-shot__lead { position: absolute; top: 0; height: 2px; transform: translateY(-50%); background: var(--ochre); border-radius: 2px; }
.crs-shot__pin {
  position: absolute; top: 0; transform: translate(-50%, -50%);
  width: 26px; height: 26px; box-sizing: border-box; /* fixed, uniform size everywhere */
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; line-height: 1;
  color: var(--paper); background: var(--ochre);
  border: 2px solid var(--paper); border-radius: 999px;
  box-shadow: 0 1px 8px var(--shadow-40);
}
/* target on the right half: pin in the right gutter, leader runs in from the target */
.crs-shot__ann--r .crs-shot__lead { left: var(--tx); right: calc(-1 * var(--crs-pin-gutter) / 2); }
.crs-shot__ann--r .crs-shot__pin { left: calc(100% + var(--crs-pin-gutter) / 2); }
/* target on the left half: pin in the left gutter, leader runs in from the target */
.crs-shot__ann--l .crs-shot__lead { left: calc(-1 * var(--crs-pin-gutter) / 2); right: calc(100% - var(--tx)); }
.crs-shot__ann--l .crs-shot__pin { left: calc(-1 * var(--crs-pin-gutter) / 2); }
.crs-shot__legend { list-style: none; margin: .8em 0 0; padding: 0; display: grid; gap: 7px; }
.crs-shot__legend li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.55; }
.crs-shot__num {
  flex: none; width: 26px; height: 26px; margin-top: 1px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: var(--paper);
  background: var(--ochre); border-radius: 999px;
}
.crs-shot__lbl { color: var(--ink); }
.crs-shot__cap { margin: .7em 0 0; text-align: center; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

/* media placeholder: a numbered slot for a screenshot or short video the owner
   will capture and drop in later (the paid course ships with these; each is
   swapped to a real :::shot once its image exists). It reads as a clear "to be
   added" frame, never a broken image. */
.crs-media-ph {
  margin: 1.6em 0;
  border: 2px dashed var(--ochre);
  border-radius: var(--radius-card);
  background: var(--brand-wash-08);
  padding: 22px 18px;
  text-align: center;
}
.crs-media-ph__slot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
}
.crs-media-ph__kind {
  font-weight: 800; font-size: 13px; color: var(--paper);
  background: var(--ochre); border-radius: 999px; padding: 4px 12px;
}
.crs-media-ph__name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--ochre-dark);
  background: var(--paper); border: 1px solid var(--brand-wash-35);
  border-radius: var(--radius-input); padding: 4px 10px; word-break: break-all;
}
.crs-media-ph__cap { margin: .7em 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

/* product-name auto-links in course content (ChatGPT, OpenAI): brand-colored,
   subtle underline, never raw blue. */
.crs-brand { color: var(--ochre-dark); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--brand-wash-35); }
.crs-brand:hover, .crs-brand:focus-visible { color: var(--ochre); border-bottom-color: var(--ochre); }

/* ---------- quiz ---------- */
.crs-quiz { border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 22px; margin: 28px 0; background: var(--paper); }
.crs-quiz__head { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; }
.crs-quiz__sub { color: var(--ink-soft); margin: 0 0 18px; }
.crs-quiz__q + .crs-quiz__q { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.crs-quiz__prompt { font-weight: 700; margin: 0 0 12px; line-height: 1.6; }
.crs-quiz__opts { display: grid; gap: 10px; }
.crs-quiz__opt {
  font: inherit; text-align: start; cursor: pointer;
  border: 1px solid var(--mist); background: var(--paper); color: var(--ink);
  border-radius: var(--radius-btn); padding: 12px 14px; line-height: 1.5;
  transition: border-color .12s, background .12s;
}
.crs-quiz__opt:hover:not([disabled]) { border-color: var(--ochre-dark); }
.crs-quiz__opt.is-correct { border-color: var(--success); background: var(--success-wash); font-weight: 700; }
.crs-quiz__opt.is-wrong { border-color: var(--error); background: var(--error-wash); }
.crs-quiz__opt[disabled] { cursor: default; }
.crs-quiz__feedback { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-card); background: var(--paper-warm); border: 1px solid var(--hairline); line-height: 1.6; }

/* ---------- milestone recap ---------- */
.crs-recap { border: 1px solid var(--brand-wash-35); background: var(--brand-wash-07); border-radius: var(--radius-card); padding: 20px 22px; margin: 28px 0; }
.crs-recap__tag { color: var(--ochre-dark); font-weight: 800; font-size: 13px; letter-spacing: .04em; margin: 0 0 6px; }
.crs-recap__text { margin: 0; line-height: 1.75; font-size: 17px; }

/* ---------- lesson nav ---------- */
.crs-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; }
.crs-nav__prev, .crs-nav__next { min-width: 130px; text-align: center; }
@media (max-width: 520px) {
  .crs-nav { flex-direction: column-reverse; }
  .crs-nav__prev, .crs-nav__next { width: 100%; }
}

/* ---------- done / score ---------- */
.crs-done__score { margin: 18px 0; }
.crs-done__scoreline { font-size: 20px; }
.crs-done__num { font-family: var(--font-display); color: var(--ochre-dark); font-size: 24px; }
.crs-done__msg { margin: 8px auto 28px; }
.crs-done__fine { margin-top: 16px; }

/* ---------- end-of-course review + feedback (replaces the old book promo) ---------- */
.crs-end { display: grid; gap: 22px; margin-top: 8px; text-align: start; }
.crs-end__card {
  border: 1px solid var(--hairline); background: var(--surface);
  border-radius: var(--radius-card); padding: 26px 24px;
}
.crs-end__card .crs-h2 { margin-top: 0; }
.crs-end__card .crs-prose { margin: 6px 0 16px; }
.crs-end__form { margin-top: 4px; }
.crs-end__textarea { min-height: 70px; resize: vertical; line-height: 1.55; }
/* star rating: a row of buttons, RTL-aware (fills from the inline-start).
   Under rtl, row-reverse cancels the page direction so IL renders 1..5 left-to-
   right with the fill anchored left; the ltr pair below restores the SAME visual
   (plain row) for LTR markets — without it the widget renders 5..1 reversed. */
.crs-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 4px; }
[dir=ltr] .crs-stars { flex-direction: row; justify-content: flex-start; }
.crs-star {
  background: none; border: 0; padding: 2px 4px; cursor: pointer; line-height: 1;
  font-size: 34px; color: var(--hairline); transition: color .12s ease, transform .12s ease;
}
.crs-star:hover, .crs-star:hover ~ .crs-star { color: var(--cta-hover); }
.crs-star.is-on { color: var(--cta); }
.crs-star:focus-visible { outline: 2px solid var(--ochre-dark); outline-offset: 2px; border-radius: var(--radius-btn); }
.crs-end__thanks {
  margin: 4px 0 0; padding: 16px 18px; border-radius: var(--radius-card);
  background: var(--success-wash); color: var(--success); font-weight: 600;
}

/* ============================================================================
   :::ui  clean code UI illustrations (ChatGPT / Gemini), schematic not pixel.
   Tool palette = the mock frame; brand ochre = our annotations (pins + legend),
   so the learner separates "the tool" from "our guidance". Vector/HTML => sharp
   and reflowing at every width. Pins sit in the window's padding gutter beside
   the highlighted element (outline marks it) so nothing is ever covered.
   ============================================================================ */
/* Raw hex / rgba for the tool palettes + depth tokens live ONLY in this :root
   token block (the single-source-of-truth guard excises :root before scanning
   rule bodies); every .crs-ui rule below references a var() token, never raw
   hex/rgba. Values are the real ChatGPT/Gemini palette (see
   goal/illustration-fidelity/reference.md) so the illustrations read true. */
:root {
  --ui-white: #ffffff;
  /* ChatGPT (light) */
  --ui-cg-bg: #ffffff; --ui-cg-sidebar: #f9f9f9; --ui-cg-ink: #0d0d0d;
  --ui-cg-muted: #8f8f8f; --ui-cg-icon: #5d5d5d; --ui-cg-line: #e5e5e5;
  --ui-cg-active: #ececec; --ui-cg-user: #f4f4f4; --ui-cg-pill: #e3e3e3;
  --ui-cg-focus: #1a73e8;
  /* Gemini (light) */
  --ui-gm-bg: #ffffff; --ui-gm-surface: #f0f4f9; --ui-gm-ink: #1f1f1f;
  --ui-gm-muted: #5f6368; --ui-gm-line: #dadce0; --ui-gm-accent: #1a73e8; --ui-gm-user: #d3e3fd;
  /* tool-independent depth + accents */
  --ui-link: #1a73e8; --ui-phone: #1c1c1e; --ui-avatar: #8b3a2f; --ui-msgbubble: #e9e9eb;
  --ui-shadow: rgba(0,0,0,.08); --ui-shadow-soft: rgba(0,0,0,.06);
  --ui-shadow-btn: rgba(0,0,0,.20); --ui-dim: rgba(0,0,0,.42); --ui-modal-shadow: rgba(0,0,0,.22);
  --ui-g1: #4285f4; --ui-g2: #9b72cb; --ui-g3: #d96570;
  --ui-grad: linear-gradient(135deg, var(--ui-g1), var(--ui-g2) 55%, var(--ui-g3));
  --ui-grad-name: linear-gradient(90deg, var(--ui-g1), var(--ui-g2), var(--ui-g3));
}
.crs-ui {
  margin: 1.7em 0;
  font-family: var(--font-body);
  --ui-pin: 24px;   /* annotation pin size (uniform everywhere) */
}
.crs-ui--chatgpt {
  --ui-bg: var(--ui-cg-bg); --ui-sidebar: var(--ui-cg-sidebar); --ui-ink: var(--ui-cg-ink);
  --ui-muted: var(--ui-cg-muted); --ui-icon: var(--ui-cg-icon); --ui-line: var(--ui-cg-line);
  --ui-active: var(--ui-cg-active); --ui-user: var(--ui-cg-user); --ui-pill: var(--ui-cg-pill);
  --ui-accent: var(--ui-cg-ink); --ui-onaccent: var(--ui-white); --ui-focus: var(--ui-cg-focus);
}
.crs-ui--gemini {
  --ui-bg: var(--ui-gm-bg); --ui-sidebar: var(--ui-gm-surface); --ui-ink: var(--ui-gm-ink);
  --ui-muted: var(--ui-gm-muted); --ui-icon: var(--ui-gm-muted); --ui-line: var(--ui-gm-line);
  --ui-active: var(--ui-gm-surface); --ui-user: var(--ui-gm-user); --ui-pill: var(--ui-gm-line);
  --ui-accent: var(--ui-gm-accent); --ui-onaccent: var(--ui-white); --ui-focus: var(--ui-gm-accent);
}

/* window + phone chrome */
.crs-ui__win {
  max-width: 480px; width: 100%; margin: 0 auto; box-sizing: border-box;
  background: var(--ui-bg); color: var(--ui-ink);
  border: 1px solid var(--ui-line); border-radius: 16px;
  box-shadow: 0 6px 24px var(--shadow-10); overflow: hidden;
}
.crs-ui__topbar {
  display: flex; align-items: center; justify-content: space-between; direction: ltr;
  height: 42px; padding: 0 14px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line);
}
.crs-ui__brand { display: inline-flex; align-items: center; gap: 7px; }
.crs-ui__mark { width: 22px; height: 22px; border-radius: 999px; background: var(--ui-ink); flex: none; }
/* Gemini's mark is a 4-point sparkle (original primitive, NOT the trademarked
   logo), so it differs from ChatGPT's disc by SHAPE as well as color. */
.crs-ui--gemini .crs-ui__mark { background: var(--ui-grad); border-radius: 2px; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.crs-ui__word { font-weight: 600; font-size: 15px; color: var(--ui-ink); }
.crs-ui__chev { color: var(--ui-muted); font-size: 11px; }
.crs-ui__topdot { width: 22px; height: 22px; border-radius: 999px; background: var(--ui-avatar); flex: none; }
.crs-ui__body { padding: 18px; box-sizing: border-box; }
.crs-ui__phone {
  max-width: 300px; width: 100%; margin: 0 auto; box-sizing: border-box;
  background: var(--ui-bg); color: var(--ui-ink);
  border: 9px solid var(--ui-phone); border-radius: 38px;
  box-shadow: 0 12px 34px var(--shadow-28); overflow: hidden; position: relative;
}
.crs-ui__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 20px; background: var(--ui-phone); border-radius: 0 0 14px 14px; z-index: 2; }
.crs-ui__phone .crs-ui__body { padding: 30px 14px 20px; }

/* hotspot + uniform numbered pin (in the gutter, never over content) */
.crs-ui__hot { position: relative; display: inline-block; outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 12px; }
.crs-ui__hot--round { border-radius: 999px; }
.crs-ui__pin {
  position: absolute; top: calc(var(--ui-pin) / -2); inset-inline-start: calc(var(--ui-pin) / -2);
  width: var(--ui-pin); height: var(--ui-pin); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 800; font-size: 13px; line-height: 1;
  color: var(--paper); background: var(--ochre); border: 2px solid var(--paper);
  border-radius: 999px; box-shadow: 0 1px 6px var(--shadow-40); z-index: 3;
}

/* legend + caption (mirror the shot legend) */
.crs-ui__legend { list-style: none; margin: 1em auto 0; padding: 0; max-width: 480px; display: grid; gap: 7px; }
.crs-ui__legend li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.55; }
.crs-ui__num {
  flex: none; width: var(--ui-pin); height: var(--ui-pin); margin-top: 1px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: var(--paper); background: var(--ochre); border-radius: 999px;
}
.crs-ui__lbl { color: var(--ink); }
.crs-ui__cap { margin: .8em auto 0; max-width: 480px; text-align: center; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

/* home (greeting + composer + suggestion pills) */
.crs-ui__home { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 6px 12px; }
.crs-ui__hgreet { font-family: var(--font-body); font-size: 22px; font-weight: 500; color: var(--ui-ink); text-align: center; }
.crs-ui__home .crs-ui__composer, .crs-ui__home .crs-ui__hot { width: 100%; max-width: 384px; }
.crs-ui__suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; direction: ltr; }
.crs-ui__pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--ui-pill); border-radius: 999px; background: var(--ui-bg); color: var(--ui-icon); font-size: 12.5px; white-space: nowrap; }

/* composer pill (the signature element) */
.crs-ui__inputwrap { padding: 8px 0; }
.crs-ui__composer {
  display: flex; align-items: center; gap: 8px; box-sizing: border-box;
  min-height: 52px; padding: 8px 8px 8px 12px;
  background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 999px;
  box-shadow: 0 2px 18px var(--ui-shadow), 0 0 0 1px var(--ui-shadow-soft);
}
.crs-ui__cfield { flex: 1 1 auto; min-width: 0; color: var(--ui-muted); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.crs-ui__cfield--typed { color: var(--ui-ink); text-align: start; }
.crs-ui__cctrl { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.crs-ui__cbtn {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: default;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ui-icon);
}
.crs-ui__cvoice, .crs-ui__csend { background: var(--ui-accent); color: var(--ui-onaccent); box-shadow: 0 1px 4px var(--ui-shadow-btn); }

/* chat (user bubble + bubble-less AI reply + action row) */
.crs-ui__chat { display: flex; flex-direction: column; gap: 14px; }
.crs-ui__row { display: flex; }
.crs-ui__row--user { justify-content: flex-start; }   /* RTL: user flush to the right */
.crs-ui__row--ai { justify-content: flex-end; }
/* The real ChatGPT composition is PHYSICAL: user bubble right, AI reply left,
   action icons under the reply's left edge. The rtl figure already lands there
   (flex-start=right); an ltr (DE) figure must pin the same physical sides or
   the mockup renders mirrored from the real tool. */
.crs-ui[dir=ltr] .crs-ui__row--user { justify-content: flex-end; }
.crs-ui[dir=ltr] .crs-ui__row--ai { justify-content: flex-start; }
.crs-ui[dir=ltr] .crs-ui__actions { justify-content: flex-start; }
.crs-ui[dir=ltr] .chatdemo__typing { inset-inline-end: auto; inset-inline-start: 6px; }
.crs-ui__ubub {
  max-width: 80%; box-sizing: border-box; padding: 11px 15px;
  background: var(--ui-user); border-radius: 19px;
  font-size: 15px; line-height: 1.55; color: var(--ui-ink); word-break: break-word;
}
.crs-ui__areply { max-width: 100%; font-size: 15px; line-height: 1.6; color: var(--ui-ink); word-break: break-word; }
/* a pinned (bubble-less) AI reply needs top headroom so the corner pin badge sits
   in the gutter above the first line, never over the text. */
.crs-ui__hot > .crs-ui__areply { padding-top: 13px; }
.crs-ui__row--ai { width: 100%; }
.crs-ui__actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 10px; color: var(--ui-muted); }
.crs-ui__imgph {
  display: flex; align-items: center; justify-content: center; height: 64px; margin-bottom: 8px;
  background: repeating-linear-gradient(45deg, var(--ui-sidebar), var(--ui-sidebar) 8px, var(--ui-line) 8px, var(--ui-line) 9px);
  border: 1px solid var(--ui-line); border-radius: 10px; color: var(--ui-muted); font-size: 13px;
}

/* signup modal (the card over the dimmed app) */
.crs-ui__modal {
  position: relative; max-width: 480px; width: 100%; margin: 0 auto; box-sizing: border-box;
  min-height: 380px; display: flex; align-items: center; justify-content: center; padding: 26px 16px;
  background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 16px; overflow: hidden;
}
/* faint home-screen silhouette behind the scrim => reads as a modal over the app */
.crs-ui__modalapp { position: absolute; inset: 0; }
.crs-ui__modalrail { position: absolute; inset-block: 0; inset-inline-start: 0; width: 26%; max-width: 116px; background: var(--ui-sidebar); border-inline-end: 1px solid var(--ui-line); }
.crs-ui__modalghost { position: absolute; top: 30%; inset-inline-end: 12%; width: 40%; height: 14px; border-radius: 999px; background: var(--ui-sidebar); }
.crs-ui__modalpill { position: absolute; top: 44%; inset-inline-end: 10%; width: 52%; height: 44px; border-radius: 999px; background: var(--ui-bg); border: 1px solid var(--ui-line); box-shadow: 0 2px 14px var(--ui-shadow); }
.crs-ui__modaldim { position: absolute; inset: 0; background: var(--ui-dim); }
.crs-ui__modalcard {
  position: relative; z-index: 1; width: 100%; max-width: 340px; box-sizing: border-box;
  background: var(--ui-bg); border-radius: 24px; box-shadow: 0 24px 70px var(--ui-modal-shadow);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 11px; text-align: center;
}
.crs-ui__modalx { position: absolute; top: 16px; inset-inline-end: 16px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--ui-muted); display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.crs-ui__modaltitle { font-family: var(--font-body); font-size: 23px; font-weight: 700; color: var(--ui-ink); }
.crs-ui__modalsub { font-size: 13.5px; line-height: 1.5; color: var(--ui-muted); margin-bottom: 4px; }
.crs-ui__social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--ui-pill); border-radius: 999px; background: var(--ui-bg); color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: default; }
.crs-ui__socialmark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ui-line); color: var(--ui-icon); flex: none; }
.crs-ui__socialmark:has(svg) { background: transparent; }
.crs-ui__or { display: flex; align-items: center; gap: 10px; color: var(--ui-muted); font-size: 12px; margin: 3px 0; }
.crs-ui__or::before, .crs-ui__or::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
.crs-ui__emailfield { box-sizing: border-box; padding: 13px 16px; border: 1px solid var(--ui-muted); border-radius: 999px; background: var(--ui-bg); color: var(--ui-muted); font-size: 14px; text-align: start; }
.crs-ui__btn { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; cursor: default; text-align: center; border: 1px solid transparent; }
.crs-ui__btn--primary { background: var(--ui-accent); color: var(--ui-onaccent); }
.crs-ui__btn--ghost { background: var(--ui-bg); color: var(--ui-ink); border-color: var(--ui-pill); }

/* verify: a bare PRE-login page (just the wordmark + the single Code field) */
.crs-ui__authpage { padding: 4px 6px 14px; direction: ltr; }
.crs-ui__authwordmark { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--ui-ink); padding: 10px 8px 6px; text-align: start; }
.crs-ui__verify { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 4px auto 0; padding: 8px 4px; text-align: center; }
.crs-ui__vtitle { font-family: var(--font-body); font-size: 24px; font-weight: 700; color: var(--ui-ink); }
.crs-ui__vsub { font-size: 13.5px; line-height: 1.5; color: var(--ui-muted); margin-bottom: 4px; }
.crs-ui__codefield { position: relative; box-sizing: border-box; height: 54px; border: 1.5px solid var(--ui-focus); border-radius: 14px; background: var(--ui-bg); }
.crs-ui__codelabel { position: absolute; top: -9px; inset-inline-start: 16px; padding: 0 6px; background: var(--ui-bg); color: var(--ui-focus); font-size: 12px; }
.crs-ui__caret { position: absolute; top: 16px; inset-inline-start: 18px; width: 1px; height: 22px; background: var(--ui-ink); }
.crs-ui__vlink { color: var(--ui-ink); font-weight: 600; font-size: 14px; }
.crs-ui__vfooter { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; color: var(--ui-muted); font-size: 12px; }
.crs-ui__vbar { width: 1px; height: 12px; background: var(--ui-line); }

/* sidebar (new chat) */
.crs-ui__withside { display: flex; min-height: 232px; direction: ltr; }
.crs-ui__side { flex: 0 0 44%; max-width: 184px; box-sizing: border-box; padding: 14px 12px; background: var(--ui-sidebar); border-inline-end: 1px solid var(--ui-line); display: flex; flex-direction: column; gap: 5px; }
.crs-ui__sidelogo { margin-bottom: 8px; }
.crs-ui__sidelogo .crs-ui__mark { width: 24px; height: 24px; }
.crs-ui__navitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; color: var(--ui-ink); font-size: 13px; }
.crs-ui__navitem.is-active { background: var(--ui-active); font-weight: 600; }
.crs-ui__navitem svg { color: var(--ui-icon); }
.crs-ui__recents { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.crs-ui__recentshead { font-size: 11px; color: var(--ui-muted); padding: 4px 10px; }
.crs-ui__recent { padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* recent-chat labels are COURSE-language text inside the deliberately-LTR tool
   frame: re-establish rtl only on the rtl market (German labels stay ltr) */
[dir=rtl] .crs-ui__recent { direction: rtl; }
/* the "Recents" head historically inherited body text-align:right on the rtl
   market (adversarially caught: removing the body rule flipped it left inside
   the ltr frame); pin the historical rtl-market anchor explicitly. LTR markets
   keep the frame's natural left anchor, like the real app. */
[dir=rtl] .crs-ui__recentshead { text-align: right; }
.crs-ui__sidefoot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 6px 2px; border-top: 1px solid var(--ui-line); }
.crs-ui__avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--ui-avatar); color: var(--ui-white); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.crs-ui__avname { font-size: 12px; color: var(--ui-muted); }
.crs-ui__sidemain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px 16px; }
.crs-ui__sidemain .crs-ui__composer { width: 100%; }
.crs-ui__sidemain .crs-ui__hgreet { font-size: 18px; }

/* share (chat header with Share) */
.crs-ui__chathead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-bg); }
.crs-ui__chattitle { font-size: 14px; font-weight: 600; color: var(--ui-ink); }
.crs-ui__sharebtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--ui-pill); border-radius: 999px; background: var(--ui-bg); color: var(--ui-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: default; }

/* compare (two minis) */
.crs-ui__comparewrap { max-width: 520px; margin: 0 auto; }
.crs-ui__compareask { text-align: center; color: var(--ink-soft); font-size: 14px; margin-bottom: 12px; }
.crs-ui__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crs-ui__mini { box-sizing: border-box; border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; background: var(--ui-bg); box-shadow: 0 4px 14px var(--shadow-08); }
.crs-ui__minibar { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid var(--ui-line); background: var(--ui-sidebar); }
.crs-ui__minibar .crs-ui__mark { width: 16px; height: 16px; }
.crs-ui__mininame { font-weight: 700; font-size: 12px; color: var(--ui-ink); }
.crs-ui--gemini .crs-ui__mininame { background: var(--ui-grad-name); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crs-ui__minibody { padding: 12px; }
.crs-ui__minibody .crs-ui__areply { font-size: 13.5px; }

/* message / scam (phone) */
.crs-ui__msgtop { text-align: center; font-size: 13px; font-weight: 600; color: var(--ui-muted); padding-bottom: 10px; border-bottom: 1px solid var(--ui-line); margin-bottom: 14px; }
.crs-ui__msg { background: var(--ui-msgbubble); border-radius: 18px; border-end-start-radius: 5px; padding: 11px 13px; max-width: 90%; }
.crs-ui__msgsender { font-size: 11px; font-weight: 700; color: var(--ui-muted); margin-bottom: 5px; }
.crs-ui__msgbody { font-size: 14px; line-height: 1.5; color: var(--ui-ink); word-break: break-word; }
.crs-ui__msgline { margin-top: 13px; }
.crs-ui__msgline .crs-ui__hot { display: inline-block; }
/* leading inset on the flagged inline element so its corner pin badge sits in a
   gutter and never covers a character of the link/urgency phrase. */
.crs-ui__msglink, .crs-ui__msgflag { display: inline-block; padding-inline-start: 16px; }
.crs-ui__msglink { color: var(--ui-link); text-decoration: underline; word-break: break-all; }
.crs-ui__msgflag { font-weight: 700; color: var(--ui-ink); }

/* responsive: keep everything inside the viewport down to 360 */
@media (max-width: 420px) {
  .crs-ui__body { padding: 14px; }
  .crs-ui__withside { min-height: 210px; }
  .crs-ui__side { flex-basis: 44%; padding: 12px 9px; }
  .crs-ui__sidemain { padding: 16px 10px; }
  /* the split-view main column is narrow on mobile; drop the mic and shrink the
     field a touch so the "Ask anything" placeholder stays readable (not "A...") */
  .crs-ui__sidemain .crs-ui__cmic { display: none; }
  .crs-ui__sidemain .crs-ui__cfield { font-size: 13px; }
  .crs-ui__sidemain .crs-ui__composer { padding-inline: 6px 6px; gap: 5px; }
  .crs-ui__sidemain .crs-ui__cbtn { width: 30px; height: 30px; }
  .crs-ui__ubub { max-width: 88%; }
  .crs-ui__modalcard { padding: 22px 18px; }
  .crs-ui__composer { min-height: 48px; }
}

/* friction-free course landing: inline checkout hints (tokens only) */
.crs-landing__reassure{ margin-top:12px; font-size:var(--t-small); color:var(--muted); }
.crs-pay__email{ margin-bottom:6px; }
.crs-pay__note{ font-size:var(--t-small); color:var(--muted); margin:0 0 14px; text-align:center; }

/* landing conversion visuals: curriculum map + the lesson-preview illustration wrap.
   Tokens only (courses.css raw-hex guard); white via var(--surface). */
.crs-map { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0 0 22px; text-align: start; }
.crs-map__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.crs-map__num { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--brand); color: var(--surface); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.crs-map__title { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.crs-preview { max-width: 560px; margin: 0 auto; text-align: start; }

/* THE THREE OUTCOMES: the flagship landing's signature. Each pillar pairs a promise
   with the real :::ui screen it teaches; the number encodes the priority order
   (protection first). Tokens only (courses.css raw-hex guard). */
.lp-pillars { display: flex; flex-direction: column; gap: var(--space-3); max-width: 940px; margin: var(--space-3) auto 0; }
.lp-pillars__lead { color: var(--ink-soft); max-width: 640px; margin: 8px auto 0; line-height: 1.6; }
.lp-pillar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-4); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); }
/* consistent layout across all three: the promise on the inline-start (reading)
   side, the real screen beside it. Source order text-then-visual also stacks the
   promise above the screen on mobile (single column). */
.lp-pillar__text { min-width: 0; text-align: start; }
.lp-pillar__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 999px; background: var(--brand); color: var(--surface); font-weight: 800; font-size: 17px; }
.lp-pillar__tag { display: block; margin: 10px 0 4px; font-weight: 700; font-size: var(--t-small); letter-spacing: .02em; color: var(--brand-strong); }
.lp-pillar__title { font-family: var(--font-display); font-size: 24px; line-height: 1.15; margin: 0 0 8px; color: var(--ink); }
.lp-pillar__body { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.lp-pillar__vis { min-width: 0; }
.lp-pillar__vis .crs-ui { margin: 0; }
@media (max-width: 767px) {
  .lp-pillar { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3); }
  .lp-pillar__title { font-size: 21px; }
}

/* chat-demo reveal animation (driven by js/chatdemo.js on the sales pages only).
   Everything is gated behind .chatdemo, which the script adds ONLY to the landing
   demos, so the identical .crs-ui markup inside course lessons is never animated.
   Only opacity/transform animate + the typing overlay is absolutely positioned, so
   there is ZERO layout shift; the rows keep their final boxes from first paint. */
.crs-ui.chatdemo .crs-ui__row { transition: opacity .45s ease, transform .45s ease; }
.crs-ui.chatdemo--pending .crs-ui__row--user { opacity: 0; transform: translateY(7px); }
.crs-ui.chatdemo--pending .crs-ui__row--ai .crs-ui__areply,
.crs-ui.chatdemo--typing .crs-ui__row--ai .crs-ui__areply { opacity: 0; }
.crs-ui.chatdemo .crs-ui__row--ai .crs-ui__areply { transition: opacity .5s ease; }
.crs-ui.chatdemo--play .crs-ui__row--user { opacity: 1; transform: none; }
.crs-ui.chatdemo .crs-ui__row--ai { position: relative; }
/* typing overlay: a small assistant bubble with three bouncing dots. It only exists
   during the ~0.9s typing phase (js removes the node afterwards), so the finished
   demo carries no perpetual motion. */
.chatdemo__typing {
  position: absolute; top: 4px; inset-inline-end: 6px;
  display: flex; gap: 5px; align-items: center;
  padding: 10px 12px; border-radius: 14px;
  background: var(--ui-user); border: 1px solid var(--ui-line);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.crs-ui.chatdemo--typing .chatdemo__typing { opacity: 1; }
.chatdemo__typing span {
  width: 7px; height: 7px; border-radius: 999px; background: var(--ui-muted);
  animation: chatdemo-bounce 1s ease-in-out infinite;
}
.chatdemo__typing span:nth-child(2) { animation-delay: .15s; }
.chatdemo__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatdemo-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* reduced-motion + no-JS safety: force the final, fully-visible state and hide the
   typing overlay entirely (the script also bails out early on reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  .crs-ui.chatdemo .crs-ui__row--user,
  .crs-ui.chatdemo .crs-ui__row--ai .crs-ui__areply { opacity: 1 !important; transform: none !important; }
  .chatdemo__typing { display: none !important; }
}

/* ============================================================================
   SITEWIDE REDESIGN — lesson reader uplift. The :::ui illustrations inside
   LESSONS keep their teaching pins/legend (unlike the sales pages) but adopt
   the same premium chat feel: soft depth, generous bubbles, calm rhythm.
   Tokens only.
   ============================================================================ */
.crs-reader .crs-ui__win {
  border-radius: 16px;
  box-shadow: 0 18px 44px var(--shadow-10), 0 2px 8px var(--shadow-07);
}
.crs-reader .crs-ui__body { padding: 22px 20px 24px; }
.crs-reader .crs-ui__chat { gap: 16px; }
.crs-reader .crs-ui__ubub { font-size: 16px; line-height: 1.6; padding: 12px 17px; border-radius: 20px; }
.crs-reader .crs-ui__areply { font-size: 16px; line-height: 1.7; }
/* progress: a warmer, more visible bar with a soft glow tip */
.crs-reader .crs-progress__track { height: 10px; background: var(--brand-wash-08); border-color: var(--brand-wash-30); }
.crs-reader .crs-progress__label { letter-spacing: .01em; }
/* quiz options: bigger comfortable tap targets */
.crs-quiz__opt { min-height: 48px; }
/* prev/next: full-width comfortable buttons on mobile */
@media (max-width: 560px) {
  .crs-nav { flex-direction: column-reverse; align-items: stretch; }
  .crs-nav .btn { width: 100%; text-align: center; }
}

/* ---- crs-feature: the featured flagship panel (homepage flagship section +
   /courses catalog). One rich presentation, media beside body on desktop,
   stacked at the 767px boundary like every band component. ---- */
.crs-feature{ display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:var(--space-4);
  align-items:center; background:var(--surface); border:1px solid var(--ochre);
  border-radius:var(--radius-card); box-shadow:0 14px 40px var(--shadow-08);
  padding:var(--space-4); max-width:var(--container); margin-inline:auto; }
.crs-feature__media img{ width:100%; height:auto; display:block; border-radius:var(--radius-card); }
.crs-feature__body{ display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.crs-feature__title{ font-family:var(--font-display); font-size:26px; margin:var(--space-1) 0 0; }
.crs-feature__promise{ color:var(--ink-soft); line-height:1.6; margin:0; }
.crs-feature__meta{ color:var(--ink-soft); font-size:var(--t-small); margin:0; }
.crs-feature__points{ margin:var(--space-1) 0; padding-inline-start:1.2em; color:var(--ink);
  line-height:1.7; }
.crs-feature__points li{ margin:2px 0; }
.crs-feature__price{ font-size:22px; margin:var(--space-1) 0; }
.crs-feature__was{ color:var(--muted); text-decoration:line-through; font-weight:400; margin-inline-end:6px; }
.crs-feature__now{ font-weight:800; }
.crs-feature__once{ display:inline-block; font-size:var(--t-small); color:var(--ink-soft); margin-inline-start:8px; }
.crs-feature .cta-row{ margin:var(--space-1) 0 0; }
.crs-feature__alt{ font-size:var(--t-small); margin:var(--space-1) 0 0; }
.crs-feature__alt a{ color:var(--brand-strong); text-decoration:underline; text-underline-offset:3px; }
.crs-feature--nomedia{ grid-template-columns:1fr; }
@media (max-width:767px){
  .crs-feature{ grid-template-columns:1fr; padding:var(--space-3); }
  .crs-feature__media{ max-width:300px; margin-inline:auto; }
}
/* the free-tier heading between the featured panel and the grid */
.crs-tier-h{ font-family:var(--font-display); font-size:24px; text-align:center;
  margin:var(--space-5) 0 var(--space-3); }
/* course_done ascension card: price + accent on the shared end-card chrome */
.crs-next{ text-align:center; border-color:var(--ochre); }
.crs-next__price{ font-size:20px; margin:var(--space-2) 0; }
.crs-next__was{ color:var(--muted); text-decoration:line-through; font-weight:400; margin-inline-end:6px; }
.crs-next__once{ display:inline-block; font-size:var(--t-small); color:var(--ink-soft); margin-inline-start:6px; }

/* fbj — the Facebook scam-angle ad landing (/courses/{slug}/joinfacebook).
   Focused lead magnet: message-matched hero, form above the fold, 3 benefits,
   trust line, repeated CTA. Tokens only (no raw hex; theme-var driven). */
.fbj-page { padding-block: clamp(12px, 3vw, 36px); }
.fbj-hero { text-align: center; max-inline-size: 640px; margin-inline: auto; margin-bottom: 14px; }
.fbj-title { font-size: clamp(24px, 6vw, 40px); font-weight: 800; line-height: 1.12; color: var(--ink); margin: 4px 0 10px; }
.fbj-sub { font-size: clamp(15px, 3.6vw, 18px); line-height: 1.55; color: var(--muted); margin: 0; }
.fbj-card { max-inline-size: 480px; margin-inline: auto; padding: 20px 18px; }
.fbj-card .crs-form { gap: 11px; }
.fbj-card .crs-field { gap: 5px; }
.fbj-formhead { font-size: 18px; font-weight: 700; color: var(--ink); text-align: center; margin: 0 0 10px; }
.fbj-card .crs-gate__fine { margin-top: 10px; }
.fbj-bullets { max-inline-size: 560px; margin: 26px auto 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fbj-bullet { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(15px, 4vw, 17px); color: var(--ink); line-height: 1.5; }
.fbj-bullet__ic { flex: none; inline-size: 24px; block-size: 24px; border-radius: 999px; background: var(--badge-bg);
  color: var(--brand-strong); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.fbj-trust { max-inline-size: 560px; margin: 20px auto 0; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.6; }
.fbj-cta2 { text-align: center; margin-top: 22px; }