/* ── shared/real-figures.css ── */
/* Shared by every guide that shows captures of the real tool (a guide opts in with sharedCss: ['real-figures']).
   Both themes are served by the picture pair real() writes (img.is-dark / img.is-light, hidden by guide.css); this file only
   frames the picture, and the frame follows the theme through tokens. */

/* A capture of the real tool. The frame is the tool's own page colour in each theme, so the capture's edge never reads as a
   box inside a box: near-black behind the dark capture, white behind the light one. */
:root { --real-frame: #0A0A0A; }
:root[data-theme="light"] { --real-frame: #FFFFFF; }
.ocv-real { margin: 28px 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--real-frame); overflow: hidden; }
.ocv-real__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03); }
.ocv-real__tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sahi-cyan, #5ACFE0); }
.ocv-real__label { font-size: 0.9rem; font-weight: 600; color: var(--text-1); }
.ocv-real__shot { display: flex; justify-content: center; padding: 18px 16px; overflow-x: auto; }
.ocv-real__shot img { display: block; width: var(--real-w); max-width: 100%; height: auto; border-radius: 6px; }
.ocv-real__cap { padding: 0 18px 16px; font-size: 0.88rem; line-height: 1.5; color: var(--text-3); text-align: center; }
.ocv-real__cap strong { color: var(--text-2); }

/* Two or more captures side by side (a cell in Simple against Advanced, Call against Put) */
.ocv-real-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 28px 0; }
.ocv-real-row > .ocv-real { margin: 0; }

/* ── 00-base.css ── */
/* Implied Volatility guide: page furniture. The real-capture frame (.ocv-real) is shared (scripts/guides/shared-css/real-figures.css);
   everything here uses the guide tokens, so both themes follow without a rule of their own. */

section[id^="iv-"] .ocv-real__tag { font-size: 0.8125rem; }
section[id^="iv-"] .ocv-real__shot { padding: 14px 12px; }

/* Numbered steps: one step, one figure */
.ivg-steps { list-style: none; counter-reset: sbg; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.ivg-steps > li { counter-increment: sbg; position: relative; padding: 16px 18px 16px 62px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.ivg-steps > li::before { content: counter(sbg); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; color: var(--on-accent); background: var(--sahi-accent); }
.ivg-steps > li > h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--text-1); }
.ivg-steps > li > p { margin: 0 0 10px; color: var(--text-2); }
.ivg-steps > li > p:last-child { margin-bottom: 0; }
.ivg-steps .ocv-real { margin: 14px 0 6px; }

/* A short labelled list of the regions of a screen */
.ivg-regions { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ivg-regions > li { padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); color: var(--text-2); font-size: 0.93rem; }
.ivg-regions b { display: block; margin-bottom: 4px; color: var(--text-1); font-size: 0.98rem; }

/* A worked example's header: what it is, in one row */
.ivg-ex { margin: 8px 0 22px; padding: 14px 18px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.ivg-ex__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
.ivg-ex__head h3 { margin: 0; font-size: 1.15rem; color: var(--text-1); }
.ivg-ex__tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sahi-cyan); }
.ivg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ivg-facts > li { padding: 8px 10px; border-radius: 10px; background: rgba(var(--ink-rgb), 0.04); color: var(--text-2); font-size: 0.88rem; }
.ivg-facts b { display: block; color: var(--text-1); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Glossary and questions */
.ivg-gloss { display: grid; gap: 0; margin: 18px 0; }
.ivg-gloss dt { margin-top: 14px; font-weight: 700; color: var(--text-1); }
.ivg-gloss dd { margin: 4px 0 0; color: var(--text-2); }
.ivg-q { margin: 10px 0; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.ivg-q > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--text-1); }
.ivg-q > div { padding: 0 16px 14px; color: var(--text-2); }
.ivg-q > div p { margin: 0 0 8px; }

/* Tablet and phone: a wide capture keeps at least 70% of its drawn size and scrolls sideways inside its frame, so the
   small type in it stays readable instead of shrinking to a fraction of the page width */
