/* ===== One case, step by step (one-case.html) =====
   Scroll-driven version of the homepage video. The stage below is the video's
   own 1080x1350 animation (video-src/one-case/site-cut.html), scrubbed by scroll. */

/* Intro sits in the first chapter so the stage is fully in view on load */
.oc-ch--intro h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; color: var(--color-text); margin-bottom: 1rem; }
.oc-ch--intro h1 em { font-style: normal; color: var(--color-primary); }
.oc-ch--intro p { font-size: 1.05rem; }
.oc-ch--intro { justify-content: flex-start; min-height: 70vh; }
.oc-hint { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: .85rem; color: var(--color-text-muted); }
.oc-hint svg { animation: oc-nudge 1.8s ease-in-out infinite; }
@keyframes oc-nudge { 50% { transform: translateY(4px); } }

.oc-scroll { position: relative; max-width: 1320px; margin: 0 auto; padding: 5rem 1.5rem 4rem; }

/* Sticky stage */
.oc-stage-wrap { position: sticky; top: 5rem; z-index: 2; display: flex; justify-content: center; padding: .75rem 0; background: var(--color-bg); }
.oc-stage { position: relative; height: min(44vh, 420px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border: 1px solid rgba(179,87,58,.22); box-shadow: 0 24px 60px rgba(42,32,26,.14); background: #FAF6EF; }
.oc-stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oc-stage #stage { visibility: hidden; }
.oc-ready .oc-stage #stage { visibility: visible; }
.oc-ready .oc-stage__poster { display: none; }
.oc-progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--color-primary); z-index: 5; }

/* Chapters */
.oc-chapters { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.oc-ch { min-height: 85vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem 0 3rem; max-width: 30rem; margin: 0 auto; }
.oc-ch__n { font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: .75rem; }
.oc-ch h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--color-text); margin-bottom: .9rem; }
.oc-ch p { font-size: 1rem; line-height: 1.65; color: var(--color-text-muted); }
.oc-ch p + p { margin-top: .75rem; }
.oc-ch ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.oc-ch li { position: relative; padding-left: 1.4rem; margin-top: .55rem; line-height: 1.5; color: var(--color-text); }
.oc-ch li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-primary); }
.oc-ch li span { display: block; font-size: .9rem; color: var(--color-text-muted); }
.oc-ch__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.oc-note { margin-top: 1rem; font-size: .8rem; color: var(--color-text-muted); }

/* Each chapter fades up as it becomes the active one */
.oc-ready .oc-ch > * { opacity: .28; transition: opacity .4s ease; }
.oc-ready .oc-ch.is-active > *, .oc-ready .oc-ch--intro > * { opacity: 1; }

@media (min-width: 1024px) {
  .oc-scroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .oc-stage-wrap { order: 2; top: 5rem; height: calc(100vh - 5rem); align-items: center; padding: 0; background: none; }
  .oc-stage { height: min(calc(100vh - 8rem), 760px); }
  .oc-chapters { order: 1; }
  .oc-ch { min-height: 100vh; justify-content: center; margin: 0 0 0 auto; padding: 0; }
  .oc-ch--intro { min-height: calc(100vh - 5rem); }
}

/* style.css sets overflow-x: hidden on phones, which turns body into a scroll box and breaks sticky */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  .oc-stage-wrap { top: 4.25rem; }
  .oc-stage { height: min(40vh, 380px); }
  .oc-scroll { padding-inline: 1rem; padding-top: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-hint svg { animation: none; }
  .oc-ready .oc-ch > * { transition: none; }
}

[data-theme="dark"] .oc-stage { border-color: rgba(224,141,99,.3); box-shadow: 0 24px 60px rgba(0,0,0,.45); }

