/* The home page's hero and middle sections (courses/home-v2.js, research/HOME_SECTIONS.md), 2026-11-06.
   The hero (hx-) and the start cards (sc-) are the owner's E7 mocks; "See a lesson" (ls-) is the owner's B3B, an open
   book; "More than lessons" (mo-) is the owner's A2. Nothing swipes on a phone. */

/* ---------- 1. Choose where to start: two drawn cards (courses/home-v2.js start; mock 2026-11-06) ----------
   Each subject is one card in its folder colour. Most of the card is an ink drawing of the subject cut open, like a
   patent drawing: a chat reply for AI engineering, a price chart for quant engineering. Under it: the name, one line,
   one key. Every class starts with sc- (the card is .sc-subj: landing/home.css already owns .sc-card). Sizes inside a
   card follow the card's own width (container units), so the same markup works two-up and stacked. CSS only. */
.sc-start {
  --sc-ink: #1D1C1A;
  --sc-ink-2: #5E5B55;
  --sc-paper: #FCFBF8;
  --sc-orange: #FF5A1F;
  --sc-serif: "Fraunces", Georgia, serif;
  --sc-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sc-ease: cubic-bezier(.2, .8, .2, 1);
  --sc-ease-out: cubic-bezier(.23, 1, .32, 1);
  /* the page's section rhythm (.lp-sec): 120px above, and the next section brings its own 120px */
  box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 120px 28px 0; scroll-margin-top: 72px;
  color: var(--sc-ink); font-family: var(--sc-sans);
}
.sc-start *, .sc-start *::before, .sc-start *::after { box-sizing: border-box; }

.sc-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.sc-h2 { margin: 0; font: 340 clamp(38px, 4.3vw, 60px)/1.02 var(--sc-serif); font-variation-settings: "opsz" 144; letter-spacing: -.035em; text-wrap: balance; }
.sc-h2 i { font-style: italic; font-weight: 330; }
.sc-sub { margin: 16px 0 0; font-size: 18.5px; line-height: 1.5; color: var(--sc-ink-2); text-wrap: pretty; }

.sc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.sc-subj {
  container: sc / inline-size;
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 30px;
  background-color: var(--sc-face);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 38%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%),
    radial-gradient(rgba(29, 28, 26, .075) .8px, transparent 1px);
  background-size: auto, 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .07), 0 1px 2px rgba(60, 48, 30, .08), 0 18px 40px -18px rgba(60, 48, 30, .30);
  transition: transform .5s var(--sc-ease-out), box-shadow .5s var(--sc-ease-out);
}
.sc-ai { --sc-face: #D9B3A9; --sc-deep: #C49A8F; }
.sc-quant { --sc-face: #C9BCD6; --sc-deep: #B3A5C3; }

/* The drawing: the wide version on roomy cards, the narrow one when the card itself is narrow. */
.sc-art { margin: 0; padding: clamp(10px, 2.4cqi, 16px) clamp(10px, 2.4cqi, 16px) 0; }
.sc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sc-narrow { display: none; }
@container sc (max-width: 520px) {
  .sc-wide { display: none; }
  .sc-narrow { display: block; }
}

.sc-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  padding: clamp(4px, 1cqi, 8px) clamp(22px, 5cqi, 34px) clamp(24px, 5cqi, 32px);
}
.sc-words { min-width: 0; flex: 1 1 250px; }
.sc-h3 { margin: 0; font: 340 clamp(32px, 7.2cqi, 46px)/1 var(--sc-serif); font-variation-settings: "opsz" 144; letter-spacing: -.03em; }
.sc-h3 i { font-style: italic; font-weight: 330; }
.sc-keep { white-space: nowrap; }
.sc-line { margin: 10px 0 0; font-size: clamp(16px, 3cqi, 18px); line-height: 1.45; color: rgba(29, 28, 26, .74); text-wrap: balance; }

/* The key: the site's dark key, with an arrow. Its ::after covers the card, so the whole card is one click. */
.sc-key {
  position: static; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 22px; border-radius: 13px;
  font: 500 16.5px/1 var(--sc-sans); color: #FBFAF7; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #34322F, #1D1C1A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(29, 28, 26, .3), 0 8px 18px -8px rgba(29, 28, 26, .55);
  transition: box-shadow .3s var(--sc-ease), transform .3s var(--sc-ease);
  -webkit-tap-highlight-color: transparent;
}
.sc-key::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 30px; }
.sc-arrow { width: 16px; height: 16px; flex: none; transition: transform .35s var(--sc-ease-out); }
.sc-key:focus-visible { outline: none; }
.sc-subj:has(.sc-key:focus-visible) { outline: 2.5px solid var(--sc-orange); outline-offset: 4px; }

/* Hover and focus: the card lifts a little and its drawing comes alive. */
.sc-tocaret, .sc-tonext { stroke-dashoffset: 0; }
.sc-cand.sc-top, .sc-arrive, .sc-caret { transition: transform .6s var(--sc-ease-out), opacity .4s var(--sc-ease); }
.sc-arrive { opacity: 0; transform: translateX(26px); }
@media (hover: hover) {
  .sc-subj:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .07), 0 1px 2px rgba(60, 48, 30, .08), 0 26px 50px -20px rgba(60, 48, 30, .38); }
  .sc-subj:hover .sc-arrow { transform: translateX(3px); }
}
.sc-subj:hover .sc-cand.sc-top, .sc-subj:focus-within .sc-cand.sc-top { transform: translateY(-5px); }
.sc-subj:hover .sc-draw, .sc-subj:focus-within .sc-draw { animation: sc-draw 1.1s var(--sc-ease) both; }
.sc-subj:hover .sc-arrive, .sc-subj:focus-within .sc-arrive { opacity: 1; transform: none; }
.sc-subj:hover .sc-caret, .sc-subj:focus-within .sc-caret { animation: sc-blink 1.05s steps(1, end) .3s 3; }
@keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sc-blink { 50% { opacity: 0; } }

