/* Phase 3: sticky storytelling + animated product showcases.
   Base state of every animated element is its FINAL state; animations only run under html.js and are
   disabled for reduced motion, so nothing depends on animation to be readable. Only transform/opacity animate. */
@keyframes stUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes stPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* ---------- Sticky storytelling ---------- */
.story{background:var(--white)}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);margin-top:var(--s-7);align-items:start}
.story-steps{list-style:none;margin:0;padding:0;counter-reset:st}
.story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:var(--s-5) 0 var(--s-5) var(--s-5);border-left:2px solid var(--line);transition:border-color 400ms var(--ease-out)}
.story-step.is-active{border-left-color:var(--blue)}
.story-step .mono{color:var(--blue-ink)}
.story-step h3{margin-top:var(--s-3);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);line-height:1.15;font-weight:500;letter-spacing:-.015em}
.story-step p{margin-top:var(--s-4);max-width:30em;color:var(--slate);line-height:1.6}
.story-stage{position:sticky;top:calc(var(--header-h) + 28px);height:min(540px,calc(100vh - var(--header-h) - 72px));display:flex;flex-direction:column;gap:var(--s-4)}
.story-panes{position:relative;flex:1;min-height:0}
.story-pane{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);justify-content:center}
.story--live .story-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translate3d(0,14px,0) scale(.985);transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out),visibility 0s linear 500ms}
.story--live .story-pane.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.story-prog{display:flex;align-items:center;gap:var(--s-4)}
.story-prog b{font-family:var(--f-mono);font-size:.75rem;font-weight:500;color:var(--ink);letter-spacing:.06em;min-width:4.5em}
.story-bar{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.story-bar i{display:block;height:3px;border-radius:2px;background:var(--line-2);position:relative;overflow:hidden}
.story-bar i::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease-out)}
.story-bar i.on::after{transform:scaleX(1)}
.pane-cap{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2)}

/* pane contents */
.fx{opacity:1}
html.js .story-pane.is-active .fx,html.js .story--static .fx{animation:stUp .6s var(--ease-out) calc(var(--d,0) * 90ms) backwards}
.sflow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 6px}
.sflow .snd{padding:10px 14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-2);font-size:.875rem;font-weight:500}
.sflow .sar{color:var(--slate-2);font-family:var(--f-mono)}
.flags{display:flex;flex-wrap:wrap;gap:8px}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.role{background:var(--white);border:1px solid var(--line);border-radius:var(--r-2);padding:12px;display:grid;gap:8px;font-size:.8125rem}
.role h4{font-size:.9375rem;font-weight:600}
.role span{display:block;padding:7px 9px;background:var(--canvas);border-radius:var(--r-1);color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-family:var(--f-mono);font-size:.75rem;padding:7px 10px;border-radius:var(--r-1);background:var(--white);border:1px solid var(--line);color:var(--ink-2)}
.chips span.hl{background:var(--blue-wash);border-color:transparent;color:var(--blue-ink)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-2);font-size:.9375rem}
.ticks li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;flex:none}

@media (max-width:900px){
  .story-grid{display:block;margin-top:var(--s-6)}
  .story-stage{position:static;height:auto}
  .story-prog{display:none}
  .story-step{min-height:0;padding:var(--s-6) 0 var(--s-6) var(--s-4)}
  .story-step .story-pane{margin-top:var(--s-5)}
  .story-panes{display:grid;gap:var(--s-4)}
  .roles{grid-template-columns:1fr}
}

