/* GMNI WCP showcase (homepage case study). Scoped to .gws; colours follow the site's own variables,
   so light and dark mode come for free. Animations stick to transform and opacity. */
.gws{
  --g-primary:var(--primary);--g-primary-2:var(--primary-hover,var(--primary));
  --g-text:var(--black);--g-text-80:color-mix(in srgb,var(--black) 80%,transparent);--g-text-60:color-mix(in srgb,var(--black) 60%,transparent);--g-text-40:color-mix(in srgb,var(--black) 40%,transparent);
  --g-card:color-mix(in srgb,var(--white) 88%,var(--primary));--g-line:color-mix(in srgb,var(--black) 11%,transparent);
  --g-glow:color-mix(in srgb,var(--primary) 30%,transparent);
  --g-poppins:"GWS Poppins",Poppins,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --g-oswald:"GWS Oswald",Oswald,"Arial Narrow",Impact,sans-serif;
  --g-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  gap:56px;
  /* sit above the section's decorative hero-box (absolute, z-index 0, later in the DOM) */
  position:relative;z-index:1;
}
/* the story starts on the same gutter as the other sections and the phone ends on it */
.gws{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-content:space-between;align-items:center;column-gap:64px}

/* story (Bricks elements) */
.gws .gws-story{display:flex;flex-direction:column;align-items:flex-start;gap:22px;text-align:left;max-width:700px}
.gws .gws-client{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:14px;width:auto;max-width:100%}
.gws .gws-client__logo{width:48px;height:48px;flex:0 0 48px;border-radius:50%;overflow:hidden}
.gws .gws-client__logo img{width:100%;height:100%;object-fit:cover;display:block}
.gws .gws-client__text{display:flex;flex-direction:column;gap:2px;width:auto;min-width:0;flex:1 1 auto}
.gws .gws-client__name{font-size:16px;font-weight:600;line-height:1.3;color:var(--g-text)}
.gws .gws-client__sub{font-size:14px;line-height:1.4;color:var(--g-text-60)}
.gws .gws-beats{display:flex;flex-direction:column;gap:16px}
.gws .gws-beat{display:grid;grid-template-columns:76px 1fr;column-gap:16px;align-items:baseline;padding-top:16px;border-top:1px solid var(--g-line)}
.gws .gws-beat__label{font:500 12px/1.6 var(--g-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g-text-40)}
.gws .gws-beat--now .gws-beat__label{color:var(--g-primary)}
.gws .gws-beat__text{margin:0;font-size:17px;line-height:1.55;color:var(--g-text-80)}
.gws .gws-beat--now .gws-beat__text{color:var(--g-text)}
.gws .gws-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--g-line);border-bottom:1px solid var(--g-line)}
.gws .gws-stat{display:flex;flex-direction:column;gap:4px}
.gws .gws-stat__num{font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em;background:linear-gradient(90deg,var(--g-text),var(--g-primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.gws .gws-stat__label{font-size:14px;line-height:1.4;color:var(--g-text-60)}
.gws .gws-quote{margin:0;padding:2px 0 2px 20px;border-left:2px solid var(--g-primary);display:flex;flex-direction:column;gap:8px;font-family:inherit;font-style:normal;quotes:none;background:none}
.gws .gws-quote::before,.gws .gws-quote::after{content:none}
.gws .gws-quote__text,.gws .gws-quote__cite{font-family:inherit}
.gws .gws-quote__text{margin:0;font-size:20px;line-height:1.45;font-weight:500;color:var(--g-text)}
.gws .gws-quote__cite{font-size:14px;font-style:normal;color:var(--g-text-60)}

/* stage: steps on the left, phone on the right */
.gws .gws-stage{display:flex;flex-direction:row;align-items:center;gap:48px;width:auto}
.gws .gws-stage>.brxe-shortcode{display:contents}

/* steps (Bricks elements): a vertical timeline to the left of the phone on desktop */
.gws .gws-steps{--gws-axis:y;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:250px;flex:0 0 250px;order:-1}
.gws .gws-steps>li{display:block;width:100%;margin:0;position:relative}
.gws .gws-step{position:relative;width:100%;margin:0;display:grid;grid-template-columns:42px 1fr;column-gap:16px;row-gap:2px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid transparent;background:none;font:inherit;color:var(--g-text-60);cursor:pointer;-webkit-appearance:none;appearance:none;text-align:left;transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s}
.gws .gws-step:hover{color:var(--g-text-80)}
.gws .gws-step:focus-visible{outline:2px solid var(--g-primary);outline-offset:3px}
.gws .gws-step__n{grid-column:1;grid-row:1/span 2;position:relative;z-index:1;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:500 13px/1 var(--g-mono);color:var(--g-text-60);background:var(--white);border:1px solid var(--g-line);transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s}
.gws .gws-step__ts{grid-column:2;font-size:18px;font-weight:600;line-height:1.25;white-space:nowrap;align-self:end}
.gws .gws-step__s{grid-column:2;font-size:14px;line-height:1.4;color:var(--g-text-40);align-self:start;transition:color .35s}
.gws .gws-step__bar{position:absolute;left:36px;top:57px;bottom:-25px;width:2px;height:auto;border-radius:2px;background:var(--g-line);overflow:hidden}
.gws .gws-steps>li:last-child .gws-step__bar{display:none}
.gws .gws-step__fill{display:block;width:100%;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--g-primary),var(--g-primary-2));transform:scaleY(0);transform-origin:50% 0}
.gws .gws-step.is-done .gws-step__n{background:var(--g-pt20);border-color:var(--g-pt40);color:var(--g-primary)}
.gws .gws-step.is-on{background:var(--g-card);border-color:var(--g-pt40);color:var(--g-text);box-shadow:0 18px 40px -24px var(--g-glow)}
.gws .gws-step.is-on .gws-step__n{background:linear-gradient(135deg,var(--g-primary),var(--g-primary-2));border-color:transparent;color:var(--white);box-shadow:0 0 0 6px var(--g-pt20),0 0 28px var(--g-glow)}
.gws .gws-step.is-on .gws-step__s{color:var(--g-text-60)}
.gws .gws-step.is-on::after{content:"";position:absolute;top:50%;right:-49px;width:44px;height:2px;background:linear-gradient(90deg,var(--g-primary),transparent);animation:gws-in .4s ease both}
@keyframes gws-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* phone */
.gws .gws-phone-col{position:relative;display:flex;flex-direction:column;align-items:center}
.gws .gws-phone-col::before{content:"";position:absolute;left:-60%;right:-60%;top:-5%;bottom:-5%;background:radial-gradient(closest-side,var(--g-glow),transparent);z-index:-1;pointer-events:none}
.gws .gws-note{margin:14px 0 0;font-size:12px;color:var(--g-text-40);text-align:center}
.gws .gws-phone{--s:.76;position:relative;padding:10px;border-radius:calc(56px*var(--s) + 10px);background:linear-gradient(160deg,#3a3440,#0e0c11 60%);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 40px 80px -24px rgba(0,0,0,.55)}
/* the screen gets its own layer so the phone's animation never repaints the section behind it */
.gws .gws-screen{position:relative;width:calc(390px*var(--s));height:calc(844px*var(--s));border-radius:calc(56px*var(--s));overflow:hidden;background:#231F20;contain:strict;isolation:isolate;will-change:transform}
.gws .gws-cv{position:absolute;top:0;left:0;width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0;font-family:var(--g-poppins);color:#E9E9E9;background:#231F20;text-align:left;line-height:1.4;letter-spacing:normal;text-transform:none}
.gws .gws-cv *{box-sizing:border-box}
.gws .gws-cv p{margin:0}

/* WCP UI inside the phone (390px canvas) */
.gws .w-status{position:absolute;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:4px 30px 0 44px;font:600 16px/1 -apple-system,"SF Pro Text","Helvetica Neue",sans-serif;color:#fff;z-index:40}
.gws .w-status svg{height:12px;width:auto}
.gws .w-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:122px;height:36px;border-radius:20px;background:#000;z-index:41}
.gws .w-top{position:absolute;top:54px;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.1);background:#231F20;z-index:20;transition:opacity .4s,transform .4s}
.gws .w-top img{width:48px;height:48px;display:block}
.gws .w-burger{display:flex;flex-direction:column;gap:7px}
.gws .w-burger i{display:block;width:30px;height:2px;background:#ddd;border-radius:2px}
.gws .app-mode .w-top{opacity:0;transform:translateY(-20px)}
.gws .scr{position:absolute;top:118px;left:0;right:0;bottom:0;padding:22px 20px;opacity:0;transform:translateX(34px);transition:opacity .35s .14s,transform .5s cubic-bezier(.2,.75,.2,1) .14s;pointer-events:none}
.gws .scr.on{opacity:1;transform:none}
.gws .scr.out{opacity:0;transform:translateX(-34px);transition:opacity .16s,transform .3s}
.gws .scr-app{top:54px}
.gws .tapped{transform:scale(.95)!important}

/* flags (simplified) */
.gws .flag{display:inline-block;width:26px;height:18px;border-radius:3px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.gws .flag.lg{width:40px;height:28px;border-radius:4px}
.gws .flag.ar{background:radial-gradient(circle,#F6B40E 0 13%,transparent 14%),linear-gradient(#74ACDF 0 33.3%,#fff 0 66.6%,#74ACDF 0)}
.gws .flag.it{background:linear-gradient(90deg,#009246 0 33.3%,#fff 0 66.6%,#CE2B37 0)}
.gws .flag.ng{background:linear-gradient(90deg,#008751 0 33.3%,#fff 0 66.6%,#008751 0)}
.gws .flag.co{background:linear-gradient(#FCD116 0 50%,#003893 0 75%,#CE1126 0)}

/* 1a. your division */
.gws .w-bars i.off{background:#443c3e}
.gws [data-scr="form1"] .w-h{margin-bottom:18px}
.gws .w-field{position:relative;margin-bottom:20px}
.gws .w-flbl{font:600 15px/1.3 var(--g-poppins);color:#fff;margin-bottom:8px}
.gws .w-in{height:50px;border-radius:12px;background:#fff;color:#231F20;display:flex;align-items:center;gap:10px;padding:0 16px;font:400 16px var(--g-poppins);transition:box-shadow .2s,transform .15s}
.gws .w-in .ph{color:#7a7375}
.gws .w-in.focus{box-shadow:0 0 0 4px rgba(237,67,34,.25)}
.gws .w-in .caret{margin-left:auto;width:10px;height:10px;border-right:2px solid #555;border-bottom:2px solid #555;transform:rotate(45deg) translateY(-3px)}
.gws .typing::after{content:"";display:inline-block;width:2px;height:18px;margin-left:1px;background:#ED4322;vertical-align:-3px;animation:gws-blink .8s steps(1) infinite}
@keyframes gws-blink{50%{opacity:0}}
.gws .w-row{display:flex;justify-content:flex-end}
.gws .w-next{display:flex;justify-content:center;align-items:center;width:140px;height:46px;border-radius:999px;background:#ED4322;color:#fff;font:600 16px var(--g-poppins);transition:transform .15s}
.gws .w-dd,.gws .w-cp{position:absolute;left:0;right:0;top:86px;background:#fff;border-radius:12px;box-shadow:0 24px 48px rgba(0,0,0,.5);padding:6px;z-index:6;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top;transition:opacity .16s,transform .2s;pointer-events:none}
.gws .w-dd.open,.gws .w-cp.open{opacity:1;transform:none}
.gws .w-opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;color:#231F20;font:400 15px var(--g-poppins);transition:background-color .2s,color .2s}
.gws .w-opt.hl{background:#fdeae6;color:#ED4322;font-weight:600}
.gws .w-cp{padding:10px}
.gws .w-search{height:42px;border:1px solid #ddd;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;margin-bottom:6px;font:400 15px var(--g-poppins);color:#231F20}
.gws .w-search .ph{color:#999}
.gws .w-cp .w-opt.gone{display:none}
.gws .flag.af{background:linear-gradient(90deg,#000 0 33.3%,#BE0000 0 66.6%,#009900 0)}
.gws .flag.al{background:radial-gradient(circle,#000 0 22%,transparent 23%),#E41E20}
.gws .flag.dz{background:radial-gradient(circle at 55% 50%,#D21034 0 14%,transparent 15%),linear-gradient(90deg,#006233 0 50%,#fff 0)}
.gws .flag.ad{background:linear-gradient(90deg,#10069F 0 33.3%,#FEDF00 0 66.6%,#D50032 0)}
.gws .flag.ao{background:linear-gradient(#CC092F 0 50%,#000 0)}

/* 1b. kit */
.gws .w-steplbl{font:600 13px var(--g-poppins);letter-spacing:.06em;color:#bdb6b8;text-transform:uppercase}
.gws .w-bars{display:flex;gap:8px;margin:10px 0 22px}
.gws .w-bars i{flex:1;height:6px;border-radius:3px;background:#2C328C}
.gws .w-h{font:700 26px/1.15 var(--g-poppins);color:#fff;margin-bottom:6px}
.gws .w-team-line{display:flex;align-items:center;gap:10px;font:500 15px var(--g-poppins);color:#bdb6b8;margin-bottom:26px}
.gws .w-lbl{font:600 15px/1.3 var(--g-poppins);color:#fff;margin-bottom:14px}
.gws .w-krow{display:flex;gap:16px;align-items:flex-start}
.gws .w-jer{flex:0 0 72px;width:72px;height:72px;transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.gws .w-jer.pop{transform:scale(1.14) rotate(-4deg)}
.gws .w-kr{flex:1;display:flex;flex-direction:column;gap:10px}
.gws .w-chips{display:flex;flex-wrap:wrap;gap:6px}
.gws .w-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:500 11.5px var(--g-poppins);letter-spacing:.05em;text-transform:uppercase;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#e9e9e9;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.gws .w-chip.act{background:#F9A121;border-color:#F9A121;color:#231F20}
.gws .w-slots{display:none;gap:6px}
.gws .w-slots.show{display:flex;animation:gws-in .3s ease both}
.gws .w-slot.act{border-color:#F9A121;box-shadow:inset 0 0 0 1px #F9A121}
.gws .w-slot .sw{width:12px;height:12px;border-radius:50%;border:1px solid #999;background:repeating-linear-gradient(45deg,#777 0 2px,transparent 2px 4px)}
.gws .w-pal{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gws .w-unk{font:500 13px var(--g-poppins);padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#e9e9e9;transition:background-color .2s,color .2s,border-color .2s}
.gws .w-unk.act{background:#F9A121;border-color:#F9A121;color:#231F20}
.gws .w-sw{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.22);transition:box-shadow .2s,transform .15s}
.gws .w-sw.r1{box-shadow:0 0 0 2px #231F20,0 0 0 4px #F9A121}
.gws .w-sw.r2{box-shadow:0 0 0 2px #231F20,0 0 0 4px #fff}
.gws .w-sw.rb{background:conic-gradient(red,#ff0,lime,cyan,blue,#f0f,red);border-color:rgba(255,255,255,.4)}
.gws .w-kfoot{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 34px;z-index:3}
.gws .w-kfoot hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:0 0 14px}
.gws .w-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.gws .w-total span{font:600 13px var(--g-poppins);letter-spacing:.1em;color:#bdb6b8}
.gws .w-total b{font:700 30px var(--g-poppins);color:#fff}
.gws .w-reg{display:flex;justify-content:center;align-items:center;height:54px;border-radius:12px;background:#ED4322;color:#fff;font:600 16px var(--g-poppins);letter-spacing:.06em;transition:transform .15s}

/* 2. checkout */
.gws .w-disp{font:600 34px/1 var(--g-oswald);text-transform:uppercase;color:#fff;letter-spacing:.01em;margin-bottom:16px}
.gws .w-ck{position:relative;background:#fff;color:#231F20;border-radius:16px;padding:18px;overflow:hidden}
.gws .w-item{display:flex;align-items:center;gap:12px}
.gws .w-thumb{width:46px;height:46px;border-radius:10px;background:#231F20;display:grid;place-items:center}
.gws .w-thumb img{width:36px;height:36px;display:block}
.gws .w-item .nm{flex:1}
.gws .w-item .nm b{display:block;font:600 15px var(--g-poppins)}
.gws .w-item .nm span{font:400 13px var(--g-poppins);color:#7a7375}
.gws .w-item .pr{font:600 15px var(--g-poppins)}
.gws .w-ck hr{border:0;border-top:1px solid #eee;margin:14px 0}
.gws .w-ttl{display:flex;justify-content:space-between;font:600 15px var(--g-poppins)}
.gws .w-ttl b{font:700 18px var(--g-poppins)}
.gws .w-cl{font:500 12px var(--g-poppins);color:#7a7375;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px}
.gws .w-pm{display:flex;align-items:flex-start;gap:12px;border:1px solid #e3e3e3;border-radius:10px;padding:13px 14px;margin-bottom:8px}
.gws .w-pm .rd{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid #c9c4c6;margin-top:2px}
.gws .w-pm.sel{border-color:#ED4322;box-shadow:inset 0 0 0 1px #ED4322}
.gws .w-pm.sel .rd{border:6px solid #ED4322}
.gws .w-pm b{display:block;font:600 15px var(--g-poppins)}
.gws .w-pm span{font:400 12.5px var(--g-poppins);color:#7a7375}
.gws .w-cards{margin-left:auto;display:flex;gap:4px}
.gws .w-cards i{width:30px;height:20px;border-radius:4px;display:block}
.gws .w-cards i:nth-child(1){background:linear-gradient(135deg,#1a1f71,#2a3bb7)}
.gws .w-cards i:nth-child(2){background:radial-gradient(circle at 38% 50%,#eb001b 0 30%,transparent 31%),radial-gradient(circle at 62% 50%,#f79e1b 0 30%,transparent 31%),#222}
.gws .w-pay,.gws .w-sub{position:relative;display:flex;justify-content:center;align-items:center;height:50px;border-radius:10px;background:#ED4322;color:#fff;font:600 16px var(--g-poppins);transition:transform .15s}
.gws .w-pay{margin-top:14px}
.gws .w-pay .sp,.gws .w-sub .sp{position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0}
.gws .loading .lb{opacity:0}
.gws .loading .sp{opacity:1;animation:gws-spin .8s linear infinite}
@keyframes gws-spin{to{transform:rotate(360deg)}}
.gws .w-ok{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:20px;opacity:0;transition:opacity .35s;pointer-events:none}
.gws .w-ok.on{opacity:1}
.gws .w-ok svg{width:84px;height:84px;margin-bottom:6px}
.gws .w-ok circle{stroke-dasharray:240;stroke-dashoffset:240}
.gws .w-ok path{stroke-dasharray:60;stroke-dashoffset:60}
.gws .w-ok.on circle{transition:stroke-dashoffset .6s ease .1s;stroke-dashoffset:0}
.gws .w-ok.on path{transition:stroke-dashoffset .4s ease .6s;stroke-dashoffset:0}
.gws .w-ok b{font:700 22px var(--g-poppins)}
.gws .w-ok .tm{display:flex;align-items:center;gap:8px;font:500 15px var(--g-poppins);color:#443c3e}

/* 3. roster */
.gws .w-rc{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden}
.gws .w-rc.shake{animation:gws-shake .35s}
@keyframes gws-shake{30%{transform:translateY(4px)}60%{transform:translateY(-2px)}}
.gws .w-rc::before{content:"";display:block;height:4px;background:linear-gradient(90deg,#ED4322,#F9A121)}
.gws .w-rcin{padding:20px 18px 22px;display:flex;flex-direction:column}
.gws .w-eye{font:500 11.5px var(--g-mono);letter-spacing:.16em;text-transform:uppercase;color:#ED4322}
.gws .w-team{display:flex;align-items:center;gap:12px;margin:10px 0 12px}
.gws .w-team b{font:600 32px/1 var(--g-oswald);text-transform:uppercase;color:#fff;letter-spacing:.01em}
.gws .w-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.gws .w-pill{font:600 11px var(--g-poppins);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#e9e9e9;transition:background-color .3s,color .3s,border-color .3s}
.gws .w-pill.need{background:#fed7aa;color:#7c2d12;border-color:#fed7aa}
.gws .w-pill.recv{background:#fde68a;color:#78350f;border-color:#fde68a}
.gws .w-pill.appr{background:#bbf7d0;color:#14532d;border-color:#bbf7d0}
.gws .w-up{font:600 15px var(--g-poppins);color:#fff;margin-bottom:10px}
.gws .w-zone{position:relative;height:120px;border:2px dashed rgba(255,255,255,.25);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;transition:border-color .3s,background-color .3s}
.gws .w-zone .z1{font:500 14px var(--g-poppins);color:#fff}
.gws .w-zone .z2{font:400 12px var(--g-poppins);color:#bdb6b8}
.gws .w-zone.drag{border-color:#ED4322;background:rgba(237,67,34,.08)}
.gws .w-zone.done{border-style:solid;border-color:#29A745;background:rgba(41,167,69,.1)}
.gws .w-zone .zd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .3s}
.gws .w-zone.done .zd{opacity:1}
.gws .w-zone.done .z1,.gws .w-zone.done .z2{opacity:0}
.gws .w-zone .zd b{display:block;font:600 14px var(--g-poppins);color:#fff;text-align:left}
.gws .w-zone .zd span{display:block;font:500 12px var(--g-poppins);color:#4ade80;text-align:left}
.gws .w-pdf{display:block;width:34px;height:42px;border-radius:4px;background:#fff;position:relative;flex:0 0 auto}
.gws .w-pdf::after{content:"PDF";position:absolute;left:-4px;bottom:6px;font:700 9px var(--g-poppins);color:#fff;background:#DC3545;padding:1px 4px;border-radius:2px}
.gws .w-pdf::before{content:"";position:absolute;left:7px;right:7px;top:9px;height:14px;background:repeating-linear-gradient(#ddd 0 2px,transparent 2px 5px)}
.gws .w-fly{position:absolute;left:50%;top:50%;margin:-30px 0 0 -24px;width:48px;height:60px;opacity:0;transform:translate(250px,170px) rotate(18deg);transition:transform .8s cubic-bezier(.25,.8,.3,1),opacity .3s;z-index:4}
.gws .w-fly .w-pdf{width:48px;height:60px;box-shadow:0 8px 16px rgba(0,0,0,.45)}
.gws .w-fly.go{opacity:1;transform:translate(0,0) rotate(-6deg)}
.gws .w-fly.drop{opacity:0;transform:translate(0,0) scale(.5);transition:transform .25s,opacity .25s}
.gws .w-sub{border-radius:999px;font-size:15px;letter-spacing:.06em;margin-top:18px}
.gws .w-stamp{position:absolute;left:50%;top:58%;z-index:5;transform:translate(-50%,-50%) rotate(-11deg) scale(2.4);opacity:0;border:5px solid #29A745;color:#29A745;background:rgba(27,24,25,.82);font:600 50px/1 var(--g-oswald);letter-spacing:.08em;padding:10px 24px 8px;border-radius:14px;pointer-events:none}
.gws .w-stamp.on{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1);transition:transform .32s cubic-bezier(.2,1.5,.4,1),opacity .15s}

/* 4. game day (fan app) */
.gws .w-live{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gws .w-livep{font:600 12px var(--g-poppins);letter-spacing:.06em;color:#fff;background:#1e8e3e;padding:5px 12px;border-radius:999px;display:flex;align-items:center;gap:6px}
.gws .w-livep i{width:7px;height:7px;border-radius:50%;background:#fff}
.gws .w-live span{font:600 16px var(--g-oswald);color:#ED4322;letter-spacing:.02em}
.gws .w-big{font:600 46px/1 var(--g-oswald);text-transform:uppercase;color:#fff;letter-spacing:.005em}
.gws .w-out{font:600 46px/1.05 var(--g-oswald);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.6px #f6f1e7;letter-spacing:.04em;margin-bottom:18px}
.gws .w-fx{border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:12px 14px 14px;margin-bottom:10px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1),border-color .5s}
.gws .scr.on .w-fx{opacity:1;transform:none}
.gws .scr.on .w-fx:nth-child(2){transition-delay:.1s}
.gws .scr.on .w-fx:nth-child(3){transition-delay:.2s}
.gws .w-fx.hot{border-color:rgba(237,67,34,.7);background:rgba(237,67,34,.08)}
.gws .w-fxt{display:flex;justify-content:space-between;margin-bottom:10px;font:500 11.5px var(--g-mono);letter-spacing:.08em;text-transform:uppercase}
.gws .w-fxt .tm{color:#ED4322}
.gws .w-fxt .dv{color:#9c9497}
.gws .w-fxm{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center}
.gws .w-side{display:flex;align-items:center;gap:7px;min-width:0}
.gws .w-side.r{justify-content:flex-end}
.gws .w-side svg{width:28px;height:28px;flex:0 0 auto}
.gws .w-side b{font:600 16px/1 var(--g-oswald);text-transform:uppercase;color:#fff;letter-spacing:.02em;white-space:nowrap}
.gws .w-sc{text-align:center;position:relative;height:40px}
.gws .w-sc .vs,.gws .w-sc .res{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .3s,transform .4s cubic-bezier(.2,1.5,.4,1)}
.gws .w-sc .vs{font:600 15px var(--g-oswald);color:#9c9497;letter-spacing:.06em}
.gws .w-sc .res{opacity:0;transform:scale(.6)}
.gws .w-sc .res b{font:600 24px/1 var(--g-oswald);color:#fff;letter-spacing:.04em}
.gws .w-sc .res span{font:500 9.5px var(--g-mono);letter-spacing:.12em;color:#4ade80;margin-top:3px}
.gws .w-fx.final .vs{opacity:0;transform:scale(.6)}
.gws .w-fx.final .res{opacity:1;transform:none}
.gws .w-view{position:absolute;inset:0;padding:22px 20px 0;transition:opacity .4s,transform .45s cubic-bezier(.2,.75,.2,1)}
.gws .w-view.hide{opacity:0;transform:translateX(30px);pointer-events:none}
.gws .w-view.left{opacity:0;transform:translateX(-30px)}
.gws .w-stand{border:2px solid #ED4322;border-radius:4px;background:linear-gradient(180deg,#141432,#0c0c22);margin-top:16px;position:relative}
.gws .w-sthd,.gws .w-str{display:grid;grid-template-columns:30px 1fr 30px 30px 30px 30px 40px;padding:0 12px}
.gws .w-sthd{padding:10px 12px;font:500 11px var(--g-mono);letter-spacing:.08em;color:#9c9497;border-bottom:1px solid rgba(255,255,255,.08)}
.gws .w-stb{position:relative;height:232px}
.gws .w-str{position:absolute;left:0;right:0;height:58px;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);transition:transform .7s cubic-bezier(.3,.8,.25,1),background-color .5s;transform:translateY(calc(var(--p,0)*58px))}
.gws .w-str .rk{font:600 20px var(--g-oswald);color:#ED4322}
.gws .w-str .tn{display:flex;align-items:center;gap:8px;font:600 16px var(--g-oswald);text-transform:uppercase;color:#fff}
.gws .w-str .tn .flag{width:22px;height:15px}
.gws .w-str .c{font:400 15px var(--g-poppins);color:#e9e9e9;text-align:center}
.gws .w-str .c.pt{font-weight:600;color:#fff}
.gws .w-str.hot{background:rgba(237,67,34,.16)}
.gws .w-tabs{position:absolute;left:12px;right:12px;bottom:26px;height:68px;border-radius:20px;background:#231F20;border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.5);display:grid;grid-template-columns:repeat(4,1fr);z-index:8}
.gws .w-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:500 10px var(--g-poppins);color:#fff}
.gws .w-tab svg{width:22px;height:22px;color:#cfc9cb;transition:color .25s}
.gws .w-tab.act svg{color:#ED4322}

/* tap indicator */
.gws .finger{position:absolute;left:-23px;top:-23px;width:46px;height:46px;z-index:60;pointer-events:none;will-change:transform;opacity:0;transform:translate(300px,700px);transition:transform .5s cubic-bezier(.45,.05,.25,1),opacity .3s}
.gws .finger.on{opacity:1}
.gws .finger i{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.32);border:2px solid rgba(255,255,255,.75);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .14s}
.gws .finger.press i{transform:scale(.78)}
.gws .finger::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);opacity:0}
.gws .finger.press::after{animation:gws-ripple .5s ease-out}
@keyframes gws-ripple{from{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.9)}}

/* tablet and phone: story first, phone below */
@media (min-width:1600px){
  .gws .gws-phone{--s:.8}
  .gws .gws-steps{width:270px;flex-basis:270px}
}
@media (max-width:1279px){
  .gws .gws-stage{flex-direction:column;gap:18px}
  .gws .gws-steps{--gws-axis:x;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;max-width:420px;flex:none;order:0}
  .gws .gws-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:8px 4px 14px;border-radius:12px;box-shadow:none}
  .gws .gws-step__n{width:auto;height:auto;border:0;background:none!important;box-shadow:none!important;font-size:11px;color:var(--g-text-40)}
  .gws .gws-step.is-on .gws-step__n{color:var(--g-primary)}
  .gws .gws-step__n,.gws .gws-step__ts{align-self:center}
  .gws .gws-step__ts{font-size:13.5px}
  .gws .gws-step__s{display:none}
  .gws .gws-step__bar{top:auto;bottom:6px;left:12px;right:12px;width:auto;height:2px;opacity:0;transition:opacity .3s}
  .gws .gws-steps>li:last-child .gws-step__bar{display:block}
  .gws .gws-step.is-on .gws-step__bar{opacity:1}
  .gws .gws-step__fill{background:linear-gradient(90deg,var(--g-primary),var(--g-primary-2));transform:scaleX(0);transform-origin:0 50%}
  .gws .gws-step.is-on{border-color:var(--g-line)}
  .gws .gws-step.is-on::after{display:none}
}
@media (max-width:1100px){
  .gws{column-gap:48px}
  .gws .gws-phone{--s:.68}
}
@media (max-width:960px){
  .gws{grid-template-columns:1fr;row-gap:44px}
  .gws .gws-story{max-width:680px;width:100%;justify-self:start}
  .gws .gws-stage{width:100%}
}
@media (max-width:600px){
  .gws .gws-beat{grid-template-columns:1fr;row-gap:4px}
  .gws .gws-beat__text{font-size:16px}
  .gws .gws-stats{gap:10px}
  .gws .gws-stat__num{font-size:30px}
  .gws .gws-stat__label{font-size:13px}
  .gws .gws-quote__text{font-size:18px}
  .gws .gws-phone{--s:.6}
  .gws .gws-note{margin-top:8px}
}
/* "Built" row: the features of the whole site as small tags (2026-10-10) */
.gws .gws-beat--built{grid-template-columns:1fr;row-gap:12px}
.gws .gws-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.gws .gws-chip{margin:0;padding:7px 12px;border-radius:999px;border:1px solid var(--g-line);font-size:13px;line-height:1.2;color:var(--g-text-80);white-space:nowrap}

/* "Some of what we built" stays at two rows: six tags below 1440px, four on phones */
@media (max-width:1439px){.gws .gws-chip:nth-child(n+7){display:none}}
@media (max-width:600px){.gws .gws-chip:nth-child(n+5){display:none}}

/* phone glow uses the same deep purple as the other sections (2026-10-11) */
.gws .gws-phone-col::before{background:radial-gradient(closest-side,var(--secondary-trans-50,rgba(47,47,108,.5)),transparent)}
/* desktop: phone on the left gutter, story on the right (2026-10-10) */
@media (min-width:961px){
  .gws{grid-template-columns:auto minmax(0,1fr)}
  .gws .gws-stage{order:-1}
  .gws .gws-story{justify-self:end}
}
@media (min-width:1280px){
  .gws .gws-steps{order:1}
  .gws .gws-step.is-on::after{right:auto;left:-49px;background:linear-gradient(270deg,var(--g-primary),transparent)}
}

@media (prefers-reduced-motion:reduce){
  .gws *,.gws *::before,.gws *::after{transition:none!important;animation:none!important}
  .gws .finger{display:none}
}