/* Yield to maturity lesson. All rules scoped under .ytm-* */
.ytm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ytm-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.ytm-hero img { width: 290px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* ---------- an IOU card ---------- */
.ytm-iou { width: 100%; max-width: 340px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line-strong); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color .3s; }
.ytm-iou-h { font: 800 12.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.ytm-iou.new { border-color: rgba(252,192,80,.5); }
.ytm-iou.new .ytm-iou-h { color: var(--gold); }
.ytm-iou.ana .ytm-iou-h { color: var(--violet-bright); }
.ytm-flow { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; }
.ytm-flow small { display: block; font: 600 12px var(--sans); color: var(--dim); }
.ytm-flow b { font: 800 22px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.ytm-get { text-align: right; }
.ytm-flow i { height: 2px; background: var(--line-strong); position: relative; }
.ytm-flow i::after { content: ''; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--line-strong); }
.ytm-yl { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 6px; font: 600 13px var(--sans); color: var(--dim); }
.ytm-yl b { font: 800 16px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.ytm-iou[data-k="ok"] { border-color: var(--mint); }
.ytm-iou[data-k="ok"] .ytm-yl b { color: var(--mint); }
.ytm-iou[data-k="gold"] .ytm-yl b { color: var(--gold); }

/* ---------- the buyer ---------- */
.ytm-buyer { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--raised); border: 1.5px solid var(--line-strong); font: 700 14.5px var(--sans); color: var(--dim); transition: border-color .3s, color .3s; }
.ytm-buyer i { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(252,192,80,.2); transition: background .3s, box-shadow .3s; }
.ytm-buyer.yes { border-color: var(--mint); color: var(--text); }
.ytm-buyer.yes i { background: var(--mint); box-shadow: 0 0 0 4px rgba(63,214,154,.25); }

.ytm-eq { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border-radius: 14px; background: rgba(63,214,154,.08); border: 1.5px solid rgba(63,214,154,.5); }
.ytm-eq small { font: 600 12.5px var(--sans); color: var(--dim); }
.ytm-eq b { font: 800 19px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }


/* ---------- the real note ---------- */
.ytm-real { width: 100%; max-width: 330px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line-strong); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ytm-real-h { font: 800 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ytm-real-r { display: flex; justify-content: space-between; align-items: baseline; font: 600 15px var(--sans); color: var(--dim); border-top: 1px solid var(--line); padding-top: 8px; }
.ytm-real-r b { font: 800 19px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.ytm-real-r.q b { color: var(--violet-bright); }
.ytm-real-r.q.lit b { color: var(--gold); }

@media (max-height: 700px) {
  .ytm-sc { gap: 7px; }
  .ytm-iou { padding: 8px 12px; gap: 4px; }
  .ytm-flow b { font-size: 19px; }
}