/* GFSX V22 — interactive, screenshot-guided ordering process */
#how-it-works.gfsx-process-v21{background:radial-gradient(ellipse at 80% 48%,rgba(20,74,151,.20),transparent 54%),linear-gradient(180deg,#090e17,#0b1220);border-top:1px solid rgba(82,138,201,.17);border-bottom:1px solid rgba(82,138,201,.14);padding:89px 0 93px;scroll-margin-top:78px;overflow:hidden}
.gfsx-process-v21 .gfsx-process-intro{text-align:center;margin:0 auto 43px;max-width:790px}
.gfsx-process-v21 .gfsx-process-kicker{color:#75bdff;font:800 10px/1.2 'Manrope',Arial,sans-serif;letter-spacing:.19em;margin-bottom:16px}
.gfsx-process-v21 .gfsx-process-intro h2{font:900 clamp(33px,3.9vw,54px)/1.16 'Manrope','DM Sans',Arial,sans-serif;letter-spacing:-.056em;color:#f5faff;margin:0 0 15px}
.gfsx-process-v21 .gfsx-process-intro h2 span{background:linear-gradient(100deg,#a1deff,#367efa);-webkit-background-clip:text;background-clip:text;color:transparent}
.gfsx-process-v21 .gfsx-process-intro p{font:500 clamp(12px,1.15vw,15px)/1.75 'Manrope','DM Sans',sans-serif;color:#a8b9d0;max-width:660px;margin:0 auto}
.gfsx-process-v21 .gfsx-process-layout{display:grid;grid-template-columns:minmax(0,.90fr) minmax(0,1.25fr);gap:clamp(35px,5.1vw,80px);align-items:center}
.gfsx-process-v21 .gfsx-process-steps{display:flex;flex-direction:column;gap:9px;min-width:0}
.gfsx-process-v21 .gfsx-process-step{appearance:none;position:relative;display:flex;align-items:flex-start;text-align:left;gap:15px;padding:17px 17px 19px;background:transparent;border:1px solid transparent;border-radius:13px;color:#e5f1ff;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;width:100%;font-family:'Manrope','DM Sans',sans-serif}
.gfsx-process-v21 .gfsx-process-step:hover{background:rgba(22,50,86,.33)}
.gfsx-process-v21 .gfsx-process-step.is-active{border-color:rgba(60,145,253,.61);background:linear-gradient(110deg,rgba(21,62,118,.33),rgba(13,26,45,.65));box-shadow:inset 0 0 0 1px rgba(30,94,169,.12),0 15px 30px rgba(1,6,16,.22)}
.gfsx-process-v21 .gfsx-process-step:focus-visible{outline:2px solid #8accff;outline-offset:3px}
.gfsx-process-v21 .gfsx-process-step-index{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border:1px solid #2a4a75;background:#111b2b;border-radius:50%;font:900 12px/1 'Manrope',sans-serif;color:#f2f8ff;transition:background .2s}
.gfsx-process-v21 .gfsx-process-step.is-active .gfsx-process-step-index{background:#146ff2;border-color:#4ba7ff;box-shadow:0 0 18px #196dea60}
.gfsx-process-v21 .gfsx-process-step-copy{display:block;min-width:0}
.gfsx-process-v21 .gfsx-process-step-copy strong{display:block;font:800 clamp(13px,1.2vw,15px)/1.3 'Manrope','DM Sans',sans-serif;color:#eff6ff;letter-spacing:-.019em;margin:1px 0 7px}
.gfsx-process-v21 .gfsx-process-step-copy small{display:block;font:500 11px/1.65 'Manrope','DM Sans',sans-serif;color:#a0b2ca}
.gfsx-process-v21 .gfsx-process-step-progress{position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 13px 13px;overflow:hidden;background:transparent;pointer-events:none}
.gfsx-process-v21 .gfsx-process-step.is-active .gfsx-process-step-progress{background:#2a426b66}
.gfsx-process-v21 .gfsx-process-step-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#3e9aff,#80d6ff);box-shadow:0 0 12px #4da5ff;will-change:width}
.gfsx-process-v21 .gfsx-process-guide{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;min-height:46px;padding:0 22px;border-radius:999px;box-shadow:0 9px 32px #0559e629;font:800 12px/1 'Manrope',sans-serif}
.gfsx-process-v21 .gfsx-process-preview{min-width:0;position:relative}
.gfsx-process-v21 .gfsx-process-preview::before{content:'';position:absolute;inset:-25px -10px 36px;z-index:0;background:#166de2;filter:blur(80px);opacity:.14;pointer-events:none}
.gfsx-process-v21 .gfsx-process-browser{position:relative;border:1px solid #305276;border-radius:17px;background:#0a1323;overflow:hidden;box-shadow:0 26px 78px #0008,0 0 0 1px rgba(13,64,129,.14)}
.gfsx-process-v21 .gfsx-process-browser-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:41px;padding:0 15px;border-bottom:1px solid #29405e;background:linear-gradient(180deg,#172640,#101b2f);font:700 9px/1 'Manrope',sans-serif;color:#94b2d5}
.gfsx-process-v21 .gfsx-process-dots{display:flex;align-items:center;gap:6px;min-width:63px}
.gfsx-process-v21 .gfsx-process-dots i{height:8px;width:8px;border-radius:50%;background:#476a99}
.gfsx-process-v21 .gfsx-process-dots i:first-child{background:#5393df}
.gfsx-process-v21 .gfsx-process-browser-url{height:23px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;min-width:0;max-width:76%;width:67%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#0b1423;border:1px solid #2c415c;border-radius:999px;color:#a2b8d1;letter-spacing:.015em}
.gfsx-process-v21 .gfsx-process-browser-url span{color:#69d9ae}
.gfsx-process-v21 .gfsx-process-browser-side{font-size:9px;letter-spacing:.1em;color:#71b5ff}
.gfsx-process-v21 .gfsx-process-preview-button{appearance:none;display:block;position:relative;width:100%;padding:0;border:0;background:#071021;cursor:pointer;overflow:hidden;color:#f5faff}
.gfsx-process-v21 .gfsx-process-preview-button:focus-visible{outline:3px solid #72bdff;outline-offset:-4px}
.gfsx-process-v21 .gfsx-process-images{position:relative;width:100%;aspect-ratio:1000 / 570;display:block;overflow:hidden}
.gfsx-process-v21 .gfsx-process-images img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .38s ease;pointer-events:none}
.gfsx-process-v21 .gfsx-process-images img.is-active{opacity:1}
.gfsx-process-v21 .gfsx-process-preview-hint{position:absolute;right:13px;bottom:12px;padding:9px 11px;border-radius:8px;border:1px solid rgba(120,168,234,.30);background:rgba(5,13,25,.88);font:750 10px/1 'Manrope',sans-serif;letter-spacing:.01em;color:#daeaff;opacity:0;transition:opacity .2s}
.gfsx-process-v21 .gfsx-process-preview-button:hover .gfsx-process-preview-hint,.gfsx-process-v21 .gfsx-process-preview-button:focus-visible .gfsx-process-preview-hint,.gfsx-process-v21 .gfsx-process-preview-button[aria-pressed="true"] .gfsx-process-preview-hint{opacity:1}
.gfsx-process-v21 .gfsx-process-preview-hint span{font-size:12px;margin-right:5px}
.gfsx-process-v21 .gfsx-process-preview-caption{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;color:#a7bcda;font:650 10px/1.45 'Manrope',sans-serif}
.gfsx-process-v21 [data-process-counter]{color:#59b0ff;font-weight:900}
.gfsx-process-v21 .gfsx-process-caption-separator{padding:0 11px;color:#406690}
.gfsx-process-v21 .gfsx-process-example{text-transform:uppercase;letter-spacing:.07em;font-size:9px;color:#7899c0}
.gfsx-process-v21 .gfsx-process-safety{position:relative;display:flex;gap:9px;align-items:flex-start;margin-top:20px;color:#8fb7e7;font:600 11px/1.65 'Manrope',sans-serif}
.gfsx-process-v21 .gfsx-process-safety span{color:#61d3bc;font-weight:900}
@media (max-width:950px){.gfsx-process-v21 .gfsx-process-layout{gap:25px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.gfsx-process-v21 .gfsx-process-step{gap:12px;padding:15px 13px 16px}.gfsx-process-v21 .gfsx-process-step-copy small{font-size:10px}}
@media (max-width:760px){#how-it-works.gfsx-process-v21{padding:64px 0 75px}.gfsx-process-v21 .gfsx-process-intro{margin-bottom:33px}.gfsx-process-v21 .gfsx-process-layout{grid-template-columns:1fr;gap:28px}.gfsx-process-v21 .gfsx-process-steps{gap:6px}.gfsx-process-v21 .gfsx-process-step{min-height:70px;padding:14px 14px 17px}.gfsx-process-v21 .gfsx-process-step-copy small{font-size:11px}.gfsx-process-v21 .gfsx-process-guide{align-self:stretch;margin-top:13px}.gfsx-process-v21 .gfsx-process-preview-hint{opacity:.94}.gfsx-process-v21 .gfsx-process-browser-bar{height:34px;padding:0 9px}.gfsx-process-v21 .gfsx-process-dots{min-width:38px}.gfsx-process-v21 .gfsx-process-dots i{width:6px;height:6px}.gfsx-process-v21 .gfsx-process-browser-side{font-size:7px}.gfsx-process-v21 .gfsx-process-browser-url{font-size:7px}.gfsx-process-v21 .gfsx-process-safety{margin-top:13px}}
@media (prefers-reduced-motion:reduce){.gfsx-process-v21 .gfsx-process-images img,.gfsx-process-v21 .gfsx-process-step{transition:none}.gfsx-process-v21 .gfsx-process-step-progress{display:none}}


/* V23: compact, focused how-to-order section. */
#how-it-works.gfsx-process-v21{padding:58px 0 58px;scroll-margin-top:84px}
.gfsx-process-v21 .gfsx-process-intro{margin-bottom:24px;max-width:690px}
.gfsx-process-v21 .gfsx-process-kicker{font-size:9px;letter-spacing:.16em;margin-bottom:10px}
.gfsx-process-v21 .gfsx-process-intro h2{font-size:clamp(29px,3.4vw,46px);margin-bottom:7px;line-height:1.15}
.gfsx-process-v21 .gfsx-process-intro p{font-size:13px;line-height:1.65}
.gfsx-process-v21 .gfsx-process-layout{grid-template-columns:minmax(0,.90fr) minmax(0,1.22fr);gap:clamp(24px,4.5vw,65px)}
.gfsx-process-v21 .gfsx-process-steps{gap:5px}
.gfsx-process-v21 .gfsx-process-step{padding:12px 14px 14px;gap:12px;border-radius:11px}
.gfsx-process-v21 .gfsx-process-step-index{width:27px;height:27px;flex-basis:27px;font-size:11px}
.gfsx-process-v21 .gfsx-process-step-copy strong{font-size:13px;margin:0 0 4px}
.gfsx-process-v21 .gfsx-process-step-copy small{font-size:11px;line-height:1.5}
.gfsx-process-v21 .gfsx-process-browser{border-radius:14px}
.gfsx-process-v21 .gfsx-process-browser-bar{height:35px}
.gfsx-process-v21 .gfsx-process-preview-caption{margin-top:9px;font-size:10px}
.gfsx-process-v21 .gfsx-process-preview::before{inset:-12px -4px 20px;filter:blur(55px);opacity:.10}
.gfsx-process-v21 .gfsx-process-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:23px;padding:16px 20px;border:1px solid rgba(65,111,175,.34);border-radius:13px;background:rgba(12,26,46,.72);scroll-margin-top:96px}
.gfsx-process-v21 .gfsx-process-summary-copy{max-width:830px;min-width:0}
.gfsx-process-v21 .gfsx-process-summary-label{display:block;color:#7cbaff;font:850 9px/1.3 'Manrope',sans-serif;letter-spacing:.13em;margin-bottom:6px;scroll-margin-top:96px}
.gfsx-process-v21 .gfsx-process-summary p{font:550 11px/1.6 'Manrope','DM Sans',sans-serif;color:#9db6d3;margin:0}
.gfsx-process-v21 .gfsx-process-summary strong{color:#e1efff;font-weight:780}
.gfsx-process-v21 .gfsx-process-join{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 21px;border-radius:999px;background:#1769e9;border:1px solid #368af9;color:white;text-decoration:none;font:800 11px/1.1 'Manrope',sans-serif;box-shadow:0 10px 26px rgba(0,66,163,.23);transition:background .2s,transform .2s}
.gfsx-process-v21 .gfsx-process-join:hover{background:#2681fc;transform:translateY(-1px)}
.gfsx-process-v21 .gfsx-process-join:focus-visible{outline:2px solid #9ed6ff;outline-offset:3px}
.gfsx-process-v21 .gfsx-process-context:not([hidden]){margin:-5px auto 18px;max-width:850px;padding:10px 15px;border-radius:10px;border:1px solid rgba(74,144,229,.33);background:#112540;color:#c1dcff;font:600 11px/1.5 'Manrope',sans-serif;text-align:center}
@media(max-width:950px){
  .gfsx-process-v21 .gfsx-process-layout{gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
  .gfsx-process-v21 .gfsx-process-step{padding:10px 11px 12px;gap:10px}
  .gfsx-process-v21 .gfsx-process-step-copy small{font-size:10px}
  .gfsx-process-v21 .gfsx-process-summary{gap:14px}
}
@media(max-width:760px){
  #how-it-works.gfsx-process-v21{padding:43px 0 43px}
  .gfsx-process-v21 .gfsx-process-intro{margin-bottom:19px}
  .gfsx-process-v21 .gfsx-process-intro h2{font-size:clamp(27px,7vw,37px)}
  .gfsx-process-v21 .gfsx-process-intro p{font-size:12px}
  .gfsx-process-v21 .gfsx-process-layout{grid-template-columns:1fr;gap:20px}
  .gfsx-process-v21 .gfsx-process-steps{gap:3px}
  .gfsx-process-v21 .gfsx-process-step{min-height:0;padding:10px 11px 12px;gap:10px}
  .gfsx-process-v21 .gfsx-process-step-copy strong{margin:2px 0 2px;font-size:12px}
  .gfsx-process-v21 .gfsx-process-step-copy small{line-height:1.45;font-size:10px}
  .gfsx-process-v21 .gfsx-process-browser-bar{height:32px}
  .gfsx-process-v21 .gfsx-process-preview-caption{margin-top:9px}
  .gfsx-process-v21 .gfsx-process-summary{align-items:stretch;flex-direction:column;gap:12px;margin-top:19px;padding:16px}
  .gfsx-process-v21 .gfsx-process-join{align-self:stretch}
}
@media(max-width:430px){
  .gfsx-process-v21 .gfsx-process-step-copy small{display:none}
  .gfsx-process-v21 .gfsx-process-step.is-active .gfsx-process-step-copy small{display:block}
  .gfsx-process-v21 .gfsx-process-step{min-height:49px}
}
@media(prefers-reduced-motion:reduce){.gfsx-process-v21 .gfsx-process-join{transition:none}}


/* V24: Discord-first screenshots, cleaner preview chrome, refined copy. */
.gfsx-process-v21 .gfsx-process-kicker{color:#8ec7ff}
.gfsx-process-v21 .gfsx-process-intro{max-width:760px}
.gfsx-process-v21 .gfsx-process-intro h2{max-width:900px}
.gfsx-process-v21 .gfsx-process-layout{align-items:start}
.gfsx-process-v21 .gfsx-process-step{min-height:83px}
.gfsx-process-v21 .gfsx-process-step-copy strong{font-size:13.5px}
.gfsx-process-v21 .gfsx-process-step-copy small{font-size:11px;color:#a6b7cf}
.gfsx-process-v21 .gfsx-process-step.is-active{border-color:rgba(76,157,255,.72);background:linear-gradient(112deg,rgba(17,53,104,.50),rgba(10,19,33,.88));box-shadow:inset 0 0 0 1px rgba(71,153,255,.18),0 15px 34px rgba(1,8,18,.25)}
.gfsx-process-v21 .gfsx-process-step:hover{background:rgba(18,42,72,.42)}
.gfsx-process-v21 .gfsx-process-preview::before{inset:-18px -6px 26px;filter:blur(65px);opacity:.12}
.gfsx-process-v21 .gfsx-process-discord-frame{padding:8px;background:linear-gradient(180deg,rgba(17,27,44,.98),rgba(8,15,28,.98));border:1px solid rgba(62,97,143,.72);border-radius:18px;box-shadow:0 28px 76px rgba(0,0,0,.46),0 0 0 1px rgba(19,56,102,.15)}
.gfsx-process-v21 .gfsx-process-preview-button{border-radius:12px;background:#070d16;cursor:pointer}
.gfsx-process-v21 .gfsx-process-images{border-radius:12px;background:#0a1018}
.gfsx-process-v21 .gfsx-process-images img{object-fit:cover;object-position:center top}
.gfsx-process-v21 .gfsx-process-preview-caption{margin-top:12px;align-items:center}
.gfsx-process-v21 .gfsx-process-preview-caption [data-process-caption]{color:#d8e8ff;font-weight:760}
.gfsx-process-v21 .gfsx-process-example{color:#79a8d5}
.gfsx-process-v21 .gfsx-process-summary{margin-top:20px;padding:15px 18px;border-color:rgba(65,111,175,.28);background:rgba(11,22,38,.82)}
.gfsx-process-v21 .gfsx-process-summary-label{color:#8dc7ff}
.gfsx-process-v21 .gfsx-process-summary p{font-size:11px}
@media(max-width:950px){
  .gfsx-process-v21 .gfsx-process-step{min-height:76px}
}
@media(max-width:760px){
  .gfsx-process-v21 .gfsx-process-step{min-height:0}
  .gfsx-process-v21 .gfsx-process-discord-frame{padding:6px;border-radius:15px}
  .gfsx-process-v21 .gfsx-process-images,.gfsx-process-v21 .gfsx-process-preview-button{border-radius:10px}
}
@media(max-width:430px){
  .gfsx-process-v21 .gfsx-process-step-copy small{display:none}
  .gfsx-process-v21 .gfsx-process-step.is-active .gfsx-process-step-copy small{display:block}
  .gfsx-process-v21 .gfsx-process-step{min-height:52px}
}
