/* ── 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 ── */
/* PCR 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^="pc-"] .ocv-real__tag { font-size: 0.8125rem; }
section[id^="pc-"] .ocv-real__shot { padding: 14px 12px; }

/* Numbered steps: one step, one figure */
.pcg-steps { list-style: none; counter-reset: pcgstep; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.pcg-steps > li { counter-increment: pcgstep; position: relative; padding: 16px 18px 16px 62px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.pcg-steps > li::before { content: counter(pcgstep); 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); }
.pcg-steps > li > h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--text-1); }
.pcg-steps > li > p { margin: 0 0 10px; color: var(--text-2); }
.pcg-steps > li > p:last-child { margin-bottom: 0; }
.pcg-steps .ocv-real { margin: 14px 0 6px; }

/* A short labelled list of the regions of a screen */
.pcg-regions { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pcg-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; }
.pcg-regions b { display: block; margin-bottom: 4px; color: var(--text-1); font-size: 0.98rem; }

/* Two captures side by side on a wide screen */
.pcg-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin: 22px 0; align-items: start; }
.pcg-pair > .ocv-real { margin: 0; }

/* Glossary and questions */
.pcg-gloss { display: grid; gap: 0; margin: 18px 0; }
.pcg-gloss dt { margin-top: 14px; font-weight: 700; color: var(--text-1); }
.pcg-gloss dd { margin: 4px 0 0; color: var(--text-2); }
.pcg-q { margin: 10px 0; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.pcg-q > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--text-1); }
.pcg-q > div { padding: 0 16px 14px; color: var(--text-2); }
.pcg-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^="pc-"] .ocv-real__shot { justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  section[id^="pc-"] .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) {
  .pcg-steps > li { padding: 14px; }
  .pcg-steps > li::before { position: static; margin-bottom: 8px; }
}

/* ── 10-guide.css ── */
/* PCR 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 ─────────────────────────── */
.pcg-ask { margin: -4px 0 20px; color: var(--text-3); font-size: 1.02rem; font-style: italic; line-height: 1.5; }
.pcg-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.pcg-term { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--sahi-accent-ink); }
a.pcg-term:hover { text-decoration-style: solid; }
a.pcg-nv { color: var(--sahi-accent-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ── jump list and route ──────────────────────────────────────────────────── */
.pcg-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 22px; }
.pcg-jump__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.pcg-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; }
.pcg-jump a:hover { border-color: var(--sahi-accent-ink); color: var(--sahi-accent-ink); }

.pcg-first5 { }
.pcg-first5 ul { margin: 0; padding-left: 20px; color: var(--text-2); }
.pcg-first5 li { margin: 6px 0; }
.pcg-route p, .pcg-primer p { margin: 0 0 8px; color: var(--text-2); font-size: 0.98rem; }
.pcg-primer dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 22px; margin: 10px 0 0; }
.pcg-primer dt { font-weight: 700; color: var(--text-1); }
.pcg-primer dt a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.pcg-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 */
.pcg-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; }
.pcg-why strong:first-child { color: var(--text-1); }

.pcg-risklist { padding-left: 22px; }
.pcg-risklist li { margin: 10px 0; color: var(--text-2); }
.pcg-check { padding-left: 24px; }
.pcg-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) ────── */
.pcg-swipe, .pcg-zoom { display: none; }
.pcg-pop { display: none; }
@media (max-width: 900px) {
  .pcg-wide .pcg-swipe { display: inline-block; flex-basis: 100%; font-size: 0.82rem; color: var(--text-3); }
  .pcg-wide .ocv-real__shot { position: relative; }
  .pcg-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) {
    .pcg-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; }
  }
  .pcg-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; }
  .pcg-pop::backdrop { background: rgba(21, 2, 11, 0.7); }
  .pcg-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; }
  .pcg-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) {
  .pcg-jump a { min-height: 44px; }
  .pcg-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, .pcg-jump, .pcg-zoom, .pcg-pop, .pcg-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, .pcg-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; }
  .pcg-pair { display: block; }
  .pcg-pair .ocv-real__shot img { max-height: 5cm; }
  .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, .pcg-first5, .pcg-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) */

