/* GW How It Works — Figma 32:298 (desktop 1440) / 32:1268 (mobile 390).
   Mobile-first: base = mobile 390 exact, >=768 fluid tablet (still stacked),
   >=1025 desktop 1440 exact (3-up row). Colours are design literals; only the
   optional section background arrives as --gw-hiw-bg from the scoped <style>.
   Desktop icon box is FIXED at 86.671px (the tallest of the three artworks)
   so the three titles and bodies align across the row — the Figma frame draws
   a 9.612px stagger, normalised here by request.
   Extended for Figma 30:11109 / 30:11153: an optional glossary bar and a
   compact mobile heading (32/42). __groups holds steps + glossary and carries
   the rhythm switch — 22px on mobile (the bar joins the card pitch) and 40px
   at >=1025 (it joins the group pitch). The glossary's 1px stroke is drawn
   INSIDE its box in Figma, so the padding absorbs it (15/11 not 16/12) and
   the box measures 361x237 / 1312x105 exactly. */
.gw-how-it-works{padding:64px 16px;background-color:var(--gw-hiw-bg,transparent)}
.gw-how-it-works__wrap{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%;max-width:1312px;margin-inline:auto}
.gw-how-it-works__head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;text-align:center;word-break:break-word}
.gw-how-it-works__eyebrow{margin:0;font-size:14px;font-weight:600;line-height:18px;letter-spacing:2.52px;text-transform:uppercase;color:#a88e57}
.gw-how-it-works__heading{margin:0;font-size:40px;font-weight:400;line-height:52px;letter-spacing:0;color:#242424}
.gw-how-it-works__intro{margin:0;font-size:16px;font-weight:400;line-height:21px;letter-spacing:0;color:#3a3a3a}
.gw-how-it-works__steps{display:flex;flex-direction:column;gap:22px;width:100%}
.gw-how-it-works__card{display:flex;flex-direction:row;align-items:center;gap:16px;box-sizing:border-box;padding:24px;overflow:clip;background-color:#fdfaf4}
.gw-how-it-works__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.gw-how-it-works__icon-img{display:block;width:64px;height:auto;max-width:100%}
.gw-how-it-works__text{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-width:1px}
.gw-how-it-works__title{margin:0;font-size:18px;font-weight:400;line-height:23px;color:#242424}
.gw-how-it-works__body{margin:0;font-size:16px;font-weight:400;line-height:21px;color:#3a3a3a}
.gw-how-it-works--compact-body .gw-how-it-works__body{font-size:14px;line-height:18px}
.gw-how-it-works__placeholder{width:100%;padding:24px;font-size:14px;line-height:21px;text-align:center;color:#6a5632;background-color:#fdfaf4;outline:1px dashed #a88e57;outline-offset:-1px}
.gw-how-it-works--compact-heading .gw-how-it-works__heading{font-size:32px;line-height:42px}
.gw-how-it-works__groups{display:flex;flex-direction:column;gap:22px;width:100%}
.gw-how-it-works__glossary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;box-sizing:border-box;width:100%;padding:15px 11px;background-color:#fdfaf4;border:1px solid #f2ead8}
.gw-how-it-works__glossary-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;width:100%;text-align:center}
.gw-how-it-works__glossary-title{margin:0;font-size:18px;font-weight:400;line-height:23px;letter-spacing:0;color:#242424}
.gw-how-it-works__glossary-body{margin:0;font-size:16px;font-weight:400;line-height:21px;letter-spacing:0;color:#3a3a3a}
.gw-how-it-works__glossary-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:12px 24px;font-size:16px;font-weight:400;line-height:21px;letter-spacing:0;color:#fff;text-align:center;text-decoration:none;white-space:nowrap;background-color:#4a3b1f;border:0;transition:background-color .2s ease}
.gw-how-it-works__glossary-cta:hover,.gw-how-it-works__glossary-cta:focus-visible{background-color:#897244}
@media (prefers-reduced-motion:reduce){.gw-how-it-works__glossary-cta{transition:none}}
@media screen and (min-width:768px){
.gw-how-it-works{padding:80px clamp(24px,5vw,64px)}
.gw-how-it-works__heading{font-size:clamp(40px,3.6vw,48px);line-height:1.3125}
}
@media screen and (min-width:1025px){
.gw-how-it-works{padding:96px 64px}
.gw-how-it-works__heading{font-size:48px;line-height:63px}
.gw-how-it-works__steps{flex-direction:row;align-items:stretch}
.gw-how-it-works__card{flex:1 0 0;min-width:1px;flex-direction:column;align-items:center;gap:8px;padding:16px 12px}
.gw-how-it-works__icon{height:86.671px;padding-bottom:14px;align-items:flex-start}
.gw-how-it-works__text{flex:0 0 auto;align-items:center;width:100%}
.gw-how-it-works__title{white-space:nowrap}
.gw-how-it-works__body{text-align:center}
.gw-how-it-works--compact-body .gw-how-it-works__body{font-size:16px;line-height:21px}
.gw-how-it-works--compact-heading .gw-how-it-works__heading{font-size:48px;line-height:63px}
.gw-how-it-works__groups{gap:40px}
.gw-how-it-works__glossary{flex-direction:row;align-items:center;justify-content:center}
.gw-how-it-works__glossary-text{flex:1 1 0;min-width:1px;width:auto;text-align:left}
}