/* Landed course zone.
   Shell (header, menu, footer) comes from the platform: /static/landing/styles.css.
   Everything inside <main class="ld-zone"> follows the Figma Make design
   "Landed — English for Life Abroad" (see docs/13-design.md). All classes are ld-prefixed
   so they never collide with platform styles. */

.ld-zone {
  /* Palette v2 (docs/13-design.md): page #fdfbf7, white cards, one warm inset tone.
     Text colours pass WCAG AA on the page, on cards and on the blue mission card. */
  --ld-cream: #fdfbf7;            /* page */
  --ld-warm: #ffffff;             /* cards */
  --ld-inset: #f6f2eb;            /* chats, inputs, option cards */
  --ld-inset-2: #ece6dc;          /* keys, empty progress, circles */
  --ld-band: #f1f5f6;             /* portfolio case band: a nod to the main site's blue-grey */
  --ld-coral: #d06f5f;            /* accent fills and borders only */
  --ld-coral-ink: #a1493d;        /* coral text */
  --ld-coral-btn: #b85a4b;        /* primary button */
  --ld-coral-soft: rgba(208, 111, 95, 0.11);
  --ld-sage: #789284;
  --ld-sage-ink: #557064;
  --ld-sage-soft: #e8f0eb;
  --ld-text: #2f2e30;
  --ld-soft: #4a484c;
  --ld-muted: #67656a;
  --ld-ok: #2f7a47;
  --ld-ok-soft: #e6f2e9;
  --ld-warn: #8a5a12;
  --ld-warn-soft: #fbf0dc;
  --ld-bad: #9b4545;
  --ld-bad-soft: #f8e9e7;
  --ld-purple: #9f568f;
  --ld-purple-soft: #f4ecf3;
  --ld-blue: #dce9ef;
  --ld-blue-soft: #eef5f8;
  --ld-peach: #f3d3bd;
  --ld-line: rgba(64, 50, 36, 0.11);
  --ld-line-strong: rgba(64, 50, 36, 0.2);
  --ld-shadow-sm: 0 1px 2px rgba(64, 50, 36, 0.05);
  --ld-shadow: 0 1px 2px rgba(64, 50, 36, 0.04), 0 12px 32px rgba(64, 50, 36, 0.06);
  --ld-radius: 24px;
  --ld-serif: "DM Serif Display", Georgia, serif;
  --ld-sans: "Manrope", "Segoe UI", sans-serif;

  display: block;
  background: var(--ld-cream);
  box-shadow: inset 0 1px 0 var(--ld-line);
  color: var(--ld-text);
  font-family: var(--ld-sans);
  -webkit-font-smoothing: antialiased;
}
.ld-zone *, .ld-zone *::before, .ld-zone *::after { box-sizing: border-box; }
.ld-zone button, .ld-zone input, .ld-zone textarea { font: inherit; color: inherit; }
.ld-zone :is(button, input, textarea, a):focus-visible { outline: 3px solid rgba(208, 111, 95, 0.45); outline-offset: 3px; }
.ld-zone :is(h1, h2, h3, p) { margin-top: 0; }
.ld-zone :is(h1, h2) { font-family: var(--ld-serif); font-weight: 400; color: var(--ld-text); }
.ld-zone h1 { font-size: clamp(44px, 7vw, 76px); line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 24px; }
.ld-zone h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.04; margin-bottom: 12px; }
.ld-zone h3 { font-size: 18px; margin-bottom: 8px; }

.ld-shell { width: min(100% - 40px, 960px); margin: 0 auto; }

/* course sub-bar (under the platform header) */
.ld-subbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ld-subbar-left { display: flex; align-items: center; gap: 10px; }
.ld-course-name { display: flex; align-items: center; gap: 10px; color: var(--ld-text); text-decoration: none; }
.ld-course-name img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.ld-course-name strong { font-size: 14px; }
.ld-course-name small { display: block; color: var(--ld-sage-ink); font-size: 11px; }
.ld-icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ld-line); background: var(--ld-warm); cursor: pointer; text-decoration: none; color: var(--ld-text); }
.ld-save-note { color: var(--ld-muted); font-size: 13px; }

/* icons */
.ld-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ld-i-sm { width: 15px; height: 15px; }