/* ── 20-parts.css ── */
/* Option Chain guide, page level (P1): Start here, the Cell Index gallery, the Part openers and the rhythm between sections.
   Classes are prefixed pcp-. Rules are scoped to .ocv-part, or (for rhythm only) to this guide's own sections
   under .content-main, so nothing here reaches a card owned by another part.

   THEMES. Every colour is a token. The dark values below are what the page always had; the light block restates the few that
   cannot be derived from the page tokens (scripts/guides/THEMES.md). The brand pink needs no light value: the badges and
   chips that wear it as a translucent fill in dark become the solid brand pink in light, and the mint highlight of the
   dark theme is the brand pink there (--sahi-cyan), or the direction green where it means "offered in Advanced". */

:root {
    --pcp-hl-rgb: 169, 231, 240;                     /* the highlight: mint on dark, brand pink on light (matches --sahi-cyan) */
    --pcp-pink-fill: rgba(165, 15, 102, 0.5);        /* a chip carrying a letter */
    --pcp-pink-fill-2: rgba(165, 15, 102, 0.45);
    --pcp-pink-line: rgba(254, 163, 229, 0.5);       /* its edge on hover */
    --pcp-pink-edge: rgba(254, 163, 229, 0.55);      /* its edge when it is the current one */
    --pcp-pink-wash: rgba(165, 15, 102, 0.2);        /* hover wash */
    --pcp-pink-wash-2: rgba(165, 15, 102, 0.16);
    --pcp-pink-soft: rgba(165, 15, 102, 0.2);        /* the Simple badge */
    --pcp-grad-badge: linear-gradient(150deg, rgba(165, 15, 102, 0.75), rgba(165, 15, 102, 0.18));
    --pcp-grad-group: linear-gradient(150deg, rgba(165, 15, 102, 0.7), rgba(165, 15, 102, 0.2));
    --pcp-badge-line: rgba(254, 163, 229, 0.38);
    --pcp-group-line: rgba(254, 163, 229, 0.35);
    --pcp-badge-shadow: 0 10px 30px rgba(165, 15, 102, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --pcp-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);
    --pcp-tile: rgba(255, 255, 255, 0.025);          /* a card on the page */
    --pcp-pin-halo: rgba(169, 231, 240, 0.16);
    --pcp-solid: transparent;                        /* under a gradient badge: nothing on dark, the brand pink on light */
}
:root[data-theme="light"] {
    --pcp-hl-rgb: 165, 15, 102;
    --pcp-pink-fill: #A50F66;
    --pcp-pink-fill-2: #A50F66;
    --pcp-pink-line: rgba(165, 15, 102, 0.5);
    --pcp-pink-edge: #A50F66;
    --pcp-pink-wash: rgba(165, 15, 102, 0.1);
    --pcp-pink-wash-2: rgba(165, 15, 102, 0.08);
    --pcp-pink-soft: rgba(165, 15, 102, 0.1);
    --pcp-grad-badge: linear-gradient(150deg, #A50F66, #8A1157);
    --pcp-grad-group: linear-gradient(150deg, #A50F66, #8A1157);
    --pcp-badge-line: rgba(165, 15, 102, 0.55);
    --pcp-group-line: rgba(165, 15, 102, 0.55);
    --pcp-badge-shadow: 0 10px 28px rgba(165, 15, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --pcp-part-bg:
        radial-gradient(120% 140% at 0% 0%, rgba(165, 15, 102, 0.1), transparent 55%),
        #FFFFFF;
    --pcp-tile: #FFFFFF;
    --pcp-pin-halo: rgba(165, 15, 102, 0.16);
    --pcp-solid: #A50F66;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. Rhythm between sections
   guide.css stacks a 60px divider margin, a 90px h2 margin and a 40px h2 padding: about 250px of air between two sections.
   ═══════════════════════════════════════════════════════════════════════════ */
.content-main > hr.divider { margin: 40px 0; opacity: 0.8; }
/* a part opener has its own top edge, so the divider in front of it goes */
.content-main > hr.divider:has(+ section > .ocv-part) { display: none; }
.content-main > section[id^="pc-"] > h2 { margin: 0 0 28px; padding: 0 0 18px; }
.content-main > section[id^="pc-"] > h3 { margin: 48px 0 14px; font-size: 1.28rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); }
.content-main > section[id^="pc-"] > h3:first-child { margin-top: 0; }
/* callouts: one rhythm for every green box on the page */
.content-main .callout-beginner { margin: 36px 0; padding: 26px 30px; border-radius: 16px; }
.content-main .callout-beginner > :last-child { margin-bottom: 0; }
.content-main .callout-beginner p { font-size: 1.05rem; line-height: 1.75; }
.content-main .callout-beginner :is(h3, h4) { margin-bottom: 12px; font-size: 0.9rem; }
/* the quiz */
.content-main > .quiz-section { margin-top: 72px; padding: 40px; }
.content-main > .quiz-section .quiz-q:last-of-type { margin-bottom: 0; }
@media (max-width: 768px) {
    .content-main > hr.divider { margin: 28px 0; }
    .content-main > section[id^="pc-"] > h2 { margin: 0 0 20px; padding: 0 0 14px; }
    .content-main > section[id^="pc-"] > h3 { margin: 36px 0 12px; font-size: 1.18rem; }
    .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. Part openers (Parts A to E)
   ═══════════════════════════════════════════════════════════════════════════ */
.ocv-part.pcp-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: 64px 0 36px; padding: 28px 30px 20px;
    border: 1px solid var(--border-soft); border-radius: 22px;
    background: var(--pcp-part-bg);
    font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2);
}
.pcp-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(--pcp-grad-badge); background-color: var(--pcp-solid);
    border: 1px solid var(--pcp-badge-line);
    box-shadow: var(--pcp-badge-shadow);
}
.pcp-part__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ocv-part.pcp-part .ocv-part__k { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahi-cyan); }
.pcp-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; }
.pcp-part__promise { max-width: 54ch; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.pcp-part__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.pcp-part__meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 2px; border-radius: 50%; background: var(--text-3); }
.pcp-part__thumbs { grid-area: thumbs; display: flex; gap: 8px; align-items: center; }
.pcp-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); }
.pcp-rail { grid-area: rail; display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px dashed rgba(var(--ink-rgb), 0.14); }
.pcp-rail::before { content: "Parts"; margin-right: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.pcp-rail__i {
    display: grid; place-items: center; width: 36px; height: 36px; 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);
}
.content-main .pcp-rail a.pcp-rail__i { text-decoration: none; color: var(--text-2); font-weight: 800; }
.content-main .pcp-rail a.pcp-rail__i:hover { color: var(--text-1); border-color: var(--pcp-pink-line); background: var(--pcp-pink-wash); }
.pcp-rail__i.is-here { color: var(--on-accent); border-color: var(--pcp-pink-edge); background: var(--pcp-pink-fill); }
@media (max-width: 900px) {
    .ocv-part.pcp-part { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "badge body" "thumbs thumbs" "rail rail"; padding: 24px 22px 18px; gap: 18px 20px; }
    .pcp-part__badge { width: 80px; height: 80px; border-radius: 22px; font-size: 3.1rem; }
    .pcp-part__thumbs { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .ocv-part.pcp-part { grid-template-columns: 56px minmax(0, 1fr); margin: 44px 0 26px; padding: 18px 16px 14px; gap: 14px 14px; border-radius: 18px; }
    .pcp-part__badge { width: 56px; height: 56px; border-radius: 16px; font-size: 2.2rem; }
    .pcp-part__title { font-size: 1.35rem; }
    .pcp-part__promise { font-size: 0.9375rem; }
    .pcp-part__thumb { height: 64px; max-width: 30vw; }
    .pcp-rail { gap: 6px; padding-top: 12px; }
    .pcp-rail__i { width: 40px; height: 40px; }
}

/* ── 30-pieces.css ── */
/* PCR guide: the guide's own pieces (ratio scale, worked-calculation card, stage cards, time list). Tokens only, so both themes follow. */

.pcg-scale { margin: 22px 0; padding: 16px 20px 18px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.pcg-scale__bar { display: grid; grid-template-columns: 1fr 0.45fr 1fr; height: 14px; border-radius: 999px; overflow: hidden; margin: 12px 0 8px; }
.pcg-scale__bar > i { display: block; }
.pcg-scale__bar > i:nth-child(1) { background: var(--toast-negative-text); opacity: 0.85; }
.pcg-scale__bar > i:nth-child(2) { background: rgba(var(--ink-rgb), 0.22); }
.pcg-scale__bar > i:nth-child(3) { background: var(--toast-positive-text); opacity: 0.85; }
.pcg-scale__ticks, .pcg-scale__words { display: grid; grid-template-columns: 1fr 0.45fr 1fr; }
.pcg-scale__ticks { font-size: 0.82rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pcg-scale__ticks > span:nth-child(2), .pcg-scale__words > span:nth-child(2) { text-align: center; }
.pcg-scale__ticks > span:nth-child(3), .pcg-scale__words > span:nth-child(3) { text-align: right; }
.pcg-scale__words { margin-top: 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pcg-scale__words > span:nth-child(1) { color: var(--pcg-down-ink); }
.pcg-scale__words > span:nth-child(2) { color: var(--text-3); }
.pcg-scale__words > span:nth-child(3) { color: var(--toast-positive-text); }
.pcg-scale > figcaption { margin-top: 10px; color: var(--text-3); font-size: 0.88rem; }

.pcg-calc { margin: 20px 0; padding: 14px 20px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); font-variant-numeric: tabular-nums; }
.pcg-calc__row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 5px 0; color: var(--text-2); }
.pcg-calc__row + .pcg-calc__row { border-top: 1px dashed rgba(var(--ink-rgb), 0.14); }
.pcg-calc__row b { color: var(--text-1); }
.pcg-calc__row .pcg-eq { margin-left: auto; font-weight: 700; color: var(--text-1); }
.pcg-tag { display: inline-block; padding: 1px 9px; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; background: var(--surface); white-space: nowrap; color: var(--text-2); }
.pcg-tag.is-up { color: var(--toast-positive-text); }
.pcg-tag.is-down { color: var(--pcg-down-ink); }

.pcg-times { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0; padding: 14px 18px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.pcg-times dt { font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.pcg-times dd { margin: 0; color: var(--text-2); }
@media (max-width: 560px) { .pcg-times { grid-template-columns: 1fr; } .pcg-times dd { margin-bottom: 8px; } }

/* a quiet lift on hover for the cards; nothing for readers who ask for less motion */
@media (prefers-reduced-motion: no-preference) {
  .pcg-stages > li, .pcg-calc, .pcg-first5 { transition: transform 0.18s ease, border-color 0.18s ease; }
  .pcg-stages > li:hover, .pcg-first5:hover { transform: translateY(-2px); border-color: var(--sahi-accent-ink); }
  .pcg-scale__bar > i { transform-origin: left; animation: pcg-grow 0.7s ease both; }
  .pcg-scale__bar > i:nth-child(2) { animation-delay: 0.15s; }
  .pcg-scale__bar > i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes pcg-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pcg-kinds { min-width: 820px; }
.pcg-wide-table { min-width: 720px; }
.pcg-first5, .pcg-route, .pcg-primer { margin: 22px 0; padding: 16px 20px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.pcg-first5 > h3, .pcg-route > h3, .pcg-primer > h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--text-1); }
.pcg-first5 { }
.guide-table-wrap a, .guide-table-wrap a.pcg-nv { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
:root { --pcg-down-ink: #EE807B; }
:root[data-theme="light"] { --pcg-down-ink: var(--toast-negative-text); }

/* ── 40-skin.css ── */
/* PCR guide: the visual layer that matches the Option Chain, Options Scanner and Strategy Builder guides (hero strip, part
   openers with the questions each topic answers, numbered step cards, figure frames with tag and Look-at bar, callouts, tables,
   reveals). Ported from strategy-builder-css/20-skin.css. Tokens only: the translucent brand fills are the --pcp-* ones in
   20-parts.css, dark and light. Motion is transform, opacity and stroke, behind prefers-reduced-motion: no-preference, on the
   existing data-aos reveal (.aos-in). Prefix pcp- (page), pcg- (earlier rules). */

:root { --pcp-sheen: rgba(255, 255, 255, 0.07); }
:root[data-theme="light"] { --pcp-sheen: rgba(165, 15, 102, 0.08); }

/* ═══ 1. rhythm between sections (same as the Option Chain guide) ═══ */
.content-main > hr.divider { margin: 40px 0; opacity: 0.8; }
.content-main > hr.divider:has(+ section > .pcp-part), .content-main > hr.divider:has(+ section > .pcp-hero) { display: none; }
.content-main > section[id^="pc-"] > h2 { margin: 0 0 22px; padding: 0 0 18px; }
.content-main > section[id^="pc-"] > h3 { margin: 48px 0 14px; font-size: 1.28rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); }
.content-main > section[id^="pc-"] > h3:first-child { margin-top: 0; }
.content-main .callout-beginner { margin: 36px 0; padding: 26px 30px; border-radius: 16px; }
.content-main .callout-beginner > :last-child { margin-bottom: 0; }
.content-main .callout-beginner p { font-size: 1.05rem; line-height: 1.75; }
.content-main > .quiz-section { margin-top: 72px; padding: 40px; }
@media (max-width: 768px) {
    .content-main > hr.divider { margin: 28px 0; }
    .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; }
}

/* heading underline: a short accent bar draws under every section heading */
.content-main > section[id^="pc-"] > h2 { position: relative; }
.content-main > section[id^="pc-"] > 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; }
@media (prefers-reduced-motion: no-preference) {
    .js .content-main > section[id^="pc-"]:not(.aos-in) > h2::after { transform: scaleX(0); }
    .js .content-main > section[id^="pc-"] > h2::after { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
}

/* the question under a heading becomes a pill-style line */
.pcg-ask { padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(var(--ink-rgb), 0.03); }

/* ═══ 2. the hero strip: what you will learn, and the numbers ═══ */
.pcp-hero { display: grid; gap: 18px; margin: 0 0 40px; padding: 22px 24px; border: 1px solid var(--border-soft); border-radius: 22px; background: var(--pcp-part-bg); }
.pcp-learn__k, .pcp-part__k { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahi-cyan); }
.pcp-learn ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pcp-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(--pcp-tile); color: var(--text-1); 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 .pcp-learn a { color: var(--text-1); text-decoration: none; }
.pcp-learn a:hover { transform: translateY(-2px); border-color: var(--pcp-pink-line); background: var(--pcp-pink-wash); }
.pcp-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pcp-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(--pcp-tile); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; }
.content-main .pcp-nums a { color: var(--text-2); text-decoration: none; }
.pcp-nums a:hover { transform: translateY(-3px); border-color: rgba(var(--pcp-hl-rgb), 0.5); }
.pcp-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; }
.pcp-nums span { font-size: 0.9rem; line-height: 1.35; color: var(--text-2); }
@media (max-width: 700px) { .pcp-hero { padding: 18px 16px; } .pcp-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ 3. part openers ═══ */
.ocv-part.pcp-part {
    position: relative; display: grid; overflow: hidden;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    grid-template-areas: "badge body thumbs" "qs qs qs" "rail rail rail";
    gap: 22px 26px; align-items: center;
    margin: 0 0 36px; padding: 28px 30px 20px;
    border: 1px solid var(--border-soft); border-radius: 22px; background: var(--pcp-part-bg);
}
.content-main > section[id^="pc-"] > .ocv-part.pcp-part:first-child { margin-top: 24px; }
.pcp-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(--pcp-grad-badge); background-color: var(--pcp-solid); border: 1px solid var(--pcp-badge-line); box-shadow: var(--pcp-badge-shadow);
}
.pcp-part__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pcp-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; }
.pcp-part__promise { max-width: 56ch; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.pcp-part__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.pcp-part__meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 2px; border-radius: 50%; background: var(--text-3); }
.pcp-part__thumbs { grid-area: thumbs; display: flex; gap: 8px; align-items: center; }
.pcp-part__thumb { display: block; flex: none; width: 128px; max-width: 128px; height: 86px; object-fit: cover; object-position: left top; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--real-frame); }
.pcp-part__qs { grid-area: qs; border-top: 1px dashed rgba(var(--ink-rgb), 0.14); padding-top: 12px; }
.pcp-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); }
.pcp-part__qs > summary:hover { color: var(--text-1); }
.pcp-part__qs ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--text-2); font-size: 0.95rem; }
.content-main .pcp-part__qs a { color: var(--text-2); text-decoration: none; }
.content-main .pcp-part__qs a:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.pcp-rail { grid-area: rail; display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px dashed rgba(var(--ink-rgb), 0.14); }
.pcp-rail::before { content: "Parts"; margin-right: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.pcp-rail__i { display: grid; place-items: center; width: 36px; height: 36px; 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.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.content-main .pcp-rail a.pcp-rail__i { text-decoration: none; color: var(--text-2); font-weight: 800; }
.content-main .pcp-rail a.pcp-rail__i:hover { transform: translateY(-2px); color: var(--text-1); border-color: var(--pcp-pink-line); background: var(--pcp-pink-wash); }
.pcp-rail__i.is-here { color: var(--on-accent); border-color: var(--pcp-pink-edge); background: var(--pcp-pink-fill); }
@media (prefers-reduced-motion: no-preference) {
    .pcp-part__badge { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
    .ocv-part.pcp-part:hover .pcp-part__badge { transform: rotate(-4deg) scale(1.05); }
    .js .pcp-part[data-aos]:not(.aos-in) .pcp-part__thumb { opacity: 0; transform: translateY(10px); }
    .pcp-part__thumb { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .pcp-part__thumb:nth-child(2) { transition-delay: 0.1s; }
    .pcp-part__thumb:nth-child(4) { transition-delay: 0.1s; }
    .pcp-part__thumb:nth-child(3), .pcp-part__thumb:nth-child(6) { transition-delay: 0.2s; }
}
@media (max-width: 900px) {
    .ocv-part.pcp-part { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "badge body" "thumbs thumbs" "qs qs" "rail rail"; padding: 24px 22px 18px; gap: 18px 20px; }
    .pcp-part__badge { width: 80px; height: 80px; border-radius: 22px; font-size: 3.1rem; }
    .pcp-part__thumbs { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .ocv-part.pcp-part { grid-template-columns: 56px minmax(0, 1fr); margin: 0 0 26px; padding: 18px 16px 14px; gap: 14px; border-radius: 18px; }
    .pcp-part__badge { width: 56px; height: 56px; border-radius: 16px; font-size: 2.2rem; }
    .pcp-part__title { font-size: 1.35rem; }
    .pcp-part__promise { font-size: 0.9375rem; }
    .pcp-part__thumb { width: 28vw; max-width: 28vw; height: 64px; }
    .pcp-rail { gap: 6px; padding-top: 12px; }
    .pcp-rail__i { width: 40px; height: 40px; }
    .pcp-part__qs > summary { min-height: 44px; }
}

/* ═══ 4. numbered step cards with a connecting progress line ═══ */
.pcg-steps { gap: 18px; margin: 28px 0; }
.pcg-steps > li { padding: 20px 22px 20px 70px; border-radius: 18px; background: var(--pcp-tile); transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.pcg-steps > li:hover { border-color: var(--pcp-pink-line); }
.pcg-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; }
/* the line runs from this step's number to the next one's, across the gap */
.pcg-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; }
.pcg-steps > li > h3 { font-size: 1.15rem; margin-bottom: 8px; }
@media (prefers-reduced-motion: no-preference) {
    .js .pcg-steps > li[data-aos]:not(.aos-in)::after { transform: scaleY(0); }
    .js .pcg-steps > li::after { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
    .js .pcg-steps > li[data-aos]:not(.aos-in)::before { transform: scale(0.6); }
    .js .pcg-steps > li::before { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s; }
}
@media (max-width: 560px) {
    .pcg-steps > li { padding: 16px; }
    .pcg-steps > li::before { position: static; margin-bottom: 10px; }
    .pcg-steps > li:not(:last-child)::after { display: none; }
}

/* ═══ 5. figure frames: the Option Chain guide's feel ═══ */
section[id^="pc-"] .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^="pc-"] .ocv-real__bar { padding: 11px 18px; background: rgba(var(--ink-rgb), 0.04); }
section[id^="pc-"] .ocv-real__tag { display: inline-flex; align-items: center; gap: 8px; }
section[id^="pc-"] .ocv-real__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sahi-cyan); box-shadow: 0 0 0 3px rgba(var(--pcp-hl-rgb), 0.2); }
section[id^="pc-"] .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^="pc-"] .ocv-real__cap strong:first-child { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(var(--pcp-hl-rgb), 0.14); color: var(--sahi-cyan); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* a sheen sweeps across on hover */
section[id^="pc-"] .ocv-real::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, var(--pcp-sheen) 50%, transparent 62%); transform: translateX(-120%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    section[id^="pc-"] .ocv-real:hover { transform: translateY(-4px); border-color: rgba(var(--pcp-hl-rgb), 0.4); box-shadow: 0 18px 48px rgba(var(--shade-ch), calc(0.34 * var(--k-shadow))); }
    section[id^="pc-"] .ocv-real:hover::after { transform: translateX(120%); transition: transform 0.9s ease; }
}
/* ungrouped figures stay static: only a figure that carries its own data-aos fades in */
@media (prefers-reduced-motion: no-preference) {
    .js figure.ocv-real[data-aos]:not(.aos-in) { transform: translateY(18px) scale(0.99); }
}

/* ═══ 8. callouts and boxes: the icon beside the heading ═══ */
.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; }
.pcg-why, .pcg-first5, .pcg-route, .pcg-primer, .pcg-look { border-radius: 14px; }
.pcg-why { border-left-width: 4px; background: var(--pcp-tile); }
.pcg-first5 { background: var(--pcp-tile); }
.pcg-first5 > h3::before, .pcg-why strong:first-child::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--sahi-positive); color: var(--sahi-bg-0); font-size: 0.75rem; font-weight: 800; vertical-align: 1px; }
.pcg-why strong:first-child::before { background: var(--sahi-accent-ink); }
.trading-example { border-radius: 14px; }
.pcg-risklist { list-style: none; padding-left: 0; display: grid; gap: 10px; counter-reset: pcr; }
.pcg-risklist > li { counter-increment: pcr; position: relative; margin: 0; padding: 12px 16px 12px 54px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--pcp-tile); }
.pcg-risklist > li::before { content: counter(pcr); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--sahi-negative); color: var(--toast-negative-text); font-size: 0.85rem; font-weight: 800; }
.pcg-q { border-radius: 14px; transition: border-color 0.2s ease; }
.pcg-q:hover, .pcg-q[open] { border-color: var(--pcp-pink-line); }
.pcg-jump a { transition: transform 0.2s ease, border-color 0.2s ease; }
.pcg-jump a:hover { transform: translateY(-2px); }
.guide-table tbody tr { transition: background-color 0.2s ease; }
.guide-table tbody tr:hover { background: rgba(var(--ink-rgb), 0.04); }

