/* r12k: How we work, stronger look and motion (Pat 10 Nov)
   Owner's note: "make this a little bit stronger in animation and design". Layout, words, colours and the dark green card are kept.
   What changed, all inside #how .hp: taller flow boxes with a line-drawn icon each (thin mint stroke, as in #adv); Cartesian larger with a soft mint glow;
   real connectors (thin solid line + arrowhead, drawn from how-r12k.js); a tick for each of the two points.
   Motion (once, at ~30% in view): boxes rise left to right 120 ms apart, icons and connectors draw, a mint dot (the client) travels
   Your client > You > Cartesian, pauses with a pulse, goes on to Builders, then the two points fade up. After that, only a slow ring of light off Cartesian.
   Transform, opacity and stroke-dashoffset only. Ease-out only. Reduced motion: how-r12k.js never adds .k-js, so everything simply sits there, drawn. */

#how .hp{--k-ease:cubic-bezier(.2,.7,.1,1);--k-ln:#8FCBB0}

/* ---- the flow row: more room, more presence ---- */
#how .hp .flow{position:relative;margin:10px 0;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1.14fr) 32px minmax(0,1fr)}
#how .hp .fn{position:relative;min-height:216px;padding:22px 14px 20px 16px;display:flex;flex-direction:column;align-items:flex-start;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(143,203,176,.2)}
#how .hp .fn b{margin:20px 0 0;font:600 19px/1.25 var(--f-text);white-space:normal;text-wrap:balance}
#how .hp .fn small{margin:7px 0 0;padding:0;font-size:15px;line-height:1.38;color:rgba(246,244,238,.82)}

/* Cartesian: the centre of the story. Bigger, same mint, soft glow. */
#how .hp .fn.mid,#how.pr-in .hp .fn.mid{margin:-14px 0;padding-top:36px;padding-bottom:34px;animation:none!important;
  box-shadow:0 0 0 1px rgba(143,203,176,.7),0 0 46px 6px rgba(143,203,176,.26),0 20px 44px -10px rgba(0,0,0,.45)}
#how .hp .fn.mid b{font-size:21px}
#how .hp .fn.mid small{color:rgba(17,65,54,.9)}

/* ---- the icon badge on each box ---- */
#how .hp .ic{position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(143,203,176,.38);color:#8FCBB0}
#how .hp .fn.mid .ic{color:#114136;box-shadow:inset 0 0 0 1px rgba(17,65,54,.4)}
#how .hp .ic svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
#how .hp .ic svg path,#how .hp .ic svg circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#how .hp .ic .fl{position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0;pointer-events:none}
#how .hp .ic .rp{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px currentColor;opacity:0;pointer-events:none}
#how .hp .mrg{position:absolute;inset:0;border-radius:16px;border:1.5px solid #8FCBB0;opacity:0;pointer-events:none}

/* ---- the connectors: a solid thin line and an arrowhead ---- */
#how .hp .ar,#how.pr-in .hp .ar{position:relative;width:32px}
#how .hp .ar:before,#how .hp .ar:after{content:none;display:none}
#how .hp .ar i{display:none}
#how .hp .ar svg{position:absolute;display:block;overflow:visible}
#how .hp .ar svg path{fill:none;stroke:#8FCBB0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#how .hp .ar .ch{left:0;top:43px;width:32px;height:14px}
#how .hp .ar .cv{display:none}

/* the travelling dot: the client */
#how .hp .kdot{position:absolute;left:0;top:0;z-index:3;width:10px;height:10px;border-radius:50%;background:#EAFBF2;opacity:0;pointer-events:none;
  box-shadow:0 0 0 4px rgba(143,203,176,.22),0 0 14px 2px #8FCBB0}

