/* How it works (pinned, scroll-driven) */

/* --- Layout and state rules --- */
.how__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .how__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }

/* Dial node highlight, toggled from JS (.is-active) */
.dial__bg { opacity: 0; }
.dial__bg.is-active { opacity: 1; }
.dial__label { color: #eef0e6; }
.dial__label.is-active { color: #0a0b08; }

/* --- Section styles --- */
/* <section> */
.how-01{position:relative;z-index:1;height:520vh}
/* <div> */
.how-02{position:sticky;top:0;height:100vh;overflow:hidden;box-sizing:border-box;padding:100px clamp(20px,4vw,56px) 28px;display:flex;flex-direction:column;gap:12px}
/* <div> */
.how-03{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;max-width:1320px;width:100%;margin:0 auto}
/* <h2> · We build it. You own the convers */
.how-04{margin:0;font:500 clamp(30px,3.6vw,50px)/1.02 Geist,sans-serif;letter-spacing:-.05em}
/* <span> · It keeps learning. */
.how-05{color:#7d8374}
/* <div> · HOW IT WORKS · STEP {{ stepNum } */
.how-06{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#C9FF35}
/* <div> */
.how-07{flex:1;min-height:0;display:grid;gap:clamp(20px,3vw,56px);align-items:center;max-width:1320px;width:100%;margin:0 auto}
/* <div> */
.how-08{position:relative;height:min(380px,50vh)}
/* <div> */
.how-09{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px}
/* <div> · 01 */
.how-10{font:600 clamp(90px,10vw,160px)/.8 Geist,sans-serif;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px rgba(201,255,53,.6)}
/* <div> · We analyze your business */
.how-11{font:500 clamp(28px,2.6vw,38px)/1.05 Geist,sans-serif;letter-spacing:-.04em}
/* <div> · Our team studies your website, p */
.how-12{font:300 16px/1.55 Geist,sans-serif;color:#a7ac9c;max-width:380px;text-wrap:pretty}
/* <div> */
.how-13{display:flex;flex-wrap:wrap;gap:8px}
/* <span> · Website */
.how-14{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font:400 12.5px Geist,sans-serif;color:#d4d8ca}
/* <div> */
.how-15{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;opacity:0}
/* <div> */
.how-16{position:relative;width:min(470px,56vh,78vw);aspect-ratio:1;justify-self:center}
/* <div> */
.how-17{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(201,255,53,.14),transparent 60%);pointer-events:none}
/* <svg> */
.how-18{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
/* <circle> */
.how-19{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1}
/* <circle> */
.how-20{fill:none;stroke:rgba(255,255,255,.18);stroke-width:12;stroke-dasharray:1.4 8.86}
/* <circle> */
.how-21{fill:none;stroke:#C9FF35;stroke-width:3;stroke-linecap:round;stroke-dasharray:1382.3;stroke-dashoffset:1382.3;filter:drop-shadow(0 0 8px rgba(201,255,53,.8))}
/* <circle> */
.how-22{fill:none;stroke:rgba(201,255,53,.2);stroke-width:1;stroke-dasharray:3 7}
/* <div> */
.how-23{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 72%,rgba(201,255,53,.32) 97%,transparent 100%);-webkit-mask-image:radial-gradient(circle,transparent 62%,#000 63%,#000 91%,transparent 92%);mask-image:radial-gradient(circle,transparent 62%,#000 63%,#000 91%,transparent 92%)}
/* <div> */
.how-24{position:absolute;left:50%;top:-58px;margin-left:-7px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #C9FF35;filter:drop-shadow(0 0 6px #C9FF35)}
/* <div> · ↻ STEP 05 FEEDS BACK INTO TRAINI */
.how-25{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);white-space:nowrap;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#7d8374}
/* <div> */
.how-26{position:absolute;inset:0}
/* <div> */
.how-27{position:absolute;inset:0;transform:rotate(0deg);pointer-events:none}
/* <div> */
.how-28{position:absolute;left:50%;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;transform:rotate(0deg)}
/* <div> */
.how-29{position:absolute;inset:0;border-radius:50%;background:rgba(14,17,12,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
/* <div> */
.how-30{position:absolute;inset:0;border-radius:50%;background:#C9FF35;box-shadow:0 0 44px rgba(201,255,53,.65);transition:opacity .5s}
/* <div> · 01 */
.how-31{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:color .5s}
/* <span> · 01ANALYZE */
.how-32{font:600 19px Geist,sans-serif;letter-spacing:-.03em}
/* <span> · ANALYZE */
.how-33{font:500 8px 'JetBrains Mono',monospace;letter-spacing:.1em}
/* <div> */
.how-34{position:absolute;inset:0;transform:rotate(72deg);pointer-events:none}
/* <div> */
.how-35{position:absolute;left:50%;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;transform:rotate(-72deg)}
/* <div> */
.how-36{position:absolute;inset:0;transform:rotate(144deg);pointer-events:none}
/* <div> */
.how-37{position:absolute;left:50%;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;transform:rotate(-144deg)}
/* <div> */
.how-38{position:absolute;inset:0;transform:rotate(216deg);pointer-events:none}
/* <div> */
.how-39{position:absolute;left:50%;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;transform:rotate(-216deg)}
/* <div> */
.how-40{position:absolute;inset:0;transform:rotate(288deg);pointer-events:none}
/* <div> */
.how-41{position:absolute;left:50%;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;transform:rotate(-288deg)}
/* <div> */
.how-42{position:relative;height:min(420px,54vh)}
/* <div> */
.how-43{position:absolute;inset:0;display:flex;align-items:center}
/* <div> */
.how-44{width:100%;box-sizing:border-box;padding:24px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.025));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:14px}
/* <div> */
.how-45{display:flex;justify-content:space-between;align-items:center}
/* <span> · BUSINESS ANALYSIS */
.how-46{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#a7ac9c}
/* <span> */
.how-47{display:flex;align-items:center;gap:8px;font:400 12px Geist,sans-serif;color:#d4d8ca}
/* <span> · MKMaya, Chatzae team */
.how-48{width:22px;height:22px;border-radius:50%;background:#2a3310;color:#C9FF35;display:flex;align-items:center;justify-content:center;font:600 10px Geist,sans-serif}
/* <div> · northpointbikes.com */
.how-49{padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(201,255,53,.3);font:400 14px 'JetBrains Mono',monospace}
/* <div> */
.how-50{display:flex;flex-direction:column}
/* <div> · ✓Website pages */
.how-51{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font:400 13.5px Geist,sans-serif}
/* <span> · ✓Website pages */
.how-52{color:#C9FF35}
/* <span> · Website pages1 */
.how-53{flex:1;color:#e4e7dc}
/* <span> · 148 */
.how-54{font:400 12px 'JetBrains Mono',monospace;color:#7d8374}
/* <span> · Brand voice and tone */
.how-55{width:8px;height:8px;border-radius:50%;background:#C9FF35;animation:czpulse 1s infinite}
/* <div> */
.how-56{position:absolute;inset:0;display:flex;align-items:center;opacity:0}
/* <span> · private */
.how-57{font:400 12px Geist,sans-serif;color:#7d8374}
/* <div> */
.how-58{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
/* <div> */
.how-59{position:relative;width:140px;height:140px}
/* <svg> */
.how-60{transform:rotate(-90deg)}
/* <circle> */
.how-61{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9}
/* <circle> */
.how-62{fill:none;stroke:#C9FF35;stroke-width:9;stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:83;}
/* <div> · 78% */
.how-63{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 32px Geist,sans-serif;letter-spacing:-.04em}
/* <div> */
.how-64{display:flex;flex-direction:column;gap:14px}
/* <div> */
.how-65{display:flex;flex-direction:column;gap:6px}
/* <div> · Productsdone */
.how-66{display:flex;justify-content:space-between;font:400 13px Geist,sans-serif}
/* <div> */
.how-67{height:5px;border-radius:9px;background:rgba(255,255,255,.08)}
/* <div> */
.how-68{width:100%;height:100%;border-radius:9px;background:#C9FF35;box-shadow:0 0 10px rgba(201,255,53,.5)}
/* <div> */
.how-69{width:84%;height:100%;border-radius:9px;background:#C9FF35;box-shadow:0 0 10px rgba(201,255,53,.5)}
/* <div> */
.how-70{width:40%;height:100%;border-radius:9px;background:#C9FF35;box-shadow:0 0 10px rgba(201,255,53,.5)}
/* <span> · no code for you */
.how-71{font:400 11px 'JetBrains Mono',monospace;color:#7d8374}
/* <div> */
.how-72{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(201,255,53,.1);border:1px solid rgba(201,255,53,.3)}
/* <span> · Live on northpointbikes.com */
.how-73{width:10px;height:10px;border-radius:50%;background:#C9FF35;box-shadow:0 0 12px #C9FF35;animation:czpulse 1.4s infinite}
/* <span> · Live on northpointbikes.com */
.how-74{flex:1;font:500 14px Geist,sans-serif}
/* <div> */
.how-75{border-radius:18px;overflow:hidden;background:#0a0b08;border:1px solid rgba(255,255,255,.09)}
/* <div> */
.how-76{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#C9FF35;color:#0a0b08}
/* <span> · Northpoint assistant */
.how-77{width:22px;height:22px;border-radius:7px 7px 7px 2px;background:#0a0b08}
/* <span> · Northpoint assistant */
.how-78{font:600 13px Geist,sans-serif}
/* <div> */
.how-79{display:flex;flex-direction:column;gap:8px;padding:12px}
/* <div> · My e-bike battery drains fast. W */
.how-80{align-self:flex-end;max-width:85%;padding:8px 12px;border-radius:12px 12px 4px 12px;background:#C9FF35;color:#0a0b08;font:500 12.5px/1.45 Geist,sans-serif}
/* <div> · Charge it to 80% and store it in */
.how-81{align-self:flex-start;max-width:85%;padding:8px 12px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.08);color:#eef0e6;font:400 12.5px/1.45 Geist,sans-serif}
/* <span> · 3 live chats */
.how-82{font:400 12px Geist,sans-serif;color:#C9FF35}
/* <div> */
.how-83{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.3);font:400 13px Geist,sans-serif}
/* <span> · Emma · shipping to Canada */
.how-84{width:8px;height:8px;border-radius:50%;background:#7d8374}
/* <span> · Emma · shipping to Canada */
.how-85{flex:1}
/* <div> */
.how-86{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(201,255,53,.1);border:1px solid rgba(201,255,53,.3);font:500 13px Geist,sans-serif}
/* <span> · Liam · custom frame quote */
.how-87{width:8px;height:8px;border-radius:50%;background:#C9FF35;box-shadow:0 0 8px #C9FF35}
/* <span> · Take over */
.how-88{padding:5px 10px;border-radius:999px;background:#C9FF35;color:#0a0b08;font:600 11px Geist,sans-serif}
/* <div> · SARA */
.how-89{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:rgba(0,0,0,.3)}
/* <div> · SARAH JOINED THE CHAT */
.how-90{align-self:center;font:400 11px 'JetBrains Mono',monospace;color:#C9FF35}
/* <div> · 1,284 */
.how-91{display:flex;align-items:baseline;gap:10px}
/* <span> · 1,284chats saved and rev */
.how-92{font:600 44px Geist,sans-serif;letter-spacing:-.05em}
/* <span> · chats saved and reviewed */
.how-93{font:400 13px Geist,sans-serif;color:#a7ac9c}
/* <div> */
.how-94{display:flex;align-items:flex-end;gap:6px;height:64px}
/* <span> */
.how-95{flex:1;height:38%;border-radius:4px;background:rgba(201,255,53,.25)}
/* <span> */
.how-96{flex:1;height:44%;border-radius:4px;background:rgba(201,255,53,.3)}
/* <span> */
.how-97{flex:1;height:52%;border-radius:4px;background:rgba(201,255,53,.4)}
/* <span> */
.how-98{flex:1;height:61%;border-radius:4px;background:rgba(201,255,53,.5)}
/* <span> */
.how-99{flex:1;height:70%;border-radius:4px;background:rgba(201,255,53,.65)}
/* <span> */
.how-100{flex:1;height:82%;border-radius:4px;background:rgba(201,255,53,.8)}
/* <span> */
.how-101{flex:1;height:94%;border-radius:4px;background:#C9FF35;box-shadow:0 0 12px rgba(201,255,53,.5)}
/* <div> · ANSWER ACCURACY81% → 94% */
.how-102{display:flex;justify-content:space-between;font:400 11px 'JetBrains Mono',monospace;color:#7d8374}