/* ── 50-skin-more.css ── */
/* PCR guide, visual layer part 2 (after 40-skin.css): example cards, small boxes, opener thumbnails, motion off and print. Tokens only. */

.pcg-regions > li, .pcg-stages > li, .pcg-calc, .pcg-scale, .pcg-times { background: var(--pcp-tile); }
.pcg-regions > li, .pcg-stages > li { border-radius: 14px; }
.pcg-risklist { list-style: none; padding-left: 0; display: grid; gap: 10px; counter-reset: pcrk; }
.pcg-risklist > li { counter-increment: pcrk; position: relative; margin: 0; padding: 12px 16px 12px 54px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--pcp-tile); }
.pcg-risklist > li::before { content: counter(pcrk); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--sahi-negative); color: var(--toast-negative-text); font-size: 0.85rem; font-weight: 800; }
.guide-table-wrap { border-radius: 14px; }

/* the opener's thumbnails: a fixed window onto the top-left of each picture, whatever its shape */
.ocv-part.pcp-part .pcp-part__thumb { flex: none; width: 128px; max-width: 128px; height: 86px; object-fit: cover; object-position: left top; }
@media (max-width: 560px) { .ocv-part.pcp-part .pcp-part__thumbs { width: 100%; } .ocv-part.pcp-part .pcp-part__thumb { flex: 1 1 0; min-width: 0; width: auto; max-width: none; height: 64px; } }

@media (prefers-reduced-motion: reduce) {
    .pcp-learn a, .pcp-nums a, .pcg-ex, .pcg-facts > li, .ocv-real { transition: none !important; }
    .pcp-learn a:hover, .pcp-nums a:hover { transform: none; }
}
@media print {
    .pcp-hero, .pcp-rail, .pcp-part__thumbs, .pcp-part__qs { display: none !important; }
    .ocv-part.pcp-part { display: block; padding: 8px 0; border: 0; background: none; margin: 0 0 8px; }
    .pcp-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; }
    .pcg-steps > li::after, section[id^="pc-"] .ocv-real::after { display: none; }
}