/*!
 * options-basics.html — «أساسيات عقود الخيارات» (the academy's foundation lesson)
 * Page-scoped styles only: tokens from style.css, no raw colours. Logical properties (RTL-first).
 *  1 Lesson kit (same look as strategies/*.html)   2 Hero pair + facts   3 Numbered chapters & wide blocks
 *  4 Illustrations (.ill-* additions)   5 Roles matrix   6 Mock option chain + terms   7 Decay explorer
 *  8 Greek cards + signs table   9 Payoff tabs   10 Exercise · expiries · calendar   11 Saudi options
 *  12 Risks   13 Quiz   14 Next steps · sources   15 Responsive
 * Components inside the lesson are scoped with `.ob-lesson` so they beat the `.prose` element rules (margins, list indents, dl).
 * Prose heading sizes, the anchor offset, phone compare-table heads and 44px touch targets come from style.css.
 */

/* ---------- 1 · lesson kit (mirrors the strategies/*.html kit) ---------- */
.lesson-en { display: block; margin-top: 6px; font-family: var(--font-body); font-size: clamp(16px, .5vw + 13px, 20px); font-weight: 600; line-height: 1.5; color: var(--text-3); }
.lesson-facts__cap { margin: var(--sp-8) 0 10px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; color: var(--text-3); }
.lesson-facts .stat { background: var(--surface); }
.lesson-facts .stat__value { font-size: 20px; }
.lesson-body { padding-top: var(--sp-10); }
.lesson-disclaimer { margin-top: var(--sp-12) !important; }
.prose .table-note { margin-top: .7em; font-size: var(--fs-sm); line-height: 1.75; color: var(--text-3); }

