@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

/* ===================================================================
   Transformation — vertical scrollytelling (sticky visual + scrolling copy)
   =================================================================== */
/* overflow:clip (not hidden) so the orange-glow bleed is clipped WITHOUT
 * creating a scroll container — otherwise position:sticky on the visual
 * column would break and the visuals would scroll away off the top. */
.px-vstory { background: var(--surface-inverse); color: #fff; position: relative; overflow: clip; }
.px-vstory__bg { position: absolute; inset: 0; pointer-events: none; }
.px-vstory__bg::before { content: ""; position: absolute; width: 760px; height: 760px; right: -260px; top: 12%; background: radial-gradient(circle, rgba(249,115,22,0.16), transparent 66%); }
.px-vstory__bg::after { content: ""; position: absolute; width: 560px; height: 560px; left: -220px; bottom: 6%; background: radial-gradient(circle, rgba(249,115,22,0.10), transparent 68%); }

.px-vstory__head { position: relative; z-index: 2; text-align: center; padding: var(--section-y) var(--space-6) 0; }
.px-vstory__head .px-eyebrow { color: var(--orange-300); }
.px-vstory__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.8vw, var(--text-5xl)); color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.08; margin-top: var(--space-4); }
.px-vstory__head p { color: var(--slate-300); font-size: var(--text-lg); margin: var(--space-5) auto 0; max-width: 52ch; line-height: 1.6; }

.px-vstory__grid { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(40px, 6vw, 110px); align-items: start; }

/* sticky visual column */
.px-vstory__viz-col { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.px-vstory__viz { position: relative; width: 100%; height: clamp(420px, 76vh, 680px); }
.px-vstory__ghost { position: absolute; top: -8px; left: -6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 16vw, 220px); line-height: 0.8; color: rgba(255,255,255,0.05); z-index: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.px-vstory__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; will-change: opacity, transform; z-index: 1; }
.px-vstory__stage:first-of-type { opacity: 1; } /* initial frame only; JS takes over on mount */
.px-vstory__stage > * { width: 100%; max-width: 600px; }

/* scrolling copy column */
.px-vstory__steps { position: relative; }
.px-vstory__step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) 0; }
.px-vstory__step-num { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .12em; color: var(--orange-300); }
.px-vstory__step-num b { font-family: var(--font-display); font-size: var(--text-lg); color: #fff; }
.px-vstory__step-num .bar { width: 34px; height: 2px; background: var(--brand); border-radius: 2px; }
.px-vstory__step h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, var(--text-4xl)); color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.1; margin: var(--space-5) 0 0; }
.px-vstory__step p { color: var(--slate-300); font-size: var(--text-lg); line-height: 1.6; margin: var(--space-4) 0 0; max-width: 42ch; }
.px-vstory__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.px-vstory__chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--slate-100); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 8px 14px; border-radius: var(--radius-full); }
.px-vstory__chip i, .px-vstory__chip svg { width: 15px; height: 15px; color: var(--orange-300); }

/* vertical progress rail */
.px-vstory__rail { position: absolute; left: -34px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.12); }
.px-vstory__rail-fill { position: absolute; left: 0; top: 0; width: 100%; background: var(--brand); border-radius: 2px; }
@media (max-width: 1180px) { .px-vstory__rail { display: none; } }

/* stacked fallback (narrow / reduced-motion) */
.px-vstory--stacked .px-vstory__grid { display: block; padding-top: var(--space-12); }
.px-vstory--stacked .px-vstory__stack { display: grid; gap: var(--space-16); }
.px-vstory--stacked .px-vstory__row { display: grid; gap: var(--space-8); }
.px-vstory--stacked .px-vstory__row-viz { min-height: 0; }
.px-vstory--stacked .px-vstory__row-viz > * { max-width: 560px; margin: 0 auto; width: 100%; }

@media (max-width: 900px) {
  .px-vstory__grid { grid-template-columns: 1fr; }
  .px-vstory__viz-col { position: static; height: auto; }
}

/* ===================================================================
   Wireframe / planning board (stage 2)
   =================================================================== */
.wf { position: relative; width: 1120px; height: 720px; background: #FBF7EF;
  background-image: radial-gradient(rgba(120,113,96,0.16) 1.3px, transparent 1.4px);
  background-size: 26px 26px; border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-xl); }
.wf__arrow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; }
.wf-vp { overflow: visible; }

