/* ── 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 ── */
/* Options Scanner guide: page-specific pieces. The real-capture frame is shared (shared-css/real-figures.css); colours are tokens. */

/* A short "how to read it" list under a figure */
section[id^="os-"] .osg-look { margin: 8px 0 18px; padding-left: 20px; }
section[id^="os-"] .osg-look li { margin: 6px 0; }

/* Figures keep their natural width and never push the page sideways */
section[id^="os-"] .osg-fig { max-width: 100%; }
section[id^="os-"] .osg-fig .ocv-real__shot img { height: auto; }
section[id^="os-"] .osg-row { align-items: start; }
/* The scan pickers are wide, short strips: one under another, so each stays at a readable size */
section[id^="os-"] .osg-row:has(img[src*="scanpick"]) { grid-template-columns: minmax(0, 1fr); }

/* A definition list for the glossary and for "what each control does" */
section[id^="os-"] .osg-dl { margin: 14px 0 22px; display: grid; gap: 0; border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; background: var(--surface); }
section[id^="os-"] .osg-dl > div { display: grid; grid-template-columns: minmax(150px, 0.34fr) 1fr; gap: 6px 18px; padding: 12px 18px; border-top: 1px solid var(--rule); }
section[id^="os-"] .osg-dl > div:first-child { border-top: 0; }
section[id^="os-"] .osg-dl dt { font-weight: 700; color: var(--text-1); }
section[id^="os-"] .osg-dl dd { margin: 0; color: var(--text-2); }
@media (max-width: 640px) { section[id^="os-"] .osg-dl > div { grid-template-columns: minmax(0, 1fr); } }

/* Tables of controls and columns may be wide: they scroll inside their own wrap (guide-table-wrap), the page never does */
section[id^="os-"] .guide-table td, section[id^="os-"] .guide-table th { vertical-align: top; }
section[id^="os-"] .osg-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A paragraph holding a long link must wrap (it pushed the page sideways between 1024 and 360 px) */
section[id^="os-"] p.osg-mono { white-space: normal; }
section[id^="os-"] p.osg-mono code { white-space: normal; overflow-wrap: anywhere; word-break: break-all; }

/* Build-up badges: the shared tints sit at 4.2-4.5:1 on their own wash; lead the text colour towards the body text colour (this guide only) */
section[id^="os-"] .signal-badge.sb-short { color: color-mix(in srgb, var(--bu-short-build) 72%, var(--text-1)); }
section[id^="os-"] .signal-badge.sb-unwind { color: color-mix(in srgb, var(--bu-long-unwind) 72%, var(--text-1)); }

/* "Needs verification" marker */
section[id^="os-"] .osg-nv { display: inline-block; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border-glow); background: var(--accent-wash); color: var(--sahi-accent-ink); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }

/* FAQ blocks inside the guide */
section[id^="os-"] .osg-qa { margin: 18px 0; padding: 0 0 4px; border-bottom: 1px solid var(--rule); }
section[id^="os-"] .osg-qa h3 { margin: 0 0 6px; font-size: 1.05rem; }
section[id^="os-"] .osg-qa p { margin: 0 0 10px; }

/* On a phone a wide capture keeps a readable size and scrolls inside its own frame; the page never scrolls sideways */
@media (max-width: 640px) {
  section[id^="os-"] .osg-fig .ocv-real__shot { justify-content: flex-start; padding: 12px; }
  /* narrow captures (440px or less) shrink to the frame; wide ones keep a readable size and scroll */
  section[id^="os-"] .osg-fig .ocv-real__shot img { max-width: none; width: min(var(--real-w), 760px, max(100%, calc((var(--real-w) - 440px) * 1000))); }
}