/* ---------- 2 · hero: the two building blocks + five facts ---------- */
.ob-hero .page-hero__grid { align-items: center; }
.ob-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 540px; margin-inline-start: auto; }
.ob-pair__item {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 10px 10px 12px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: var(--shadow-sm);
}
.ob-pair__thumb { height: 176px; }
.ob-pair__cap { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; padding-inline: 4px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.ob-pair__cap b { font-family: var(--font-head); font-size: 15.5px; font-weight: 700; color: var(--text); }

/* ---------- 3 · numbered chapters (01 ── like the home section heads) & wide blocks ---------- */
.ob-lesson { --ob-measure: 44rem; max-width: none; counter-reset: ob-sec; }
.ob-lesson > * { max-width: var(--ob-measure); }
.ob-lesson > .ob-wide { max-width: none; }
.ob-lesson > h2 { counter-increment: ob-sec; padding-top: 34px; }
.ob-lesson > h2::before { top: 9px; inset-inline-start: 34px; width: 26px; height: 2px; border-radius: 2px; }
.ob-lesson > h2::after {
  content: counter(ob-sec, decimal-leading-zero);
  content: counter(ob-sec, decimal-leading-zero) / "";
  position: absolute; top: 0; inset-inline-start: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 20px;
  color: var(--text-3); letter-spacing: .02em;
}
.ob-lesson > .lead { max-width: var(--ob-measure); }
.ob-lesson [lang="en"][dir="ltr"] { unicode-bidi: isolate; }
/* short Latin terms and numeric runs never break mid-term inside Arabic sentences */
.ob-lesson .num { white-space: nowrap; }
.ob-lesson > p [lang="en"], .ob-lesson li [lang="en"], .ob-lesson td [lang="en"], .ob-lesson figcaption [lang="en"] { white-space: nowrap; }
.ob-lesson .ob-sources__list [lang="en"] { white-space: normal; }
.ob-lesson .formulas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-lesson .formulas > .formula:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ob-lesson .formula__label small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.ob-nowrap-th tbody th { white-space: nowrap; }
/* formula expressions: break between terms, never inside a bracketed group */
.ob-nobr { white-space: nowrap; }

/* ---------- 4 · illustrations ---------- */
.ob-fig .figure__frame svg { max-width: 460px; }
.ob-fig .ill-text { font-size: 15px; }
.ob-fig .ill-text--big { font-size: 22px; font-weight: 700; }
.ill-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.ill-box-pos { fill: var(--pos-soft); stroke: var(--pos); stroke-opacity: .45; stroke-width: 1.5; }
.ill-box-neg { fill: var(--neg-soft); stroke: var(--neg); stroke-opacity: .45; stroke-width: 1.5; }
.ill-box-academy { fill: var(--academy-soft); stroke: var(--academy); stroke-opacity: .55; stroke-width: 1.5; }
.ill-fill-academy { fill: var(--academy-soft); }
.ill-text--academy { fill: var(--academy-ink); font-weight: 700; }
.ill-halo { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.ob-ill-intr { fill: var(--academy); }
.ob-ill-extr { fill: url(#ob-hatch); stroke: var(--academy); stroke-width: 1.5; }
.ob-ill-hatch-bg { fill: var(--academy-soft); }
.ob-ill-hatch { stroke: var(--academy); stroke-opacity: .5; stroke-width: 2.4; }
.ob-ill-area { fill: var(--text); fill-opacity: .06; }
.ob-ill-curve { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ob-ill-curve--alt { stroke: var(--academy); stroke-dasharray: 6 5; }
.ob-ill-dot { fill: var(--surface); stroke: var(--academy); stroke-width: 3; }
.ob-ill-ink { fill: var(--text); }
.ob-fig .ob-ill-text-onink { fill: var(--bg); font-weight: 700; }
.ob-ill-atm { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.ob-ill-otm { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ob-ill-track { fill: var(--surface-3); }
.ob-ill-ivbar { fill: var(--academy); }
.ob-ill-bar { fill: var(--academy-soft); stroke: var(--academy); stroke-opacity: .6; stroke-width: 1.2; }
.ob-ill-bar--hot { fill: var(--academy); }
.ob-ill-bar-pos { fill: var(--pos); }
.ob-ill-bar-neg { fill: var(--neg); }
.ob-ill-bar-pos-o { fill: var(--pos-soft); stroke: var(--pos); stroke-width: 1.5; }
.ob-ill-bar-neg-o { fill: var(--neg-soft); stroke: var(--neg); stroke-width: 1.5; }
.ob-ill-bar-flat { fill: var(--text-3); }
.ob-ill-bar-flat-o { fill: var(--surface-3); stroke: var(--text-2); stroke-width: 1.5; }
.ob-ill-key { fill: var(--text-2); }
.ob-mini-num { font-family: var(--font-num); font-size: 13.5px; font-weight: 500; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.ob-mini-num--strong { fill: var(--text); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; } /* halo: stays legible where a curve passes */

/* ---------- 5 · roles matrix (buyer / seller × call / put) ---------- */
.ob-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1.4em; }
.ob-lesson .ob-roles__col { display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--academy-ink); }
.ob-roles__col::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--academy); box-shadow: 0 0 0 3px var(--academy-soft); }
.ob-role {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ob-role__top { display: flex; }
.ob-role__who {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text-2);
}
.ob-role__who .icon { width: 14px; height: 14px; }
.ob-role--seller .ob-role__who { background: var(--academy-soft); border-color: transparent; color: var(--academy-ink); }
.ob-lesson .ob-role__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 19px; line-height: 1.4; }
.ob-role__title small { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.ob-role__thumb { height: 116px; }
.ob-lesson .ob-role__list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.ob-lesson .ob-role__list li + li { margin-top: 0; }
.ob-role__list b { color: var(--text); font-weight: 600; }
.ob-lesson .ob-role__use { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-strong); font-size: 13px; line-height: 1.75; color: var(--text-3); }

/* ---------- 6 · mock option chain + numbered terms ---------- */
.ob-chain-fig { margin-top: 1.4em; }
.ob-chain { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.ob-chain__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ob-lesson .ob-chain__bar p { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ob-chain__sym b { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); }
.ob-chain__sym .num { font-weight: 700; color: var(--text); }
.ob-chain__exp b { color: var(--text); }
.ob-chain__bar small { font-size: 12.5px; color: var(--text-3); }
.ob-lesson .ob-chain__mock {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 7px 14px; border-bottom: 1px dashed var(--border-strong);
  background: repeating-linear-gradient(-45deg, var(--surface-2) 0 9px, var(--surface-3) 9px 18px);
  font-size: 12.5px; font-weight: 600; line-height: 1.5; text-align: center; color: var(--text-2);
}
.ob-chain__mock .icon { flex: none; color: var(--academy-ink); }
.ob-chain__wrap { overflow-x: auto; }
.ob-chain__table { width: 100%; font-size: 14.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ob-chain__table th, .ob-chain__table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ob-chain__table thead th { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.ob-chain__table thead .ob-chain__side th { padding-bottom: 4px; border-bottom: 0; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); }
.ob-chain__table td { direction: ltr; color: var(--text); }
.ob-chain__table .ob-chain__k { width: 72px; background: var(--surface-2); font-weight: 700; color: var(--text); }
.ob-chain__table thead .ob-chain__k { font-size: 12.5px; color: var(--text-3); }
.ob-chain__table td.is-itm { background: var(--academy-soft); }
.ob-chain__table tr.is-atm th.ob-chain__k { box-shadow: inset 0 0 0 2px var(--text); background: var(--surface-3); }
.ob-chain__table tr.is-atm > td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.ob-chain__table tbody tr:last-child > * { border-bottom: 0; }
.ob-lesson .ob-chain__legend { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.ob-chain__swatch { width: 14px; height: 14px; flex: none; border-radius: 4px; background: var(--academy-soft); border: 1px solid color-mix(in srgb, var(--academy) 45%, transparent); }
.ob-pin {
  display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; margin-inline-end: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--academy-soft); border: 1px solid color-mix(in srgb, var(--academy) 50%, transparent);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1; color: var(--academy-ink);
}
.ob-chain__table td .ob-pin { margin-inline-end: 0; margin-right: 6px; }
.ob-chain__bar .ob-pin { margin-inline-end: 0; }
.ob-lesson .ob-terms { list-style: none; display: grid; gap: 8px; margin-top: 1.2em; padding: 0; counter-reset: ob-term; }
.ob-lesson .ob-terms > li { position: relative; counter-increment: ob-term; margin: 0; padding: 12px 16px; padding-inline-start: 50px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.ob-terms > li::before {
  content: counter(ob-term); position: absolute; top: 15px; inset-inline-start: 16px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--academy-soft); border: 1px solid color-mix(in srgb, var(--academy) 50%, transparent);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1; color: var(--academy-ink);
}
.ob-lesson .ob-terms__t { font-weight: 700; font-size: 16px; line-height: 1.6; color: var(--text); }
.ob-terms__t small { margin-inline-start: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.ob-lesson .ob-terms__t + p { margin-top: 2px; font-size: 15px; line-height: 1.85; color: var(--text-2); }

/* ---------- 7 · time-decay explorer ---------- */
.ob-decay .figure__frame { display: grid; gap: 16px; }
.ob-decay__ctl { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); }
.ob-decay__range .field__label { color: var(--text); }
.ob-decay__range .range-field__value { min-width: 56px; }
.ob-decay__ends { display: flex; justify-content: space-between; margin-top: -6px; direction: ltr; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.ob-lesson .ob-decay__read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ob-decay__read > div { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.ob-lesson .ob-decay__read dt { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--text-3); }
.ob-lesson .ob-decay__read dd { display: grid; margin: 4px 0 0; color: var(--text); }
.ob-decay__read dd > .num { justify-self: start; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.3; }
.ob-decay__read small { font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* ---------- 8 · greek cards + signs table ---------- */
.ob-greeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1.4em; }
.ob-greek { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ob-greek__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ob-lesson .ob-greek__name { margin: 0; font-size: 20px; line-height: 1.35; }
.ob-greek__name small { margin-inline-start: 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.ob-lesson .ob-greek__val { font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--academy-ink); }
.ob-lesson .ob-greek__q { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--text-2); }
.ob-greek__svg { width: 100%; max-width: 340px; height: auto; margin: 2px auto 0; }
.ob-lesson .ob-greek__key { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-top: -4px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.ob-key { width: 18px; height: 0; flex: none; border-top: 2.5px solid var(--text); }
.ob-key--b { border-top-style: dashed; border-top-color: var(--academy); margin-inline-start: 8px; }
.ob-lesson .ob-greek__text { font-size: 14.5px; line-height: 1.8; color: var(--text-2); }
.ob-signs th, .ob-signs td { text-align: center; }
.ob-signs tbody th { text-align: start; }
.ob-signs tr.is-seller > * { background: color-mix(in srgb, var(--academy-soft) 60%, transparent); }
.ob-signs b { color: var(--academy-ink); }

/* ---------- 9 · payoff tabs + «جرّب بنفسك» ---------- */
.ob-tabs { margin-top: 1.2em; }
.ob-tabs__list { display: flex; width: 100%; max-width: 520px; }
.ob-tabs .tabs__tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 12px; }
.ob-tabs .tabs__tab .icon { color: var(--academy); }
.ob-tabs__en { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.ob-try { max-width: var(--ob-measure); margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--academy-soft); border: 1px solid color-mix(in srgb, var(--academy) 25%, transparent); }
.ob-lesson .ob-try__title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; font-size: 16px; color: var(--academy-ink); }
.ob-lesson .ob-try__list { display: grid; gap: 8px; margin: 0; padding-inline-start: 1.2em; font-size: 15px; line-height: 1.85; color: var(--text); }
.ob-lesson .ob-try__list li + li { margin-top: 0; }

/* ---------- 10 · exercise style, expiries calendar ---------- */
.ob-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ob-duo__item { min-width: 0; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.ob-lesson .ob-duo__title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); }
.ob-duo__title .icon { color: var(--academy); }
.ob-lesson .ob-duo__title + p { font-size: 15px; line-height: 1.85; color: var(--text-2); }
.ob-exp-table small { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); }
.ob-cal { display: grid; gap: 16px; max-width: 560px; margin-inline: auto; }
.ob-cal__grid { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.ob-cal__day { padding-bottom: 2px; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text-3); }
.ob-cal__wk { display: flex; align-items: center; padding-inline-end: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text-3); white-space: nowrap; }
.ob-cal__cell {
  display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 7px; min-height: 52px; padding: 8px 6px;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border);
}
.ob-cal__cell--fri { background: var(--surface-3); border-color: var(--border-strong); }
.ob-cal__cell--monthly { background: var(--academy-soft); border-color: color-mix(in srgb, var(--academy) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--academy) 35%, transparent); }
.ob-cal__cell--monthly b { flex-basis: 100%; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--academy-ink); }
.ob-m { display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 50%; }
.ob-m--d { width: 8px; height: 8px; background: var(--text-3); }
.ob-m--g { border: 2.5px solid var(--text); }
.ob-m--w { border-radius: 4px; background: var(--academy); }
.ob-m--m { width: 18px; height: 13px; border-radius: 4px; background: var(--academy-soft); border: 2px solid var(--academy); }
.ob-lesson .ob-cal__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ob-lesson .ob-cal__legend li { display: flex; align-items: center; gap: 8px; margin: 0; }