/* Narrow screens: one column. Phones: tighter, and the key runs the full width. */
@media (max-width: 899px) {
  .sc-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 599px) {
  .sc-start { padding: 80px 16px 0; }
  .sc-head { margin-bottom: 32px; }
  .sc-sub { font-size: 17px; }
  .sc-cards { gap: 18px; }
  .sc-subj { border-radius: 24px; }
  .sc-key::after { border-radius: 24px; }
  .sc-foot { gap: 18px; }
  .sc-key { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-subj, .sc-key, .sc-arrow, .sc-cand.sc-top, .sc-arrive, .sc-caret { transition: none !important; }
  .sc-subj:hover, .sc-subj:focus-within { transform: none !important; }
  .sc-subj .sc-draw, .sc-subj .sc-caret { animation: none !important; }
  .sc-subj:hover .sc-cand.sc-top, .sc-subj:focus-within .sc-cand.sc-top { transform: none; }
  .sc-subj:hover .sc-arrive, .sc-subj:focus-within .sc-arrive { opacity: 0; transform: translateX(26px); }
}

/* ---------- 2. See a lesson from the inside: an open book (courses/home-v2.js lessonBook; the owner's B3B, 2026-11-07) ----------
   A cloth hardback lying open, lit from above like the hero, its pages typeset like a printed textbook with part 1 of
   a real lesson, and a reading glass on the worked steps. Inside the drawing, sizes are design units (var(--u)), so the
   book scales as one picture; below a 900px plate, phones get the left page on its own. Every class starts with ls-.
   The section sets its own type size, so the drawing is the same whatever the page around it sets. */
.ls-start {
  --ls-ink: #1D1C1A; --ls-ink-2: #5E5B55; --ls-print: #2A2622; --ls-print-2: #6A625A;
  --ls-orange: #FF5A1F; --ls-orange-ink: #B4400F;
  --ls-serif: "Fraunces", Georgia, serif; --ls-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ls-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  --ls-ease: cubic-bezier(.2, .8, .2, 1); --ls-ease-out: cubic-bezier(.23, 1, .32, 1);
  /* the page's section rhythm (.lp-sec): 120px above, and the next section brings its own 120px */
  box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 120px 28px 0; scroll-margin-top: 72px;
  color: var(--ls-ink); font: 400 16px/normal var(--ls-sans);
}
.ls-start *, .ls-start *::before, .ls-start *::after { box-sizing: border-box; }

/* the heading */
.ls-head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.ls-h2 { margin: 0; font: 340 clamp(38px, 4.3vw, 60px)/1.02 var(--ls-serif); font-variation-settings: "opsz" 144; letter-spacing: -.035em; text-wrap: balance; }
.ls-h2 i { font-style: italic; font-weight: 330; }
.ls-sub { margin: 16px 0 0; font-size: 18.5px; line-height: 1.5; color: var(--ls-ink-2); text-wrap: balance; }

/* the plate: the spread from 900px, the left page alone below */
.ls-plate { container: lsplate / inline-size; margin: 0; }
.ls-frame { container-type: inline-size; }
.ls-narrow { display: none; }
@container lsplate (max-width: 899px) {
  .ls-wide { display: none; }
  .ls-narrow { display: block; }
}
.ls-wide .ls-stage { --u: calc(100cqi / 1180); }
.ls-narrow .ls-stage { --u: calc(100cqi / 478); overflow: hidden;
  -webkit-mask: linear-gradient(90deg, #000 88%, transparent 100%); mask: linear-gradient(90deg, #000 88%, transparent 100%); }
.ls-narrow .ls-body, .ls-narrow .ls-ex-p { text-align: left; }
/* On the phone page the type is set 15% larger and reflows in the same column, so it stays readable. */
.ls-narrow .ls-tb { --u: calc(100cqi / 478 * 1.15); }
.ls-stage { position: relative; width: 100%; }
.ls-stage > * { position: absolute; margin: 0; }
.ls-book { inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.ls-book.ls-pages { z-index: 3; }
.ls-pg { z-index: 4; }
.ls-glass { z-index: 5; }

/* the printed pages */
.ls-tb { color: var(--ls-print); font-family: var(--ls-serif); font-variation-settings: "opsz" 12; hyphens: auto; -webkit-hyphens: auto; }
.ls-tb p, .ls-tb h3, .ls-tb ol, .ls-tb figure { margin: 0; }
.ls-rh { display: flex; align-items: baseline; gap: calc(16 * var(--u)); margin-bottom: calc(28 * var(--u)) !important; font: 400 calc(10.6 * var(--u))/1 var(--ls-serif); color: var(--ls-print-2); white-space: nowrap; }
.ls-rh.ls-rh-r { justify-content: flex-end; }
.ls-rh i { font-style: italic; }
.ls-folio { font-variant-numeric: lining-nums; color: var(--ls-print); }
.ls-verso-tb .ls-folio { margin-left: calc(-38 * var(--u)); width: calc(22 * var(--u)); }
.ls-sec { font: 360 calc(27 * var(--u))/1.06 var(--ls-serif); font-variation-settings: "opsz" 72; letter-spacing: -.022em; margin-bottom: calc(12 * var(--u)) !important; }
.ls-sec i { font-style: italic; font-weight: 340; }
.ls-body { font: 380 calc(12.4 * var(--u))/1.58 var(--ls-serif); text-align: justify; text-wrap: pretty; margin-bottom: calc(10 * var(--u)) !important; }

/* The worked example, printed on the page: a faint printed grid, an orange margin rule, the step numbers hanging in
   the margin, each step's sum set in mono on its own line, and the answer in a printed box. */
.ls-ex { position: relative; margin-top: calc(18 * var(--u)) !important; padding: calc(12 * var(--u)) 0 calc(10 * var(--u)); }
.ls-ex::before { content: ""; position: absolute; inset: calc(-4 * var(--u)) calc(-12 * var(--u)) calc(-6 * var(--u)) calc(-44 * var(--u)); z-index: -1;
  background-image: linear-gradient(rgba(60, 70, 110, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 70, 110, .075) 1px, transparent 1px);
  background-size: calc(13 * var(--u)) calc(13 * var(--u));
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) intersect, linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.ls-ex::after { content: ""; position: absolute; left: calc(-11 * var(--u)); top: calc(8 * var(--u)); bottom: calc(6 * var(--u)); width: 1px; background: var(--ls-orange); opacity: .55; }
.ls-ex-k { font: 700 calc(9.8 * var(--u))/1.3 var(--ls-sans); color: var(--ls-orange-ink); }
.ls-ex-t { margin: calc(2 * var(--u)) 0 calc(5 * var(--u)) !important; font: 480 calc(15.5 * var(--u))/1.25 var(--ls-serif); font-variation-settings: "opsz" 30; letter-spacing: -.005em; }
.ls-ex-p { font: 380 calc(12 * var(--u))/1.55 var(--ls-serif); margin-bottom: calc(8 * var(--u)) !important; }
.ls-ex-steps { list-style: none; padding: 0; }
.ls-ex-steps li { position: relative; padding: calc(7 * var(--u)) 0 calc(7 * var(--u)); border-top: 1px dashed rgba(29, 28, 26, .17); }
.ls-ex-n { position: absolute; left: calc(-35 * var(--u)); top: calc(5 * var(--u)); width: calc(20 * var(--u)); text-align: center; font: 360 calc(16 * var(--u))/1.2 var(--ls-serif); font-variant-numeric: lining-nums; color: var(--ls-print-2); }
.ls-ex-do { display: block; font: 700 calc(11.2 * var(--u))/1.45 var(--ls-sans); }
.ls-ex-m { display: block; width: max-content; max-width: 100%; margin: calc(2 * var(--u)) 0 calc(1 * var(--u)); font: 500 calc(12 * var(--u))/1.55 var(--ls-mono); letter-spacing: -.01em; white-space: nowrap; }
.ls-sp { color: #A39A8E; }
.ls-nh { -webkit-hyphens: none; hyphens: none; white-space: nowrap; }
.ls-to { color: var(--ls-print-2); }
.ls-bar { display: inline-block; width: 1px; height: .95em; margin: 0 .42em; vertical-align: -.14em; background: rgba(29, 28, 26, .32); }
.ls-ex-why { display: block; font: 380 calc(11.3 * var(--u))/1.5 var(--ls-serif); color: var(--ls-print-2); }
.ls-ex-ans { display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin-top: calc(2 * var(--u)) !important; padding-top: calc(9 * var(--u)); border-top: 1px solid rgba(29, 28, 26, .7); }
.ls-ex-ans > span { flex: none; font: 700 calc(9.8 * var(--u))/1 var(--ls-sans); color: var(--ls-orange-ink); }
.ls-ex-ans b { padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(6 * var(--u)); border: 1px solid rgba(29, 28, 26, .8); border-radius: calc(2 * var(--u)); font: 400 calc(12 * var(--u))/1.45 var(--ls-serif); }

/* The figure, the rule and the question on the right page, the figure and the question each with an italic sidenote
   in the outer margin. The rule is a textbook rule box: an orange rule down the left, the name as a small heading,
   the sentence, then the formula. */
.ls-fig { position: relative; margin: calc(10 * var(--u)) 0 calc(8 * var(--u)) !important; }
.ls-fig svg { display: block; width: 90%; height: auto; overflow: visible; }
.ls-side { position: absolute; left: calc(100% + 22 * var(--u)); top: calc(2 * var(--u)); width: calc(74 * var(--u)); font: italic 400 calc(11.2 * var(--u))/1.35 var(--ls-serif); font-variation-settings: "opsz" 12; color: var(--ls-print-2); hyphens: none; }
.ls-rule { margin: calc(2 * var(--u)) 0 calc(13 * var(--u)); padding: calc(3 * var(--u)) 0 calc(3 * var(--u)) calc(14 * var(--u)); border-left: 1.5px solid rgba(255, 90, 31, .8); }
.ls-rule p { margin: 0; }
.ls-rule-t { font: 520 calc(13.8 * var(--u))/1.3 var(--ls-serif); font-variation-settings: "opsz" 30; letter-spacing: -.005em; }
.ls-rule-x { margin-top: calc(2 * var(--u)) !important; font: 380 calc(12.4 * var(--u))/1.55 var(--ls-serif); }
.ls-rule-f { margin-top: calc(3 * var(--u)) !important; font: 500 calc(11.6 * var(--u))/1.55 var(--ls-mono); white-space: nowrap; }
.ls-turn { position: relative; padding-top: calc(10 * var(--u)); border-top: 1px solid rgba(29, 28, 26, .18); }
.ls-turn .ls-side { top: calc(11 * var(--u)); }
.ls-turn-q { margin: calc(3 * var(--u)) 0 calc(7 * var(--u)) !important; font: 380 calc(12.4 * var(--u))/1.55 var(--ls-serif); text-wrap: pretty; }
.ls-turn-o { list-style: none; padding: 0; }
.ls-turn-o li { position: relative; padding-left: calc(24 * var(--u)); font: 380 calc(11.8 * var(--u))/1.5 var(--ls-serif); }
.ls-turn-o li + li { margin-top: calc(2 * var(--u)); }
.ls-turn-o span { position: absolute; left: 0; font-style: italic; color: var(--ls-print-2); }

/* The reading glass. The lens shows a copy of the left page (.ls-lens-in), scaled by --m about the glass's centre, so
   what it shows is what lies under it, bigger. landing/home-v2.js measures --gx, --gy1 and --gy0 onto the steps. */
@property --gy { syntax: "<number>"; inherits: true; initial-value: 0; }
.ls-glass { --gy: var(--gy1); pointer-events: none;
  left: calc((var(--gx) - var(--r)) * var(--u)); top: calc((var(--gy) - var(--r)) * var(--u)); width: calc(var(--r) * 2 * var(--u)); height: calc(var(--r) * 2 * var(--u)); }
.ls-glass > * { position: absolute; }
.ls-lens { inset: 0; border-radius: 50%; overflow: hidden; background: #FBF8F1; }
.ls-lens-in { position: absolute; left: calc(((var(--tx) - var(--gx)) * var(--m) + var(--r)) * var(--u)); top: calc(((var(--ty) - var(--gy)) * var(--m) + var(--r)) * var(--u));
  width: calc(var(--tw) * var(--u)); transform: scale(var(--m)); transform-origin: 0 0; }
/* Toward its rim the glass softens what it shows, and the rim throws a faint shade inward. */
.ls-edge { inset: 0; border-radius: 50%; -webkit-backdrop-filter: blur(1.4px); backdrop-filter: blur(1.4px);
  -webkit-mask: radial-gradient(circle closest-side, transparent 74%, #000 100%); mask: radial-gradient(circle closest-side, transparent 74%, #000 100%);
  box-shadow: inset 0 0 calc(12 * var(--u)) rgba(70, 56, 36, .22), inset 0 calc(-6 * var(--u)) calc(14 * var(--u)) rgba(70, 56, 36, .10); }
.ls-rim { left: calc(-9 * var(--u)); top: calc(-9 * var(--u)); width: calc((var(--r) * 2 + 18) * var(--u)); height: calc((var(--r) * 2 + 18) * var(--u)); overflow: visible; }
.ls-hwrap { left: 50%; top: 50%; width: calc(24 * var(--u)); height: calc(160 * var(--u)); transform-origin: 50% 0; transform: translateX(-50%) rotate(36deg) translateY(calc((var(--r) + 7) * var(--u))); }
.ls-handle { display: block; width: 100%; height: 100%; overflow: visible; }
/* One shadow, cast straight down by the light above: the rim's ring and the handle, soft, on the paper. */
.ls-gshadow { inset: 0; border-radius: 50%; border: calc(11 * var(--u)) solid rgba(48, 34, 16, .34); transform: translate(calc(3 * var(--u)), calc(15 * var(--u))); filter: blur(calc(5.5 * var(--u))); }
.ls-gshadow::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(20 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(48, 34, 16, .55);
  transform-origin: 50% 0; transform: translateX(-50%) rotate(36deg) translateY(calc((var(--r) + 4) * var(--u))); }

/* the link */
.ls-more { margin: 24px 0 0; text-align: center; }
.ls-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; font: 500 17px/1.4 var(--ls-sans); color: var(--ls-ink); text-decoration: none; border-bottom: 1.5px solid rgba(29, 28, 26, .35); transition: border-color .25s var(--ls-ease); }
.ls-link:hover { border-color: var(--ls-ink); }
.ls-link:focus-visible { outline: 2.5px solid var(--ls-orange); outline-offset: 4px; border-radius: 3px; }
.ls-arrow { width: 16px; height: 16px; transition: transform .35s var(--ls-ease-out); }
.ls-link:hover .ls-arrow { transform: translateX(3px); }

/* Motion: the glass glides once down the steps to the key one when the book comes into view (.ls-armed, then .ls-in,
   set by landing/home-v2.js). Without the script, or with reduced motion, it rests on the key step. */
@keyframes ls-glide { from { --gy: var(--gy0); } to { --gy: var(--gy1); } }
.ls-armed .ls-glass { --gy: var(--gy0); }
.ls-in .ls-glass { animation: ls-glide 2.6s cubic-bezier(.45, 0, .25, 1) .3s both; }

@media (max-width: 599px) {
  .ls-start { padding: 80px 16px 0; }
  .ls-head { margin-bottom: 18px; }
  .ls-sub { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-start *, .ls-start *::before, .ls-start *::after { transition: none !important; animation: none !important; }
  .ls-glass { --gy: var(--gy1) !important; }
}

/* ---------- 3. More than lessons: three printed cards (courses/home-v2.js more; the owner's A2, 2026-11-07) ----------
   Each card is printed: a technical drawing on its folder colour at the top, the words on paper below, and the site's
   dark key, as on the start cards. Spacing runs on an 8px grid; the words line up with the drawing's own edge (field
   24 + 8 inside the drawing = 32). Three in a row from 1180px; one landscape card per row down to 860px; below that,
   the phone layout: a set-height field and a full-width key. Every class starts with mo- (landing/home.css still owns
   .mo, .mo-start, .mo-practice and .mo-interview from an older section, so the cards are .mo-card-*). CSS only. */
.mo-more {
  --mo-ink: #1D1C1A;
  --mo-ink-2: #5E5B55;
  --mo-paper: #FCFBF8;
  --mo-orange: #FF5A1F;
  --mo-serif: "Fraunces", Georgia, serif;
  --mo-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mo-ease: cubic-bezier(.2, .8, .2, 1);
  --mo-ease-out: cubic-bezier(.23, 1, .32, 1);
  --mo-in: 32px;                       /* the paper's inset */
  --mo-r: 28px;                        /* the card's corner */
  /* the page's section rhythm (.lp-sec): 120px above, and the next section brings its own space */
  box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 120px 28px 0; scroll-margin-top: 72px;
  color: var(--mo-ink); font-family: var(--mo-sans);
}
.mo-more *, .mo-more *::before, .mo-more *::after { box-sizing: border-box; }

.mo-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.mo-h2 { margin: 0; font: 340 clamp(38px, 4.3vw, 60px)/1.02 var(--mo-serif); font-variation-settings: "opsz" 144; letter-spacing: -.035em; text-wrap: balance; }
.mo-h2 i { font-style: italic; font-weight: 330; }
.mo-sub { margin: 16px 0 0; font-size: 18.5px; line-height: 1.5; color: var(--mo-ink-2); text-wrap: pretty; }

.mo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.mo-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--mo-r); overflow: hidden;
  background: var(--mo-paper);
  box-shadow: 0 1px 2px rgba(60, 48, 30, .08), 0 18px 40px -18px rgba(60, 48, 30, .30);
  transition: transform .5s var(--mo-ease-out), box-shadow .5s var(--mo-ease-out);
}
/* a hairline round the whole card, above the colour field, like the edge of card stock */
.mo-card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08); pointer-events: none; }
.mo-card-practice { --mo-face: #B4C9B5; }
.mo-card-build { --mo-face: #B3C2D6; }
.mo-card-interview { --mo-face: #DBBE9F; }

/* the colour field: the start cards' tint and grain in a set shape, the drawing pinned inside its padding so every
   field keeps its shape whatever the drawing's own */
.mo-field {
  position: relative; margin: 0; aspect-ratio: 11 / 10;
  background-color: var(--mo-face);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%),
    radial-gradient(rgba(29, 28, 26, .075) .8px, transparent 1px);
  background-size: auto, 4px 4px;
  box-shadow: inset 0 -1px 0 rgba(29, 28, 26, .10);
}
.mo-svg { position: absolute; top: var(--mo-pt, 24px); right: var(--mo-px, 24px); bottom: var(--mo-pb, 24px); left: var(--mo-px, 24px); display: block; width: calc(100% - 2 * var(--mo-px, 24px)); height: calc(100% - var(--mo-pt, 24px) - var(--mo-pb, 24px)); overflow: visible; }

/* the words, on paper */
.mo-paper { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px var(--mo-in) var(--mo-in); }
.mo-h3 { margin: 0; font: 340 36px/1.06 var(--mo-serif); font-variation-settings: "opsz" 144; letter-spacing: -.03em; color: var(--mo-ink); }
.mo-h3 i { font-style: italic; font-weight: 330; }
.mo-line { margin: 12px 0 24px; max-width: 30ch; font-size: 17px; line-height: 1.5; color: var(--mo-ink-2); text-wrap: pretty; }

/* the key: the site's dark key, as on the start cards. Its ::after covers the card, so the whole card is one click. */
.mo-key {
  position: static; margin-top: auto; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 20px; border-radius: 12px;
  font: 500 16px/1 var(--mo-sans); color: #FBFAF7; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #34322F, #1D1C1A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(29, 28, 26, .3), 0 8px 18px -8px rgba(29, 28, 26, .55);
  transition: box-shadow .3s var(--mo-ease), transform .3s var(--mo-ease);
  -webkit-tap-highlight-color: transparent;
}
.mo-key::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--mo-r); }
.mo-arrow { width: 16px; height: 16px; flex: none; transition: transform .25s var(--mo-ease-out); }
.mo-key:focus-visible { outline: none; }
.mo-card:has(.mo-key:focus-visible) { outline: 2.5px solid var(--mo-orange); outline-offset: 4px; }
@media (hover: hover) {
  .mo-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(60, 48, 30, .08), 0 26px 50px -20px rgba(60, 48, 30, .38); }
  .mo-card:hover .mo-arrow { transform: translateX(3px); }
}

/* Laptops and tablets: one landscape card per row, the drawing on the left, the words on paper to its right. */
@media (max-width: 1179px) {
  .mo-more { --mo-in: 40px; }
  .mo-cards { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin: 0 auto; }
  .mo-card { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .mo-field { aspect-ratio: 4 / 3; --mo-pt: 24px; --mo-px: 24px; --mo-pb: 24px; box-shadow: inset -1px 0 0 rgba(29, 28, 26, .10); }
  .mo-paper { justify-content: center; padding: 40px var(--mo-in); }
  .mo-h3 { font-size: 40px; }
  .mo-line { font-size: 18px; margin: 16px 0 32px; }
  .mo-key { margin-top: 0; }
}
/* Phones: their own layout. Full-width cards; the field a set height with the drawing filling it; the words on paper;
   a full-width key. */
@media (max-width: 859px) {
  .mo-more { --mo-in: 32px; }
  .mo-cards { gap: 24px; max-width: 520px; }
  .mo-card { display: flex; }
  .mo-field { aspect-ratio: auto; height: 360px; --mo-pt: 24px; --mo-px: 24px; --mo-pb: 20px; box-shadow: inset 0 -1px 0 rgba(29, 28, 26, .10); }
  .mo-paper { justify-content: flex-start; padding: 24px var(--mo-in) var(--mo-in); }
  .mo-h3 { font-size: 36px; }
  .mo-line { font-size: 17px; margin: 12px 0 24px; max-width: none; }
  .mo-key { width: 100%; height: 52px; justify-content: center; font-size: 16.5px; }
}
@media (max-width: 639px) {
  .mo-more { --mo-in: 24px; --mo-r: 24px; }
  .mo-field { height: clamp(296px, 80vw, 344px); --mo-pt: 20px; --mo-px: 16px; --mo-pb: 16px; }
  .mo-h3 { font-size: 32px; }
  .mo-line { font-size: 16px; margin: 8px 0 24px; }
}
@media (max-width: 599px) {
  .mo-more { padding: 80px 16px 0; }
  .mo-head { margin-bottom: 32px; }
  .mo-sub { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-card, .mo-key, .mo-arrow { transition: none; }
  .mo-card:hover { transform: none; }
}

/* =====================================================================================================================
   The hero (courses/home-v2.js hero; the owner's E7, 2026-11-06). Every class starts with hx-, so landing/home.css's
   .hero rules never reach it. A static headline in Satoshi with "AI" in Doto, the site's dot grid as a desk, a pool of
   light behind the words and a fade into the page at the bottom. Four objects lie on the desk, one per part of the
   site, each anchored to the headline's box (the text column shrinks to the headline), so the gap to the words holds
   at every desktop width: 64px at 1280 and up. They drift a little; reduced motion stills them. Phones: words only.
   ===================================================================================================================== */
.hx-hero {
  /* the headline size drives the whole composition: the objects hang off the headline's box */
  --hs: clamp(64px, 7.8vw, 116px);
  --gap: 64px;                         /* object group inner edge to the headline's box */
  --lift: 1;                           /* top pair scale */
  --sink: .88;                         /* bottom pair scale */
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: clamp(720px, calc(100svh - 64px), 1000px);
  padding: 96px 24px 128px;
  background: radial-gradient(circle at 50% 42%, rgba(253, 253, 251, .92) 0 21%, rgba(253, 253, 251, 0) 58%), var(--page);
}
.hx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .19 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The site's dot grid (1px dots at .16 on a 22px pitch): full strength around the objects, a gentle fall-off toward
   the far edges of wide screens, and washed out under the words by the glow painted over it. */
.hx-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(29, 28, 26, .16) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 920px 640px at 50% 46%, #000 58%, rgba(0, 0, 0, .3) 100%);
  mask-image: radial-gradient(ellipse 920px 640px at 50% 46%, #000 58%, rgba(0, 0, 0, .3) 100%);
}
/* A white disc hung on the text column, so the dots soften under the headline and come back before the objects. */
.hx-glow {
  position: absolute; inset: -64px -84px -48px; z-index: -1; border-radius: 50%;
  background: var(--sheet); filter: blur(44px); opacity: .9; pointer-events: none;
}
.hx-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  height: clamp(140px, 17svh, 210px);
  background: linear-gradient(to bottom, rgba(246, 245, 241, 0), rgba(246, 245, 241, .88) 54%, var(--page));
}

/* The text column shrinks to the headline, so its box is the headline's box: the objects are placed from it. It sets
   no z-index, so the objects (z 1), the fade (z 2) and the words (z 3) share the hero's stack. */
.hx-in {
  position: relative; width: fit-content; max-width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hx-h, .hx-sub, .hx-cta { position: relative; z-index: 3; }
/* Satoshi 500, line-height .99, tracking -0.052em, each line its own nowrap row on the baseline; "AI" in Doto. */
.hx-h {
  margin: 0; color: var(--ink);
  font: 500 var(--hs)/.99 var(--sans);
  letter-spacing: -0.052em;
  font-kerning: normal;
}
.hx-hl { display: flex; justify-content: center; align-items: baseline; gap: .2em; white-space: nowrap; }
.hx-dot { font-family: var(--dot); font-weight: 900; font-size: 1em; letter-spacing: -0.07em; margin-right: -0.07em; }
/* The dot-matrix word cycles AI, an LLM, a GPU, quant (owner, 2026-11-07; landing/home-v2.js). Its width glides between
   words so the line re-centres smoothly; the word itself dims out and lights back in, like a dot display. */
.hx-dot[data-hx-words] { display: inline-block; text-align: left; font-size: .8em; font-weight: 800; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.hx-w { display: inline-block; transition: opacity .22s steps(4, end), filter .22s ease; }
.hx-w.is-out { opacity: 0; filter: blur(1.5px); }
/* "a" / "an" before the word, as in October's "Know an LLM": the same dot face and size, lowercase, so it sits
   naturally lower and lighter than the word; the whole phrase is .8em, like October's. */
.hx-art { margin-right: .3em; }
@media (prefers-reduced-motion: reduce) { .hx-dot[data-hx-words], .hx-w { transition: none; } }
/* The subtitle takes the headline's width instead of setting it (width 0, min-width 100%), so the column, and with
   it every object, hangs off the headline alone; balance breaks it into two even lines inside that width. */
.hx-sub {
  width: 0; min-width: min(100%, 420px); margin: 46px 0 0; /* two balanced lines even when the cycling word widens the headline */
  font: 500 19px/1.48 var(--sans); color: #3A3833; letter-spacing: -0.005em; text-wrap: balance;
}
.hx-cta { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 34px; }

/* ---------- the objects: one light, from straight above ---------- */
.hx-arts { position: absolute; inset: 0; pointer-events: none; }
/* every object lies under the bottom fade (z 2), except the badge, which hangs lowest: it sits over the fade so its
   card stays legible to its bottom edge */
.hx-grp { position: absolute; z-index: 1; }
.hx-tl, .hx-tr { --gs: var(--lift); }
.hx-bl, .hx-br { --gs: var(--sink); }
@keyframes hx-drift { from { translate: 0 -3px; } to { translate: 0 6px; } }
/* Each object sits in an unturned box (.hx-obj) carrying the one lift shadow (#hx-lift, built from its own
   outline), and turns inside it (.hx-turn), so every shadow falls straight down. */
.hx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hx-obj { position: absolute; display: block; }
.hx-turn { position: relative; width: 100%; height: 100%; transform: rotate(var(--r, 0deg)); }
.hx-obj svg { display: block; overflow: visible; }

/* The site's folder with a real cover. Its shadow is counter-rotated by its own tilt (sin/cos of --r), so every
   folder casts straight down, the way paper on one desk would. */
.hx-folder {
  --r: 0deg;
  position: absolute; display: block; width: 136px; aspect-ratio: 240 / 300;
  transform: rotate(var(--r));
}
.hx-folder-tab {
  position: absolute; right: -9%; top: 9%; width: 12%; height: 40%;
  background: var(--fold-2); border-radius: 0 9px 9px 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .05),
    calc(sin(var(--r)) * 1px) calc(cos(var(--r)) * 1px) 2px rgba(60, 48, 30, .10),
    calc(sin(var(--r)) * 6px) calc(cos(var(--r)) * 6px) 12px rgba(60, 48, 30, .06);
}
.hx-folder-face {
  position: absolute; inset: 0; border-radius: 5px 10px 10px 5px; overflow: hidden;
  background-color: var(--fold);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 40%), radial-gradient(rgba(29, 28, 26, .075) .8px, transparent 1px);
  /* the grain keeps a true 4px pitch on screen inside scaled groups, so a turned folder doesn't beat into a plaid */
  background-size: auto, calc(4px / var(--gs, 1)) calc(4px / var(--gs, 1));
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .10), inset 4px 0 0 rgba(0, 0, 0, .05),
    calc(sin(var(--r)) * 1px) calc(cos(var(--r)) * 1px) 2px rgba(60, 48, 30, .07),
    calc(sin(var(--r)) * 4px) calc(cos(var(--r)) * 4px) 8px rgba(60, 48, 30, .08),
    calc(sin(var(--r)) * 10px) calc(cos(var(--r)) * 10px) 20px rgba(60, 48, 30, .09),
    calc(sin(var(--r)) * 22px) calc(cos(var(--r)) * 22px) 44px -18px rgba(60, 48, 30, .20),
    0 0 0 1px rgba(60, 48, 30, .045);
}
.hx-folder-face svg { display: block; width: 100%; height: 100%; }

/* top left, Learn: the module fan (Classical ML, Probability, Networks) */
.hx-tl {
  width: 236px; height: 262px;
  right: calc(100% + var(--gap) + 2px);
  top: calc(var(--hs) * .99 - 150px);
  scale: var(--lift); transform-origin: 100% 50%;
  animation: hx-drift 9s ease-in-out infinite alternate;
}
.hx-f1 { top: 0; left: 4px; --r: -16deg; }
.hx-f2 { top: 18px; left: 88px; --r: 10deg; }
.hx-f3 { top: 78px; left: 38px; --r: -3deg; z-index: 2; width: 146px; }

/* top right, the drawings: a sand sticker sheet (Serving, Probability, Time series, Agents), one sticker half peeled */
.hx-tr {
  width: 248px; height: 282px;
  left: calc(100% + var(--gap) - 3px);
  top: calc(var(--hs) * .99 - 150px);
  scale: var(--lift); transform-origin: 0 50%;
  animation: hx-drift 11s ease-in-out 1.2s infinite alternate-reverse;
}
.hx-sheet { left: 14px; top: 10px; width: 220px; height: 262px; --r: 5deg; filter: url(#hx-lift); }

/* bottom left, the rules: an enamel tin of index cards. Its right edge is 64px from the headline, measured to the
   outside of the rim bead (.hx-tin-edge); the offset scales with the group, so the gap holds at every scale. */
.hx-bl {
  --gs: calc(var(--sink) * var(--tin, 1.1));
  width: 316px; height: 270px;
  right: calc(100% + var(--gap) - 18.5px * var(--gs));
  top: calc(100% - 160px);
  scale: calc(var(--sink) * var(--tin, 1.1)); transform-origin: 100% 0;
  animation: hx-drift 12s ease-in-out .8s infinite alternate;
}
.hx-tin { left: 0; top: 0; width: 316px; height: 270px; filter: url(#hx-lift); }

/* ---------- hero: the Interview badge (heroBadge() in courses/home-v2.js; swap the two together) ----------
   bottom right: a printed Quant Trader badge in a clear clip-on sleeve, the clasp through its slot, the woven strap
   sweeping off the right edge. It hangs above the bottom fade (z 3). */
.hx-br {
  --gs: calc(var(--sink) * 1.08);
  z-index: 3;
  width: 212px; height: 262px;
  left: calc(100% + var(--gap) - 2px);
  top: calc(100% - 98px);
  scale: calc(var(--sink) * 1.08); transform-origin: 0 0;
  animation: hx-drift 10s ease-in-out 1.8s infinite alternate-reverse;
}
.hx-badge, .hx-strap { left: 16px; top: 12px; width: 180px; height: 240px; --r: 7deg; }
.hx-strap { z-index: 1; }
.hx-badge { z-index: 2; filter: url(#hx-lift); }
/* the quote's split-flap unit (flipUnit() in courses/home-v2.js; src/offer.js draws the Pro pass's with a twin and
   declares the same face): figures in Barlow Condensed 600, self-hosted and cut to the figures, the point, the
   percent, the minus and the space (1.6 KB; licence in landing/fonts/OFL.txt) */
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-condensed-600-figures.woff2") format("woff2");
  unicode-range: U+20, U+25, U+2E, U+30-39, U+2212;
}
.hx-bd-ch { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; }
/* ---------- end of the badge ---------- */

/* wide screens: one step larger, the gap unchanged */
@media (min-width: 1680px) {
  .hx-hero { --hs: 124px; --lift: 1.1; --sink: .97; }
  .hx-sub { font-size: 20px; margin-top: 50px; }
  .hx-cta { margin-top: 38px; }
}
/* 721 to 1099: the four groups smaller, the gap tighter, still clear of the words. The headline keeps growing
   smoothly through this range (83px at 1099 meets 7.8vw at 1100). */
@media (max-width: 1099px) {
  .hx-hero { --hs: calc(40px + 3.9vw); --gap: 52px; --lift: .78; --sink: .7; }
  .hx-sub { font-size: 18px; margin-top: 40px; }
  .hx-cta { margin-top: 30px; }
}
/* tablets in portrait: one size down; the subtitle keeps to the headline's width, so the bottom pair stays clear */
@media (max-width: 899px) {
  .hx-hero { --gap: 40px; --lift: .64; --sink: .6; min-height: clamp(680px, calc(100svh - 64px - 150px), 900px); }
  .hx-sub { font-size: 17.5px; }
}
/* narrow tablets: the tin steps down again to keep inside the screen */
@media (max-width: 820px) {
  .hx-hero { --tin: .86; }
}
/* phones, up to 720: no objects. The hero alone is the first screen: it fills the screen under the header (58px bar
   + its 1px hairline), with the words centred in it, so the start section begins at the fold. */
@media (max-width: 720px) {
  .hx-arts { display: none; }
  .hx-glow { inset: -36px -20px -28px; filter: blur(34px); opacity: .82; }
  .hx-grid {
    -webkit-mask-image: radial-gradient(ellipse 130% 78% at 50% 50%, #000 46%, rgba(0, 0, 0, .5) 100%);
    mask-image: radial-gradient(ellipse 130% 78% at 50% 50%, #000 46%, rgba(0, 0, 0, .5) 100%);
  }
  .hx-hero {
    --hs: clamp(44px, 12.3vw, 52px);
    min-height: calc(100svh - 59px);
    padding: 24px 24px 150px; /* optical centre: iPhone Safari's floating toolbar covers the bottom ~80px of 100svh, so a geometric centre reads low (owner, 2026-11-07) */
    background: radial-gradient(circle at 50% 50%, rgba(253, 253, 251, .92) 0 21%, rgba(253, 253, 251, 0) 58%), var(--page);
  }
  .hx-hero::after { height: 140px; }
  .hx-in { width: 100%; }
  .hx-h { letter-spacing: -0.035em; line-height: 1; }
  .hx-hl { gap: .22em; }
  .hx-sub { width: auto; min-width: 0; max-width: 330px; margin-top: 22px; font-size: 17px; line-height: 1.5; color: #45423C; }
  .hx-cta { flex-direction: column; align-self: stretch; width: auto; gap: 20px; margin-top: 32px; }
  .hx-cta .key-lg { width: 100%; justify-content: center; --h: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-grp { animation: none; }
  .hx-cta .key, .hx-cta .link-quiet { transition: none; }
}