/* A section opens with the question it answers */
section[id^="os-"] .osg-ask { margin: 0 0 14px; font-size: 1.05rem; font-weight: 600; color: var(--text-1); }
section[id^="os-"] .osg-ask span { display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 10px; border: 1px solid var(--border-glow); background: var(--accent-wash); color: var(--sahi-accent-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; }

/* Callouts use h3 (never a level jump from h2): same look as the shared h4 callout title */
section[id^="os-"] .callout-beginner h3 { margin: 0 0 10px; color: var(--sahi-positive); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
section[id^="os-"] .osg-first ol { margin: 8px 0 12px; padding-left: 22px; }
section[id^="os-"] .osg-first li { margin: 6px 0; }

/* A term's first use links to the glossary; a mark for something not yet confirmed links to the one box that lists it */
section[id^="os-"] a.osg-term { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
section[id^="os-"] a.osg-nv { text-decoration: none; }
section[id^="os-"] a.osg-nv:hover, section[id^="os-"] a.osg-nv:focus-visible { text-decoration: underline; }
section[id^="os-"] a.osg-nv::before { content: "? "; }
section[id^="os-"] :target { scroll-margin-top: 90px; }
section[id^="os-"] tr:target td, section[id^="os-"] dt:target { background: var(--accent-wash); }

/* Scroll hint: a soft edge on the side that has more */
.guide-table-wrap:focus-visible, .ocv-real__shot:focus-visible { outline: 2px solid var(--sahi-accent-ink); outline-offset: 2px; }
.guide-table-wrap.osg-more-r, .osg-fig .ocv-real__shot.osg-more-r { -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 36px), transparent); mask-image: linear-gradient(to right, currentColor calc(100% - 36px), transparent); }
.guide-table-wrap.osg-more-l, .osg-fig .ocv-real__shot.osg-more-l { -webkit-mask-image: linear-gradient(to left, currentColor calc(100% - 36px), transparent); mask-image: linear-gradient(to left, currentColor calc(100% - 36px), transparent); }
.guide-table-wrap.osg-more-r.osg-more-l, .osg-fig .ocv-real__shot.osg-more-r.osg-more-l { -webkit-mask-image: linear-gradient(to right, transparent, currentColor 36px, currentColor calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, currentColor 36px, currentColor calc(100% - 36px), transparent); }

/* Figure viewer */
section[id^="os-"] .osg-zoom { margin-left: auto; min-height: 32px; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border-glow); background: var(--accent-wash); color: var(--sahi-accent-ink); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
section[id^="os-"] .osg-fig .ocv-real__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
section[id^="os-"] .osg-fig .ocv-real__shot img { cursor: zoom-in; }
@media (pointer: coarse) { section[id^="os-"] .osg-zoom { min-height: 44px; padding: 8px 16px; } }
.osg-lb { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: var(--sahi-bg-0); }
.osg-lb__close { align-self: flex-end; margin: 12px 16px; min-height: 44px; padding: 8px 20px; border-radius: 22px; border: 1px solid var(--border-glow); background: var(--accent-wash); color: var(--sahi-accent-ink); font: inherit; font-weight: 700; cursor: pointer; }
.osg-lb__box { flex: 1; overflow: auto; padding: 0 16px 24px; -webkit-overflow-scrolling: touch; }
.osg-lb__box img { display: block; max-width: none; height: auto; margin: 0 auto; }
html.osg-lb-open { overflow: hidden; }

/* Print: light pictures only, the table of contents and viewers hidden, figures and tables sized to the paper */
@media print {
  section[id^="os-"] [data-aos] { opacity: 1 !important; transform: none !important; }
  img.is-dark { display: none !important; }
  img.is-light { display: inline !important; }
  .osg-zoom, .osg-lb, .toc-container, nav.guide-crumbs { display: none !important; }
  .guide-table-wrap, .osg-fig .ocv-real__shot { overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  section[id^="os-"] .guide-table { min-width: 0 !important; width: 100% !important; font-size: 8pt; }
  section[id^="os-"] .guide-table td, section[id^="os-"] .guide-table th { padding: 3pt 4pt; }
  section[id^="os-"] .osg-fig { break-inside: avoid; margin: 6pt 0; }
  section[id^="os-"] .osg-fig .ocv-real__shot img { width: auto !important; max-width: 100% !important; max-height: 85mm; height: auto !important; }
  section[id^="os-"] .osg-row { display: block; }
  section[id^="os-"] .osg-fig .ocv-real__shot { padding: 4pt; }
  section[id^="os-"] .scenario-grid, section[id^="os-"] .osg-dl { break-inside: auto; }
  section[id^="os-"] .osg-dl > div { grid-template-columns: 30% 1fr; padding: 4pt 8pt; }
  section[id^="os-"] h2, section[id^="os-"] h3 { break-after: avoid; }
}

/* ── 10-skin.css ── */
/* Options Scanner guide, visual layer: the Option Chain guide's design language (part openers, step cards, hero, figure frames,
   tables, callouts, motion), adapted. Tokens only; badge gradients are the accent token mixed with transparent. Motion is
   transform and opacity, gated on no-preference. */

/* ── Rhythm ─────────────────────────────────────────────────────────────── */
.content-main > hr.divider { margin: 40px 0; opacity: 0.8; }
.content-main > hr.divider:has(+ section > .osg-part) { display: none; }
.content-main > section[id^="os-"] > h2 { margin: 0 0 28px; padding: 0 0 18px; position: relative; }
.content-main > section[id^="os-"] > h3 { margin: 44px 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^="os-"] > h3:first-child { margin-top: 0; }
.content-main section[id^="os-"] .callout-beginner { margin: 32px 0; }
@media (max-width: 768px) {
  .content-main > hr.divider { margin: 28px 0; }
  .content-main > section[id^="os-"] > h2 { margin: 0 0 20px; padding: 0 0 14px; }
  .content-main > section[id^="os-"] > h3 { margin: 34px 0 12px; font-size: 1.18rem; }
}

/* ── Part openers ───────────────────────────────────────────────────────── */
section[id^="os-"] .osg-part {
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "k body" "rail rail";
  gap: 20px 26px; align-items: center; overflow: hidden;
  margin: 56px 0 34px; padding: 28px 30px 20px;
  border: 1px solid var(--border-soft); border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sahi-accent) 20%, transparent), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--sahi-cyan) 7%, transparent), transparent 60%),
    var(--surface);
}
section[id^="os-"] .osg-part--plain { grid-template-areas: "k body"; padding-bottom: 28px; }
section[id^="os-"] .osg-part__k {
  grid-area: k; grid-row: auto; 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: linear-gradient(150deg, color-mix(in srgb, var(--sahi-accent) 78%, transparent), color-mix(in srgb, var(--sahi-accent) 20%, transparent));
  border: 1px solid var(--border-glow); box-shadow: 0 10px 30px color-mix(in srgb, var(--sahi-accent) 28%, transparent), inset 0 1px 0 rgba(var(--ink-rgb), 0.14);
}
:root[data-theme="light"] section[id^="os-"] .osg-part__k { background-color: var(--sahi-accent); background-image: none; }
section[id^="os-"] .osg-part--plain .osg-part__k { font-size: 3rem; }
section[id^="os-"] .osg-part__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
section[id^="os-"] .osg-part__eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahi-cyan); }
section[id^="os-"] .osg-part__t { margin: 0; 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-transform: none; text-wrap: balance; }
section[id^="os-"] .osg-part__q { margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.55; font-weight: 400; color: var(--text-2); }
section[id^="os-"] .osg-part__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
section[id^="os-"] .osg-part__meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 2px; border-radius: 50%; background: var(--text-3); }
section[id^="os-"] .osg-rail { grid-area: rail; display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px dashed rgba(var(--ink-rgb), 0.14); }
section[id^="os-"] .osg-rail__lab { margin-right: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.content-main .osg-rail a.osg-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, color 0.2s ease;
}
.content-main .osg-rail a.osg-rail__i:hover, .content-main .osg-rail a.osg-rail__i:focus-visible { color: var(--text-1); border-color: var(--border-glow); background: var(--accent-wash); transform: translateY(-2px); }
.content-main .osg-rail a.osg-rail__i.is-here { color: var(--on-accent); border-color: var(--border-glow); background: var(--sahi-accent); }
@media (max-width: 560px) {
  section[id^="os-"] .osg-part { grid-template-columns: 56px minmax(0, 1fr); margin: 44px 0 26px; padding: 18px 16px 14px; gap: 14px; border-radius: 18px; }
  section[id^="os-"] .osg-part__k, section[id^="os-"] .osg-part--plain .osg-part__k { width: 56px; height: 56px; border-radius: 16px; font-size: 2.2rem; }
  section[id^="os-"] .osg-part__t { font-size: 1.35rem; }
  section[id^="os-"] .osg-part__q { font-size: 0.9375rem; }
  .content-main .osg-rail a.osg-rail__i { width: 40px; height: 40px; }
}