/* buttons */
.ld-btn { min-height: 48px; border: 1px solid transparent; border-radius: 999px; padding: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, background 0.15s ease; }
.ld-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ld-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ld-zone .ld-btn-primary { background: var(--ld-coral-btn); color: #fff; box-shadow: 0 6px 16px rgba(184, 90, 75, 0.22); }
.ld-zone .ld-btn-primary:hover { background: var(--ld-coral-ink); }
.ld-zone .ld-btn-secondary { background: var(--ld-warm); border-color: rgba(161, 73, 61, 0.45); color: var(--ld-coral-ink); }
.ld-btn-secondary:hover:not(:disabled) { border-color: var(--ld-coral-ink); }
.ld-btn-ghost { background: transparent; color: var(--ld-soft); padding-inline: 12px; }
.ld-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* tags */
.ld-tag { min-height: 26px; width: fit-content; padding: 5px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; background: var(--ld-inset-2); color: var(--ld-soft); font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ld-tag-level { background: var(--ld-blue); }
.ld-tag-free { background: var(--ld-ok-soft); color: var(--ld-ok); }
.ld-tag-locked { background: var(--ld-inset-2); color: var(--ld-muted); }
.ld-tag-elf { background: var(--ld-purple-soft); color: #744168; }
.ld-tag-register { background: var(--ld-coral-soft); color: #9b4c41; }
.ld-tag-warn { background: var(--ld-coral-soft); color: #9b4c41; }
.ld-eyebrow { display: block; margin-bottom: 10px; color: var(--ld-coral-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; }
.ld-muted { color: var(--ld-muted); font-size: 13px; }

/* cards */
.ld-card { border: 1px solid var(--ld-line); border-radius: var(--ld-radius); background: var(--ld-warm); padding: clamp(22px, 4vw, 36px); box-shadow: var(--ld-shadow-sm); }
.ld-section { padding: 64px 0 0; }
.ld-section:last-child { padding-bottom: 80px; }
.ld-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ld-section-head h2 { margin-bottom: 0; }
.ld-section-head > p { max-width: 300px; color: var(--ld-muted); font-size: 13px; line-height: 1.5; margin-bottom: 4px; }

/* hero */
.ld-hero { padding: 64px 0 72px; max-width: 790px; position: relative; }
.ld-hero > * { position: relative; z-index: 1; }
.ld-hero-line { font-family: var(--ld-serif); color: var(--ld-coral-ink); font-size: clamp(23px, 3vw, 30px); font-style: italic; margin-bottom: 14px; }
.ld-hero-support { max-width: 640px; font-size: 17px; line-height: 1.65; color: var(--ld-soft); margin-bottom: 28px; }
.ld-tiny { display: block; margin-top: 14px; color: var(--ld-muted); font-size: 12px; }

/* passport */
.ld-passport { background: var(--ld-warm); box-shadow: var(--ld-shadow); }
.ld-stamps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.ld-stamp { aspect-ratio: 1; min-width: 0; border: 1.5px dashed rgba(51, 51, 51, 0.25); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ld-muted); transform: rotate(-4deg); }
.ld-stamp:nth-child(even) { transform: rotate(4deg); }
.ld-stamp span { font-family: var(--ld-serif); font-size: clamp(13px, 2vw, 18px); }
.ld-stamp small { font-size: 7px; letter-spacing: 0.12em; }
.ld-stamp-filled { border: 2px solid var(--ld-coral); color: var(--ld-coral); background: var(--ld-coral-soft); }

/* modules */
.ld-modules { display: grid; gap: 12px; }
.ld-module { width: 100%; min-height: 130px; display: flex; align-items: center; gap: 24px; padding: 24px 28px; border: 1px solid var(--ld-line); border-radius: 22px; background: var(--ld-warm); text-align: left; color: var(--ld-text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
a.ld-module { box-shadow: var(--ld-shadow); }
a.ld-module:hover { border-color: var(--ld-coral); transform: translateY(-1px); }
.ld-module-locked { background: transparent; border-style: dashed; color: var(--ld-muted); }
.ld-module-num { font-family: var(--ld-serif); color: var(--ld-coral-ink); font-size: 28px; }
.ld-module-main { min-width: 0; flex: 1; }
.ld-module-title { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.ld-module-title strong { font-family: var(--ld-serif); font-size: 24px; font-weight: 400; }
.ld-module-meta, .ld-free-note, .ld-lock-note { display: block; color: var(--ld-muted); font-size: 12px; margin-bottom: 12px; }
.ld-free-note { margin: 9px 0 0; color: var(--ld-ok); font-weight: 700; }
.ld-lock-note { margin: 9px 0 0; display: flex; align-items: center; gap: 5px; }
.ld-seg-wrap { display: flex; align-items: center; gap: 10px; }
.ld-seg { flex: 1; display: flex; gap: 5px; }
.ld-seg span { height: 6px; flex: 1; border-radius: 99px; background: var(--ld-inset-2); }
.ld-seg .on { background: var(--ld-sage); }
.ld-seg-label { color: var(--ld-muted); font-size: 10px; font-weight: 700; }

/* case-study blocks */
.ld-grid { display: grid; gap: 12px; }
.ld-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ld-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-tile { padding: 18px 20px; border: 1px solid var(--ld-line); border-radius: 18px; background: var(--ld-warm); }
.ld-tile h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.ld-tile p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ld-soft); }
.ld-lead { max-width: 680px; font-size: 16px; line-height: 1.65; color: var(--ld-soft); margin-bottom: 22px; }
.ld-note { margin: 16px 0 0; color: var(--ld-muted); font-size: 13px; line-height: 1.55; }
.ld-cycle { list-style: none; counter-reset: c; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ld-cycle li { counter-increment: c; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 16px; background: var(--ld-warm); border: 1px solid var(--ld-line); }
.ld-cycle li::before { content: counter(c); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ld-coral-soft); color: var(--ld-coral-ink); font-weight: 700; font-size: 12px; }
.ld-cycle b { font-size: 13px; }
.ld-cycle span { font-size: 12px; color: var(--ld-soft); line-height: 1.35; }
.ld-cycle em { margin-top: auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ld-muted); }
.ld-pipeline { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ld-soft); line-height: 1.55; }

/* module intro */
.ld-module-intro { padding: 64px 0 48px; max-width: 730px; }
.ld-kicker { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; color: var(--ld-coral-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ld-two-col { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; padding-bottom: 80px; }
.ld-cando { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.ld-cando li { display: flex; align-items: flex-start; gap: 12px; color: var(--ld-soft); font-size: 14px; line-height: 1.5; }
.ld-cando li > span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-sage-soft); color: var(--ld-ok); }
.ld-lessons { display: grid; gap: 2px; margin-top: 18px; }
.ld-lesson { min-height: 68px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ld-line); color: var(--ld-text); text-decoration: none; }
.ld-lesson:last-child { border-bottom: 0; }
a.ld-lesson:hover strong { color: var(--ld-coral); }
.ld-lesson-state { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-blue); color: var(--ld-soft); font-size: 11px; font-weight: 700; }
.ld-lesson-done .ld-lesson-state { background: var(--ld-sage-soft); color: var(--ld-ok); }
.ld-lesson-locked { color: var(--ld-muted); }
.ld-lesson-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ld-lesson-copy strong { font-size: 14px; }
.ld-lesson-copy small { color: var(--ld-muted); margin-top: 4px; font-size: 12px; }

/* lesson player */
.ld-lesson-main { padding-bottom: 70px; }
.ld-journey { position: sticky; top: calc(var(--header-h, 3.7rem) + 8px); z-index: 10; padding: 12px 18px 15px; margin: 6px 0 24px; border: 1px solid var(--ld-line); border-radius: 18px; background: rgba(253, 251, 247, 0.92); backdrop-filter: blur(12px); box-shadow: var(--ld-shadow-sm); }
.ld-journey-labels { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 9px; }
.ld-journey-labels button { min-height: 40px; border: 0; background: transparent; color: var(--ld-muted); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
.ld-journey-labels button:disabled { cursor: default; }
.ld-journey-labels button span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ld-inset-2); font-size: 11px; }
.ld-journey-labels .now { color: var(--ld-text); font-weight: 700; }
.ld-journey-labels .now span { background: var(--ld-coral); color: var(--ld-warm); }
.ld-journey-labels .done span { background: var(--ld-sage-soft); color: var(--ld-ok); }
.ld-journey .ld-seg span { height: 4px; }
.ld-mission-card { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 18px; background: var(--ld-blue); }
.ld-mission-card h1 { font-size: clamp(35px, 6vw, 56px); margin-bottom: 12px; }
.ld-mission-card p { margin-bottom: 0; max-width: 620px; color: var(--ld-soft); line-height: 1.55; }
.ld-mission-meta { display: flex; align-items: center; gap: 14px; flex: none; }
.ld-mission-meta > span { display: flex; align-items: center; gap: 5px; color: var(--ld-muted); font-size: 12px; }
.ld-step { min-height: 420px; }
.ld-step[hidden] { display: none; }
.ld-step-head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--ld-line); }
.ld-step-head h2 { font-size: 36px; margin-bottom: 7px; }
.ld-step-head p { margin: 0; color: var(--ld-muted); line-height: 1.5; font-size: 14px; }
.ld-step-num { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-coral-soft); color: var(--ld-coral-ink); font-weight: 700; }
.ld-step-body { padding-top: 26px; display: grid; gap: 18px; }
.ld-activity { display: grid; gap: 16px; }
.ld-activity + .ld-activity { padding-top: 22px; border-top: 1px solid var(--ld-line); }
.ld-activity-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ld-muted); font-size: 12px; }
.ld-prompt { margin: 0; font-weight: 700; font-size: 14px; }
.ld-subtitle { margin: 0; font-family: var(--ld-serif); font-size: 24px; line-height: 1.2; }
.ld-actions { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ld-actions > span { color: var(--ld-muted); font-size: 12px; }

/* chat */
.ld-chat { padding: 18px; border-radius: 18px; background: var(--ld-inset); display: grid; gap: 10px; }
.ld-chat-mission { min-height: 220px; align-content: start; }
.ld-row { display: flex; }
.ld-row-me { justify-content: flex-end; }
.ld-row-system { justify-content: center; }
.ld-bubble { max-width: 72%; padding: 12px 15px; border-radius: 16px 16px 16px 5px; background: var(--ld-warm); border: 1px solid var(--ld-line); }
.ld-row-me .ld-bubble { background: var(--ld-sage-soft); border-radius: 16px 16px 5px 16px; }
.ld-row-system .ld-bubble { max-width: 90%; border-radius: 99px; background: var(--ld-blue); text-align: center; }
.ld-bubble small { display: block; margin-bottom: 5px; color: var(--ld-muted); font-size: 10px; font-weight: 700; }
.ld-bubble p { margin: 0; line-height: 1.5; font-size: 14px; }

/* option cards: equal cards in a grid, text wraps inside */
.ld-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ld-options-1 { grid-template-columns: 1fr; }
.ld-option { min-height: 64px; height: 100%; padding: 14px 16px; border: 1px solid var(--ld-line); border-radius: 16px; background: var(--ld-inset); display: flex; align-items: flex-start; gap: 11px; text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.ld-option:hover:not(:disabled) { border-color: var(--ld-line-strong); background: var(--ld-warm); transform: translateY(-1px); }
.ld-option > span { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-inset-2); font-size: 11px; font-weight: 700; }
.ld-option strong { font-size: 14px; line-height: 1.45; font-weight: 600; }
.ld-option:disabled { cursor: default; }
.ld-option.sel { border-color: var(--ld-sage); background: var(--ld-sage-soft); }
.ld-option.sel > span { background: var(--ld-sage); color: var(--ld-warm); }
.ld-option.ok { border-color: var(--ld-ok); background: var(--ld-ok-soft); }
.ld-option.ok > span { background: var(--ld-ok); color: #fff; }
.ld-option.bad { border-color: rgba(155, 69, 69, 0.45); background: var(--ld-bad-soft); }
.ld-option.bad > span { background: var(--ld-bad); color: #fff; }
.ld-option mark { background: rgba(208, 111, 95, 0.22); border-radius: 4px; padding: 0 2px; color: inherit; }

/* feedback banner */
.ld-banner { min-height: 48px; padding: 12px 15px; border-radius: 14px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.ld-banner > b { width: 23px; height: 23px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 12px; }
.ld-banner-success { background: var(--ld-ok-soft); color: #285e39; }
.ld-banner-success > b { background: var(--ld-ok); color: #fff; }
.ld-banner-error { background: var(--ld-bad-soft); color: var(--ld-bad); }
.ld-banner-error > b { background: var(--ld-bad); color: #fff; }
.ld-banner-neutral { background: var(--ld-blue); color: var(--ld-soft); }
.ld-banner-neutral > b { background: #fff; }

/* fields */
.ld-field { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
.ld-field textarea, .ld-fill input { width: 100%; border: 1px solid var(--ld-line-strong); border-radius: 14px; background: var(--ld-warm); padding: 14px; color: var(--ld-text); font-weight: 400; font-size: 14px; }
.ld-field textarea { min-height: 94px; resize: vertical; }
.ld-checklist { margin: 0; padding-left: 18px; color: var(--ld-soft); font-size: 13px; line-height: 1.6; }

/* check step: phrase cards */
.ld-explain p { margin: 0 0 10px; line-height: 1.65; color: var(--ld-soft); }
.ld-move h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.ld-phrases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ld-phrase { width: 100%; min-height: 150px; padding: 20px; border: 1px solid var(--ld-line); border-radius: 18px; background: var(--ld-purple-soft); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; }
.ld-phrase strong { font-family: var(--ld-serif); font-size: 22px; font-weight: 400; line-height: 1.2; }
.ld-phrase p { margin: 0; line-height: 1.55; font-size: 14px; }
.ld-phrase small { display: flex; align-items: center; gap: 6px; color: var(--ld-muted); font-size: 12px; }
.ld-phrase.flipped { background: var(--ld-warm); }
.ld-phrase-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-quote { margin: 0; padding: 18px 20px; border-left: 3px solid var(--ld-coral); border-radius: 0 14px 14px 0; background: var(--ld-coral-soft); line-height: 1.55; }
.ld-quote h3 { margin: 0 0 6px; font-size: 14px; }

/* hypothesise */
.ld-checks { display: grid; gap: 8px; }
.ld-checkrow { min-height: 54px; padding: 10px 14px; border: 1px solid var(--ld-line); border-radius: 14px; background: var(--ld-inset); display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; font-size: 14px; line-height: 1.45; }
.ld-checkrow > span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--ld-line); border-radius: 50%; background: #fff; }
.ld-checkrow.on > span { background: var(--ld-sage-soft); color: var(--ld-ok); border-color: var(--ld-sage); }
.ld-checkrow.ok { border-color: var(--ld-ok); background: var(--ld-ok-soft); }
.ld-checkrow.bad { border-color: rgba(155, 69, 69, 0.45); background: var(--ld-bad-soft); }
.ld-checkrow:disabled { cursor: default; }

/* mission */
.ld-goal { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; background: var(--ld-purple-soft); border: 1px solid rgba(159, 86, 143, 0.16); }
.ld-goal > span { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #75456c; background: rgba(255, 255, 255, 0.55); }
.ld-goal div { display: flex; flex-direction: column; gap: 3px; }
.ld-goal small, .ld-person small { color: var(--ld-muted); font-size: 11px; }
.ld-goal strong { font-size: 14px; line-height: 1.45; }
.ld-person { display: flex; align-items: center; gap: 10px; }
.ld-person > div { display: flex; flex: 1; flex-direction: column; }
.ld-avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-peach); font-family: var(--ld-serif); font-size: 20px; }
.ld-tip { justify-self: center; max-width: 30rem; padding: 8px 12px; border-radius: 10px; background: var(--ld-coral-soft); color: var(--ld-soft); font-size: 13px; text-align: center; }
.ld-replies { display: grid; gap: 8px; }

/* feedback */
.ld-result { display: flex; align-items: center; gap: 14px; }
.ld-result h3 { font-family: var(--ld-serif); font-size: 26px; font-weight: 400; margin: 0; }
.ld-result .ld-eyebrow { margin-bottom: 3px; }
.ld-result-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-ok-soft); color: var(--ld-ok); }
.ld-rubric { border: 1px solid var(--ld-line); border-radius: 16px; overflow: hidden; }
.ld-rubric > div { min-height: 54px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--ld-line); font-size: 14px; background: var(--ld-warm); }
.ld-rubric > div:last-child { border-bottom: 0; }
.ld-yn { display: flex; gap: 4px; flex: none; }
.ld-yn button { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ld-line); background: #fff; font-size: 12px; cursor: pointer; }
.ld-yn button[aria-pressed="true"] { background: var(--ld-sage); border-color: var(--ld-sage); color: #fff; }
.ld-tabs { border: 1px solid var(--ld-line); border-radius: 16px; overflow: hidden; background: var(--ld-warm); }
.ld-tabs > div { display: grid; grid-template-columns: 1fr 1fr; background: var(--ld-inset); }
.ld-tabs button { min-height: 44px; border: 0; background: transparent; font-size: 12px; cursor: pointer; }
.ld-tabs button[aria-selected="true"] { background: var(--ld-warm); font-weight: 700; color: var(--ld-coral-ink); }
.ld-tabs p { margin: 0; padding: 18px; font-size: 14px; line-height: 1.6; }
.ld-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* quiz */
.ld-quiz { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ld-line); }
.ld-quiz:first-child { border-top: 0; padding-top: 0; }
.ld-quiz-ctx { margin: 0; color: var(--ld-soft); line-height: 1.55; font-size: 14px; }
.ld-fill { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.ld-fill input { min-height: 48px; padding: 0 14px; border-radius: 999px; }
.ld-fill input.ok { border-color: var(--ld-ok); background: var(--ld-ok-soft); }
.ld-fill input.bad { border-color: rgba(155, 69, 69, 0.45); }

/* Kvothe cards */
.ld-mascot { width: 112px; height: 112px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ld-purple); border: 1px solid var(--ld-line); }
.ld-mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-break, .ld-final { display: flex; align-items: center; gap: 28px; margin-top: 18px; background: var(--ld-purple-soft); }
.ld-break h2, .ld-final h2 { margin-bottom: 8px; }
.ld-break p, .ld-final p { color: var(--ld-soft); line-height: 1.55; }
.ld-final { min-height: 300px; background: var(--ld-blue); box-shadow: var(--ld-shadow); }
.ld-final .ld-mascot { width: 150px; height: 150px; }
@media (prefers-reduced-motion: no-preference) {
  .ld-mascot img { animation: ld-float 5s ease-in-out infinite; }
  @keyframes ld-float { 50% { transform: translateY(-3px); } }
}

/* review deck */
.ld-review-hero { padding: 64px 0 40px; }
.ld-review-hero p { color: var(--ld-soft); }
.ld-deck { display: grid; gap: 30px; }
.ld-deck-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ld-deck-head h3 { margin: 0; font-family: var(--ld-serif); font-size: 25px; font-weight: 400; }
.ld-flips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ld-flip { min-height: 150px; padding: 20px; border: 1px solid var(--ld-line); border-radius: 17px; background: var(--ld-warm); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; box-shadow: var(--ld-shadow-sm); }
.ld-flip > span { font-family: var(--ld-serif); font-size: 22px; line-height: 1.2; }
.ld-flip > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ld-soft); }
.ld-flip small { display: flex; align-items: center; gap: 5px; color: var(--ld-muted); }
.ld-flip.flipped { background: var(--ld-sage-soft); }
.ld-flip-later { opacity: 0.75; cursor: default; }
.ld-empty { display: flex; gap: 20px; align-items: center; }
.ld-empty .ld-mascot { width: 86px; height: 86px; }

/* responsive */
@media (max-width: 860px) {
  .ld-cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ld-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ld-shell { width: min(100% - 28px, 960px); }
  .ld-subbar { min-height: 64px; }
  .ld-save-note { display: none; }
  .ld-hero { padding: 44px 0 52px; }
  .ld-zone h1 { font-size: 44px; }
  .ld-hero-support { font-size: 15px; }
  .ld-section { padding-top: 48px; }
  .ld-section-head { align-items: flex-start; }
  .ld-section-head > p { display: none; }
  .ld-passport { padding: 20px; }
  .ld-stamps { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ld-module { min-height: 0; gap: 12px; padding: 18px 16px; align-items: flex-start; }
  .ld-module > .ld-i { display: none; }
  .ld-module-num { font-size: 21px; }
  .ld-module-title { align-items: flex-start; justify-content: space-between; }
  .ld-module-title strong { font-size: 20px; }
  .ld-grid-2, .ld-grid-3, .ld-options, .ld-phrases, .ld-flips, .ld-two-col { grid-template-columns: 1fr; }
  .ld-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-module-intro { padding: 44px 0 36px; }
  .ld-two-col { padding-bottom: 50px; }
  .ld-card { padding: 22px; }
  .ld-lesson .ld-tag { display: none; }
  .ld-journey { margin-inline: -5px; padding-inline: 10px; }
  .ld-journey-labels button small { display: none; }
  .ld-mission-card { align-items: flex-start; flex-direction: column; gap: 18px; }
  .ld-mission-card h1 { font-size: 38px; }
  .ld-step { min-height: 0; }
  .ld-step-head h2 { font-size: 30px; }
  .ld-bubble { max-width: 88%; }
  .ld-activity-title { align-items: flex-start; flex-direction: column; }
  .ld-break, .ld-final, .ld-empty { align-items: flex-start; flex-direction: column; }
  .ld-break .ld-mascot { width: 86px; height: 86px; }
  .ld-final .ld-mascot { width: 120px; height: 120px; }
  .ld-btn-row { align-items: stretch; flex-direction: column; }
  .ld-btn-row .ld-btn { width: 100%; }
  .ld-actions { gap: 8px; }
  .ld-actions > span { display: none; }
  .ld-actions .ld-btn { padding-inline: 14px; font-size: 13px; }
  .ld-fill { grid-template-columns: 1fr 1fr; }
  .ld-fill input { grid-column: 1 / -1; }
  .ld-rubric > div { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-zone *, .ld-zone *::before, .ld-zone *::after { transition: none !important; animation: none !important; }
}

/* layout fixes */
.ld-zone { min-height: calc(100dvh - var(--header-h, 3.7rem) - 100px); }
.ld-passport .ld-section-head > .ld-muted { white-space: nowrap; }

/* ================= v2: lesson player ================= */
.ld-is-mission .ld-mission-card { background: var(--ld-purple-soft); }
.ld-step-head > div { flex: 1; min-width: 0; }
.ld-step-time { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--ld-muted); font-size: 12px; font-weight: 600; }
.ld-lead-sm { margin: 0; max-width: 640px; color: var(--ld-soft); font-size: 15px; line-height: 1.6; }

/* dialogue */
.ld-scene { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ld-soft); font-size: 14px; line-height: 1.5; }
.ld-scene-mode { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--ld-blue); color: #33525f; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ld-chat-spoken { background: linear-gradient(180deg, var(--ld-inset), #f9f6f0); }
.ld-chat-spoken .ld-bubble { border-radius: 18px; }
.ld-chat-spoken .ld-row-me .ld-bubble { border-radius: 18px; }
.ld-bubble { box-shadow: var(--ld-shadow-sm); }
.ld-bubble-their { border-color: rgba(159, 86, 143, 0.28); }
.ld-their { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 99px; background: var(--ld-purple-soft); color: #744168; font-size: 11px; font-weight: 700; }
.ld-noise { display: inline-block; padding: 0 4px; border-radius: 4px; background: var(--ld-inset-2); color: var(--ld-muted); letter-spacing: -1px; font-size: 12px; }
.ld-typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: var(--ld-warm); border: 1px solid var(--ld-line); }
.ld-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ld-muted); opacity: 0.4; animation: ld-dot 1s infinite; }
.ld-typing i:nth-child(2) { animation-delay: 0.15s; }
.ld-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ld-dot { 30% { opacity: 1; transform: translateY(-2px); } }
.ld-row { animation: ld-in 0.25s ease both; }
@keyframes ld-in { from { opacity: 0; transform: translateY(4px); } }
.ld-verdict { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.ld-verdict b { margin-right: 4px; }
.ld-q-best { background: var(--ld-ok-soft); color: #285e39; }
.ld-q-ok { background: var(--ld-warn-soft); color: var(--ld-warn); }
.ld-q-weak { background: var(--ld-bad-soft); color: var(--ld-bad); }
.ld-options-reply .ld-option { min-height: 52px; background: var(--ld-warm); border-color: var(--ld-line-strong); border-radius: 14px; }
.ld-options-reply .ld-option strong { font-weight: 600; }

/* learn */
.ld-phrase { background: var(--ld-purple-soft); box-shadow: var(--ld-shadow-sm); transition: transform 0.2s; }
.ld-phrase:hover { transform: translateY(-2px); }
.ld-phrase.flipped { background: var(--ld-warm); }
.ld-focus { border: 1px solid var(--ld-line); border-radius: 20px; overflow: hidden; background: var(--ld-warm); box-shadow: var(--ld-shadow); }
.ld-focus-head { padding: 20px 22px 16px; background: var(--ld-blue-soft); border-bottom: 1px solid var(--ld-line); }
.ld-focus-head h3 { margin: 0 0 10px; font-family: var(--ld-serif); font-size: 26px; font-weight: 400; }
.ld-focus-head code { display: inline-block; padding: 5px 10px; border-radius: 8px; background: var(--ld-warm); border: 1px solid var(--ld-line); font: 600 13px/1.4 var(--ld-sans); color: #33525f; }
.ld-focus-cols { display: grid; grid-template-columns: 1fr 1fr; }
.ld-focus-cols > div { padding: 16px 22px; display: grid; gap: 6px; align-content: start; }
.ld-focus-cols b { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.ld-focus-cols p { margin: 0; font-size: 15px; line-height: 1.45; }
.ld-focus-right b { color: var(--ld-ok); }
.ld-focus-wrong { border-left: 1px solid var(--ld-line); background: #fffafa; }
.ld-focus-wrong b { color: var(--ld-bad); }
.ld-focus-wrong s { text-decoration-color: rgba(155, 69, 69, 0.6); text-decoration-thickness: 2px; color: var(--ld-soft); }
.ld-focus-why { margin: 0; padding: 14px 22px; border-top: 1px solid var(--ld-line); color: var(--ld-soft); font-size: 14px; line-height: 1.55; }
.ld-l1 { margin: 0; padding: 12px 22px 16px; display: flex; gap: 10px; align-items: flex-start; color: var(--ld-soft); font-size: 14px; line-height: 1.5; }
.ld-l1 span { flex: none; padding: 2px 7px; border-radius: 6px; background: var(--ld-inset-2); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }

/* practice */
.ld-task { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--ld-line); border-radius: 18px; background: var(--ld-warm); transition: border-color 0.2s; }
.ld-task.is-ok { border-color: rgba(47, 122, 71, 0.35); }
.ld-task-head { display: flex; align-items: center; gap: 10px; }
.ld-task-n { flex: none; padding: 3px 8px; border-radius: 99px; background: var(--ld-inset-2); color: var(--ld-soft); font-size: 11px; font-weight: 700; }
.ld-task-ctx { margin: 0; color: var(--ld-soft); font-size: 14px; line-height: 1.55; }
.ld-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-token { min-height: 44px; padding: 8px 12px; border: 1px solid var(--ld-line-strong); border-radius: 10px; background: var(--ld-inset); font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.ld-token:hover:not(:disabled) { background: var(--ld-warm); transform: translateY(-1px); }
.ld-token:disabled { cursor: default; }
.ld-token.is-wrong { background: var(--ld-bad-soft); border-color: var(--ld-bad); color: var(--ld-bad); text-decoration: line-through 2px; }
.ld-token.is-miss { outline: 2px dashed var(--ld-line-strong); outline-offset: 2px; }
.ld-fixed { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #285e39; }
.ld-build-line { min-height: 58px; padding: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1.5px dashed var(--ld-line-strong); border-radius: 14px; background: var(--ld-inset); }
.ld-build-hint { padding-left: 6px; color: var(--ld-muted); font-size: 13px; }
.ld-build-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-chip { min-height: 42px; padding: 8px 13px; border: 1px solid var(--ld-line-strong); border-radius: 10px; background: var(--ld-warm); box-shadow: 0 2px 0 var(--ld-line); font-size: 15px; font-weight: 600; cursor: pointer; }
.ld-build-line .ld-chip { background: var(--ld-blue-soft); }
.ld-chip-set { cursor: default; background: var(--ld-ok-soft) !important; border-color: rgba(47, 122, 71, 0.3); }
.ld-build-retry { margin: 0; color: var(--ld-warn); font-size: 13px; font-weight: 600; }
.shake { animation: ld-shake 0.35s; }
@keyframes ld-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.ld-gap p { margin: 0; font-size: 17px; line-height: 2.1; }
.ld-gap input { width: 7.5em; min-height: 40px; margin: 0 6px; padding: 0 10px; border: 0; border-bottom: 2px solid var(--ld-coral); border-radius: 8px 8px 0 0; background: var(--ld-inset); font-size: 16px; font-weight: 700; text-align: center; color: var(--ld-text); }
.ld-gap input:focus { outline: none; background: var(--ld-blue-soft); }
.ld-gap input.ok { border-color: var(--ld-ok); background: var(--ld-ok-soft); }
.ld-gap input.bad { border-color: var(--ld-bad); background: var(--ld-bad-soft); }

/* use it + save */
.ld-situation { padding: 16px 18px; border-radius: 16px; background: var(--ld-blue-soft); border: 1px solid var(--ld-line); }
.ld-situation p { margin: 0; line-height: 1.55; font-size: 15px; }
.ld-aloud { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ld-peach); background: rgba(243, 211, 189, 0.45); }
.ld-aloud > span { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-warm); color: var(--ld-coral-ink); }
.ld-aloud > div:not(.ld-aloud-ticks) { flex: 1; display: grid; gap: 2px; }
.ld-aloud small { color: var(--ld-soft); font-size: 12px; }
.ld-aloud-ticks { display: flex; gap: 6px; }
.ld-aloud-ticks button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ld-line-strong); background: var(--ld-warm); font-weight: 700; cursor: pointer; }
.ld-aloud-ticks button.on { background: var(--ld-ok); border-color: var(--ld-ok); color: #fff; }
.ld-tabs small { display: block; padding: 0 18px 16px; color: var(--ld-muted); font-size: 13px; line-height: 1.5; }
.ld-takeaway { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ld-takeaway > div { padding: 18px 20px; border: 1px solid var(--ld-line); border-radius: 18px; background: var(--ld-warm); }
.ld-takeaway ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ld-takeaway li { display: flex; align-items: center; gap: 8px; font-family: var(--ld-serif); font-size: 19px; }
.ld-takeaway li .ld-i { color: var(--ld-ok); }
.ld-takeaway p { margin: 0 0 4px; }
.ld-result-open .ld-result-icon { background: var(--ld-inset-2); color: var(--ld-soft); }

/* module page */
.ld-lesson-k-mission .ld-lesson-state { background: var(--ld-purple-soft); color: #744168; }
.ld-lesson-k-finale .ld-lesson-state { background: var(--ld-peach); color: var(--ld-coral-ink); }
.ld-lesson-state { font-size: 10px; }

/* ================= v2: home page ================= */
.ld-subbar-right { display: flex; gap: 4px; }
.ld-hero-split { max-width: none; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; padding-bottom: 40px; }
.ld-hero-split.has-demo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.ld-hero-split h1 { font-size: clamp(42px, 6vw, 68px); }
.ld-hero-demo { padding: 20px; display: grid; gap: 14px; box-shadow: var(--ld-shadow); transform: rotate(0.6deg); }
.ld-hero-demo .ld-chat { min-height: 120px; align-content: start; }
.ld-hero-demo .ld-bubble { max-width: 92%; }
.ld-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-demo-head .ld-eyebrow { margin: 0; }
.ld-hero-demo .ld-option strong { font-size: 13px; }
.ld-facts { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ld-line); border-bottom: 1px solid var(--ld-line); }
.ld-facts li { padding: 18px 16px; display: grid; gap: 2px; }
.ld-facts li + li { border-left: 1px solid var(--ld-line); }
.ld-facts strong { font-family: var(--ld-serif); font-size: 28px; font-weight: 400; line-height: 1.1; }
.ld-facts span { color: var(--ld-muted); font-size: 12px; }

.ld-flow { list-style: none; counter-reset: f; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ld-line); border-radius: 20px; overflow: hidden; background: var(--ld-warm); box-shadow: var(--ld-shadow-sm); }
.ld-flow li { counter-increment: f; position: relative; padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.ld-flow li + li { border-left: 1px solid var(--ld-line); }
.ld-flow li::before { content: counter(f); width: 26px; height: 26px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 50%; background: var(--ld-coral-soft); color: var(--ld-coral-ink); font-weight: 700; font-size: 12px; }
.ld-flow b { font-size: 14px; }
.ld-flow span { font-size: 12px; color: var(--ld-soft); line-height: 1.4; }
.ld-flow em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ld-muted); }

.ld-mechanics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ld-mech { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 18px; border: 1px solid var(--ld-line); border-radius: 22px; background: var(--ld-warm); box-shadow: var(--ld-shadow-sm); transition: transform 0.2s, box-shadow 0.2s; }
.ld-mech:hover { transform: translateY(-3px); box-shadow: var(--ld-shadow); }
.ld-mech h3 { margin: 6px 6px 0; display: flex; align-items: center; gap: 8px; font-family: var(--ld-serif); font-size: 21px; font-weight: 400; }
.ld-mech p { margin: 0 6px; color: var(--ld-soft); font-size: 14px; line-height: 1.5; }
.ld-mech-trains { margin: auto 6px 0; padding-top: 6px; color: var(--ld-sage-ink); font-size: 12px; font-weight: 700; }
.ld-mech h3 .ld-tag { font-family: var(--ld-sans); }
.ld-mock { height: 150px; padding: 14px; border-radius: 14px; background: var(--ld-inset); display: flex; flex-direction: column; justify-content: center; gap: 7px; overflow: hidden; font-size: 12px; }
.ld-mock-bubble { align-self: flex-start; max-width: 88%; padding: 8px 10px; border-radius: 12px 12px 12px 4px; background: var(--ld-warm); border: 1px solid rgba(159, 86, 143, 0.28); line-height: 1.35; }
.ld-mock-bubble span { display: block; margin-top: 5px; width: fit-content; padding: 1px 6px; border-radius: 99px; background: var(--ld-purple-soft); color: #744168; font-size: 10px; font-weight: 700; }
.ld-mock-reply { align-self: flex-end; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ld-line-strong); background: var(--ld-warm); font-weight: 600; }
.ld-mock-best { border-color: rgba(47, 122, 71, 0.5) !important; background: var(--ld-ok-soft) !important; color: #285e39; }
.ld-mock-weak { border-color: rgba(155, 69, 69, 0.4) !important; background: var(--ld-bad-soft) !important; color: var(--ld-bad); }
.ld-mock-tokens { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 5px; }
.ld-mock-tokens span { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ld-line-strong); background: var(--ld-warm); font-size: 14px; font-weight: 600; }
.ld-mock-tokens .is-wrong { border-color: var(--ld-bad); background: var(--ld-bad-soft); color: var(--ld-bad); text-decoration: line-through 2px; }
.ld-mock-tokens p { width: 100%; margin: 6px 0 0; color: var(--ld-muted); font-size: 11px; }
.ld-mock-line, .ld-mock-bank { display: flex; flex-wrap: wrap; gap: 5px; }
.ld-mock-line { padding: 6px; border: 1.5px dashed var(--ld-line-strong); border-radius: 10px; }
.ld-mock-line span, .ld-mock-bank span { padding: 5px 8px; border-radius: 7px; border: 1px solid var(--ld-line-strong); background: var(--ld-warm); box-shadow: 0 2px 0 var(--ld-line); font-size: 13px; font-weight: 600; }
.ld-mock-line span { background: var(--ld-blue-soft); }
.ld-mock-line i { width: 38px; border-radius: 7px; background: var(--ld-inset-2); }
.ld-mock-goal { padding: 7px 10px; border-radius: 10px; background: var(--ld-purple-soft); color: #744168; font-weight: 700; }
.ld-mock-paths { display: flex; gap: 6px; }
.ld-mock-paths span { flex: 1; padding: 6px 8px; border-radius: 9px; border: 1px solid; text-align: center; font-weight: 600; }
.ld-mock-outcome { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: var(--ld-warm); font-weight: 600; }
.ld-mock-outcome b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--ld-ok); color: #fff; font-size: 10px; }
.ld-mock-deck { position: relative; align-items: center; }
.ld-mock-card { position: relative; z-index: 1; width: 78%; padding: 16px; border-radius: 12px; border: 1px solid var(--ld-line); background: var(--ld-warm); box-shadow: var(--ld-shadow); font-family: var(--ld-serif); font-size: 17px; line-height: 1.2; transform: rotate(-2deg); }
.ld-mock-card small { display: block; margin-top: 8px; font: 700 10px var(--ld-sans); color: var(--ld-sage-ink); }
.ld-mock-card-back { position: absolute; z-index: 0; top: 34px; height: 76px; transform: rotate(4deg); background: var(--ld-purple-soft); }
.ld-mock-scale { display: flex; justify-content: space-between; color: var(--ld-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ld-mock-track { height: 54px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px; border-radius: 99px; background: linear-gradient(90deg, #f3d9d5, #d6ebdc 50%, #f5e3c2); }
.ld-mock-track i { padding: 4px 7px; border-radius: 7px; background: var(--ld-warm); border: 1px solid var(--ld-line-strong); font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ld-mock-track i.is-good { border-color: var(--ld-ok); color: #285e39; }

/* portfolio case band */
.ld-band { margin-top: 72px; padding: 8px 0 24px; background: var(--ld-band); border-top: 1px solid var(--ld-line); }
.ld-band-head { padding: 56px 0 8px; max-width: 760px; }
.ld-band-head h2 { font-size: clamp(34px, 5vw, 52px); }
.ld-band-head p { color: var(--ld-soft); font-size: 16px; line-height: 1.6; }
.ld-band-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.ld-band-nav a { padding: 7px 13px; border-radius: 99px; border: 1px solid var(--ld-line-strong); background: var(--ld-warm); color: var(--ld-soft); font-size: 13px; font-weight: 600; text-decoration: none; }
.ld-band-nav a:hover { border-color: var(--ld-coral); color: var(--ld-coral-ink); }
.ld-band .ld-tile { box-shadow: var(--ld-shadow-sm); }
.ld-decision span { display: block; margin-bottom: 8px; font-family: var(--ld-serif); color: var(--ld-coral-ink); font-size: 22px; }
.ld-data { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 14px; }
.ld-code { margin: 0; padding: 22px; overflow: auto; border-radius: 20px; background: #2a2b31; color: #e9e6e1; font: 13px/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; box-shadow: var(--ld-shadow); }
.ld-code .k { color: #f2b8a8; }
.ld-code .s { color: #b9d7c4; }
.ld-data-side { display: grid; gap: 12px; }
.ld-status { border-top: 3px solid var(--ld-inset-2); }
.ld-status-done { border-top-color: var(--ld-ok); }
.ld-band .ld-final { background: var(--ld-blue); }

@media (max-width: 860px) {
  .ld-hero-split.has-demo { grid-template-columns: 1fr; }
  .ld-hero-demo { transform: none; }
  .ld-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-flow li:nth-child(4) { border-left: 0; }
  .ld-flow li:nth-child(n+4) { border-top: 1px solid var(--ld-line); }
  .ld-mechanics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-data { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ld-subbar-right .ld-btn:first-child { display: none; }
  .ld-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-facts li:nth-child(3) { border-left: 0; }
  .ld-facts li:nth-child(n+3) { border-top: 1px solid var(--ld-line); }
  .ld-flow { grid-template-columns: 1fr 1fr; }
  .ld-flow li { border-left: 0 !important; border-top: 1px solid var(--ld-line); }
  .ld-flow li:nth-child(even) { border-left: 1px solid var(--ld-line) !important; }
  .ld-flow li:nth-child(-n+2) { border-top: 0; }
  .ld-mechanics { grid-template-columns: 1fr; }
  .ld-focus-cols, .ld-takeaway { grid-template-columns: 1fr; }
  .ld-focus-wrong { border-left: 0; border-top: 1px solid var(--ld-line); }
  .ld-step-time { display: none; }
  .ld-verdict { max-width: 92%; }
  .ld-aloud { flex-wrap: wrap; }
  .ld-band { margin-top: 48px; }
  .ld-band-head { padding-top: 40px; }
}

/* v2.1: weekly task, check-in, recall */
.ld-week { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: rgba(243, 211, 189, 0.4); border: 1px solid rgba(208, 111, 95, 0.2); }
.ld-week-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ld-warm); color: var(--ld-coral-ink); }
.ld-week p { margin: 0 0 6px; line-height: 1.5; }
.ld-week small { color: var(--ld-soft); font-size: 13px; line-height: 1.5; }
.ld-week .ld-eyebrow { margin-bottom: 6px; }
.ld-checkin { padding: 16px 18px; border-radius: 16px; background: var(--ld-sage-soft); border: 1px solid rgba(120, 146, 132, 0.25); }
.ld-checkin p { margin: 0 0 10px; line-height: 1.5; }
.ld-checkin .ld-eyebrow { color: var(--ld-sage-ink); margin-bottom: 6px; }
.ld-chip-btn { min-height: 40px; background: var(--ld-warm) !important; border: 1px solid var(--ld-line-strong) !important; font-size: 13px; }
.ld-recall { background: var(--ld-blue-soft); border-style: dashed; }
.ld-recall .ld-task-n { background: var(--ld-blue); color: #33525f; }
.ld-recall-from { margin-left: auto; color: var(--ld-muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 700px) { .ld-recall .ld-task-head { flex-wrap: wrap; } .ld-recall-from { margin-left: 0; } }

/* v2.2: hero title as name + subtitle; subbar without the course name on home */
.ld-zone .ld-hero-title { margin-bottom: 18px; }
.ld-hero-title span { display: block; margin-top: 12px; font-family: var(--ld-serif); font-style: italic; font-size: clamp(23px, 3vw, 30px); font-weight: 400; letter-spacing: 0; line-height: 1.2; color: var(--ld-coral-ink); }
.ld-subbar-right:only-child { margin-left: auto; }

/* ===== v2.5 design fixes: order, density, rhythm ===== */
.ld-hero-split { padding-top: 32px; }

/* six steps: 3 × 2 with hairline grid, readable line length */
.ld-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ld-line); }
.ld-flow li { background: var(--ld-warm); padding: 20px 22px 22px; border: 0 !important; }
.ld-flow b { font-size: 16px; }
.ld-flow span { font-size: 14px; line-height: 1.55; max-width: 34ch; }

/* modules: one big card for what's open, a quiet grid for what's next */
.ld-soon { margin-top: 22px; }
.ld-soon-head { margin: 0 0 10px; color: var(--ld-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ld-soon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ld-soon-item { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1px dashed var(--ld-line-strong); border-radius: 16px; color: var(--ld-muted); }
.ld-soon-item > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ld-soon-item strong { font-family: var(--ld-serif); font-weight: 400; font-size: 18px; color: var(--ld-soft); }
.ld-soon-item small { font-size: 12px; line-height: 1.4; }
.ld-soon-num { font-family: var(--ld-serif); font-size: 18px; color: var(--ld-coral-ink); opacity: 0.7; }
.ld-soon-item .ld-i { flex: none; opacity: 0.6; }

/* passport: lighter, after the modules */
.ld-passport-wrap { padding-top: 40px; }
.ld-passport-compact { padding: 22px 26px; box-shadow: var(--ld-shadow-sm); }
.ld-passport-compact .ld-section-head { margin-bottom: 14px; }
.ld-passport-compact h2 { font-size: 26px; }
.ld-passport-compact .ld-stamps { grid-template-columns: repeat(8, 64px); justify-content: space-between; gap: 8px; }
.ld-passport-compact .ld-stamp span { font-size: 15px; }

/* case: code card sized to its content */
.ld-code { align-self: start; }

@media (max-width: 860px) {
  .ld-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-passport-compact .ld-stamps { grid-template-columns: repeat(4, 64px); row-gap: 12px; }
}
@media (max-width: 700px) {
  .ld-hero-split { padding-top: 20px; }
  .ld-flow { grid-template-columns: 1fr; }
  .ld-flow li { padding: 16px 18px; }
  .ld-flow li:nth-child(even) { border-left: 0 !important; }
  .ld-soon-grid { grid-template-columns: 1fr; }
}