/* Homepage How It Works: four open columns on a pale lavender band.
   Markup in index.html (#how-it-works). Colours are the site's own tokens
   (--ink, --body, --mute, --pu, --tint, --line). The old enclosed grid in the
   generated home.css (.steps) no longer applies to this markup. */

body.hp .hiw{background:#F3F0FC;padding:52px 0 46px;position:relative}
/* A soft hand-off from the dark reviews above: the lavender picks up a hint of
   the section's purple at its top edge and settles within 90px. */
body.hp .hiw::before{content:"";position:absolute;inset:0 0 auto;height:90px;pointer-events:none;
  background:linear-gradient(180deg,rgba(118,75,162,.1),rgba(118,75,162,0))}

body.hp .hiw-head{text-align:center;max-width:680px;margin:0 auto 32px;position:relative}
body.hp .hiw-head h2{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.14;margin:0 0 8px}
body.hp .hiw-head p{margin:0;font-size:16.5px;line-height:1.6;color:var(--mute)}

body.hp .hiw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
body.hp .hiw-step{position:relative;padding:2px 24px 4px}
body.hp .hiw-step + .hiw-step{border-left:1px solid #DDD6F2}
body.hp .hiw-step:first-child{padding-left:0}
body.hp .hiw-step:last-child{padding-right:0}
body.hp .hiw-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:14px;
  background:#fff;color:var(--pu);border:1px solid #E1DAF6}
body.hp .hiw-n{position:absolute;top:8px;right:24px;font-size:12px;font-weight:700;letter-spacing:.12em;color:#B3A9D6}
body.hp .hiw-step:last-child .hiw-n{right:0}
body.hp .hiw-step h3{font-size:18px;font-weight:700;letter-spacing:-.018em;line-height:1.3;margin:0 0 8px;color:var(--ink)}
body.hp .hiw-step p{margin:0;font-size:15px;line-height:1.62;color:#5B5775;text-wrap:pretty}

body.hp .hiw-cta{display:flex;align-items:center;justify-content:center;gap:12px 26px;flex-wrap:wrap;margin-top:30px;position:relative}
body.hp .hiw-demo{font-size:14.5px;font-weight:600;color:var(--pu);transition:color .2s ease}
body.hp .hiw-demo:hover{color:var(--pu2)}
body.hp .hiw-demo:focus-visible,body.hp .hiw-cta .btn-grad:focus-visible{outline:3px solid #A99BFF;outline-offset:3px}

/* Tablet: two columns, with a rule between rows instead of a rail. */
@media (max-width:980px){
  body.hp .hiw-steps{grid-template-columns:1fr 1fr;gap:30px 0}
  body.hp .hiw-step{padding:0 26px}
  body.hp .hiw-step + .hiw-step{border-left:0}
  body.hp .hiw-step:nth-child(even){border-left:1px solid #DDD6F2}
  body.hp .hiw-step:nth-child(odd){padding-left:0}
  body.hp .hiw-step:nth-child(even){padding-right:0}
  body.hp .hiw-step:nth-child(odd) .hiw-n{right:26px}
  body.hp .hiw-step:nth-child(even) .hiw-n{right:0}
  body.hp .hiw-step:nth-child(n+3){padding-top:30px;border-top:1px solid #DDD6F2}
}
/* Phones: one column with a hairline between steps (the step numbers are dropped). */
@media (max-width:640px){
  body.hp .hiw{padding:44px 0 44px}
  body.hp .hiw-head{margin-bottom:28px}
  body.hp .hiw-head h2{font-size:27px}
  body.hp .hiw-head p{font-size:15.5px}
  body.hp .hiw-steps{grid-template-columns:1fr;gap:0}
  body.hp .hiw-step,body.hp .hiw-step:nth-child(odd),body.hp .hiw-step:nth-child(even){
    padding:20px 0;border-left:0;border-top:1px solid #DDD6F2}
  body.hp .hiw-step:first-child{padding-top:0;border-top:0}
  body.hp .hiw-step:last-child{padding-bottom:0}
  body.hp .hiw-step:nth-child(n+3){padding-top:20px}
  body.hp .hiw-n{display:none}
  body.hp .hiw-icon{margin-bottom:12px;width:42px;height:42px;border-radius:12px}
  body.hp .hiw-cta{margin-top:28px;flex-direction:column;gap:12px}
  body.hp .hiw-cta .btn-grad{width:100%;text-align:center}
}