/* ---------- 11 · Saudi single-stock options ---------- */
.ob-lesson .ob-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 1.2em; }
.ob-spec > div { min-width: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.ob-lesson .ob-spec dt { font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--text-3); }
.ob-lesson .ob-spec dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; line-height: 1.65; color: var(--text); }
.ob-sso { margin-top: 1.4em; padding: 18px 18px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ob-sso__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.ob-lesson .ob-sso__title { margin: 0; font-size: 18px; line-height: 1.45; }
.ob-lesson .ob-sso__lead { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--text-2); }
.ob-sso .table-wrap { margin-top: 12px; box-shadow: none; background: var(--surface-2); }
.ob-sso__table th[scope="row"] { font-weight: 600; }
.ob-sso__table th[scope="row"] small { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-3); }
.ob-sso__table td { white-space: nowrap; }
.ob-sso__table .na { font-size: 13px; }
.ob-skel { display: inline-block; width: 64px; height: 12px; margin: 0; vertical-align: middle; }
.ob-lesson .ob-sso__note { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--text-3); }
.ob-sso .state { margin-top: 12px; padding: 22px 16px; }
.ob-lesson .ob-sso__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ob-lesson .ob-sso__names li { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--text); }
.ob-sso__names small { font-size: 12px; font-weight: 500; color: var(--text-3); }

