/* ============================================================================
   guides.css — /guides in the lit system, layered on home.css primitives.
   The descent: the journey told in the homepage slabs, captions holding the
   left while the rail scrubs down the right of a pinned dark band. Below,
   the page returns to paper: anatomy, grounded answers, Sidekick, the system,
   the pilot. Registered in build.py CACHE_BUST_ASSETS — run python3 build.py
   after edits.
   ========================================================================== */

/* ── the dark opening band: hero copy + the descent ── */
#ghero{background:#0A0A0A;color:var(--p);padding:96px 0 40px;}
#ghero .eyebrow{color:var(--pl62);}
#ghero h1{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(37px,4vw,56px);line-height:1.06;letter-spacing:-.013em;margin:0;max-width:24ch;color:var(--p);}
#ghero h1 em{font-style:italic;}
#ghero .sub{color:var(--pl62);font-size:15.5px;line-height:1.65;max-width:60ch;margin:18px 0 0;}
#ghero .sub strong{color:var(--p);font-weight:600;}
#ghero .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

#outer{position:relative;background:#0A0A0A;}
#pin{position:relative;}
body.anim #pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
#jsvg{display:block;width:min(92vw,1060px);height:auto;margin:0 auto;overflow:visible;will-change:transform;}

.st{opacity:1;}
body.anim .st{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.33,0,.2,1),transform .7s cubic-bezier(.33,0,.2,1);}
body.anim .st.on{opacity:1;transform:none;}

.cn .cu,.cn .cc,.jr .trace{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.cn .cc{stroke:var(--ch);stroke-width:2.4;}
.cn .cu{stroke:var(--ch);stroke-width:7;opacity:.3;filter:url(#jsoft);}
.cn.q .cc{stroke-width:1.8;}
.cn.q .cu{display:none;}
.cn.g .cu{opacity:.42;}
body.anim .cn path{stroke-dasharray:1000;stroke-dashoffset:1000;}
body.anim .cn.on path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);}

.jr .trace{stroke:#FCFCFB;stroke-width:1.6;opacity:.9;}
.jr .ring{fill:none;stroke:#FCFCFB;stroke-width:1.8;}
body.anim .jr .trace{stroke-dasharray:1000;stroke-dashoffset:1000;}
body.anim .jr.on .trace{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease;}
body.anim .jr.on .t2{transition-delay:.55s;}
body.anim .jr .ring{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;}
body.anim .jr.on .ring{opacity:1;transform:scale(1);transition:opacity .4s ease .45s,transform .4s cubic-bezier(.34,1.4,.5,1) .45s;}

#jcaps{position:absolute;left:max(40px,calc((100vw - 1240px)/2 + 40px));top:34svh;max-width:19ch;pointer-events:none;}
.jcap{position:absolute;left:0;top:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(25px,2.5vw,36px);line-height:1.28;letter-spacing:-.005em;color:var(--p);opacity:0;transition:opacity .45s ease;width:max-content;max-width:19ch;}
.jcap.on{opacity:1;}
.jcap i{font-style:normal;color:var(--p);}
body:not(.anim) #jcaps{display:none;}

/* ── back to paper — prose sections read as a centered column ── */
#stand .shell,#anatomy .shell,#sidekick .shell{max-width:900px;}
.gsec2{padding:130px 0 0;}
.gsec2 .k{font-size:12.5px;font-weight:500;color:var(--q);margin:0 0 14px;}
.gsec2 h2{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(29px,3vw,40px);line-height:1.14;letter-spacing:-.008em;margin:0;max-width:26ch;}
.gsec2 .sub{color:var(--q);font-size:15.5px;line-height:1.65;max-width:56ch;margin:18px 0 0;}
.gsec2 .sub strong{color:var(--i);font-weight:600;}
.gsec2 .sub a{color:var(--i);font-weight:600;}

/* the one-line stand: chatbot vs guide */
#stand{padding:110px 0 0;}
#stand p{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.35;letter-spacing:-.006em;margin:0;max-width:34ch;color:var(--q);}
#stand p span{color:var(--i);}

/* anatomy rows */
.anat{margin-top:48px;border-top:1px solid rgba(20,20,20,.14);}
.anat .row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid rgba(20,20,20,.14);align-items:baseline;}
.anat .k{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--q);letter-spacing:.02em;}
.anat p{margin:0;font-size:15px;line-height:1.65;color:var(--q);max-width:72ch;}
.anat p b{color:var(--i);font-weight:600;}
.anat p a{color:var(--i);font-weight:600;}

/* grounded — the dark band with the homepage's floating message cards */
.gsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;margin-top:8px;}
#grounded.gsec2{padding:0;}
#grounded .k{color:var(--pl62);}
#grounded h2{color:var(--p);}
#grounded .sub{color:var(--pl62);}
#grounded .sub strong{color:var(--p);}
#grounded .convo{min-height:0;}
#grounded .gread{font-variant-numeric:tabular-nums;font-size:12.5px;letter-spacing:.01em;color:#45D07E;padding:2px 2px;}
#grounded .gread b{color:#45D07E;font-weight:600;}

/* the system cards */
.syscards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px;}
.syscards a{border:1px solid rgba(20,20,20,.18);border-radius:6px;padding:24px 26px;display:flex;flex-direction:column;gap:9px;color:var(--i);text-decoration:none;transition:border-color .25s;}
.syscards a:hover{border-color:var(--i);}
.syscards .tag{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--q);}
.syscards h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:24px;margin:0;}
.syscards p{margin:0;font-size:13.5px;line-height:1.6;color:var(--q);}
.syscards .go{font-size:13px;font-weight:600;margin-top:6px;}

/* pilot close */
#pilot2{padding-bottom:0;}
#pilot2 .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}

/* reveals on paper */
body.anim .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
body.anim .rv.on{opacity:1;transform:none;}

@media (max-width:960px){
  #ghero{padding:56px 0 24px;}
  #jsvg{width:100%;}
  #jsvg path[filter]{display:none;}
  .gsplit{grid-template-columns:minmax(0,1fr);gap:36px;}
  .syscards{grid-template-columns:minmax(0,1fr);}
  .gsec2{padding-top:96px;}
  #stand{padding-top:84px;}
  .anat .row{grid-template-columns:40px minmax(0,1fr);gap:14px;}
}
@media (prefers-reduced-motion: reduce){
  #pin{position:static;height:auto;}
  .jcap,.st,.cn path,.jr .trace,.jr .ring,.rv{transition:none!important;}
}