:root{
  --st-top:10vh;
  --st-gap:clamp(28px,6vw,72px);
  --st-left:max(320px,40vw);
  --st-max:1380px;
  --sa-sticky-half: 0px;

  --st-ink:#111827;
  --st-muted:#6B7280;

  --title-shift: 0px;
  --title-t: 0;
  --title-t-final: 0;

  --st-first-min: 220vh;
  --st-first-body-offset: 46vh;

  --st-overlap: -18vh;

  --st-last-min: 110vh;
  --st-last-min-m: 100vh;

  --st-title-size: 50px;
  --st-title-size-m: 50px;
  --st-title-lh: 1.15;
  --st-title-weight: 800;

  --st-sub-size: clamp(.95rem,1.15vw,1.05rem);
  --st-sub-size-m: 1rem;
  --st-sub-lh: 1.35;
  --st-sub-weight: 400;

  /* mobile */
  --m-head-bg: rgba(255,255,255,0.86);
  --m-head-shadow: 0 1px 0 rgba(17,24,39,.06);
  --m-body-top: 52vh;          /* true mid-screen */
  --m-left: 0px;               /* set by JS per step */
  --m-width: 100vw;            /* set by JS per step */
}

/* base */
.sa-st{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.sa-st__grid{ max-width:var(--st-max); margin:0 auto; position:relative; display:grid; grid-template-columns: var(--st-left) 1fr; column-gap:var(--st-gap); padding:0 clamp(16px,4vw,24px); align-items:stretch; }

/* left (desktop) */
.sa-st__left{ position:relative; z-index:2; }
.sa-st__left-inner{ position:sticky; top:calc(50vh - var(--sa-sticky-half)); z-index:2; will-change:top; }
.sa-st--fixed .sa-st__left-inner{ position:fixed; top:var(--st-top); }

/* desktop head glide */
.sa-st__head{ transform: translateX(calc(var(--title-shift) * (1 - var(--title-t-final, var(--title-t))))); will-change: transform; }
.sa-st .sa-st__head .sa-st__title{ margin:0 0 .35rem; color:var(--st-ink); font-weight:var(--st-title-weight); line-height:var(--st-title-lh); font-size:var(--st-title-size); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial; }
.sa-st .sa-st__head .sa-st__subtitle{ margin:.25rem 0 1.25rem; color:var(--st-muted); font-weight:var(--st-sub-weight); line-height:var(--st-sub-lh); font-size:var(--st-sub-size); }

.sa-st__visual{ margin-top:.75rem; }
.sa-st__img{ display:block; max-width:100%; height:auto; }
.sa-st__lottie{ width:100%; min-height:160px; }

/* right */
.sa-st__right{ position:relative; z-index:1; }

/* steps (desktop baseline) */
.sa-st__step{ min-height:125vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding-top:var(--st-top); }
.sa-st.sa-st--tight .sa-st__right .sa-st__step:not(:first-child){ margin-top: var(--st-overlap); }
.sa-st.sa-st--tight .sa-st__step--first{ min-height: max(120vh, calc(var(--st-first-min) + var(--st-overlap))); }
.sa-st.sa-st--tight .sa-st__step--first .sa-st__step-body{ margin-top: calc(var(--st-first-body-offset) + (var(--st-overlap) * 0.40)); }
.sa-st__step--first{ min-height: var(--st-first-min); }
.sa-st__step--first .sa-st__step-body{ margin-top: var(--st-first-body-offset); }
.sa-st__step--last{ min-height: var(--st-last-min); }
.sa-st__sentinel{ position:relative; height:1px; margin-top:0; }

.sa-st__step-body{ color:var(--st-ink); font-size:1rem; line-height:1.6; max-width: 640px; }

/* desktop reveals */
.sa-st__step--first .sa-st__step-body{ opacity:0; transform: translateY(48px); transition: opacity 420ms ease, transform 520ms ease; will-change: opacity, transform; }
.sa-st__step--first.is-reveal .sa-st__step-body{ opacity:1; transform: translateY(0); }
.sa-st__step.is-armed .sa-st__step-body{ opacity:0; transform: translateY(48px); transition: opacity 380ms ease, transform 480ms ease; will-change: opacity, transform; }
.sa-st__step.is-reveal .sa-st__step-body{ opacity:1; transform: translateY(0); }
.sa-st__step.is-active .sa-st__step-body{ transition: opacity 320ms ease, transform 320ms ease; }

/* ---------------- mobile ---------------- */
@media (max-width: 900px){
  :root{ --st-left:100%; --st-top:0; --st-first-min: 140vh; --st-first-body-offset: 12vh; }
  .sa-st__grid{ grid-template-columns:1fr; }

  /* hide desktop column */
  .sa-st__left{ display:none; }

  /* sticky header per step (native) */
  .sa-st__mhead{
    position:sticky; top:0; z-index:6;
    padding:12px clamp(14px,4vw,18px);
    background: var(--m-head-bg);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(17,24,39,.06);
    box-shadow: var(--m-head-shadow);
  }
  /* header polyfill (forced fixed when sticky is broken) */
  .sa-st__mhead.is-fixed{
    position:fixed; top:0; left:var(--m-left); width:var(--m-width); margin:0; z-index:6;
  }
  .sa-st__mtitle{
    margin:0 0 4px; color:var(--st-ink);
    font-weight:var(--st-title-weight); line-height:var(--st-title-lh);
    font-size:var(--st-title-size-m, var(--st-title-size));
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  }
  .sa-st__msubtitle{
    margin:0; color:var(--st-muted);
    font-weight:var(--st-sub-weight); line-height:var(--st-sub-lh);
    font-size:var(--st-sub-size-m, var(--st-sub-size));
  }

  /* more runway so header can pin before body shows */
  .sa-st__step{ position:relative; min-height:180vh; padding-top:0; }

  /* body: hidden and off-stage initially */
  .sa-st__step-body{
    z-index:5; max-width:100%;
    visibility:hidden; opacity:0; transform: translateY(60vh); filter: blur(14px);
    transition: visibility 0s linear 200ms, opacity 240ms ease, transform 260ms ease, filter 260ms ease;
    will-change: opacity, transform, filter;
    margin: 0 clamp(14px,4vw,18px);
    pointer-events:none;
  }

  /* while header is fixed (native or polyfill), body uses fixed geometry too */
  .sa-st__step.is-head-fixed .sa-st__step-body{
    position:fixed; top:var(--m-body-top); left:var(--m-left); width:var(--m-width);
  }

  /* prime after pin: visible but still off-stage */
  .sa-st__step.is-head-fixed.is-primed .sa-st__step-body{
    visibility:visible; opacity:0; transform: translateY(60vh); filter: blur(14px);
    transition-delay:0s,0s,0s,0s;
  }

  /* snap quickly to mid-screen (still blurred) */
  .sa-st__step.is-head-fixed.is-enter .sa-st__step-body{
    visibility:visible; opacity:.55; transform: translateY(0); filter: blur(10px);
    pointer-events:auto;
    transition-duration: 200ms, 200ms, 220ms, 220ms;
  }

  /* fixed on stage, reveal via --m-reveal */
  .sa-st__step.is-head-fixed.is-fixed .sa-st__step-body{
    visibility:visible;
    opacity: calc(.35 + var(--m-reveal,0) * .65);
    filter: blur(calc((1 - var(--m-reveal,0)) * 10px));
    transform: translateY(0);
  }

  /* exit upward */
  .sa-st__step.is-head-fixed.is-exit .sa-st__step-body{
    opacity:0; transform: translateY(-36px); filter: blur(8px);
  }

  /* disable desktop left head/visuals */
  .sa-st__head, .sa-st__visual{ display:none !important; }

  /* neutralize desktop reveal classes on mobile */
  .sa-st__step.is-reveal .sa-st__step-body,
  .sa-st__step--first.is-reveal .sa-st__step-body,
  .sa-st__step.is-armed .sa-st__step-body{
    visibility:hidden; opacity:0; transform: translateY(60vh); filter: blur(14px);
  }

  .sa-st__step--last{ min-height: var(--st-last-min-m, var(--st-last-min)); }
}

/* debug line when ?stdebug=1 */
.sa-st[data-st-debug="1"] .sa-st__sentinel::after{
  content:''; position:absolute; left:-9999px; right:-9999px; top:-1px; height:2px;
  background: repeating-linear-gradient(90deg, rgba(124,58,237,.85), rgba(124,58,237,.85) 8px, transparent 8px, transparent 14px);
  pointer-events:none;
}