/* Spider 4M story composition: shared launch components + Orange Bat QC page modules (obqc-launch.css). */
.sp-launch .ob-qc-mark { letter-spacing:-.04em; }

/* 01 Anatomy: numbered markers on the studio frame, synced with the list. */
.sp-launch .sp-anatomy-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sp-launch .sp-anatomy-figure { max-width:520px; justify-self:center; width:100%; }
.sp-launch .sp-anatomy-figure { position:relative; }
.sp-launch .sp-anatomy-figure img { display:block; width:100%; height:auto; }
.sp-launch .sp-marker { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; padding:0; border:2px solid #fff; border-radius:50%; background:var(--bc-ink); color:#fff; font-size:13px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 4px 14px #0003; transition:transform .2s, background .2s; }
.sp-launch .sp-marker:before { content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--bc-orange); opacity:0; transform:scale(.7); transition:opacity .25s, transform .25s; }
.sp-launch .sp-marker:hover, .sp-launch .sp-marker.is-active { background:var(--bc-orange); transform:scale(1.08); }
.sp-launch .sp-marker.is-active:before { opacity:1; transform:scale(1); animation:sp-pulse 2.4s ease-out infinite; }
.sp-launch .sp-marker:focus-visible { outline:3px solid var(--bc-orange); outline-offset:4px; }
@keyframes sp-pulse { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(1.6); } }
.sp-launch .sp-anatomy-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--bc-line); }
.sp-launch .sp-anatomy-list li { display:grid; grid-template-columns:44px 1fr; gap:12px; padding:16px 0 16px 12px; border-bottom:1px solid var(--bc-line); border-left:3px solid transparent; transition:border-color .2s, background .2s; outline:0; }
.sp-launch .sp-anatomy-list li.is-active { border-left-color:var(--bc-orange); background:#fff7f2; }
.sp-launch .sp-anatomy-index { color:var(--bc-orange); font-size:13px; font-weight:800; letter-spacing:.1em; padding-top:3px; }
.sp-launch .sp-anatomy-list h3 { font-size:18px; line-height:1.3; }
.sp-launch .sp-anatomy-list p { margin-top:4px; color:#606060; font-size:14px; line-height:1.6; }

/* What changed: real photographs fill the card frame. */
.sp-launch .sp-photo-cards img { mix-blend-mode:normal; object-fit:cover; border-radius:2px; }
.sp-launch .sp-photo-caption { color:#777; }

/* In the shop: full-bleed hero frame, then a pair. */
.sp-launch .sp-shop-hero { margin:0 0 20px; overflow:hidden; border-radius:4px; }
.sp-launch .sp-shop-hero img { display:block; width:100%; height:auto; }
.sp-launch .sp-shop-grid figure img { aspect-ratio:1498/1050; }

/* Cutting line band. */
.sp-launch .sp-line { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; border-bottom:1px solid var(--bc-line); }
.sp-launch .sp-line h2 { font-size:clamp(30px,3vw,40px); line-height:1.15; }
.sp-launch .sp-line p:not(.bc-eyebrow) { color:#555; font-size:15px; max-width:470px; }
.sp-launch .sp-line p a { color:var(--bc-rust); }
.sp-launch .sp-line .bc-text-link { display:inline-block; margin-top:16px; color:var(--bc-rust); }

@media (max-width:991px) {
    .sp-launch .sp-anatomy-grid { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:767px) {
    .sp-launch .sp-marker { width:28px; height:28px; margin:-14px 0 0 -14px; font-size:12px; }
    .sp-launch .sp-line { grid-template-columns:1fr; gap:20px; }
}
@media (prefers-reduced-motion:reduce) {
    .sp-launch .sp-marker, .sp-launch .sp-marker:before, .sp-launch .sp-anatomy-list li { transition:none; animation:none; }
}