/* --- Video stage (scoped copy of site-cut.html styles) --- */
#stage { --bg: #FAF6EF; --ink: #2A201A; --muted: rgba(42,32,26,.62); --accent: #B3573A; --accent2: #D98E4A; --card: #ffffff; --card-ink: #2A201A; --card-muted: #7a6a5e; --line: #eee6da; }
#stage * { box-sizing: border-box; margin: 0; }
#stage { font-family: var(--font-body); position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; transform-origin: 0 0; background: var(--bg); color: var(--ink); overflow: hidden; }
  #stage .abs { position: absolute; }
  #stage .glow { width: 1400px; height: 1400px; border-radius: 50%; left: -160px; top: -200px;
    background: radial-gradient(circle at center, rgba(217,142,74,.16), rgba(179,87,58,.05) 40%, transparent 65%); }
  #stage .grid { inset: 0; background-image: linear-gradient(rgba(42,32,26,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(42,32,26,.045) 1px, transparent 1px); background-size: 60px 60px; }
  #stage .hook { left: 90px; right: 90px; font-family: var(--font-display); font-weight: 500; letter-spacing: -1.5px; line-height: 1.05; }
  #stage .hook .a { color: var(--accent); }
  #stage .k { display: inline-block; }
  #stage .card { left: 140px; width: 800px; top: 320px; background: var(--card); color: var(--card-ink); border-radius: 28px; padding: 44px 48px; box-shadow: 0 30px 70px rgba(42,32,26,.16); border: 1px solid #eee6da; }
  #stage .card .hdr { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 2px solid var(--line); }
  #stage .card .ttl { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; }
  #stage .card .pill { font-size: 22px; font-weight: 700; padding: 8px 18px; border-radius: 999px; background: #f6eadf; color: #96452c; }
  #stage .card .pill.done { background: #B3573A; color: #fff; }
  #stage .row { display: grid; grid-template-columns: 230px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 26px; align-items: center; }
  #stage .row .lbl { color: var(--card-muted); font-weight: 600; }
  #stage .row .val { font-weight: 600; min-height: 34px; white-space: nowrap; overflow: hidden; }
  #stage .bar { height: 18px; border-radius: 9px; background: #e2e8f0; }
  #stage .thumbs { display: flex; gap: 12px; }
  #stage .thumb { width: 92px; height: 92px; border-radius: 14px; background: radial-gradient(circle at 45% 40%, #fca5a5, #b91c1c 55%, #450a0a 100%); }
  #stage .caret { display: inline-block; width: 3px; height: 28px; background: var(--accent); vertical-align: -4px; margin-left: 2px; }
  #stage .badge { left: 110px; right: 110px; border-radius: 22px; padding: 28px 34px; background: #fff; border: 1px solid #eee6da; box-shadow: 0 10px 30px rgba(42,32,26,.06); display: flex; gap: 24px; align-items: center; }
  #stage .badge .ic { flex: 0 0 64px; height: 64px; border-radius: 16px; background: rgba(179,87,58,.1); display: grid; place-items: center; }
  #stage .badge .t1 { font-size: 32px; font-weight: 700; }
  #stage .badge .t2 { font-size: 24px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
  #stage .q { left: 90px; right: 90px; text-align: left; font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; font-size: 84px; }
  #stage .opt { left: 90px; font-size: 34px; font-weight: 600; padding: 18px 28px; border-radius: 16px; border: 2px solid rgba(255,255,255,.18); color: var(--ink); }
  #stage .logo { left: 0; right: 0; text-align: center; font-weight: 800; letter-spacing: -3px; font-size: 150px; }
  #stage .tag { left: 0; right: 0; text-align: center; font-size: 36px; color: var(--muted); font-weight: 500; }
  #stage .cta { left: 50%; transform: translateX(-50%); font-size: 34px; font-weight: 700; padding: 22px 40px; border-radius: 999px; background: var(--accent); color: #fff; white-space: nowrap; }
  #stage .chip { width: 270px; height: 104px; border-radius: 22px; display: grid; place-items: center; font-size: 36px; font-weight: 700; color: #2A201A; border: 3px dashed #B83848; }
  #stage .box { left: 105px; width: 870px; top: 470px; height: 330px; border-radius: 34px; border: 3px solid var(--accent); }
  #stage .boxlbl { left: 0; right: 0; text-align: center; top: 820px; font-size: 30px; font-weight: 700; font-family: var(--font-body); color: var(--accent); letter-spacing: 4px; }
  #stage .wave { display: flex; gap: 6px; align-items: center; height: 40px; }
  #stage .wave i { display: block; width: 7px; border-radius: 4px; background: var(--accent); }
  #stage .mic { left: 140px; width: 800px; top: 220px; display: flex; align-items: center; gap: 22px; font-size: 34px; font-weight: 700; }
  #stage .pg { left: 110px; top: 200px; width: 860px; height: 900px; background: #fff; color: #1f2937; border-radius: 10px; padding: 34px 36px; box-shadow: 0 30px 80px rgba(42,32,26,.2); border: 1px solid #eee6da; transform-origin: 50% 100%; }
  #stage .pg .rt { font-size: 34px; font-weight: 800; color: #96452c; letter-spacing: .5px; }
  #stage .pg .gen { font-size: 15px; font-style: italic; color: #6b7280; margin-top: 4px; }
  #stage .pg .meta { display: grid; grid-template-columns: 90px 1fr 80px 1fr; gap: 6px 10px; font-size: 14px; font-weight: 700; margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; align-items: center; }
  #stage .pg .meta i { display: block; height: 10px; border-radius: 5px; background: #e5e7eb; }
  #stage .pg .cols { display: grid; grid-template-columns: 1fr 380px; gap: 24px; margin-top: 16px; }
  #stage .pg h5 { font-size: 17px; font-weight: 800; color: #96452c; margin: 14px 0 7px; letter-spacing: .3px; }
  #stage .pg h5:first-child { margin-top: 0; }
  #stage .pg .ln { height: 8px; border-radius: 4px; background: #e5e7eb; margin: 6px 0; }
  #stage .pg .tx { font-size: 15px; color: #374151; line-height: 1.35; }
  #stage .pg .am { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
  #stage .pg .map { position: relative; width: 380px; }
  #stage .pg .map img { display: block; width: 380px; border-radius: 4px; }
  #stage .pg .pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #D98E4A; border: 3px solid #fff; }
  #stage .pg .ring { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #D98E4A; }
  #stage .pg .fl { font-size: 14px; font-weight: 700; color: #96452c; background: #f6eadf; border-radius: 6px; padding: 6px 10px; margin-top: 10px; }
  #stage .pg .scope { height: 190px; border-radius: 4px; margin-top: 12px; background: radial-gradient(circle at 52% 48%, #2a0a06 0, #5b1a10 9%, #b4532f 26%, #e08a5a 48%, #c9673e 70%, #7c2d17 100%); }
  #stage .pg .lab { font-size: 12px; font-weight: 700; color: #96452c; margin-top: 3px; }
  #stage .stamp { left: 560px; top: 1040px; font-size: 26px; font-weight: 800; color: #96452c; background: #fbf3ec; border: 3px solid #B3573A; border-radius: 14px; padding: 12px 22px; white-space: nowrap; }
  #stage .ct { left: 60px; top: 260px; width: 960px; background: #fff; color: #111827; border-radius: 24px; padding: 40px 44px 36px; box-shadow: 0 30px 80px rgba(42,32,26,.16); border: 1px solid #eee6da; }
  #stage .ct .h { font-size: 40px; font-weight: 800; letter-spacing: -.5px; }
  #stage .ct .s { font-size: 20px; color: #6b7280; margin-top: 4px; }
  #stage .ct .cs { font-size: 22px; font-weight: 700; margin-top: 18px; color: #374151; }
  #stage .ct .cs span { font-weight: 500; color: #6b7280; }
  #stage .ct .ok { margin-top: 18px; border: 2px solid #e7c3b3; background: #fbf3ec; border-radius: 16px; padding: 16px 20px; display: flex; gap: 16px; align-items: center; }
  #stage .ct .ok b { display: block; font-size: 16px; letter-spacing: 1.5px; color: #96452c; }
  #stage .ct .ok span { font-size: 24px; font-weight: 700; }
  #stage .ct .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 30px; margin-top: 30px; position: relative; }
  #stage .ct .st { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
  #stage .ct .st .c { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #d1d5db; display: grid; place-items: center; background: #fff; position: relative; z-index: 1; }
  #stage .ct .st .c svg { width: 40px; height: 40px; }
  #stage .ct .st .l { font-size: 20px; font-weight: 600; color: #374151; text-align: center; white-space: nowrap; }
  #stage .ct .st .bar { position: absolute; top: 37px; left: 50%; width: 100%; height: 4px; background: #e5e7eb; }
  #stage .ct .st .bar i { display: block; height: 4px; width: 0; background: #B3573A; }
  #stage .ct .lg { display: flex; gap: 22px; justify-content: flex-end; margin-top: 22px; font-size: 18px; color: #6b7280; }
  #stage .ct .lg span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 3px solid currentColor; margin-right: 6px; vertical-align: -2px; }
  #stage .progress { left: 0; bottom: 0; height: 8px; background: var(--accent); }