/* ---------- 12 · risks ---------- */
.ob-risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1.2em; }
.ob-risk { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ob-lesson .ob-risk__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.2; }
.ob-risk__sep { font-weight: 500; color: var(--text-3); }
.ob-lesson .ob-risk__title { margin: 0; font-size: 17px; line-height: 1.5; }
.ob-lesson .ob-risk__text { font-size: 14.5px; line-height: 1.85; color: var(--text-2); }

/* ---------- 13 · quiz (correct = academy + ✓, wrong = warn + ✗: red/green stay reserved for P/L) ---------- */
.ob-quiz { display: grid; gap: 12px; margin-top: 1.2em; }
.ob-quiz__bar { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.ob-lesson .ob-quiz__progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ob-quiz__progress b { color: var(--text); }
.ob-quiz__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.ob-quiz__meter i { background: var(--academy); }
.ob-q { min-width: 0; margin: 0; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ob-q__legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; font-size: 16.5px; font-weight: 700; line-height: 1.7; color: var(--text); }
.ob-q__n { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-end: 10px; vertical-align: 2px; border-radius: 10px; background: var(--academy-soft); color: var(--academy-ink); font-family: var(--font-head); font-size: 15px; line-height: 1; }
.ob-q__opts { clear: both; display: grid; gap: 8px; }
.ob-q__opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-q__opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 9px 14px; border-radius: 14px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 15.5px; font-weight: 500; line-height: 1.6; text-align: start;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.ob-q__opt:hover:not([aria-disabled="true"]) { border-color: var(--academy); background: var(--surface-3); }
.ob-q__opt:active:not([aria-disabled="true"]) { transform: scale(.99); }
.ob-q__opt[aria-disabled="true"] { cursor: default; }
.ob-q__k { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 14px; font-weight: 700; line-height: 1; color: var(--text-2); }
.ob-q__t { flex: 1 1 auto; min-width: 0; }
.ob-q__tag { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 24px; padding: 1px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.ob-q__tag .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.ob-q__opt.is-right { border-color: var(--academy); background: var(--academy-soft); }
.ob-q__opt.is-right .ob-q__k { background: var(--academy); border-color: var(--academy); color: var(--surface); }
.ob-q__opt.is-right .ob-q__tag { background: var(--academy); color: var(--surface); }
.ob-q__opt.is-wrong { border-color: var(--warn); background: var(--warn-soft); }
.ob-q__opt.is-wrong .ob-q__k { background: var(--warn); border-color: var(--warn); color: var(--surface); }
.ob-q__opt.is-wrong .ob-q__tag { background: var(--warn); color: var(--surface); }
.ob-q__opt.is-other { background: transparent; color: var(--text-2); }
.ob-q__fb:empty { margin: 0; padding: 0; border: 0; }
.ob-q__fb { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.85; color: var(--text-2); border: 1px solid var(--border); background: var(--surface-2); }
.ob-q__fb.is-right { border-color: color-mix(in srgb, var(--academy) 40%, transparent); }
.ob-q__fb.is-wrong { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ob-lesson .ob-q__verdict { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-weight: 700; color: var(--text); }
.ob-q__verdict .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.ob-q__fb.is-right .ob-q__verdict .icon { color: var(--academy); }
.ob-q__fb.is-wrong .ob-q__verdict .icon { color: var(--warn); }
.ob-lesson .ob-q__explain { color: var(--text-2); }
.ob-lesson .ob-q__review { margin-top: 6px; font-size: 13.5px; }
.ob-q__review a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--link); }
.ob-q__review .icon { width: 15px; height: 15px; }
.ob-quiz__result {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 22px;
  padding: 22px; border-radius: var(--radius-lg); background: var(--grad-academy); color: var(--on-vivid); box-shadow: var(--shadow);
}
.ob-quiz__result::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--on-vivid) 14%, transparent), transparent 65%); }
.ob-quiz__score { display: flex; align-items: baseline; gap: 8px; }
.ob-quiz__score > .num { font-family: var(--font-head); font-size: 52px; font-weight: 800; line-height: 1; }
.ob-quiz__of { font-size: 15px; font-weight: 600; color: var(--on-vivid-2); }
.ob-lesson .ob-quiz__verdict { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--on-vivid); }
.ob-lesson .ob-quiz__advice { margin-top: 4px; font-size: 14.5px; line-height: 1.75; color: var(--on-vivid-2); }
.ob-lesson .ob-quiz__advice a { color: var(--on-vivid); font-weight: 700; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .25em; }
.ob-quiz__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-vivid) 22%, transparent); }
.ob-quiz__actions .btn--ghost { color: var(--on-vivid); border-color: color-mix(in srgb, var(--on-vivid) 45%, transparent); }
.ob-quiz__actions .btn--ghost:hover { background: color-mix(in srgb, var(--on-vivid) 14%, transparent); }
.ob-quiz__result :focus-visible { outline-color: var(--on-vivid); }
@media (prefers-reduced-motion: no-preference) {
  .ob-quiz__result.is-in { animation: ob-rise .5s var(--ease) both; }
  .ob-q__fb.is-in { animation: ob-rise .35s var(--ease) both; }
}
@keyframes ob-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 14 · next steps, sources ---------- */
.ob-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 1.2em; }
.ob-next__card > .sthumb { flex: none; height: 124px; }
/* lesson 3 (the wheel) has no payoff shape: the shared cycle diagram, compact (the card text names both steps) */
.ob-next__wheel .wheel { padding: 8px 10px; }
.ob-next__wheel .wheel__node { width: 52px; height: 52px; font-size: 13px; }
.ob-next__wheel .wheel__mid { gap: 10px; padding-inline: 4px; }
.ob-next__wheel .wheel__arrow > span { display: none; }
.ob-next__wheel .wheel__arrow svg { width: 52px; }
.ob-next__wheel .wheel__arrow path { vector-effect: non-scaling-stroke; }
.ob-lesson .ob-next__step { font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--academy-ink); }
.ob-lesson .ob-next__card .scard__en { color: var(--text-3); }
.ob-lesson .ob-next__card .scard__desc { color: var(--text-2); }
.ob-lesson > .ob-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.ob-more__link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.ob-more__link:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.ob-more__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--academy-soft); color: var(--academy-ink); }
.ob-more__link b { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; }
.ob-more__link small { display: block; font-size: 13px; line-height: 1.6; color: var(--text-3); }
.ob-more__link .icon--arrow { color: var(--text-3); transition: transform var(--t-med) var(--ease-spring); }
.ob-more__link:hover .icon--arrow { transform: translateX(-4px); color: var(--text); }
/* order at the end of the lesson: next steps → sources → disclaimer (the disclaimer stays the article's last block) */
.ob-lesson > .ob-sources { margin-top: var(--sp-12); }
.ob-lesson > .ob-sources + .lesson-disclaimer { margin-top: 12px !important; }
.ob-lesson .ob-sources__list { display: grid; gap: 8px; margin: 0; padding-inline-start: 1.2em; font-size: 14px; line-height: 1.8; color: var(--text-2); }
.ob-lesson .ob-sources__list li + li { margin-top: 0; }