/* ── Step cards ─────────────────────────────────────────────────────────── */
section[id^="os-"] .osg-step {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin: 44px 0 14px; padding: 12px 18px 12px 12px;
  border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); position: relative; overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

section[id^="os-"] .osg-step h3 { margin: 0; font-size: 1.18rem; line-height: 1.3; letter-spacing: -0.01em; }
section[id^="os-"] .osg-n {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px;
  border: 1px solid var(--border-glow); color: var(--on-accent); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sahi-accent) 78%, transparent), color-mix(in srgb, var(--sahi-accent) 24%, transparent));
}
:root[data-theme="light"] section[id^="os-"] .osg-n { background-color: var(--sahi-accent); background-image: none; }
section[id^="os-"] .osg-step:hover { border-color: var(--border-glow); }
@media (max-width: 560px) { section[id^="os-"] .osg-step { gap: 10px; padding: 10px 12px 10px 10px; margin: 34px 0 12px; } section[id^="os-"] .osg-step h3 { font-size: 1.05rem; } }

/* ── Hero: what you will learn, and the numbers ─────────────────────────── */
.osg-hero { margin: 4px 0 40px; padding: 26px 28px; border: 1px solid var(--border-soft); border-radius: 22px; position: relative; overflow: hidden;
  background: radial-gradient(110% 130% at 0% 0%, color-mix(in srgb, var(--sahi-accent) 16%, transparent), transparent 55%), var(--surface); }