.wf__card { position: absolute; left: 250px; top: 96px; width: 600px; height: 530px; background: #fff;
  border: 2px dashed #C5BCA8; border-radius: 14px; padding: 26px; transform: rotate(-1deg);
  box-shadow: 0 18px 40px -22px rgba(60,50,30,0.45); display: flex; flex-direction: column; gap: 22px; }
.wf__bar { display: flex; align-items: center; justify-content: space-between; }
.wf__logo { width: 84px; height: 34px; border: 2px solid #C9C0AC; border-radius: 7px; position: relative; }
.wf__logo::after { content: ""; position: absolute; inset: 6px; background: repeating-linear-gradient(45deg,#E4DDCB,#E4DDCB 5px,transparent 5px,transparent 10px); }
.wf__nav { display: flex; gap: 14px; }
.wf__nav span { width: 46px; height: 9px; background: #E4DDCB; border-radius: 5px; }
.wf__hero { display: grid; grid-template-columns: 1fr 0.9fr; gap: 26px; align-items: center; }
.wf__hcopy { display: flex; flex-direction: column; gap: 12px; }
.wf__h1 { height: 22px; background: #B9B09A; border-radius: 6px; width: 100%; }
.wf__h1--short { width: 62%; }
.wf__line { height: 11px; background: #E4DDCB; border-radius: 5px; width: 100%; }
.wf__line--short { width: 70%; }
.wf__cta { margin-top: 8px; align-self: flex-start; font-family: var(--font-mono); font-size: 13px; color: #8A7F63; border: 2px dashed #B7A988; border-radius: 999px; padding: 9px 22px; background: #FBF3DF; }
.wf__img { position: relative; height: 180px; border: 2px solid #C9C0AC; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #F4EFE2; }
.wf__img em { font-family: var(--font-mono); font-style: normal; font-size: 13px; color: #9A8F73; }
.wf__x { position: absolute; inset: 0; }
.wf__x::before, .wf__x::after { content: ""; position: absolute; inset: 0; border-top: 2px solid #DBD3C0; }
.wf__x::before { transform: rotate(13.6deg); transform-origin: center; }
.wf__x::after { transform: rotate(-13.6deg); transform-origin: center; }
.wf__feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.wf__feat { border: 2px solid #E0D8C5; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.wf__chip { width: 30px; height: 30px; border-radius: 8px; background: #E4DDCB; }

.wf__note { position: absolute; z-index: 5; font-family: 'Caveat', cursive; font-size: 27px; font-weight: 600; color: #5B5340; line-height: 1.05; max-width: 200px; }
.wf__note--a { left: 28px; top: 120px; }
.wf__note--b { right: 30px; top: 196px; text-align: right; }
.wf__note--c { right: 26px; top: 446px; text-align: right; max-width: 150px; }
.wf__note--d { left: 70px; top: 612px; }
.wf__sticky { position: absolute; z-index: 6; font-family: 'Caveat', cursive; font-size: 23px; font-weight: 700; color: #6b5d12; padding: 16px 18px; width: 130px; line-height: 1.1; box-shadow: 0 10px 22px -10px rgba(60,50,20,0.5); }
.wf__sticky--1 { background: #FFE572; top: 40px; right: 70px; transform: rotate(4deg); }
.wf__sticky--2 { background: #FFC9D6; bottom: 44px; right: 96px; transform: rotate(-5deg); color: #7a2740; }
.wf__pencil { position: absolute; left: 150px; bottom: 70px; z-index: 6; transform: rotate(28deg); }

/* ===================================================================
   Tablet frame + device showcase (stage 5)
   =================================================================== */
.mk-tablet { background: var(--slate-900); border-radius: 24px; padding: 13px; box-shadow: var(--shadow-xl); }
.mk-tablet__screen { border-radius: 12px; overflow: hidden; background: #fff; }

.dvs { position: relative; width: 100%; max-width: 600px; height: 440px; margin: 0 auto; }
.dvs__desktop { position: absolute; left: 7%; top: 0; width: 76%; z-index: 2; }
.dvs__tablet { position: absolute; left: 0; bottom: 4%; width: 39%; z-index: 3; }
.dvs__phone { position: absolute; right: 3%; bottom: 0; width: 18.5%; z-index: 4; }

@media (max-width: 980px) {
  .px-vstory__stage > * { max-width: 520px; }
}

/* stage 1 composite — outdated site + poor mobile */
.s1 { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.s1__phone { position: absolute; right: -5%; bottom: -16%; width: 27%; z-index: 3; }
@media (max-width: 980px) { .s1__phone { right: 0; bottom: -10%; width: 30%; } }