/* Shishyan landing v6: one Jelly fixed in the centre lane; copy and mockups sit in the two side columns and are what Jelly acts on.
 * Loaded after guide.css (tokens, header band, mockup components). Finished state is the default: no JS => Jelly still, mockups complete. */
.sc-wrap{width:min(1560px,100% - 80px);margin-inline:auto}
.sc{position:relative;padding:clamp(20px,4vh,56px) 0;border-top:1px solid var(--sh-line);scroll-margin-top:calc(var(--jf-band,0px) + 12px)}
.sc:first-of-type{border-top:0}
.sc3{display:grid;grid-template-columns:minmax(0,1fr) 27vw minmax(0,1fr);gap:clamp(8px,1.6vw,28px);align-items:center;min-height:calc(100svh - 170px)}
.sc3__a{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.sc3__lane{grid-column:2;grid-row:1;min-height:1px}
.sc3__b{grid-column:3;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.sc--r .sc3__a{grid-column:3}.sc--r .sc3__b{grid-column:1}
.sc3__a .g-eyebrow{margin:0 0 8px}
.sc .g-h1{font-size:clamp(2rem,3.5vw,3.7rem);max-width:13ch}
.sc .g-h2{font-size:clamp(1.55rem,2.5vw,2.6rem);max-width:17ch}
.sc__lead{margin:0;max-width:44ch;font-size:clamp(1rem,1.25vw,1.14rem);color:var(--ld-ink2)}
.sc__lead b{color:var(--sh-ink)}
.sc__note{margin:0;padding:12px 16px;border-left:3px solid var(--sh-acc);background:var(--ld-soft);border-radius:0 12px 12px 0;font-size:.92rem;max-width:46ch}
.sc-mk,.sc3__b>*{min-width:0}
.sc-who{display:flex;flex-direction:column;gap:6px;max-width:46ch;padding-top:4px;font:500 .9rem/1.4 var(--sh-ui);color:var(--ld-ink2)}
.sc-who p{margin:0;display:flex;align-items:flex-start;gap:8px}
.sc-who .ic{flex:none;width:18px;height:18px;margin-top:1px;color:var(--sh-acc)}
.sc-who b{font-weight:700;color:var(--sh-acc)}

/* Jelly's layer: one fixed svg over the page (under the header), never captures the pointer. Without JS the still blob sits in the centre lane. */
.jf{position:fixed;left:50%;top:32vh;width:22.5vw;height:auto;transform:translateX(-50%);z-index:55;pointer-events:none;overflow:visible}
html.jf-on .jf{inset:0;left:0;top:0;width:100%;height:100%;transform:none}
.jf-tube{fill:none;stroke:var(--sh-ink);stroke-width:5;stroke-linecap:round;opacity:0}
.jf-cup{fill:var(--sh-ink)}
.jf-note{font:700 28px var(--sh-disp,serif);fill:var(--sh-acc);opacity:0}
.jf-chip rect{fill:var(--ld-solid);stroke:var(--sh-acc);stroke-width:2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.jf-chip text{font:600 14px var(--sh-ui);fill:var(--sh-ink)}
.jf-chip.ok rect{stroke:var(--ld-ok)}.jf-chip.ok text{fill:var(--ld-ok)}.jf-chip.warn rect{stroke:var(--ld-warn)}.jf-chip.warn text{fill:var(--ld-warn)}

/* what Jelly touches */
.is-hit{outline:3px solid var(--sh-acc);outline-offset:4px;box-shadow:0 0 0 10px var(--ld-soft)}
.dm,.ph__chat,.tk__tree li,.g-trust li,.g-loop__row li,.g-roles label,.g-steps li,.wt__flag,.sc-lanes li,.ba__paper,.ba__fields>div,.tk__done,.g-kinds li,.wt__lane i,#gGo{transition:box-shadow .25s,outline-color .25s,transform .25s}
.wt__lane i.is-hit{outline-offset:2px;transform:scale(1.6)}
.sc-hphone .b{transition:opacity .35s,transform .35s}
.is-hid{opacity:0;transform:translateY(10px) scale(.92)}
.sc-hphone .ph__body{min-height:320px;max-height:400px;overflow-y:auto;scrollbar-width:none;scroll-behavior:smooth;display:flex;flex-direction:column;gap:10px;justify-content:flex-start}.sc-hphone .ph__body::-webkit-scrollbar{display:none}

/* props glued to Jelly's hands (local units, scaled with Jelly) */
.pk,.pk-screen,.pk-ink,.pk-soft,.pk-acc,.pk-film,.pk-bar,.pk-lens,.pk-key{stroke-linejoin:round}
.pk{fill:var(--ld-solid);stroke:var(--sh-ink);stroke-width:1.8}
.pk-screen{fill:var(--sh-bg);stroke:var(--sh-line);stroke-width:1.2}
.pk-ink{fill:var(--sh-ink)}
.pk-soft{fill:var(--ld-soft)}
.pk-acc{fill:var(--sh-acc)}
.pk-lens{fill:var(--sh-acc);opacity:.85}
.pk-film{fill:var(--sh-ink)}
.pk-rib{fill:none;stroke:var(--sh-bg);stroke-width:1.6;opacity:.8;stroke-linecap:round}
.pk-key{fill:var(--ld-soft)}.pk-key.on{fill:var(--sh-acc)}
.pk-bar{fill:var(--sh-ink)}
.pk-line{fill:none;stroke:var(--sh-ink);stroke-width:1.8;stroke-linecap:round}
.pk-wave{fill:none;stroke:var(--sh-acc);stroke-width:2;stroke-linecap:round}
.pk-t{font:600 8px var(--sh-ui);fill:var(--sh-ink)}
.sc-flash{fill:#fff;opacity:0}
.sc-glow{fill:#fff;opacity:0;mix-blend-mode:screen}
.sc-plate rect{fill:var(--sh-acc);stroke:var(--sh-ink);stroke-width:1.2}.sc-plate.p1 rect,.sc-plate.p2 rect{fill:var(--ld-warn)}

/* phone thread: one chat at a time when JS is on */
.sc-js .ph__body{display:grid;gap:0}
.sc-js .ph__chat{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s}.sc-js .ph__chat.is-on{opacity:1;visibility:visible}
.sc-js .g-steps em{display:none}.sc-js .g-steps li.is-on em{display:block}
.sc-js .g-steps li:not(.is-on) button{opacity:.66}
.sc .g-phone-wrap{max-width:330px;margin-inline:auto}

/* input scene: the lanes the five hands fill */
.sc-lanes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.sc-lanes li{display:flex;flex-direction:column;gap:2px;padding:10px 10px;border:1px solid var(--sh-line);border-radius:14px;background:var(--ld-solid);font:500 12px var(--sh-ui)}
.sc-lanes em{font:400 1.7rem/1 var(--sh-disp);font-style:normal;color:var(--sh-acc);font-variant-numeric:tabular-nums}
.sc .g-p2{grid-template-columns:1fr}.sc .g-ba{min-width:0}
.sc .g-loop__row{grid-template-columns:repeat(3,1fr)}.sc .g-loop__row li::before,.sc .g-loop__row li::after{display:none!important}.sc .g-loop{padding-bottom:0}.sc .g-loop__back{display:none}
.sc .g-dash{grid-template-columns:repeat(2,1fr)}.sc .dm--head,.sc .dm--time,.sc .dm--rec{grid-column:1/-1}.sc .dm--rec{grid-row:auto}.sc .dm--lab,.sc .dm--med,.sc .dm--voice,.sc .dm--note,.sc .dm--flag,.sc .dm--pend{grid-column:span 1}
.sc .g-trust{grid-template-columns:1fr 1fr}
.sc .g-startcard{max-width:none}
.sc-start .g-startcard::before{display:none}

@media (max-width:1100px){.sc .g-loop__row{grid-template-columns:1fr 1fr}.sc .g-trust{grid-template-columns:1fr}.sc .g-dash{grid-template-columns:1fr}.sc .g-dash .dm{grid-column:1/-1!important}}
/* phones: the lane collapses; Jelly rides a band under the header and reaches down to what it is acting on */
@media (max-width:860px){
  .sc3{grid-template-columns:1fr;min-height:0;gap:22px}
  .sc3__a,.sc--r .sc3__a{grid-column:1;grid-row:1}.sc3__b,.sc--r .sc3__b{grid-column:1;grid-row:2}.sc3__lane{display:none}
  .sc{padding:22px 0 30px}
  html.jf-on body::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--jf-band,0px);z-index:54;background:color-mix(in srgb,var(--sh-bg) 93%,transparent);border-bottom:1px solid var(--sh-line)}
  html.jf-on .g-main{padding-top:var(--jf-pad,0px)}
  .jf{top:auto;bottom:12px;right:12px;left:auto;transform:none;width:22vw}
  .sc .g-h1,.sc .g-h2{max-width:none}
  .sc-hphone .ph__body{min-height:260px}
}
@media (max-width:560px){.sc .g-loop__row{grid-template-columns:1fr 1fr}.sc .g-trust{grid-template-columns:1fr}}

/* hello panel quick replies + typing dots */
.ph__qr{display:flex;flex-wrap:wrap;gap:6px;padding:10px 4px 2px}
.ph__qr button{font:600 12px var(--sh-ui);padding:7px 11px;border-radius:999px;border:1px solid var(--sh-acc);background:var(--ld-solid);color:var(--sh-acc);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.ph__qr button:hover:not(:disabled){background:var(--sh-acc);color:var(--ld-solid);transform:translateY(-1px)}
.ph__qr button:disabled{opacity:.55;cursor:default}
.ph__qr button:focus-visible{outline:3px solid var(--sh-acc);outline-offset:2px}
.b--typing{gap:4px}.b--typing i{width:6px;height:6px;border-radius:50%;background:var(--sh-ink);opacity:.4;animation:phdot 1s infinite}.b--typing i:nth-child(2){animation-delay:.15s}.b--typing i:nth-child(3){animation-delay:.3s}
@keyframes phdot{50%{opacity:1;transform:translateY(-2px)}}
.ph__go{display:inline-block;margin-top:4px;font-weight:700;color:var(--sh-acc)}
.b--typing{display:flex}
@media (prefers-reduced-motion:reduce){.b--typing i{animation:none}.ph__qr button{transition:none}.sc-hphone .ph__body{scroll-behavior:auto}}

/* early-access form: the shared widget (medbot includes/beta_signup_widget.php) mapped onto Shishyan's tokens */
.sc-start .g-startcard{text-align:left;padding:clamp(8px,2vw,20px)}
.bw-wrap{--bg-card:transparent;--glass-border:var(--sh-line);--text-1:var(--sh-ink);--text-3:var(--ld-ink2);--text-4:var(--ld-ink2);--bg-elevated:var(--ld-soft);--bg-input:var(--ld-solid);--f-display:var(--sh-disp);--f-body:var(--sh-ui);padding:0}
.bw-wrap .bw-card{box-shadow:none;border:0;background:transparent;padding:clamp(14px,3vw,28px)}
.bw-wrap .bw-inner{max-width:560px}
.bw-wrap .bw-title{font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem)}
.bw-wrap .bw-btn{border-radius:99px}
.bw-wrap input,.bw-wrap select,.bw-wrap textarea{font-family:var(--sh-ui)}
[data-theme="dark"] .bw-wrap .bw-btn{color:#0B0D12}