.osg-hero__lab { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahi-cyan); }
.osg-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.content-main .osg-chips a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 16px 6px 8px; border-radius: 999px; text-decoration: none;
  font-size: 0.9375rem; font-weight: 600; color: var(--text-1); 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;
}
.osg-chips a span { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; font-size: 0.8125rem; font-weight: 800; color: var(--on-accent); background: var(--sahi-accent); }
.content-main .osg-chips a:hover, .content-main .osg-chips a:focus-visible { transform: translateY(-2px); border-color: var(--border-glow); background: var(--accent-wash); }
.osg-keys { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.osg-keys > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03); }
.osg-keys dt { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.05; color: var(--text-1); font-variant-numeric: tabular-nums; }
.osg-keys dd { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--text-3); }
@media (max-width: 760px) { .osg-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } .osg-hero { padding: 20px 16px; border-radius: 18px; } }
@media (max-width: 360px) { .osg-keys { grid-template-columns: minmax(0, 1fr); } }

/* ── Figure frames: the chain guide's feel ──────────────────────────────── */
section[id^="os-"] .osg-fig { position: relative; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease; }
section[id^="os-"] .osg-fig .ocv-real__bar { position: relative; overflow: hidden; padding: 12px 18px; }
section[id^="os-"] .osg-fig .ocv-real__tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--sahi-cyan); }
section[id^="os-"] .osg-fig .ocv-real__cap { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.025); }
section[id^="os-"] .osg-fig .ocv-real__cap strong { color: var(--sahi-cyan); letter-spacing: 0.04em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  section[id^="os-"] .osg-fig.aos-in:hover { transform: translateY(-3px); border-color: var(--border-glow); box-shadow: 0 16px 44px rgba(var(--shade-ch), calc(0.35 * var(--k-shadow))); }
  section[id^="os-"] .osg-fig .ocv-real__bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%); transition: transform 0.9s ease; background: linear-gradient(100deg, transparent 30%, rgba(var(--ink-rgb), 0.07) 50%, transparent 70%); }
  section[id^="os-"] .osg-fig:hover .ocv-real__bar::after { transform: translateX(100%); }
}

/* ── Tables: the chain guide's look, plus a row hover ───────────────────── */
section[id^="os-"] .guide-table-wrap { border-radius: 16px; box-shadow: inset 0 1px 0 rgba(var(--ink-rgb), 0.05); }
section[id^="os-"] .guide-table thead th { color: var(--sahi-cyan); border-bottom: 1px solid var(--border-glow); }
section[id^="os-"] .guide-table tbody td:first-child { color: var(--text-1); font-weight: 600; }
section[id^="os-"] .guide-table tbody tr { transition: background-color 0.2s ease; }
section[id^="os-"] .guide-table tbody tr:hover td { background: rgba(var(--ink-rgb), 0.035); }
section[id^="os-"] .guide-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--sahi-cyan); }

/* ── Callouts: an icon and an edge accent ───────────────────────────────── */
section[id^="os-"] .callout-beginner { position: relative; padding-left: 62px; }
section[id^="os-"] .callout-beginner::before {
  content: "\2713"; position: absolute; left: 18px; top: 22px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.95rem; font-weight: 800; color: var(--on-positive); background: var(--sahi-positive);
}
@media (max-width: 560px) { section[id^="os-"] .callout-beginner { padding-left: 52px; } section[id^="os-"] .callout-beginner::before { left: 12px; width: 28px; height: 28px; } }

/* ── Motion: heading underline, chips, staggered figures ────────────────── */
section[id^="os-"] h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 88px; height: 2px; background: var(--sahi-cyan); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js section[id^="os-"] h2::after { transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
  .js section[id^="os-"] h2.osg-in::after { transform: scaleX(1); }
  .js .osg-hero .osg-chips li { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .osg-hero.aos-in .osg-chips li { opacity: 1; transform: none; }
  .js .osg-hero.aos-in .osg-chips li:nth-child(2) { transition-delay: 0.08s; }
  .js .osg-hero.aos-in .osg-chips li:nth-child(3) { transition-delay: 0.16s; }
  .js .osg-hero.aos-in .osg-chips li:nth-child(4) { transition-delay: 0.24s; }
  .js .osg-hero.aos-in .osg-chips li:nth-child(5) { transition-delay: 0.32s; }
  .js section[id^="os-"] .osg-row > .osg-fig:nth-child(2) { transition-delay: 0.1s, 0s, 0s, 0s; }
  .js section[id^="os-"] .osg-row > .osg-fig:nth-child(3) { transition-delay: 0.2s, 0s, 0s, 0s; }
}

@media print {
  .osg-hero, section[id^="os-"] .osg-part { break-inside: avoid; background: none; }
  .osg-chips li { opacity: 1 !important; transform: none !important; }
  section[id^="os-"] h2::after { transform: none !important; }
  .osg-rail { display: none; }
  section[id^="os-"] .osg-fig { transform: none !important; }
}