@media (max-width: 900px) {
  section[id^="iv-"] .ocv-real__shot { justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  section[id^="iv-"] .ocv-real__shot img { max-width: none; flex: none; width: max(100%, calc(var(--real-w) * 0.7)); }
}

/* Phone: steps lose their left gutter */
@media (max-width: 560px) {
  .ivg-steps > li { padding: 14px; }
  .ivg-steps > li::before { position: static; margin-bottom: 8px; }
}

/* ── 10-guide.css ── */
/* Implied Volatility guide: reading aids added around the figures and the text. Tokens only (both themes follow); the one literal is the
   brand dark at 70% behind the enlarged picture. */

/* ── a section opens with the question it answers ─────────────────────────── */
.ivg-ask { margin: -4px 0 20px; color: var(--text-3); font-size: 1.02rem; font-style: italic; line-height: 1.5; }
.ivg-ask::before { content: "The question: "; font-style: normal; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sahi-accent-ink); margin-right: 4px; }

/* a callout heading is now an h3 or h4 for the outline; it keeps the callout look */
.callout-beginner :is(h3, h4) { color: var(--sahi-positive); margin: 0 0 12px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

/* ── links: to the glossary and to the "not verified" box ─────────────────── */
a.ivg-term { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--sahi-accent-ink); }
a.ivg-term:hover { text-decoration-style: solid; }

/* ── jump list and route ──────────────────────────────────────────────────── */
.ivg-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 22px; }
.ivg-jump__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.ivg-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); color: var(--text-1); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.ivg-jump a:hover { border-color: var(--sahi-accent-ink); color: var(--sahi-accent-ink); }

.ivg-first5, .ivg-route, .ivg-primer, .ivg-shapes { margin: 22px 0; padding: 16px 20px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.ivg-first5 { }
.ivg-first5 > h3, .ivg-route > h3, .ivg-primer > h3, .ivg-shapes > h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--text-1); }
.ivg-first5 ul { margin: 0; padding-left: 20px; color: var(--text-2); }
.ivg-first5 li { margin: 6px 0; }
.ivg-route p, .ivg-primer p { margin: 0 0 8px; color: var(--text-2); font-size: 0.98rem; }
.ivg-primer dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 22px; margin: 10px 0 0; }
.ivg-primer dt { font-weight: 700; color: var(--text-1); }
.ivg-primer dt a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.ivg-primer dd { margin: 2px 0 8px; color: var(--text-2); font-size: 0.93rem; line-height: 1.5; }

/* the "why not" and the "why different" notes */
.ivg-why { margin: 16px 0; padding: 14px 18px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(var(--ink-rgb), 0.03); color: var(--text-2); font-size: 0.97rem; }
.ivg-why strong:first-child { color: var(--text-1); }

.ivg-risklist { padding-left: 22px; }
.ivg-risklist li { margin: 10px 0; color: var(--text-2); }
.ivg-check { padding-left: 24px; }
.ivg-check li { margin: 8px 0; color: var(--text-2); }

/* ── tables: a keyboard-reachable scroll region, with an edge shadow when there is more to see ── */
.guide-table-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(var(--ink-rgb), 0.22), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(var(--ink-rgb), 0.22), transparent) right center / 12px 100% no-repeat scroll,
    var(--surface);
}
.guide-table-wrap:focus-visible, .ocv-real__shot:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; }