/* payoff.js failed to load (class set by the page script): drop the empty thumbnail boxes, keep the text */
.ob-no-payoff .ob-hero .page-hero__aside, .ob-no-payoff .ob-role__thumb, .ob-no-payoff .ob-next__card > .sthumb, .ob-no-payoff .ob-try { display: none; }
.ob-no-payoff .ob-next__card { grid-template-columns: minmax(0, 1fr); }
.ob-pf-state { margin: 0; }

/* ---------- 15 · responsive ---------- */
@media (max-width: 1099px) {
  /* hero stacks here: the two building blocks span the full row instead of leaving an empty half */
  .ob-pair { margin-inline: 0; max-width: none; gap: 14px; }
  .ob-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the sticky TOC is replaced by the mobile accordion here: drop the empty aside row and give the accordion air */
  .lesson-body .article-layout__aside { display: none; }
  .lesson-body details.toc-mobile { margin-bottom: var(--sp-6); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  /* five facts as 3 + 2 instead of 4 + 1 */
  .lesson-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lesson-facts .stat { grid-column: span 2; }
  .lesson-facts .stat:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 699px) {
  .ob-lesson > h2 { padding-top: 30px; }
  .ob-pair__thumb { height: 138px; }
  .ob-pair__cap { font-size: 12.5px; }
  .ob-pair__cap b { font-size: 14.5px; }
  .lesson-facts .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* roles: one column, grouped call → put with the column labels as group heads */
  .ob-roles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ob-roles__col--call { order: 1; }
  .ob-role:nth-of-type(1) { order: 2; }
  .ob-role:nth-of-type(3) { order: 3; }
  .ob-roles__col--put { order: 4; margin-top: 8px; }
  .ob-role:nth-of-type(2) { order: 5; }
  .ob-role:nth-of-type(4) { order: 6; }
  .ob-role { padding: 14px; }
  .ob-role__thumb { height: 104px; }
  .ob-chain__bar { padding: 10px 12px; gap: 6px 12px; }
  .ob-lesson .formulas { grid-template-columns: minmax(0, 1fr); }
  .ob-lesson .ob-chain__mock { padding: 6px 10px; font-size: 12px; }
  .ob-cal__wk { padding-inline-end: 2px; font-size: 12px; white-space: normal; max-width: 52px; }
  .ob-chain__table { font-size: 13px; }
  .ob-chain__table th, .ob-chain__table td { padding: 9px 3px; }
  .ob-chain__table thead th { font-size: 12px; }
  .ob-chain__table .ob-chain__k { width: 48px; }
  .ob-pin { width: 19px; height: 19px; margin-inline-end: 3px; font-size: 12px; }
  .ob-chain__table thead th .ob-pin { display: grid; margin: 0 auto 3px; }
  .lesson-body { padding-top: var(--sp-6); }
  .ob-pin--cell { display: none; }
  .ob-lesson .ob-terms > li { padding: 11px 14px; padding-inline-start: 46px; }
  .ob-terms > li::before { inset-inline-start: 13px; }
  .ob-decay__ctl { grid-template-columns: minmax(0, 1fr); }
  .ob-decay__read > div { padding: 9px 10px; }
  .ob-decay__read dd > .num { font-size: 17px; }
  .ob-greeks, .ob-risks, .ob-duo, .ob-lesson > .ob-more { grid-template-columns: minmax(0, 1fr); }
  /* Saudi spec: one compact list instead of eight cards */
  .ob-lesson .ob-spec { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
  .ob-spec > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
  .ob-spec > div:last-child { border-bottom: 0; }
  .ob-lesson .ob-spec dd { margin: 0; font-size: 14.5px; line-height: 1.6; }
  /* US vs Saudi table fits a phone (style.css lets the row heads wrap) */
  .ob-compare th, .ob-compare td { padding: 9px 8px; font-size: 13.5px; }
  .ob-greek { padding: 14px 14px 16px; }
  .ob-tabs__list { max-width: none; }
  .ob-tabs__en { display: none; }
  .ob-try { padding: 14px 16px; }
  .ob-cal__grid { gap: 4px; }
  .ob-cal__cell { min-height: 46px; padding: 7px 6px; gap: 4px; }
  .ob-cal__day { font-size: 12px; }
  .ob-cal__cell--monthly b { font-size: 12px; }
  .ob-lesson .ob-cal__legend { grid-template-columns: minmax(0, 1fr); }
  .ob-sso { padding: 14px 12px 12px; }
  .ob-sso__chgcol { display: none; }
  .ob-sso__table th, .ob-sso__table td { padding: 10px 8px; }
  .ob-q { padding: 14px; }
  .ob-q__legend { font-size: 16px; }
  .ob-q__opt { padding: 8px 12px; gap: 10px; font-size: 15px; }
  .ob-q__tag { padding: 1px 7px; }
  .ob-quiz__result { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .ob-next { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ob-next__card { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 10px; }
  .ob-next__card > .sthumb { height: 112px; }
  /* the wheel card: cash on top, shares below, the two arrows side by side between them; the frame takes the card's height */
  .ob-next__card > .ob-next__wheel { align-self: stretch; height: auto; min-height: 112px; }
  .ob-next__wheel .wheel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: center; align-content: center; gap: 4px; padding: 6px 4px; }
  .ob-next__wheel .wheel__node { width: 38px; height: 38px; font-size: 12.5px; }
  .ob-next__wheel .wheel__mid { grid-auto-flow: column; gap: 14px; padding: 0; }
  .ob-next__wheel .wheel__arrow { width: 14px; height: 36px; place-items: center; }
  .ob-next__wheel .wheel__arrow svg { width: 36px; transform: rotate(-90deg); }
  .ob-next__wheel .wheel__arrow--back svg { transform: rotate(90deg); }
  .ob-next__card .scard__body { padding: 0; gap: 6px; }
  .ob-next__card .scard__title { font-size: 16.5px; }
  .ob-next__card .scard__desc { font-size: 13.5px; line-height: 1.65; }
}
@media (max-width: 380px) {
  .ob-chain__table { font-size: 12.5px; }
  .ob-chain__table th, .ob-chain__table td { padding-inline: 2px; }
  .ob-next__card { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
}