/* StillHuman Design: "AI-assisted, person-led" sections (process stepper, principles, FAQ). */

.hx-kicker{margin:0 0 14px;font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- process: who does what, step by step ---------- */
.hx{background:var(--dk);color:var(--dk-fg);padding:clamp(90px,14vh,170px) calc(var(--gutter) + 6px) clamp(80px,12vh,140px);position:relative;overflow:hidden}
.hx::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(18,212,255,.22) 1.4px,transparent 1.6px);background-size:30px 30px;-webkit-mask-image:radial-gradient(circle at 92% 6%,#000 0,transparent 55%);mask-image:radial-gradient(circle at 92% 6%,#000 0,transparent 55%)}
.hx > *{position:relative}
.hx-head{max-width:62rem;margin-bottom:clamp(40px,7vh,84px)}
.hx-head h2{margin:0;font-size:clamp(2.8rem,8.4vw,8.6rem);line-height:.9}
.hx-head h2 span{display:block}
.hx-head h2 span + span{color:var(--accent)}
.hx-lede{margin:22px 0 0;max-width:36rem;color:var(--dk-mute);font-size:1.15rem;line-height:1.5}

.hx-stage{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,56px) 24px;align-items:start}
.hx-steps{grid-column:1 / span 4;display:flex;flex-direction:column;border-top:1.5px solid var(--dk-line)}
.hx-step{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:baseline;gap:18px;padding:18px 4px 18px 20px;border-bottom:1.5px solid var(--dk-line);cursor:pointer;color:var(--dk-mute);transition:color .3s,padding .4s var(--out)}
.hx-step::before{content:"";position:absolute;left:0;top:-1.5px;bottom:-1.5px;width:4px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--out)}
.hx-step .n{font:var(--d-wt) 1rem/1 var(--font-d);color:var(--accent);min-width:1.8em}
.hx-step .t{font:var(--d-wt) clamp(1.5rem,2.4vw,2.2rem)/1 var(--font-d);text-transform:var(--d-tt);letter-spacing:var(--d-ls)}
.hx-step:hover{color:#fff}
.hx-step[aria-selected="true"]{color:#fff;padding-left:28px}
.hx-step[aria-selected="true"]::before{transform:none}
.hx-step:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

.hx-panels{grid-column:5 / -1;min-width:0}
.hx-panel h3{margin:0 0 14px;font-size:clamp(2.4rem,5.6vw,5.4rem);line-height:.92}
.hx-sum{margin:0 0 26px;max-width:34rem;color:var(--dk-mute);font-size:1.12rem;line-height:1.5}
.hx-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx-card{min-height:12rem;padding:22px 22px 26px;display:flex;flex-direction:column;gap:14px}
.hx-card p{margin:0;font-size:1.08rem;line-height:1.5}
.hx-tag{align-self:flex-start;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
.hx-ai{border:1.5px solid var(--dk-line);background-image:radial-gradient(rgba(18,212,255,.3) 1.4px,transparent 1.6px);background-size:14px 14px;color:var(--dk-fg)}
.hx-ai .hx-tag{background:transparent;border:1.5px solid var(--accent);color:var(--accent)}
.hx-me{background:var(--accent);color:var(--accent-ink)}
.hx-me .hx-tag{background:var(--accent-ink);color:var(--accent)}
.hx-me p{font-weight:500}

.hx-track{margin-top:clamp(40px,6vh,70px);height:3px;background:var(--dk-line)}
.hx-track i{display:block;height:100%;width:calc(var(--p,.1666) * 100%);background:var(--accent);transition:width .7s var(--out)}
.hx-note{margin:16px 0 0;color:var(--dk-mute);font-size:.9rem}

.hx-on .hx-panel{animation:hxIn .6s var(--out) both}
.hx-on .hx-panel .hx-ai{animation:hxType .7s var(--ease) .1s both}
.hx-on .hx-panel .hx-me{animation:hxSlide .7s var(--out) .22s both}
@keyframes hxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hxType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes hxSlide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .hx-steps{grid-column:1 / -1;flex-direction:row;overflow-x:auto;border-top:0;border-bottom:1.5px solid var(--dk-line);scrollbar-width:none}
  .hx-steps::-webkit-scrollbar{display:none}
  .hx-step{flex:none;padding:14px 18px;border-bottom:0}
  .hx-step::before{left:0;right:0;top:auto;bottom:-1.5px;width:auto;height:4px;transform:scaleX(0);transform-origin:left}
  .hx-step[aria-selected="true"]{padding-left:18px}
  .hx-step[aria-selected="true"]::before{transform:none}
  .hx-step .n{display:none}
  .hx-panels{grid-column:1 / -1}
}
@media (max-width:640px){.hx-split{grid-template-columns:1fr}.hx-card{min-height:0}}

/* ---------- principles ---------- */
.hx-prin{padding:clamp(90px,14vh,170px) calc(var(--gutter) + 6px) clamp(70px,10vh,120px);background:var(--bg)}
.hx-prin-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,6vh,70px)}
.hx-prin-head h2{margin:0;font-size:clamp(2.6rem,7vw,7rem);line-height:.9;max-width:12ch}
.hx-prin-head p{margin:0;max-width:26rem;color:var(--grey)}
.hx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,80px);margin:0;padding:0;list-style:none}
.hx-grid li{border-top:1.5px solid var(--fg);padding:22px 0 clamp(30px,5vh,56px);display:grid;gap:10px}
.hx-grid h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1}
.hx-grid p{margin:0;max-width:30rem;color:var(--grey);font-size:1.08rem;line-height:1.5}
@media (max-width:700px){.hx-grid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.hx-faq{padding:clamp(80px,12vh,150px) calc(var(--gutter) + 6px) clamp(40px,6vh,70px);background:var(--bg-lt);display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px}
.hx-faq-head{grid-column:1 / span 4}
.hx-faq-head h2{margin:0;font-size:clamp(2.4rem,5.2vw,5rem);line-height:.92}
.hx-faq-list{grid-column:6 / -1;border-top:1.5px solid var(--fg)}
.hx-faq details{border-bottom:1.5px solid var(--fg)}
.hx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:700;font-size:1.15rem;line-height:1.3}
.hx-faq summary::-webkit-details-marker{display:none}
.hx-faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .35s var(--out)}
.hx-faq details[open] summary::after{transform:rotate(45deg)}
.hx-faq summary:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.hx-faq details p{margin:0 0 22px;max-width:40rem;color:var(--grey);font-size:1.05rem;line-height:1.55}
@media (max-width:900px){.hx-faq-head,.hx-faq-list{grid-column:1 / -1}}

/* ---------- scroll reveal (only once the script has run) ---------- */
.hx-reveal .hx-rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--out),transform 1s var(--out);transition-delay:calc(var(--d,0) * 90ms)}
.hx-reveal .hx-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hx-on .hx-panel,.hx-on .hx-panel .hx-ai,.hx-on .hx-panel .hx-me{animation:none}
  .hx-reveal .hx-rv{opacity:1;transform:none;transition:none}
  .hx-track i,.hx-step,.hx-step::before{transition:none}
}