/* ── figures: swipe hint, faded edge and Enlarge (phones and tablets) ────── */
.ivg-swipe, .ivg-zoom { display: none; }
.ivg-pop { display: none; }
@media (max-width: 900px) {
  .ivg-wide .ivg-swipe { display: inline-block; flex-basis: 100%; font-size: 0.82rem; color: var(--text-3); }
  .ivg-wide .ocv-real__shot { position: relative; }
  .ivg-wide .ocv-real__shot::after { content: ""; position: sticky; right: -16px; flex: 0 0 18px; margin-left: -18px; align-self: stretch; background: linear-gradient(to right, transparent, var(--real-frame)); pointer-events: none; }
}
@supports selector(:popover-open) {
  @media (max-width: 900px) {
    .ivg-zoom { display: inline-flex; align-items: center; min-height: 36px; margin-left: auto; padding: 4px 14px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); color: var(--text-1); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  }
  .ivg-pop:popover-open { display: block; position: fixed; inset: 0; margin: auto; width: min(96vw, 1180px); height: fit-content; max-height: 92vh; overflow: auto; padding: 14px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--real-frame); color: var(--text-1); -webkit-overflow-scrolling: touch; }
  .ivg-pop::backdrop { background: rgba(21, 2, 11, 0.7); }
  .ivg-pop__x { position: sticky; top: 0; display: block; margin: 0 0 8px auto; min-height: 40px; padding: 6px 18px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); color: var(--text-1); font: inherit; font-weight: 700; cursor: pointer; }
  .ivg-pop__img img { max-width: none !important; width: auto !important; height: auto !important; border-radius: 6px; }
}

/* small screens: roomier touch targets in the guide's own controls, and a safe margin at the foot for the floating pills */
@media (max-width: 560px) {
  .ivg-jump a { min-height: 44px; }
  .ivg-q > summary { min-height: 44px; display: flex; align-items: center; }
  .content-main { padding-bottom: 72px; }
}