/* ---- the two points ---- */
#how .hp .pts>div{position:relative;padding-left:34px}
#how .hp .pts .tk{position:absolute;left:0;top:1px;width:22px;height:22px;display:block;overflow:visible}
#how .hp .pts .tk path,#how .hp .pts .tk circle{fill:none;stroke:#8FCBB0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- before the show (only when how-r12k.js has switched motion on) ---- */
#how .hp.k-js .fn{opacity:0;transform:translateY(30px)}
#how .hp.k-js .ic svg path,#how .hp.k-js .ic svg circle,#how .hp.k-js .ar svg .ln,#how .hp.k-js .pts .tk path,#how .hp.k-js .pts .tk circle{stroke-dasharray:1;stroke-dashoffset:1}
#how .hp.k-js .ar svg .hd{opacity:0}
#how .hp.k-js .pts>div{opacity:0;transform:translateY(18px)}

/* ---- the show: boxes 120 ms apart, then icons, connectors, the dot (JS), the points last ---- */
#how .hp.k-on .fn{opacity:1;transform:none;transition:opacity .7s var(--k-ease) calc(var(--i,0)*120ms),transform .8s var(--k-ease) calc(var(--i,0)*120ms)}
#how .hp.k-on .ic svg path,#how .hp.k-on .ic svg circle{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--k-ease) calc(300ms + var(--i,0)*120ms)}
#how .hp.k-on .ar svg .ln{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--k-ease) calc(480ms + var(--j,0)*200ms)}
#how .hp.k-on .ar svg .hd{opacity:1;transition:opacity .25s var(--k-ease) calc(880ms + var(--j,0)*200ms)}
#how .hp.k-on .pts>div{opacity:1;transform:none;transition:opacity .8s var(--k-ease) calc(3800ms + var(--p,0)*180ms),transform .9s var(--k-ease) calc(3800ms + var(--p,0)*180ms)}
#how .hp.k-on .pts .tk path,#how .hp.k-on .pts .tk circle{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--k-ease) calc(4000ms + var(--p,0)*180ms)}

/* ---- laptops and tablets: the card is full width, so the boxes get more room ---- */
@media (min-width:861px) and (max-width:1439px){
  #how .hp .flow{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1.14fr) 44px minmax(0,1fr)}
  #how .hp .ar,#how.pr-in .hp .ar{width:44px}
  #how .hp .ar .ch{width:44px;left:0}
}

/* ---- phones: the flow stacks top to bottom, connectors point down, the dot runs down the badge column ---- */
@media (max-width:860px){
  #how .hp .flow{grid-template-columns:minmax(0,1fr);margin:0}
  #how .hp .fn{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:center;min-height:0;padding:18px 16px}
  #how .hp .ic{grid-row:1/3;width:48px;height:48px}
  #how .hp .fn b{margin:0;align-self:end;font-size:19px}
  #how .hp .fn small{margin:3px 0 0;align-self:start;font-size:15px}
  #how .hp .fn.mid,#how.pr-in .hp .fn.mid{margin:0;padding:26px 16px;box-shadow:0 0 0 1px rgba(143,203,176,.7),0 0 40px 4px rgba(143,203,176,.24),0 14px 32px -10px rgba(0,0,0,.45)}
  #how .hp .fn.mid b{font-size:21px}
  #how .hp .ar,#how.pr-in .hp .ar{width:100%;height:46px}
  #how .hp .ar .ch{display:none}
  #how .hp .ar .cv{display:block;left:33px;top:0;width:14px;height:46px}
  #how .hp .pts>div{padding-left:34px}
}

@media (prefers-reduced-motion:reduce){
  #how .hp .fn,#how .hp .pts>div{opacity:1!important;transform:none!important;transition:none!important}
  #how .hp .ic svg path,#how .hp .ic svg circle,#how .hp .ar svg .ln,#how .hp .pts .tk path,#how .hp .pts .tk circle{stroke-dashoffset:0!important;transition:none!important}
  #how .hp .ar svg .hd{opacity:1!important}
  #how .hp .kdot,#how .hp .mrg,#how .hp .ic .rp{display:none!important}
}