/* r35 homepage How it works: poster built around the climb art. Homepage only. */
.hw{background:#FAF8F2;padding:clamp(56px,8vw,110px) 0 clamp(56px,7vw,96px);overflow-x:clip}
.hw-poster{position:relative;max-width:1200px;margin:0 auto}
.hw-art{aspect-ratio:16/9}
.hw-art svg{display:block;width:100%;height:100%}
.hw-copy{padding:0 24px}
.hw-copy .eyebrow{margin:0 0 1.2rem}
.hw-copy h2{margin:0 0 .45em}
.hw-copy p:last-child{margin:0;max-width:44ch;color:#3a3a3a;font:400 1.05rem/1.6 "Work Sans",Arial,sans-serif}
#how .hw-copy h2{font-size:clamp(2.3rem,4.4vw,4.2rem)}
#how .hw-copy h2 .hw-scale{color:#A73632;font-style:normal;display:inline-block;position:relative}
.hw-steps{list-style:none;margin:clamp(24px,3vw,40px) auto 0;padding:0 24px;max-width:1200px;box-sizing:border-box;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.hw-steps{align-items:end}
.hw-steps li{display:flex;flex-direction:column;gap:6px;padding:20px 20px 22px;background:#FFFDF8;border:1px solid rgba(15,15,15,.06);border-radius:10px;box-shadow:0 1px 2px rgba(15,15,15,.04),0 14px 30px -18px rgba(15,15,15,.28);font-family:"Work Sans",Arial,sans-serif}
.hw-ico{display:block;margin:0 0 8px}
@media (min-width:1000px){.hw-steps li{margin-bottom:calc(var(--k)*18px)}}
.hw-tag{font:700 .72rem/1 "Work Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#A73632}
.hw-steps strong{font:650 1.2rem/1.2 "Work Sans",Arial,sans-serif;letter-spacing:-.01em;color:#0F0F0F}
.hw-steps small{font:400 .95rem/1.5 "Work Sans",Arial,sans-serif;color:#4a4a45}
@media (min-width:1000px){
 .hw-copy{position:absolute;left:0;top:5%;width:44%;padding:0 0 0 28px}
}
@media (max-width:999px){
 .hw-poster{display:flex;flex-direction:column}
 .hw-art{order:-1;overflow:hidden;aspect-ratio:4/3;margin-bottom:24px}
 .hw-art svg{width:100%;height:100%}
 .hw-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){.hw-steps{grid-template-columns:1fr;gap:22px}.hw-copy,.hw-steps{padding:0 20px}}
/* Entrance (classes added by home-how.js only when the section starts off-screen) */
.hw-anim .hw-art{opacity:0;transform:translateY(28px)}
.hw-anim .hw-steps li{opacity:0;transform:perspective(900px) translateY(46px) rotateX(-62deg);transform-origin:50% 100%}
.hw-anim.hw-on .hw-art{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hw-anim .hw-steps li.in{opacity:1;transform:none;transition:opacity .45s ease,transform .8s cubic-bezier(.2,1.35,.4,1);transition-delay:calc(.15s + var(--k)*.16s)}
@media (max-width:999px){.hw-anim .hw-steps li.in{transition-delay:calc(.1s + var(--k)*.08s)}}
@media (prefers-reduced-motion:reduce){
 .hw-anim .hw-art,.hw-anim .hw-steps li{transform:none}
 .hw-anim.hw-on .hw-art,.hw-anim .hw-steps li.in{transition:opacity .6s ease;transition-delay:0s}
}

/* r38b: SCALE in a red marker highlight that sweeps in left to right */
#how .hw-copy h2 .hw-scale{color:#FAF8F2;isolation:isolate;padding:0 .14em;margin:0 .02em;letter-spacing:.01em}
.hw-scale::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:.1em;bottom:.02em;background:#A73632;border-radius:.06em .14em .08em .16em;transform:rotate(-.6deg) scaleX(1);transform-origin:left center}
.hw-anim .hw-scale{opacity:0}
.hw-anim .hw-scale::before{transform:rotate(-.6deg) scaleX(0)}
.hw-anim.hw-on .hw-scale{opacity:1;transition:opacity .3s ease .2s}
.hw-anim.hw-on .hw-scale::before{transform:rotate(-.6deg) scaleX(1);transition:transform .65s cubic-bezier(.6,0,.2,1) .25s}
@media (prefers-reduced-motion:reduce){.hw-anim .hw-scale::before{transform:rotate(-.6deg)}.hw-anim.hw-on .hw-scale{transition:opacity .6s ease}.hw-anim.hw-on .hw-scale::before{transition:none}}

/* r39 SCALE expand: after the sweep the word widens with an elastic settle (transform only; space reserved by margin) */
#how .hw-copy h2 .hw-scale{margin-right:.22em;transform-origin:30% 60%;transform:scale(1.12,1.06)}
.hw-anim .hw-scale{transform:none}
.hw-anim.hw-on .hw-scale{animation:hwGrow 1.1s cubic-bezier(.3,0,.3,1) .95s both}
@keyframes hwGrow{0%{transform:none}45%{transform:scale(1.2,1.1)}68%{transform:scale(1.08,1.03)}84%{transform:scale(1.14,1.07)}100%{transform:scale(1.12,1.06)}}
/* r39 animated step icons (run when a card enters; loops pause off-screen; hover replays) */
.hw-ico{width:48px;height:40px;overflow:visible}
.hw-js .hw-ico *{transform-box:fill-box}
.hw-js li.ia .hi-chat{animation:hiPop .5s cubic-bezier(.3,1.6,.5,1) .2s both;transform-origin:20% 90%}
.hw-js li.in .hi-d{animation:hiDot 1.3s ease-in-out infinite}
.hw-js li.in .hi-d:nth-of-type(2){animation-delay:.18s}.hw-js li.in .hi-d:nth-of-type(3){animation-delay:.36s}
.hw-js li.ia .hi-b1,.hw-js li.ia .hi-b2,.hw-js li.ia .hi-b3{animation:hiBuild .45s cubic-bezier(.3,1.5,.5,1) both;transform-origin:0 100%}
.hw-js li.ia .hi-b1{animation-delay:.3s}.hw-js li.ia .hi-b2{animation-delay:.5s}.hw-js li.ia .hi-b3{animation-delay:.7s}
.hw-js li.in .hi-mag{animation:hiScan 3.2s ease-in-out 1.4s infinite}
.hw-js .hi-ck,.hw-js .hi-l,.hw-js .hi-tk{stroke-dasharray:1}
.hw-js li.ia .hi-ck{animation:hiDraw .5s ease-out .7s both}
.hw-js li.ia .hi-l{animation:hiDraw .35s ease-out both}
.hw-js li.ia .hi-l1{animation-delay:.3s}.hw-js li.ia .hi-l2{animation-delay:.55s}.hw-js li.ia .hi-l3{animation-delay:.8s}
.hw-js li.ia .hi-tk{animation:hiDraw .4s ease-out 1.05s both}
.hw-js li.in .hi-tk{transform-origin:50% 50%}
.hw-js .hw-steps li *{animation-play-state:paused!important}
.hw-js.hw-vis .hw-steps li *{animation-play-state:running!important}
@keyframes hiPop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes hiDot{0%,60%,100%{transform:none}30%{transform:translateY(-3px)}}
@keyframes hiBuild{0%{transform:scale(0);opacity:0}100%{transform:none;opacity:1}}
@keyframes hiScan{0%,100%{transform:none}25%{transform:translate(3px,-1px) rotate(4deg)}55%{transform:translate(-2px,1px) rotate(-3deg)}}
@keyframes hiDraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
 .hw-anim.hw-on .hw-scale{animation:none;transform:scale(1.12,1.06)}
 .hw-js .hw-steps li *{animation:none!important}
 .hw-anim .hw-steps li{transform:none}
}

/* r46 alignment: one shared column (24px gutters, 20px on phones) for copy, steps and CTA; equal-height steps on one baseline */
.hw-steps{align-items:stretch}
@media (min-width:1000px){.hw-steps li{margin-bottom:0}.hw-copy{padding:0 0 0 24px}}
#how > .pc{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
@media (max-width:640px){#how > .pc{padding-left:20px;padding-right:20px}}