/* ── print: light pictures only, a sensible length ────────────────────────── */
@media print {
  :root:root { --text-1: #15020B; --text-2: #15020B; --text-3: #15020B; --surface: #FFFFFF; --real-frame: #FFFFFF; --border-soft: rgba(21, 2, 11, 0.3); --sahi-bg-0: #FFFFFF; --sahi-accent-ink: #15020B; --sahi-cyan: #15020B; --sahi-positive: #15020B; }
  html, body { background: #FFFFFF !important; color: #15020B !important; }
  .sahi-nav, .toc-container, .ux-dock, .ux-progress, .ux-next, .ux-top, .hero-actions, .quiz-section, #explore, #more-guides, #see-it-live, #live-now, .guide-crumbs, .sahi-foot, .ivg-jump, .ivg-zoom, .ivg-pop, .ivg-swipe, .ocv-real__bar { display: none !important; }
  :root:root:root:root img.is-dark { display: none !important; }
  :root:root:root:root img.is-light { display: block !important; }
  header { padding: 0 0 12px !important; }
  .layout-wrapper { display: block !important; padding: 0 !important; }
  .section-block { break-inside: auto; page-break-inside: auto; }
  h2, h3 { break-after: avoid; }
  .ocv-real, .ivg-ex, .callout-beginner, .guide-table-wrap tr { break-inside: avoid; }
  .ocv-real__shot { display: block; overflow: visible; padding: 4px 0; }
  .ocv-real__shot img { max-width: 100% !important; max-height: 6.5cm; width: auto !important; height: auto !important; margin: 0 auto; }
  .ocv-real__shot::after { display: none !important; }
  .content-main p, .content-main li { font-size: 10pt !important; line-height: 1.45 !important; margin-bottom: 6px !important; }
  .section-block { margin: 0 0 10px !important; padding: 0 !important; }
  .divider { display: none !important; }
  .guide-table-wrap { overflow: visible; background: none; }
  .guide-table { min-width: 0; font-size: 0.8rem; }
  .guide-table th, .guide-table td { padding: 5px 8px; }
  details { display: block; }
  details > :not(summary) { display: block !important; }
  a { color: inherit; text-decoration: underline; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .content-main :is(p, li, td, th, dd, dt, span, strong, em, div, small, h2, h3, h4, figcaption) { color: #15020B !important; }
  .callout-beginner, .trading-example, .feature-card, .ivg-first5, .ivg-why { background: #FFFFFF !important; box-shadow: none !important; }
}

/* links inside scrolling tables use the text colour (the edge shadow behind them would otherwise lower the contrast of the accent) */
.guide-table-wrap a, .guide-table-wrap a.ivg-nv, .ivg-cat a { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* ── 20-parts.css ── */
/* Implied Volatility guide: the part openers (A to F), working lines, lists and small motion. Tokens only: both themes follow without a
   rule of their own (scripts/guides/THEMES.md). Motion is small and is switched off by prefers-reduced-motion. */

/* ── rhythm between sections ──────────────────────────────────────────────── */
.content-main > hr.divider { margin: 40px 0; opacity: 0.8; }
.content-main > hr.divider:has(+ section > .ivg-part) { display: none; }
.content-main > section[id^="iv-"] > h2 { margin: 0 0 20px; padding: 0 0 14px; }
.content-main > section[id^="iv-"] > h3 { margin: 40px 0 12px; font-size: 1.22rem; line-height: 1.3; font-weight: 700; color: var(--text-1); }
.content-main .callout-beginner { margin: 32px 0; padding: 24px 28px; border-radius: 16px; }
.content-main .callout-beginner > :last-child { margin-bottom: 0; }

/* ── part openers ─────────────────────────────────────────────────────────── */
.ivg-part {
  position: relative; display: grid; overflow: hidden;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  grid-template-areas: "badge body thumbs" "rail rail rail";
  gap: 22px 26px; align-items: center;
  margin: 56px 0 32px; padding: 28px 30px 20px;
  border: 1px solid var(--border-soft); border-radius: 22px; background: var(--surface);
  color: var(--text-2); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.ivg-part__badge {
  grid-area: badge; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px;
  font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1;
  color: var(--on-accent); background: var(--sahi-accent);
}
.ivg-part__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ivg-part__k { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahi-accent-ink); }
.ivg-part__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
.ivg-part__promise { max-width: 54ch; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.ivg-part__meta { font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.ivg-part__thumbs { grid-area: thumbs; display: flex; gap: 8px; align-items: center; }
.ivg-part__thumb { display: block; width: auto; height: 86px; max-width: 150px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--real-frame); }
.ivg-rail { grid-area: rail; display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px dashed rgba(var(--ink-rgb), 0.14); }
.ivg-rail::before { content: "Parts"; margin-right: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.ivg-rail__i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  font-size: 0.9375rem; font-weight: 800; line-height: 1; text-decoration: none;
  color: var(--text-2); border: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.content-main .ivg-rail a.ivg-rail__i { text-decoration: none; color: var(--text-2); font-weight: 800; }
.content-main .ivg-rail a.ivg-rail__i:hover { color: var(--text-1); border-color: var(--sahi-accent-ink); transform: translateY(-2px); }
.ivg-rail__i.is-here { color: var(--on-accent); border-color: var(--sahi-accent); background: var(--sahi-accent); }
@media (max-width: 900px) {
  .ivg-part { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "badge body" "thumbs thumbs" "rail rail"; padding: 22px 20px 16px; gap: 16px 18px; }
  .ivg-part__badge { width: 80px; height: 80px; border-radius: 22px; font-size: 3.1rem; }
  .ivg-part__thumbs { justify-content: flex-start; overflow: hidden; }
}
@media (max-width: 560px) {
  .ivg-part__thumb { height: 64px; }
  .ivg-rail { flex-wrap: wrap; }
}

/* ── working lines: the rule, then the rule with this reading's numbers ───── */
.ivg-calc { display: grid; gap: 4px; margin: 14px 0 18px; padding: 12px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(var(--ink-rgb), 0.03); transition: transform 0.18s ease; }
.ivg-calc:hover { transform: translateY(-2px); }
.ivg-calc > b { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ivg-calc__rule { color: var(--text-2); font-size: 0.97rem; }
.ivg-calc > code { display: block; padding: 6px 0 2px; font-size: 0.95rem; color: var(--text-1); background: none; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ivg-calc > small { color: var(--text-3); font-size: 0.85rem; }

/* ── lists, glossary and questions ────────────────────────────────────────── */
.ivg-list { padding-left: 22px; }
.ivg-list li { margin: 8px 0; color: var(--text-2); }
.ivg-check { margin: 22px 0; padding: 16px 20px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.ivg-check > h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--text-1); }
.ivg-check-list { margin: 0; padding-left: 22px; color: var(--text-2); }
.ivg-check-list li { margin: 6px 0; }
.ivg-gloss dt { scroll-margin-top: 90px; }
.ivg-gloss dt:target { color: var(--sahi-accent-ink); }
.ivg-q > summary { transition: background 0.18s ease; border-radius: 12px; }
.ivg-q > summary:hover { background: rgba(var(--ink-rgb), 0.04); }
.ivg-q[open] > summary { border-bottom: 1px solid var(--border-soft); border-radius: 12px 12px 0 0; }

/* ── figures: a small lift, and the swipe line and enlarge button the Strategy Builder guide uses ── */
section[id^="iv-"] .ocv-real { transition: transform 0.2s ease; }
section[id^="iv-"] .ocv-real:hover { transform: translateY(-2px); }
.ivg-wide .ocv-real__shot { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .ivg-calc, .ivg-calc:hover, .ivg-rail__i, .content-main .ivg-rail a.ivg-rail__i:hover, section[id^="iv-"] .ocv-real, section[id^="iv-"] .ocv-real:hover { transition: none; transform: none; }
}
@media print {
  .ivg-part { break-inside: avoid; border-color: var(--border-soft); }
  .ivg-part__thumbs, .ivg-rail { display: none !important; }
  .ivg-calc { break-inside: avoid; }
}

/* ── 30-skin.css ── */
/* Implied Volatility guide: the visual layer that matches the Option Chain, Options Scanner and Strategy Builder guides (part openers,
   hero strip, step cards, figure frames, callouts, tables) and the small motion that goes with it.
   Tokens only; the few translucent brand fills restate the Option Chain guide's (scripts/guides/option-chain-css/05-p1-page.css), dark
   and light, as the Strategy Builder guide does. Motion is transform, opacity and stroke only, behind prefers-reduced-motion:
   no-preference, and starts from the existing data-aos reveal (.aos-in). Prefix: ivp- (new), ivg- (earlier rules). */

:root {
    --ivp-pink-fill: rgba(165, 15, 102, 0.5);
    --ivp-pink-line: rgba(254, 163, 229, 0.5);
    --ivp-pink-edge: rgba(254, 163, 229, 0.55);
    --ivp-pink-wash: rgba(165, 15, 102, 0.2);
    --ivp-grad-badge: linear-gradient(150deg, rgba(165, 15, 102, 0.75), rgba(165, 15, 102, 0.18));
    --ivp-badge-line: rgba(254, 163, 229, 0.38);
    --ivp-badge-shadow: 0 10px 30px rgba(165, 15, 102, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --ivp-part-bg: radial-gradient(120% 140% at 0% 0%, rgba(165, 15, 102, 0.20), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(169, 231, 240, 0.06), transparent 60%), rgba(255, 255, 255, 0.02);
    --ivp-tile: rgba(255, 255, 255, 0.025);
    --ivp-solid: transparent;
    --ivp-hl-rgb: 169, 231, 240;
    --ivp-sheen: rgba(255, 255, 255, 0.07);
}
:root[data-theme="light"] {
    --ivp-pink-fill: #A50F66;
    --ivp-pink-line: rgba(165, 15, 102, 0.5);
    --ivp-pink-edge: #A50F66;
    --ivp-pink-wash: rgba(165, 15, 102, 0.1);
    --ivp-grad-badge: linear-gradient(150deg, #A50F66, #8A1157);
    --ivp-badge-line: rgba(165, 15, 102, 0.55);
    --ivp-badge-shadow: 0 10px 28px rgba(165, 15, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --ivp-part-bg: radial-gradient(120% 140% at 0% 0%, rgba(165, 15, 102, 0.1), transparent 55%), #FFFFFF;
    --ivp-tile: #FFFFFF;
    --ivp-solid: #A50F66;
    --ivp-hl-rgb: 165, 15, 102;
    --ivp-sheen: rgba(165, 15, 102, 0.08);
}

/* ═══ 1. rhythm ═══ */
.content-main > hr.divider:has(+ section > .ivp-hero) { display: none; }
.content-main > section[id^="iv-"] > h2 { margin: 0 0 22px; padding: 0 0 18px; position: relative; }
.content-main > section[id^="iv-"] > h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 3px; border-radius: 3px; background: var(--sahi-accent-ink); transform-origin: left center; }
.content-main > section[id^="iv-"] > h3 { margin: 48px 0 14px; font-size: 1.28rem; letter-spacing: -0.01em; }
.content-main > section[id^="iv-"] > h3:first-child { margin-top: 0; }
.content-main .callout-beginner { margin: 36px 0; padding: 26px 30px; }
.content-main .callout-beginner p { font-size: 1.05rem; line-height: 1.75; }
.content-main > .quiz-section { margin-top: 72px; padding: 40px; }
@media (prefers-reduced-motion: no-preference) {
    .js .content-main > section[id^="iv-"]:not(.aos-in) > h2::after { transform: scaleX(0); }
    .js .content-main > section[id^="iv-"] > h2::after { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
}
@media (max-width: 768px) {
    .content-main .callout-beginner { margin: 28px 0; padding: 20px; }
    .content-main .callout-beginner p { font-size: 1rem; }
    .content-main > .quiz-section { margin-top: 48px; padding: 22px 18px; }
}

/* ═══ 2. hero: what you will learn, and the numbers ═══ */
.ivp-hero { display: grid; gap: 18px; margin: 0 0 40px; padding: 22px 24px; border: 1px solid var(--border-soft); border-radius: 22px; background: var(--ivp-part-bg); }
.ivp-learn__k { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahi-cyan); }
.ivp-learn ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ivp-learn a { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--ivp-tile); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.content-main .ivp-learn a { color: var(--text-1); text-decoration: none; }
.ivp-learn a:hover { transform: translateY(-2px); border-color: var(--ivp-pink-line); background: var(--ivp-pink-wash); }
.ivp-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ivp-nums a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--ivp-tile); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; }
.content-main .ivp-nums a { color: var(--text-2); text-decoration: none; }
.ivp-nums a:hover { transform: translateY(-3px); border-color: rgba(var(--ivp-hl-rgb), 0.5); }
.ivp-nums b { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--sahi-cyan); font-variant-numeric: tabular-nums; }
.ivp-nums span { font-size: 0.9rem; line-height: 1.35; color: var(--text-2); }
@media (max-width: 700px) { .ivp-hero { padding: 18px 16px; } .ivp-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ 3. part openers ═══ */
.ivg-part { grid-template-areas: "badge body thumbs" "qs qs qs" "rail rail rail"; margin: 0 0 36px; background: var(--ivp-part-bg); }
.content-main > section[id^="iv-"] > .ivg-part:first-child { margin-top: 24px; }
.ivg-part__badge { background: var(--ivp-grad-badge); background-color: var(--ivp-solid); border: 1px solid var(--ivp-badge-line); box-shadow: var(--ivp-badge-shadow); }
.ivg-part__k { color: var(--sahi-cyan); }
.ivg-part__meta { margin-top: 4px; }
.ivg-part__thumb { width: 128px; max-width: 128px; height: 86px; object-fit: cover; object-position: left top; }
.ivp-part__qs { grid-area: qs; border-top: 1px dashed rgba(var(--ink-rgb), 0.14); padding-top: 12px; }
.ivp-part__qs > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; font-size: 0.875rem; font-weight: 700; color: var(--text-2); }
.ivp-part__qs > summary:hover { color: var(--text-1); }
.ivp-part__qs ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--text-2); font-size: 0.95rem; }
.content-main .ivp-part__qs a { color: var(--text-2); text-decoration: none; }
.content-main .ivp-part__qs a:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.ivg-rail__i { width: 36px; height: 36px; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.content-main .ivg-rail a.ivg-rail__i:hover { border-color: var(--ivp-pink-line); background: var(--ivp-pink-wash); }
.ivg-rail__i.is-here { border-color: var(--ivp-pink-edge); background: var(--ivp-pink-fill); }
@media (prefers-reduced-motion: no-preference) {
    .ivg-part__badge { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
    .ivg-part:hover .ivg-part__badge { transform: rotate(-4deg) scale(1.05); }
    .js .ivg-part[data-aos]:not(.aos-in) .ivg-part__thumb { opacity: 0; transform: translateY(10px); }
    .ivg-part__thumb { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .ivg-part__thumb:nth-child(2) { transition-delay: 0.1s; }
    .ivg-part__thumb:nth-child(3) { transition-delay: 0.2s; }
}
@media (max-width: 900px) {
    .ivg-part { grid-template-areas: "badge body" "thumbs thumbs" "qs qs" "rail rail"; }
}
@media (max-width: 560px) {
    .ivg-part { grid-template-columns: 56px minmax(0, 1fr); margin: 0 0 26px; padding: 18px 16px 14px; gap: 14px; border-radius: 18px; }
    .ivg-part__badge { width: 56px; height: 56px; border-radius: 16px; font-size: 2.2rem; }
    .ivg-part__title { font-size: 1.35rem; }
    .ivg-part__promise { font-size: 0.9375rem; }
    .ivg-part__thumb { width: 28vw; max-width: 28vw; height: 64px; }
    .ivg-rail { gap: 6px; padding-top: 12px; }
    .ivg-rail__i { width: 40px; height: 40px; }
    .ivp-part__qs > summary { min-height: 44px; }
}
/* six lettered buttons and the word "Parts" stay on one line down to 320px */
@media (max-width: 420px) {
    .ivg-rail::before { content: none; }
    .ivg-rail { justify-content: space-between; flex-wrap: nowrap; }
    .ivg-rail__i { width: 44px; height: 44px; flex: 0 1 44px; }
}

/* ═══ 4. numbered step cards with a connecting progress line ═══ */
.ivg-steps { gap: 18px; margin: 28px 0; }
.ivg-steps > li { padding: 20px 22px 20px 70px; border-radius: 18px; background: var(--ivp-tile); transition: border-color 0.25s ease; }
.ivg-steps > li:hover { border-color: var(--ivp-pink-line); }
.ivg-steps > li::before { left: 18px; top: 20px; width: 36px; height: 36px; font-family: var(--font-display); font-size: 1.05rem; box-shadow: 0 0 0 5px rgba(165, 15, 102, 0.16); z-index: 1; }
.ivg-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 35px; top: 60px; bottom: -19px; width: 2px; background: linear-gradient(to bottom, var(--sahi-accent), rgba(var(--ink-rgb), 0.12)); transform-origin: top center; }
.ivg-steps > li > h3 { font-size: 1.15rem; margin-bottom: 8px; }
@media (prefers-reduced-motion: no-preference) {
    .js .ivg-steps > li[data-aos]:not(.aos-in)::after { transform: scaleY(0); }
    .js .ivg-steps > li::after { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
    .js .ivg-steps > li[data-aos]:not(.aos-in)::before { transform: scale(0.6); }
    .js .ivg-steps > li::before { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s; }
}
@media (max-width: 560px) {
    .ivg-steps > li { padding: 16px; }
    .ivg-steps > li::before { position: static; margin-bottom: 10px; }
    .ivg-steps > li:not(:last-child)::after { display: none; }
}

/* ═══ 5. figure frames ═══ */
section[id^="iv-"] .ocv-real { position: relative; margin: 30px 0; border-radius: 18px; box-shadow: 0 10px 34px rgba(var(--shade-ch), calc(0.22 * var(--k-shadow))); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
section[id^="iv-"] .ocv-real__bar { padding: 11px 18px; background: rgba(var(--ink-rgb), 0.04); }
section[id^="iv-"] .ocv-real__tag { display: inline-flex; align-items: center; gap: 8px; }
section[id^="iv-"] .ocv-real__tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sahi-cyan); box-shadow: 0 0 0 3px rgba(var(--ivp-hl-rgb), 0.2); }
section[id^="iv-"] .ocv-real__cap { padding: 13px 18px 14px; border-top: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03); text-align: left; font-size: 0.92rem; color: var(--text-2); }
section[id^="iv-"] .ocv-real__cap strong:first-child { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(var(--ivp-hl-rgb), 0.14); color: var(--sahi-cyan); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
section[id^="iv-"] .ocv-real::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, var(--ivp-sheen) 50%, transparent 62%); transform: translateX(-120%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    section[id^="iv-"] .ocv-real:hover { transform: translateY(-4px); border-color: rgba(var(--ivp-hl-rgb), 0.4); box-shadow: 0 18px 48px rgba(var(--shade-ch), calc(0.34 * var(--k-shadow))); }
    section[id^="iv-"] .ocv-real:hover::after { transform: translateX(120%); transition: transform 0.9s ease; }
}
@media (prefers-reduced-motion: no-preference) {
    .js figure.ocv-real[data-aos]:not(.aos-in) { transform: translateY(18px) scale(0.99); }
}

/* ═══ 6. worked-example cards, regions, facts ═══ */
.ivg-ex { padding: 20px 22px; border-radius: 18px; background: var(--ivp-tile); }
.ivg-ex__tag { padding: 2px 10px; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(var(--ink-rgb), 0.04); }
.ivg-facts > li { padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; }
.ivg-regions > li { border-radius: 14px; background: var(--ivp-tile); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ivg-facts > li { transition: transform 0.2s ease, border-color 0.2s ease; } .ivg-facts > li:hover { transform: translateY(-2px); border-color: var(--ivp-pink-line); } }
@media (max-width: 560px) { .ivg-ex { padding: 16px; } }

/* ═══ 7. callouts and tables ═══ */
.callout-beginner :is(h3, h4)::before { content: "i"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.78rem; font-weight: 800; font-style: italic; text-transform: none; letter-spacing: 0; vertical-align: 1px; }
.ivg-check { border-radius: 14px; background: var(--ivp-tile); }
.ivg-q { border-radius: 14px; transition: border-color 0.2s ease; }
.ivg-q:hover, .ivg-q[open] { border-color: var(--ivp-pink-line); }
.trading-example { border-radius: 14px; }
.guide-table tbody tr { transition: background-color 0.2s ease; }
.guide-table tbody tr:hover { background: rgba(var(--ink-rgb), 0.04); }

/* ═══ 8. motion off, print ═══ */
@media (prefers-reduced-motion: reduce) {
    .ivp-learn a, .ivp-nums a, .ivg-facts > li, .ocv-real, .ivg-q { transition: none !important; }
    .ivp-learn a:hover, .ivp-nums a:hover { transform: none; }
}
@media print {
    .ivp-hero, .ivg-rail, .ivg-part__thumbs, .ivp-part__qs { display: none !important; }
    .ivg-part { display: block; padding: 8px 0; border: 0; background: none; margin: 0 0 8px; }
    .ivg-part__badge { display: inline-grid; width: 36px; height: 36px; font-size: 1.4rem; margin-right: 8px; background: none; color: #15020B; border: 1px solid #15020B; box-shadow: none; }
    .ivg-steps > li::after, section[id^="iv-"] .ocv-real::after { display: none; }
    .ivg-ex { border-left-color: #15020B !important; }
}