/* ---------- For Trainers: "How clients come to FitFreakk" page ----------
   Drawn on a canvas the width of the 1024px reference: --u is one reference pixel, so the canvas spans
   the full viewport like the home page. Type and vertical spacing use --t (72% of --u) so text and section
   heights stay moderate on wide screens. Below 900px the sections fall back to stacked layouts. */
.hw { --u: calc(100vw / 1024); --t: calc(var(--u) * .72); --hg: #055f26; --hg-dark: #022710; --hmint: #e3f7e6; --hink: #000206; --hbody: #45474b;
  overflow: hidden; color: var(--hink); font-family: "Google Sans", var(--font); background: linear-gradient(90deg, #e5f5ea, #f2faf6); }
.hw-canvas { position: relative; width: calc(1024 * var(--u)); height: calc(var(--h) * var(--t)); margin: 0 auto; padding: 0; list-style: none; }
.hw h1, .hw h2, .hw h3 { letter-spacing: -.02em; }
.hw .icon.icon--fill { stroke-width: .4; }

.hw-num { position: absolute; width: calc(40 * var(--t)); height: calc(40 * var(--t)); border-radius: 50%; display: grid; place-items: center; background: var(--hg-dark); color: #fff; font-size: calc(21 * var(--t)); font-weight: 700; line-height: 1; }
.hw-ico { position: absolute; width: calc(62 * var(--t)); height: calc(62 * var(--t)); border-radius: 50%; display: grid; place-items: center; background: var(--hmint); color: #045321; }
.hw-ico .icon { width: calc(32 * var(--t)); height: calc(32 * var(--t)); stroke-width: 2.5; }

/* 1. hero (0-360) */
.hw-hero { background: #fcfcfc; }
.hw-hero .hw-canvas { --h: 472; }
.hw-hero .hw-canvas::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(190 * var(--u)); height: calc(110 * var(--t)); background: radial-gradient(calc(200 * var(--u)) calc(120 * var(--u)) at 100% 100%, #e9f6ee 99%, transparent 100%); }
.hw-hero__photo { position: absolute; top: 0; left: calc(458 * var(--u)); width: calc(566 * var(--u)); height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(60 * var(--u))); mask-image: linear-gradient(90deg, transparent, #000 calc(60 * var(--u))); }
.hw-hero__copy { position: absolute; z-index: 1; top: 0; left: calc(47 * var(--u)); }
.hw-hero__logo { display: block; width: calc(208 * var(--u)); height: auto; margin: calc(14 * var(--t)) 0 0 calc(-5 * var(--u)); }
.hw-eyebrow { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(37 * var(--t)); font-size: calc(13.6 * var(--t)); font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: #11582d; }
.hw-eyebrow::before { content: ""; width: calc(48 * var(--u)); height: calc(1.5 * var(--t)); background: #11582d; }
.hw-hero__title { margin-top: calc(9 * var(--t)); font-size: calc(51 * var(--t)); font-weight: 700; line-height: calc(49.5 * var(--t)); letter-spacing: -.03em; white-space: nowrap; }
.hw-hero__title span { display: block; color: var(--hg); }
.hw-hero__lead { margin-top: calc(10 * var(--t)); font-size: calc(15.6 * var(--t)); line-height: calc(19.5 * var(--t)); color: #2a2d30; }

/* 2. steps 1-4 (360-830) */
.hw-steps .hw-canvas { height: calc(10 * var(--t) + 411 * var(--u)); margin-top: 17px;}
.hw-step { position: absolute; top: calc(1 * var(--t)); left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(411 * var(--u)); border-radius: calc(12 * var(--u)); background: #fbfffe; box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(20, 80, 40, .06); }
.hw-step--1 { --x: 10;  --w: 237; --pl: 42; --nl: 13; --il: 102; --ix: 12; --iy: 187; --iw: 223; --ih: 262; --ib: 12; }
.hw-step--2 { --x: 257; --w: 251; --pl: 32; --nl: 8;  --il: 109; --ix: 2;  --iy: 214; --iw: 247; --ih: 242; --ib: 5; }
.hw-step--3 { --x: 520; --w: 253; --pl: 31; --nl: 9;  --il: 109; --ix: 1;  --iy: 179; --iw: 251; --ih: 277; --ib: 5; }
.hw-step--4 { --x: 785; --w: 229; --pl: 20; --nl: 6;  --il: 95;  --ix: 5;  --iy: 204; --iw: 218; --ih: 252; --ib: 5; }
.hw-step .hw-num { top: calc(10 * var(--t)); left: calc(var(--nl) * var(--u)); }
.hw-step .hw-ico { top: 0; left: calc(var(--il) * var(--u)); }
.hw-step h3 { position: absolute; top: calc(66 * var(--t)); left: calc(var(--pl) * var(--u)); font-size: calc(19 * var(--t)); font-weight: 700; line-height: calc(26 * var(--t)); white-space: nowrap; }
.hw-step--4 h3 { letter-spacing: -.035em; }
.hw-step p { position: absolute; top: calc(94 * var(--t)); left: calc(var(--pl) * var(--u)); font-size: calc(14.8 * var(--t)); line-height: calc(18.4 * var(--t)); color: var(--hbody); white-space: nowrap; }
.hw-step p strong { font-weight: 500; color: var(--hink); }
.hw-step__img { position: absolute; bottom: calc(var(--ib) * var(--u)); left: calc(var(--ix) * var(--u)); width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); object-fit: cover; border-radius: calc(10 * var(--u)); }
.hw-step--1 .hw-step__img { border-radius: 0; -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 55%, transparent); mask-image: radial-gradient(72% 72% at 50% 50%, #000 55%, transparent); }
.hw-step__arrow { position: absolute; z-index: 2; top: calc(128 * var(--t)); left: calc(100% - 3 * var(--u)); color: #0f913e; }
.hw-step__arrow .icon { width: calc(22 * var(--t)); height: calc(22 * var(--t)); stroke-width: 3; }

/* 3. step 5 (830-1088) */
.hw-share .hw-canvas { --h: 258; }
.hw-share__panel { position: absolute; top: calc(8 * var(--t)); left: calc(17 * var(--u)); width: calc(580 * var(--u)); height: calc(242 * var(--t)); border-radius: calc(20 * var(--u)); background: #fcfefd; box-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(20, 80, 40, .06); }
.hw-share__panel .hw-num { top: calc(16 * var(--t)); left: calc(20 * var(--u)); width: calc(42 * var(--t)); height: calc(42 * var(--t)); }
.hw-share__panel .hw-ico { top: calc(10 * var(--t)); left: calc(147 * var(--u)); width: calc(60 * var(--t)); height: calc(60 * var(--t)); }
.hw-share__panel h3 { position: absolute; top: calc(76 * var(--t)); left: calc(42 * var(--u)); font-size: calc(18.5 * var(--t)); font-weight: 700; line-height: calc(26 * var(--t)); white-space: nowrap; }
.hw-share__panel p { position: absolute; top: calc(108 * var(--t)); left: calc(42 * var(--u)); font-size: calc(15.4 * var(--t)); line-height: calc(20.7 * var(--t)); color: var(--hbody); white-space: nowrap; }

.hw-wa { position: absolute; top: calc(16 * var(--t)); left: calc(385 * var(--u)); width: calc(212 * var(--u)); height: calc(216 * var(--t)); border-radius: calc(8 * var(--u)); background: #f2f6f7; font-size: calc(10.4 * var(--t)); }
.hw-wa__logo { position: absolute; top: calc(6 * var(--t)); left: calc(-54 * var(--u)); width: calc(44 * var(--t)); height: calc(44 * var(--t)); border-radius: 50%; display: grid; place-items: center; background: #30c768; color: #fff; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .12); }
.hw-wa__logo .icon { width: calc(28 * var(--t)); height: calc(28 * var(--t)); stroke-width: 2; }
.hw-wa__head { display: flex; align-items: center; gap: calc(8 * var(--u)); width: calc(209 * var(--u)); height: calc(50 * var(--t)); padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0; background: #0a3927; color: #fff; }
.hw-wa__group { flex: none; width: calc(32 * var(--t)); height: calc(32 * var(--t)); border-radius: 50%; display: grid; place-items: center; background: #e3f7e6; }
.hw-wa__group svg { width: calc(22 * var(--u)); height: calc(16 * var(--t)); }
.hw-wa__head p { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.hw-wa__head strong { font-size: calc(13.5 * var(--t)); font-weight: 600; }
.hw-wa__head small { font-size: calc(9.6 * var(--t)); color: rgba(255, 255, 255, .7); }
.hw-wa__dots { font-size: calc(16 * var(--t)); font-weight: 700; }
.hw-wa__avatar { position: absolute; top: calc(65 * var(--t)); left: calc(-9 * var(--u)); width: calc(32 * var(--t)); height: calc(32 * var(--t)); border-radius: 50%; object-fit: cover; }
.hw-wa__msg { position: absolute; top: calc(59 * var(--t)); left: calc(25 * var(--u)); width: calc(174 * var(--u)); height: calc(152 * var(--t)); padding: calc(10 * var(--t)) calc(10 * var(--u)) 0 calc(15 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .08); }
.hw-wa__msg > strong { display: block; font-size: calc(11 * var(--t)); font-weight: 700; }
.hw-wa__msg ul { margin-top: calc(5 * var(--t)); }
.hw-wa__msg li { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(17.5 * var(--t)); color: #222; white-space: nowrap; }
.hw-wa__msg li span { color: #555; }
.hw-wa__msg .icon { flex: none; width: calc(12 * var(--t)); height: calc(12 * var(--t)); }
.hw-wa__check .icon { padding: calc(1.5 * var(--u)); border-radius: calc(2 * var(--u)); background: #1d8b35; color: #fff; stroke-width: 3.6; }
.hw-wa__pin .icon { color: #b2431c; stroke-width: 2.4; } .hw-wa__calendar .icon { color: #333; stroke-width: 2; }
.hw-wa__msg time { position: absolute; right: calc(10 * var(--u)); bottom: calc(8 * var(--t)); font-size: calc(9.5 * var(--t)); color: #777; }

.hw-and { position: absolute; top: calc(118 * var(--t)); left: calc(601 * var(--u)); font-size: calc(15 * var(--t)); font-weight: 700; line-height: calc(22 * var(--t)); }
.hw-and::before, .hw-and::after { content: ""; position: absolute; left: calc(15 * var(--u)); height: calc(60 * var(--t)); border-left: 1px solid #c9d8cd; }
.hw-and::before { bottom: calc(100% + 8 * var(--t)); } .hw-and::after { top: calc(100% + 8 * var(--t)); }

.hw-dash { position: absolute; top: calc(12 * var(--t)); left: calc(637 * var(--u)); display: flex; gap: calc(10 * var(--u)); width: calc(370 * var(--u)); height: calc(235 * var(--t)); padding: calc(4 * var(--t)) calc(4 * var(--u)) calc(9 * var(--t)) calc(7 * var(--u)); border: 1px solid #e3ece6; border-radius: calc(14 * var(--u)); background: #fcfcfc; box-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(20, 80, 40, .06); }
.hw-dash__side { flex: none; width: calc(112 * var(--u)); border-radius: calc(8 * var(--u)) 0 0 calc(8 * var(--u)); background: linear-gradient(180deg, #0f2e22, #0b2327); color: #fff; }
.hw-dash__brand { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(42 * var(--t)); padding-left: calc(9 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: calc(12.6 * var(--t)); font-weight: 600; }
.hw-dash__brand svg { width: calc(26 * var(--u)); height: calc(18 * var(--t)); }
.hw-dash__side ul { margin-top: calc(7 * var(--t)); padding-inline: calc(4 * var(--u)); }
.hw-dash__side li { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(25.4 * var(--t)); padding-left: calc(6 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(9.2 * var(--t)); white-space: nowrap; }
.hw-dash__side .icon { width: calc(11 * var(--t)); height: calc(11 * var(--t)); }
.hw-dash__side li.is-active { gap: calc(4 * var(--u)); font-size: calc(8.6 * var(--t)); height: calc(21 * var(--t)); margin-block: calc(2 * var(--u)); background: #2a9a3a; }
.hw-dash__side b { display: grid; place-items: center; width: calc(11 * var(--t)); height: calc(11 * var(--t)); border-radius: 50%; background: #e53935; font-size: calc(7 * var(--t)); }
.hw-dash__main { flex: 1; min-width: 0; }
.hw-dash__head { display: flex; align-items: center; justify-content: space-between; height: calc(42 * var(--t)); padding: calc(6 * var(--t)) calc(8 * var(--u)) 0 calc(2 * var(--u)); }
.hw-dash__head strong { font-size: calc(13 * var(--t)); font-weight: 700; letter-spacing: -.02em; }
.hw-dash__head span { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); font-size: calc(9.4 * var(--t)); color: #1d7a35; }
.hw-dash__head .icon { width: calc(9 * var(--t)); height: calc(9 * var(--t)); stroke-width: 2.6; }
.hw-dash__rows { margin-top: calc(5 * var(--t)); padding: calc(3 * var(--t)) 0; border-radius: calc(6 * var(--u)); background: #fff; }
.hw-dash__rows li { display: flex; align-items: center; height: calc(54 * var(--t)); padding: 0 calc(6 * var(--u)) 0 calc(10 * var(--u)); }
.hw-dash__rows img { flex: none; width: calc(40 * var(--t)); height: calc(40 * var(--t)); border-radius: 50%; object-fit: cover; }
.hw-dash__rows p { flex: 1; margin-left: calc(10 * var(--u)); font-size: calc(8.7 * var(--t)); line-height: calc(13.3 * var(--t)); color: #555; white-space: nowrap; }
.hw-dash__rows strong { display: block; font-size: calc(11 * var(--t)); font-weight: 600; line-height: calc(14 * var(--t)); color: #111; }
.hw-dash__btn { display: grid; place-items: center; width: calc(51 * var(--u)); height: calc(22 * var(--t)); border-radius: 999px; background: #045c32; color: #fff; font-size: calc(9.2 * var(--t)); font-weight: 500; }

/* 4. why clients choose (1088-1240) */
.hw-why .hw-canvas { --h: 152;}
.hw-why .hw-canvas::before { content: ""; position: absolute; top: calc(9 * var(--t)); left: calc(20 * var(--u)); width: calc(984 * var(--u)); height: calc(139 * var(--t)); border-radius: calc(18 * var(--u)); background: #f6fcf8; }
.hw-why__title { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); padding-top: calc(20 * var(--t)); font-size: calc(14.4 * var(--t)); font-weight: 700; line-height: calc(18 * var(--t)); letter-spacing: .02em !important; text-transform: uppercase; color: #0f572f; }
.hw-why__title::before, .hw-why__title::after { content: ""; width: calc(70 * var(--u)); height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.hw-why__title::after { width: calc(80 * var(--u)); background: linear-gradient(270deg, transparent, currentColor); }
.hw-why__item { position: absolute; top: calc(52 * var(--t)); left: calc(var(--x) * var(--u)); display: flex; align-items: center; gap: calc(var(--g) * var(--u)); height: calc(72 * var(--t)); }
.hw-why__item--1 { --x: 52; --g: 12; } .hw-why__item--2 { --x: 292; --g: 12; } .hw-why__item--3 { --x: 552; --g: 11; } .hw-why__item--4 { --x: 784; --g: 10; }
.hw-why__item > span { flex: none; width: calc(72 * var(--t)); height: calc(72 * var(--t)); border-radius: 50%; display: grid; place-items: center; background: #d2f9da; color: #0b6524; }
.hw-why__item .icon { width: calc(36 * var(--t)); height: calc(36 * var(--t)); stroke-width: 2; }
.hw-why__item .icon.icon--fill { color: #116a2a; stroke: #fff; stroke-width: 1.4; }
.hw-why__item h3 { font-size: calc(14 * var(--t)); font-weight: 700; line-height: calc(17 * var(--t)); letter-spacing: -.03em; }
.hw-why__item p { margin-top: calc(6 * var(--t)); font-size: calc(12.4 * var(--t)); line-height: calc(16 * var(--t)); color: #2c3034; }

/* 5. join (1240-1536) */
.hw-join { background: radial-gradient(45% 80% at 50% 30%, #03381c, #011d0f 70%), #011d0f; color: #fff; }
.hw-join .hw-canvas { --h: 296; }
.hw-join .hw-canvas::before { content: ""; position: absolute; z-index: 2; top: calc(-14 * var(--t)); left: calc(-40 * var(--u)); right: calc(-40 * var(--u)); height: calc(30 * var(--t)); border-radius: 0 0 50% 50%; background: #f1faf4; }
.hw-join__photo { position: absolute; top: calc(5 * var(--t)); height: calc(291 * var(--t)); object-fit: cover; object-position: top; }
.hw-join__photo--left { left: 0; width: calc(270 * var(--u)); -webkit-mask-image: linear-gradient(270deg, transparent, #000 calc(40 * var(--u))); mask-image: linear-gradient(270deg, transparent, #000 calc(40 * var(--u))); }
.hw-join__photo--right { left: calc(790 * var(--u)); width: calc(234 * var(--u)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(40 * var(--u))); mask-image: linear-gradient(90deg, transparent, #000 calc(40 * var(--u))); }
.hw-join__mat { position: absolute; left: calc(245 * var(--u)); bottom: 0; width: calc(530 * var(--u)); height: calc(60 * var(--t)); border-radius: 62% 38% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #2da24f, #168236 60%, #126f2d); }
.hw-join__mat::before { content: ""; position: absolute; left: calc(10 * var(--u)); bottom: 0; width: calc(170 * var(--u)); height: calc(42 * var(--t)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #1f8c3f, #0f6a2b); }
.hw-join__body { position: relative; z-index: 1; padding-top: calc(37 * var(--t)); text-align: center; }
.hw-join__eyebrow { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(14.4 * var(--t)); font-weight: 600; line-height: calc(18 * var(--t)); letter-spacing: .03em; text-transform: uppercase; color: #88ce80; }
.hw-join__eyebrow::before, .hw-join__eyebrow::after { content: ""; width: calc(46 * var(--u)); height: 1px; background: currentColor; opacity: .8; }
.hw-join h2 { margin-top: calc(6 * var(--t)); font-size: calc(31 * var(--t)); font-weight: 700; line-height: calc(38 * var(--t)); }
.hw-join h2 span { display: block; color: #5fcf4f; }
.hw-join__stats { display: flex; justify-content: center; margin: calc(17 * var(--t)) auto 0; padding-top: calc(20 * var(--t)); width: calc(560 * var(--u)); border-top: 1px solid rgba(255, 255, 255, .1); text-align: left; }
.hw-join__stats li { display: flex; align-items: center; gap: calc(13 * var(--u)); padding-inline: calc(16 * var(--u)); }
.hw-join__stats li + li { border-left: 1px solid rgba(255, 255, 255, .15); }
.hw-join__stats li:first-child { padding-left: 0; }
.hw-join__stats span { flex: none; width: calc(42 * var(--t)); height: calc(42 * var(--t)); border-radius: 50%; display: grid; place-items: center; background: #104b1f; color: #76c47c; }
.hw-join__stats .icon { width: calc(26 * var(--t)); height: calc(26 * var(--t)); }
.hw-join__ring .icon { stroke-width: 2; }
.hw-join__stats p { display: flex; flex-direction: column; font-size: calc(13 * var(--t)); line-height: calc(18 * var(--t)); color: #ebfbf2; }
.hw-join__stats strong { font-size: calc(19 * var(--t)); font-weight: 700; line-height: calc(25 * var(--t)); color: #fff; }
.hw-join__stats li:last-child strong { font-size: calc(16.5 * var(--t)); }

/* ---------- tablet & mobile: stacked layouts in real px ---------- */
@media (max-width: 899px) {
  .hw { --u: 1px; --t: 1px; }
  .hw-wa, .hw-dash { --t: var(--u); }
  .hw-canvas { width: auto; height: auto; padding-inline: 24px; }
  .hw-hero__lead br, .hw-step br, .hw-share__panel br, .hw-why br { display: none; }
  .hw-hero__copy, .hw-hero__photo, .hw-step, .hw-step h3, .hw-step p, .hw-step__img, .hw-share__panel, .hw-share__panel h3, .hw-share__panel p,
  .hw-wa, .hw-and, .hw-dash, .hw-why__item, .hw-join__photo { position: relative; top: auto; left: auto; }

  .hw-hero .hw-canvas { display: flex; flex-direction: column; padding-top: 24px; }
  .hw-hero .hw-canvas::after { display: none; }
  .hw-hero__copy { order: 1; }
  .hw-hero__logo { width: 200px; margin: 0; }
  .hw-eyebrow { margin-top: 24px; font-size: .78rem; } .hw-eyebrow::before { width: 32px; height: 2px; }
  .hw-hero__title { margin-top: 12px; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.08; white-space: normal; }
  .hw-hero__lead { margin-top: 14px; font-size: 1rem; line-height: 1.6; }
  .hw-hero__photo { order: 2; width: calc(100% + 48px); height: auto; aspect-ratio: 1557 / 1010; margin: 24px -24px 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%); mask-image: linear-gradient(180deg, transparent, #000 12%); }

  .hw-steps .hw-canvas { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 24px; }
  .hw-step { width: auto; height: auto; padding: 18px 18px 0; border-radius: 16px; display: flex; flex-direction: column; }
  .hw-step .hw-num, .hw-share__panel .hw-num { position: relative; top: 0; left: 0; width: 40px; height: 40px; font-size: 1.15rem; }
  .hw-step .hw-ico, .hw-share__panel .hw-ico { top: 12px; left: 76px; width: 56px; height: 56px; } .hw-ico .icon { width: 28px; height: 28px; }
  .hw-step h3 { margin-top: 26px; font-size: 1.15rem; line-height: 1.3; white-space: normal; }
  .hw-step p { margin-top: 6px; font-size: .95rem; line-height: 1.5; white-space: normal; }
  .hw-step__img, .hw-step--1 .hw-step__img { bottom: auto; width: calc(100% + 36px); height: auto; aspect-ratio: auto; margin: 16px -18px 0; border-radius: 0 0 16px 16px; -webkit-mask-image: none; mask-image: none; }
  .hw-step__arrow { display: none; }

  .hw-share .hw-canvas { display: grid; gap: 16px; padding-bottom: 24px; }
  .hw-share__panel { width: auto; height: auto; padding: 18px 20px 22px; }
  .hw-share__panel h3 { margin-top: 26px; font-size: 1.15rem; line-height: 1.3; white-space: normal; }
  .hw-share__panel p { margin-top: 6px; font-size: .95rem; line-height: 1.55; white-space: normal; }
  .hw-wa { --u: 1.45px; justify-self: center; margin-left: 30px; }
  .hw-and { justify-self: center; } .hw-and::before, .hw-and::after { display: none; }
  .hw-dash { --u: 1.45px; justify-self: center; }

  .hw-why .hw-canvas { padding-bottom: 28px; }
  .hw-why .hw-canvas::before { top: 0; left: 16px; width: calc(100% - 32px); height: 100%; }
  .hw-why__title { padding-top: 22px; font-size: .9rem; } .hw-why__title::before, .hw-why__title::after { width: 40px; }
  .hw-why ul { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 20px; padding-inline: 8px; }
  .hw-why__item { height: auto; gap: 14px; }
  .hw-why__item > span { width: 56px; height: 56px; } .hw-why__item .icon { width: 28px; height: 28px; }
  .hw-why__item h3 { font-size: 1rem; line-height: 1.3; } .hw-why__item p { margin-top: 4px; font-size: .9rem; line-height: 1.45; }

  .hw-join .hw-canvas { padding-block: 44px 72px; }
  .hw-join .hw-canvas::before { height: 20px; top: -10px; }
  .hw-join__photo { position: absolute; top: 0; height: 100%; opacity: .35; } .hw-join__photo--left { width: 40%; } .hw-join__photo--right { left: auto; right: 0; width: 40%; }
  .hw-join__mat { left: 10%; width: 80%; height: 44px; }
  .hw-join__eyebrow { font-size: .78rem; } .hw-join__eyebrow::before, .hw-join__eyebrow::after { width: 28px; }
  .hw-join h2 { margin-top: 10px; font-size: clamp(1.6rem, 5.5vw, 2.2rem); line-height: 1.2; }
  .hw-join__stats { flex-wrap: wrap; justify-content: center; gap: 16px 0; width: auto; max-width: 620px; margin-top: 22px; }
  .hw-join__stats span { width: 44px; height: 44px; } .hw-join__stats .icon { width: 24px; height: 24px; }
  .hw-join__stats p { font-size: .88rem; line-height: 1.4; } .hw-join__stats strong, .hw-join__stats li:last-child strong { font-size: 1.2rem; line-height: 1.3; }
}
@media (max-width: 640px) {
  .hw-canvas { padding-inline: 16px; }
  .hw-hero__photo { width: calc(100% + 32px); margin-inline: -16px; }
  .hw-steps .hw-canvas, .hw-why ul { grid-template-columns: 1fr; }
  .hw-dash { --u: calc((100vw - 32px) / 372); }
  .hw-wa { --u: calc((100vw - 32px) / 272); margin-left: calc(60 * var(--u)); }
  .hw-why__title::before, .hw-why__title::after { display: none; }
  .hw-join__stats li + li { border-left: 0; }
  .hw-join__stats li, .hw-join__stats li:first-child { padding-inline: 12px; } .hw-join__stats li:last-child { border-left: 0; }
}