/* ---------- Product showcases ---------- */
.show{background:var(--navy);color:#E7ECEF}
.show .label{color:#9FB0BB}
.show .lead,.show .body-muted{color:#A9B7C0}
.sc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:center;padding-block:var(--s-8);border-top:1px solid rgba(255,255,255,.12)}
.sc:first-of-type{margin-top:var(--s-7)}
.sc:nth-of-type(even) .sc-copy{order:2}
.sc-copy .mono{color:#9FB0BB}
.sc-copy h3{margin-top:var(--s-3);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);line-height:1.15;font-weight:500;letter-spacing:-.015em;color:#fff}
.sc-copy p{margin-top:var(--s-4);color:#A9B7C0;line-height:1.6;max-width:30em}
.sc-list{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:8px;font-size:.9375rem;color:#CBD6DD}
.sc-list li{display:flex;gap:10px}
.sc-list li::before{content:"";width:6px;height:6px;margin-top:.55em;border-radius:50%;background:#7FA0FF;flex:none}
.sc-note{margin-top:var(--s-4);font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;color:#8FA1AD}
.sc-vis{min-width:0}
.sc-vis .win{box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border-color:transparent}
.sc-body{padding:var(--s-5);display:grid;gap:var(--s-4);color:var(--ink)}

/* Lab: stage track with a travelling case chip, and a live-looking log */
.trk{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding-top:34px}
.trk .st{position:relative;text-align:center;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-2);padding-top:22px}
.trk .st::before{content:"";position:absolute;left:50%;top:6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--white);border:2px solid var(--line-2);z-index:1}
.trk .st::after{content:"";position:absolute;left:-50%;top:10px;width:100%;height:2px;background:var(--line-2)}
.trk .st:nth-child(2)::after{display:none}
.trk .st.done::before{background:var(--blue);border-color:var(--blue)}
.trk .st.done::after{background:var(--blue)}
.trk-chip{position:absolute;top:0;left:calc(100% / 12 + 100% / 6 * 4);margin-left:-30px;padding:3px 8px;background:var(--ink);color:#fff;border-radius:var(--r-1);font-family:var(--f-mono);font-size:.625rem;white-space:nowrap;z-index:2}
.log{display:grid;gap:6px;font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-2)}
.log div{display:flex;gap:10px;padding:8px 10px;background:var(--canvas);border-radius:var(--r-1)}
.log b{color:var(--slate-2);font-weight:400;min-width:3.6em}
.portal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-2);font-size:.8125rem}
.portal strong{display:block;font-size:.875rem}
html.js .sc:not(.is-play) *{animation-play-state:paused!important}
html.js .sc .sq{animation:stUp .6s var(--ease-out) calc(var(--d,0) * 140ms) backwards}
html.js .trk-chip{animation:chipMove 4.2s linear .4s backwards}
@keyframes chipMove{from{left:calc(100% / 12)}to{left:calc(100% / 12 + 100% / 6 * 4)}}
html.js .trk .st.done::before{animation:stDone .01s linear backwards;animation-delay:calc(.4s + var(--n) * 1.05s)}
html.js .trk .st.done::after{animation:stLine .01s linear backwards;animation-delay:calc(.4s + var(--n) * 1.05s - .5s)}
@keyframes stDone{from{background:var(--white);border-color:var(--line-2)}}
@keyframes stLine{from{background:var(--line-2)}}
html.js .sc .log div{animation:stUp .5s var(--ease-out) backwards;animation-delay:calc(.4s + var(--d) * 1.05s)}

/* EMR */
.emr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:var(--s-4)}
.emr-list{display:grid;gap:6px;align-content:start}
.emr-list div{padding:9px 10px;border-radius:var(--r-1);font-size:.8125rem;border:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.emr-list div.on{background:var(--blue-wash);border-color:transparent;color:var(--blue-ink);font-weight:500}
.emr-rec{display:grid;gap:8px;align-content:start}
.emr-row{display:grid;grid-template-columns:7.5em 1fr;gap:8px;font-size:.8125rem;padding:8px 10px;background:var(--canvas);border-radius:var(--r-1)}
.emr-row b{font-family:var(--f-mono);font-size:.6875rem;font-weight:400;color:var(--slate-2);text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.ai-box{padding:10px 12px;border:1px dashed var(--blue);border-radius:var(--r-2);background:var(--blue-wash);font-size:.8125rem;color:var(--ink)}
.ai-box b{display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:4px;font-weight:500}
.bill{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.75rem;padding:8px 10px;border-top:1px solid var(--line)}

/* AI automation flow */
.ai-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative;padding:var(--s-2) 0}
.ai-n{position:relative;text-align:center;padding:0 6px;font-size:.75rem;color:var(--ink-2)}
.ai-n i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--line-2);font-style:normal;font-family:var(--f-mono);font-size:.75rem;color:var(--slate-2);position:relative;z-index:1}
.ai-n::before{content:"";position:absolute;top:22px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.ai-n::after{content:"";position:absolute;top:22px;left:-50%;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left}
.ai-n:first-child::before,.ai-n:first-child::after{display:none}
.ai-n strong{display:block;font-weight:600;color:var(--ink);font-size:.8125rem}
.ai-msg{display:grid;gap:8px}
.ai-msg div{max-width:85%;padding:9px 12px;border-radius:12px;font-size:.8125rem;line-height:1.45}
.ai-msg .u{background:var(--canvas);justify-self:start}
.ai-msg .a{background:var(--blue);color:#fff;justify-self:end}
.crm strong{display:block}
.crm{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-2);font-size:.8125rem}
html.js .sc.is-play .ai-n i{animation:nOn .4s var(--ease-out) forwards;animation-delay:calc(var(--n) * 1.1s)}
html.js .sc.is-play .ai-n::after{animation:wire .9s var(--ease-out) forwards;animation-delay:calc(var(--n) * 1.1s - .8s)}
html.js .sc.is-play .ai-msg div{animation:stUp .5s var(--ease-out) backwards;animation-delay:calc(var(--d) * 1.1s)}
@keyframes nOn{to{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.08)}}
@keyframes wire{to{transform:scaleX(1)}}

@media (max-width:900px){
  .sc{grid-template-columns:1fr;gap:var(--s-6);padding-block:var(--s-7)}
  .sc:nth-of-type(even) .sc-copy{order:0}
  .emr{grid-template-columns:1fr}
  .trk .st{font-size:.5rem;letter-spacing:0}
  .ai-n{font-size:.6875rem;padding:0 2px}
  .ai-n i{width:36px;height:36px}
  .ai-n::before,.ai-n::after{top:18px}
}
@media (prefers-reduced-motion:reduce){
  .story-pane,.story-step,.story-bar i::after{transition:none!important}
  html.js .story-pane .fx,html.js .sc *{animation:none!important}
  .ai-n i{background:var(--blue);border-color:var(--blue);color:#fff}
  .ai-n::after{transform:scaleX(1)}
  .trk-chip{left:calc(100% / 12 + 100% / 6 * 4)}
}