/* ═══════════════════════════════════════════════════════════════
GET STARTED — the rebuilt wizard.
Loads after th.css and uses its tokens, primitives and buttons.
Nothing from the legacy page is referenced here; that stylesheet
(th-legacy.css) is no longer loaded on this page at all.
═══════════════════════════════════════════════════════════════ */
.gs{position:relative;background:var(--void);padding-bottom:clamp(60px,9vh,110px)}
/* ══════════ hero ══════════ */
.gs-hero{position:relative;overflow:hidden;text-align:center;
padding:clamp(150px,20vh,215px) var(--pad) clamp(40px,6vh,70px)}
.gs-hero__fx{position:absolute;inset:-30% -10% 0;pointer-events:none;opacity:.8}
.gs-hero__in{position:relative;z-index:2;max-width:900px;margin:0 auto}
.gs-hero .crumb{justify-content:center;margin-bottom:1.5rem}
.gs-hero .eyebrow{margin-bottom:1.1rem}
.gs-hero__p{margin:1.5rem auto 0;max-width:58ch;font-size:clamp(1rem,1.4vw,1.14rem);
line-height:1.6;color:rgba(255,255,255,.5)}
.gs-hero__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.9rem}
/* ══════════ progress rail ══════════ */
/* top:0 parked the rail directly UNDER the fixed nav island (z-index 40 vs 55), so
"STEP 1 OF 10" rendered behind the logo on every width. It sticks below the nav. */
.gsrail{position:sticky;top:clamp(76px,10vh,94px);z-index:40;max-width:1180px;margin:0 auto clamp(2rem,4vw,3rem);
padding:clamp(.9rem,1.6vw,1.25rem) clamp(1rem,2vw,1.6rem);
border:1px solid var(--line);border-radius:22px;
background:linear-gradient(168deg,rgba(10,15,13,.94),rgba(4,7,6,.96));
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.gsrail__list{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0 0 .85rem;padding:0;list-style:none}
.gsrail__i{display:flex;align-items:center;gap:.45rem;min-width:0;opacity:.4;transition:opacity .5s var(--e-soft)}
.gsrail__i.is-on,.gsrail__i.is-done{opacity:1}
.gsrail__n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
font-family:'Switzer';font-size:.65rem;font-weight:700;letter-spacing:-.01em;
background:rgba(255,255,255,.07);border:1px solid var(--line);color:rgba(255,255,255,.6);
transition:background .5s var(--e-soft),color .4s,border-color .4s}
.gsrail__i.is-on .gsrail__n{background:var(--mint);border-color:transparent;color:#00170E;box-shadow:0 0 0 4px rgba(52,245,173,.14)}
.gsrail__i.is-done .gsrail__n{background:rgba(52,245,173,.18);border-color:rgba(52,245,173,.3);color:var(--mint)}
.gsrail__t{font-size:.75rem;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.62);white-space:nowrap}
@media(max-width:1000px){.gsrail__t{display:none}}
@media(max-width:560px){.gsrail__list{display:none}}
.gsrail__bar{height:2px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.gsrail__bar i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--emerald),var(--mint),var(--glow));
transition:width .7s var(--e-out)}
.gsrail__lbl{margin:.7rem 0 0;text-align:center;font-size:.68rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.gsrail__lbl b{color:var(--mint)}
/* ══════════ step shell ══════════ */
.gswrap{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.gstep{display:none;max-width:820px;margin:0 auto;
padding:clamp(1.6rem,3vw,2.8rem);border:1px solid var(--line);border-radius:calc(var(--rad) + 6px);
background:linear-gradient(168deg,#0A0F0D,#040706 64%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 50px 110px -70px #000;position:relative}
.gstep.is-on{display:block}
.gstep--wide{max-width:1180px}
.gstep::before{content:"";position:absolute;left:clamp(1.6rem,3vw,2.8rem);right:clamp(1.6rem,3vw,2.8rem);top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(52,245,173,.55),transparent)}
.gstep__head{margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.gstep__h{margin:0;font-family:'Satoshi';font-weight:900;font-size:clamp(1.9rem,3.6vw,3rem);
letter-spacing:-.05em;line-height:.98;color:#fff}
.gstep__p{margin:1.1rem 0 0;max-width:64ch;font-size:.99rem;line-height:1.65;color:rgba(255,255,255,.52)}
.gstep__p b{color:#fff}
.gsnav{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
margin-top:clamp(1.8rem,3vw,2.6rem);padding-top:clamp(1.3rem,2.2vw,1.8rem);border-top:1px solid var(--line)}
.gserr{position:sticky;top:120px;z-index:39;max-width:820px;margin:0 auto 1rem;
padding:.8rem 1rem;border-radius:14px;font-size:.9rem;
background:rgba(255,110,110,.12);border:1px solid rgba(255,110,110,.3);color:#FFC9C9}
.gserr[hidden]{display:none}
.gstest{color:var(--mint)}
.gstest--block{display:block;margin:1rem 0;padding:.85rem 1rem;border-radius:14px;
background:rgba(52,245,173,.08);border:1px solid rgba(52,245,173,.24);
font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.72)}
.gstest--block b{color:var(--mint)}
/* ══════════ fields ══════════ */
.gsgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.gsgrid--2{grid-template-columns:1fr 1fr}
@media(max-width:680px){.gsgrid,.gsgrid--2{grid-template-columns:1fr}}
/* ── free-trial intake sub-headings ──
The trial branch asks fourteen things (matching the live stepFT). Without breaks
it reads as one intimidating wall, so it is grouped: who you are · what the bot
needs to know · your three questions · your login · sign it. */
.gssub{margin:2.2rem 0 1rem;padding-top:1.2rem;border-top:1px solid var(--line);
font-family:'Satoshi';font-weight:900;font-size:1.02rem;letter-spacing:-.035em;color:#fff}
.gssub:first-of-type{margin-top:.4rem;padding-top:0;border-top:0}
.gsfaq{display:grid;gap:1rem;margin-top:1rem}
.gsfaq__row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem;
padding:1rem;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.018)}
@media(max-width:680px){.gsfaq__row{grid-template-columns:1fr}}
/* the file input needs its own treatment — the default control ignores .pinput */
.gsf input[type=file].pinput{padding:.7rem .8rem;font-size:.86rem;color:rgba(255,255,255,.6)}
.gsf input[type=file]::file-selector-button{margin-right:.9rem;padding:.45rem .9rem;border:0;
border-radius:999px;background:var(--mint);color:#00170E;font:inherit;font-weight:600;
font-size:.82rem;cursor:pointer}
.gsf{display:block}
.gsf__l{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.4);margin-bottom:.45rem}
.gsf__l i{color:var(--mint);font-style:normal}
.gsf__l small{margin-left:.5rem;letter-spacing:0;text-transform:none;font-weight:500;color:rgba(255,255,255,.3)}
.gsf__h{display:block;margin-top:.5rem;font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.38)}
.gsblock{margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.gsq{margin:0;font-family:'Satoshi';font-weight:900;font-size:1.06rem;letter-spacing:-.035em;color:#fff}
.gsq i{color:var(--mint);font-style:normal}
/* option cards */
.gspick{display:grid;gap:.6rem;margin-top:1rem}
.gspick--two{grid-template-columns:1fr 1fr}
.gspick--list{grid-template-columns:1fr}
@media(max-width:640px){.gspick--two{grid-template-columns:1fr}}
.gsopt{display:block;width:100%;text-align:left;padding:1.05rem 1.2rem;border-radius:18px;
border:1px solid var(--line);background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
transition:border-color .45s var(--e-soft),background .45s var(--e-soft),transform .5s var(--e-soft)}
.gsopt:hover{border-color:rgba(52,245,173,.36);transform:translateY(-2px)}
.gsopt.is-on{border-color:var(--mint);background:linear-gradient(165deg,rgba(52,245,173,.13),rgba(16,185,129,.02));
box-shadow:0 20px 50px -34px rgba(52,245,173,.7)}
.gsopt__ic{display:block;width:26px;height:26px;color:var(--mint);margin-bottom:.7rem}
.gsopt__ic svg{width:100%;height:100%}
.gsopt__t{display:block;font-family:'Satoshi';font-weight:700;font-size:.98rem;letter-spacing:-.03em;color:#fff}
.gsopt__d{display:block;margin-top:.35rem;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.45)}
.gsopt--sm{padding:.85rem 1.05rem}
/* a horizontal strip of small options — teaser trigger, sound pack */
.gspick--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-top:.5rem}
/* the step-0 route fork: two big cards, each with a verdict tag */
.gsopt--route{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.4rem 1.4rem 1.25rem}
.gsopt__tag{display:inline-flex;align-items:center;height:26px;margin-top:.3rem;padding:0 .78rem;
border-radius:999px;border:1px solid var(--line-2);color:rgba(255,255,255,.55);
font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.gsopt--route.is-on .gsopt__tag{background:var(--mint);border-color:transparent;color:#00170E}
/* a tier-locked option still shows, so the customer can see what a higher plan buys */
.gsopt--tier{position:relative}
.gsopt--tier::after{content:"PRO";position:absolute;top:.5rem;right:.6rem;
font-size:.54rem;font-weight:800;letter-spacing:.12em;color:rgba(52,245,173,.7)}
/* section tabs read as progress, not as the way you navigate forward */
.gssec.is-done{opacity:.55}
.gssec.is-done .gssec__n::after{content:"✓";margin-left:.3rem;color:var(--mint)}
.gssec:not(.is-on):not(.is-done){opacity:.4;cursor:default}
/* segmented control */
.gsseg{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);gap:2px}
.gsseg--wrap{flex-wrap:wrap;border-radius:22px}
.gsseg button{padding:.5rem .95rem;border-radius:999px;font-size:.85rem;font-weight:600;
color:rgba(255,255,255,.55);transition:background .4s var(--e-soft),color .35s}
.gsseg button:hover{color:#fff}
.gsseg button.is-on{background:var(--mint);color:#00170E}
/* toggle */
.gstog{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;font-size:.92rem;color:rgba(255,255,255,.75);cursor:pointer}
.gstog input{position:absolute;opacity:0;width:0;height:0}
.gstog>span{flex:none;width:40px;height:23px;border-radius:999px;background:rgba(255,255,255,.1);
border:1px solid var(--line-2);position:relative;transition:background .4s var(--e-soft)}
.gstog>span::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
background:rgba(255,255,255,.6);transition:transform .4s var(--e-back),background .4s}
.gstog input:checked+span{background:var(--mint);border-color:transparent}
.gstog input:checked+span::after{transform:translateX(17px);background:#00170E}
.gstog input:focus-visible+span{outline:2px solid var(--mint);outline-offset:3px}
/* file drop */
.gsfile{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding:1rem 1.2rem;border-radius:18px;
border:1px dashed var(--line-2);cursor:pointer;transition:border-color .4s var(--e-soft),background .4s}
.gsfile:hover{border-color:rgba(52,245,173,.45);background:rgba(52,245,173,.04)}
.gsfile__ic{flex:none;width:24px;height:24px;color:var(--mint)}
.gsfile__t{font-size:.92rem;font-weight:600;color:rgba(255,255,255,.78)}
.gsfile__t small{display:block;font-weight:400;font-size:.78rem;color:rgba(255,255,255,.35);margin-top:.15rem}
.gsfile__n{margin-left:auto;font-size:.82rem;color:var(--mint)}
/* ══════════ step 0 ══════════ */
.gshow{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:2px}
.gshow__i{display:flex;gap:1.1rem;padding:1.15rem 1.3rem;background:var(--void)}
.gshow__n{flex:none;font-family:'Cabinet';font-weight:900;font-size:1.5rem;letter-spacing:-.06em;
line-height:1;color:var(--mint)}
.gshow__i b{display:block;font-family:'Satoshi';font-weight:900;font-size:1.02rem;letter-spacing:-.035em;color:#fff}
.gshow__i p{margin:.4rem 0 0;font-size:.89rem;line-height:1.6;color:rgba(255,255,255,.46)}
.gstrial{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
margin-top:clamp(1.6rem,2.6vw,2.2rem);padding:clamp(1.2rem,2vw,1.7rem);border-radius:22px;
border:1px solid rgba(52,245,173,.24);background:linear-gradient(160deg,rgba(52,245,173,.08),rgba(4,7,6,.5) 70%)}
.gstrial__p{margin:.3rem 0 0;max-width:52ch;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.6)}
.gstrial__n{margin:.6rem 0 0;font-size:.78rem;color:rgba(255,255,255,.34)}
/* ══════════ plans ══════════ */
.gsplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem;margin-top:1rem}
.gsplans--big{grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:.8rem}
.gsplan{position:relative;display:block;text-align:left;padding:1.2rem 1.25rem 1.4rem;border-radius:22px;
border:1px solid var(--line);background:linear-gradient(168deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
transition:border-color .45s var(--e-soft),transform .5s var(--e-soft),background .45s var(--e-soft)}
.gsplan:hover:not([disabled]){border-color:rgba(52,245,173,.4);transform:translateY(-3px)}
.gsplan.is-on{border-color:var(--mint);background:linear-gradient(168deg,rgba(52,245,173,.12),rgba(16,185,129,.02));
box-shadow:0 24px 60px -38px rgba(52,245,173,.75)}
.gsplan--best::after{content:"";position:absolute;inset:-1px;border-radius:22px;pointer-events:none;
border:1px solid rgba(52,245,173,.28)}
.gsplan--soon{opacity:.55;cursor:not-allowed}
.gsplan__badge{display:inline-flex;align-items:center;height:22px;padding:0 .6rem;border-radius:999px;
background:rgba(52,245,173,.14);color:var(--mint);
font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.gsplan__n{display:block;margin-top:.75rem;font-family:'Satoshi';font-weight:900;font-size:1.2rem;letter-spacing:-.04em;color:#fff}
.gsplan__p{display:block;margin-top:.4rem;font-family:'Satoshi';font-weight:900;font-size:1.85rem;
letter-spacing:-.055em;line-height:1;color:#fff}
.gsplan__p sup{font-size:.42em;font-weight:700;top:-.9em;position:relative;letter-spacing:0;color:rgba(255,255,255,.45)}
.gsplan__s{display:block;margin-top:.35rem;font-size:.78rem;color:rgba(255,255,255,.42)}
.gsplan__pay{display:block;margin-top:.7rem;padding:.5rem .7rem;border-radius:12px;
background:rgba(52,245,173,.08);border:1px solid rgba(52,245,173,.16);
font-size:.78rem;color:rgba(255,255,255,.7)}
.gsplan__pay b{color:var(--mint)}
.gsplan__tag{display:block;margin-top:.8rem;font-size:.83rem;line-height:1.5;color:rgba(255,255,255,.5)}
.gsplan__f{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.42rem}
.gsplan__f li{display:flex;gap:.55rem;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.6)}
.gsplan__f li.is-off{color:rgba(255,255,255,.26)}
.gsplan__f .tick{margin-top:.1rem}
.tick--off{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}
.gsrec{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.4rem;padding:1.1rem 1.3rem;border-radius:20px;
border:1px solid rgba(52,245,173,.26);background:linear-gradient(160deg,rgba(52,245,173,.1),rgba(4,7,6,.5) 70%)}
.gsrec[hidden]{display:none}
.gsrec__ic{flex:none;width:26px;height:26px;color:var(--mint)}
.gsrec b{display:block;font-family:'Satoshi';font-weight:900;font-size:1.06rem;letter-spacing:-.035em;color:#fff}
.gsrec p{margin:.35rem 0 0;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.55)}
/* ══════════ OTP ══════════ */
.gsotp{padding:clamp(1.3rem,2.2vw,1.9rem);border-radius:22px;
border:1px solid rgba(52,245,173,.2);background:linear-gradient(160deg,rgba(52,245,173,.06),rgba(4,7,6,.5) 70%)}
.gsotp__to{margin:0 0 1rem;font-size:.9rem;color:rgba(255,255,255,.55)}
.gsotp__to b{color:var(--mint)}
.gsotp__in{margin-top:1.3rem;display:flex;align-items:flex-end;gap:.8rem;flex-wrap:wrap}
.gsotp__in[hidden]{display:none}
.gsotp__in .gsf{flex:1;min-width:200px}
.pinput--code{font-family:'Cabinet';font-weight:900;font-size:1.5rem;letter-spacing:.4em;text-align:center}
.gsotp__msg{margin:1rem 0 0;font-size:.86rem;color:var(--mint);min-height:1.2em}
.gsotp__msg.is-bad{color:#FFC9C9}
/* ══════════ DESIGN SECTION ══════════ */
.gsdesign{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:clamp(1.4rem,2.6vw,2.4rem);align-items:start}
@media(max-width:980px){.gsdesign{grid-template-columns:1fr}}
.gsdesign__ctl{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.gsacc{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.018)}
.gsacc__h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:1rem 1.2rem;font-family:'Satoshi';font-weight:700;font-size:.98rem;letter-spacing:-.03em;
color:rgba(255,255,255,.8);transition:color .4s}
.gsacc__h svg{width:14px;height:14px;color:var(--mint);transition:transform .45s var(--e-soft)}
.gsacc.is-on .gsacc__h{color:#fff}
.gsacc.is-on .gsacc__h svg{transform:rotate(45deg)}
.gsacc__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-soft)}
.gsacc.is-on .gsacc__b{grid-template-rows:1fr}
.gsacc__i{overflow:hidden;padding:0 1.2rem}
.gsacc.is-on .gsacc__i{padding-bottom:1.3rem}
.gsacc__i>.gsf{margin-bottom:.9rem}
.gspal{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:.55rem}
.gschip{aspect-ratio:1;border-radius:7px;background:var(--c);border:1px solid rgba(255,255,255,.14);
transition:transform .35s var(--e-back),box-shadow .35s}
.gschip:hover{transform:scale(1.16)}
.gschip.is-on{box-shadow:0 0 0 2px var(--void),0 0 0 4px var(--mint);transform:scale(1.1)}
.gsav{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.gsav__i{width:40px;height:40px;border-radius:12px;font-size:1.2rem;line-height:1;
border:1px solid var(--line);background:rgba(255,255,255,.04);
transition:border-color .4s var(--e-soft),background .4s,transform .4s var(--e-back)}
.gsav__i:hover{transform:translateY(-2px)}
.gsav__i.is-on{border-color:var(--mint);background:rgba(52,245,173,.14)}
.gschips__list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.gschips__list button{display:inline-flex;align-items:center;gap:.45rem;height:30px;padding:0 .7rem;
border-radius:999px;border:1px solid rgba(52,245,173,.3);background:rgba(52,245,173,.1);
font-size:.79rem;color:var(--mint)}
.gschips__list button::after{content:"×";font-size:1rem;line-height:1;opacity:.7}
/* ── the live widget preview ── */
.gsdesign__prev{position:sticky;top:190px}
@media(max-width:980px){.gsdesign__prev{position:static}}
.gsprev{--p:#10b981;--s:#1f2937;--bgc:#111827;--rad:18px;
position:relative;aspect-ratio:9/13;max-height:620px;border-radius:22px;overflow:hidden;
border:1px solid var(--line);background:#0d1210;
box-shadow:0 50px 100px -60px #000, inset 0 1px 0 rgba(255,255,255,.06)}
.gsprev__site{position:absolute;inset:0;background:linear-gradient(170deg,#171d1a,#0b0f0d)}
.gsprev__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.gsprev__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.gsprev__bar em{margin-left:8px;font-style:normal;font-size:.66rem;color:rgba(255,255,255,.3);
padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.05);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:70%}
.gsprev__page{padding:18px 16px;display:flex;flex-direction:column;gap:9px}
.gsprev__page span{height:9px;border-radius:99px;background:rgba(255,255,255,.05)}
.gsprev__page span:nth-child(1){width:62%;height:15px}
.gsprev__page span:nth-child(2){width:92%}
.gsprev__page span:nth-child(3){width:80%}
.gsprev__page span:nth-child(4){width:88%}
.gsprev__launch{position:absolute;bottom:16px;width:54px;height:54px;display:grid;place-items:center;
background:var(--p);color:#fff;border-radius:50%;
box-shadow:0 14px 30px -12px rgba(0,0,0,.9);transition:transform .5s var(--e-back),border-radius .4s}
.gsprev__launch svg{width:24px;height:24px}
.gsprev__launch:hover{transform:scale(1.06)}
.gsprev[data-pos="right"] .gsprev__launch{right:16px}
.gsprev[data-pos="left"] .gsprev__launch{left:16px}
.gsprev[data-shape="rounded"] .gsprev__launch{border-radius:16px}
.gsprev[data-shape="square"] .gsprev__launch{border-radius:6px}
.gsprev__pop{position:absolute;bottom:82px;display:flex;align-items:center;gap:9px;max-width:74%;
padding:10px 12px;border-radius:16px;background:#fff;color:#0b1512;
box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.gsprev__pop p{margin:0;font-size:.78rem;line-height:1.4;font-weight:500}
.gsprev__popav{font-size:1.1rem;line-height:1}
.gsprev__popx{margin-left:2px;font-size:1rem;line-height:1;color:rgba(0,0,0,.35)}
.gsprev[data-pos="right"] .gsprev__pop{right:16px}
.gsprev[data-pos="left"] .gsprev__pop{left:16px}
.gsprev__pop[hidden]{display:none}
.gsprev__panel{position:absolute;bottom:82px;width:min(300px,84%);border-radius:var(--rad);overflow:hidden;
background:var(--bgc);box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
display:flex;flex-direction:column;max-height:74%}
.gsprev[data-pos="right"] .gsprev__panel{right:16px}
.gsprev[data-pos="left"] .gsprev__panel{left:16px}
.gsprev__panel[hidden]{display:none}
.gsprev__hd{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--p);color:#fff}
.gsprev__av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.22);font-size:1rem;line-height:1;overflow:hidden}
.gsprev__av img{width:100%;height:100%;object-fit:cover}
.gsprev__av[hidden]{display:none}
.gsprev__ttl{min-width:0;font-family:var(--gsfont,'Satoshi')}
.gsprev__ttl b{display:block;font-size:.85rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsprev__ttl small{display:block;font-size:.66rem;opacity:.8;margin-top:1px}
.gsprev__x{margin-left:auto;font-size:1.15rem;line-height:1;opacity:.85}
.gsprev__body{flex:1;min-height:120px;max-height:206px;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:none;padding:12px;display:flex;flex-direction:column;gap:8px}
.gsprev__body::-webkit-scrollbar{display:none}
.gsprev__msg{max-width:86%;padding:8px 11px;border-radius:13px;font-size:.78rem;line-height:1.45;
white-space:pre-wrap;overflow-wrap:anywhere;flex:none}
.gsprev__msg--bot{align-self:flex-start;background:var(--s);color:#fff;border-bottom-left-radius:4px}
.gsprev__msg--me{align-self:flex-end;background:var(--p);color:#fff;border-bottom-right-radius:4px}
/* message bubble shape — the live widget's messageShape, tier-defaulted there */
.gsprev[data-bubble="rounded"] .gsprev__msg{border-radius:13px}
.gsprev[data-bubble="rounded"] .gsprev__msg--bot{border-bottom-left-radius:4px}
.gsprev[data-bubble="rounded"] .gsprev__msg--me{border-bottom-right-radius:4px}
.gsprev[data-bubble="asymmetric"] .gsprev__msg--bot{border-radius:4px 15px 15px 15px}
.gsprev[data-bubble="asymmetric"] .gsprev__msg--me{border-radius:15px 4px 15px 15px}
.gsprev[data-bubble="speech"] .gsprev__msg{position:relative;border-radius:15px}
.gsprev[data-bubble="speech"] .gsprev__msg--bot::after,
.gsprev[data-bubble="speech"] .gsprev__msg--me::after{content:"";position:absolute;bottom:3px;
border:6px solid transparent}
.gsprev[data-bubble="speech"] .gsprev__msg--bot::after{left:-5px;border-right-color:var(--s);border-bottom:0}
.gsprev[data-bubble="speech"] .gsprev__msg--me::after{right:-5px;border-left-color:var(--p);border-bottom:0}
.gsprev__typing{align-self:flex-start;display:flex;gap:4px;padding:9px 12px;border-radius:13px;background:var(--s);flex:none}
.gsprev__typing[hidden]{display:none}
.gsprev__typing i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);animation:gsDot 1.2s infinite}
.gsprev__typing i:nth-child(2){animation-delay:.16s}
.gsprev__typing i:nth-child(3){animation-delay:.32s}
@keyframes gsDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* typing animation — the live widget's typingStyle. Dots is the default everywhere;
wave and bounce are what "industry-distinct typing animation" actually means. */
.gsprev[data-tstyle="wave"] .gsprev__typing i{animation:gsWave 1.05s ease-in-out infinite;opacity:1}
@keyframes gsWave{0%,100%{transform:translateY(0) scaleY(1)}35%{transform:translateY(-4px) scaleY(1.5)}}
.gsprev[data-tstyle="bounce"] .gsprev__typing i{animation:gsTBounce .74s cubic-bezier(.34,1.56,.64,1) infinite;opacity:1}
@keyframes gsTBounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.25)}}
.gsprev__chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 10px}
.gsprev__chips:empty{display:none}
.gsprev__chips span,.gsprev__chips button{padding:5px 10px;border-radius:99px;font-size:.7rem;
border:1px solid var(--p);color:var(--p);background:transparent;cursor:pointer;
font-family:inherit;line-height:1.3;transition:background .18s,color .18s}
.gsprev__chips button:hover{background:var(--p);color:#fff}
.gsprev__in{display:flex;align-items:center;gap:6px;padding:9px 10px;border-top:1px solid rgba(255,255,255,.08)}
.gsprev__inp{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:3px 2px;
font-family:inherit;font-size:.75rem;color:#fff}
.gsprev__inp::placeholder{color:rgba(255,255,255,.35)}
.gsprev__inp:focus-visible{outline:0}
.gsprev__mic,.gsprev__send{flex:none;display:grid;place-items:center;border-radius:50%;cursor:pointer;
border:0;padding:0;transition:transform .18s,background .18s,color .18s}
.gsprev__mic{width:24px;height:24px;background:transparent;color:rgba(255,255,255,.42)}
.gsprev__mic:hover{color:var(--p)}
.gsprev__mic svg{width:13px;height:13px}
.gsprev__mic.is-rec{background:var(--p);color:#fff;animation:gsRec 1s ease-in-out infinite}
@keyframes gsRec{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 5px rgba(255,255,255,.16)}}
.gsprev__send{width:28px;height:28px;background:var(--p);color:#fff}
.gsprev__send:hover{transform:scale(1.07)}
.gsprev__send svg{width:14px;height:14px}
/* Readable text on WHATEVER colours they picked.
The bubble colours are the customer's own swatches, so neither the panel theme
nor a fixed text colour can decide the contrast — th-gs.js measures the relative
luminance of --p and --s and flags them here. Before this, light theme forced
dark text onto the bot bubble, which stays the customer's dark --s: the reply
was rendered near-black on near-black. */
.gsprev[data-onp="dark"] .gsprev__hd{color:#04241A}
.gsprev[data-onp="dark"] .gsprev__hd .gsprev__av{background:rgba(0,0,0,.14)}
.gsprev[data-onp="dark"] .gsprev__msg--me{color:#04241A}
.gsprev[data-onp="dark"] .gsprev__send{color:#04241A}
.gsprev[data-ons="dark"] .gsprev__msg--bot{color:#04241A}
.gsprev[data-ons="dark"] .gsprev__typing i{background:rgba(0,0,0,.45)}
/* light panel theme */
.gsprev[data-style="light"] .gsprev__panel{--bgc:#F4F7F5}
.gsprev[data-style="light"] .gsprev__in{border-top-color:rgba(0,0,0,.08)}
.gsprev[data-style="light"] .gsprev__inp{color:#0b1512}
.gsprev[data-style="light"] .gsprev__inp::placeholder{color:rgba(0,0,0,.4)}
.gsprev[data-style="light"] .gsprev__mic{color:rgba(0,0,0,.4)}
/* the typing dots sit INSIDE the bot bubble, so they follow --s, never the panel
theme — that rule used to paint dark dots onto a dark bubble in light mode */
/* open animations */
@keyframes gsFade{from{opacity:0}to{opacity:1}}
@keyframes gsSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gsBounce{0%{opacity:0;transform:scale(.86) translateY(14px)}60%{opacity:1;transform:scale(1.03) translateY(-4px)}100%{transform:none}}
@keyframes gsScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes gsFlip{from{opacity:0;transform:perspective(600px) rotateX(-28deg)}to{opacity:1;transform:none}}
.gsprev__panel[data-anim="fade"]{animation:gsFade .38s ease both}
.gsprev__panel[data-anim="slide"]{animation:gsSlide .38s cubic-bezier(.4,0,.2,1) both}
.gsprev__panel[data-anim="bounce"]{animation:gsBounce .5s cubic-bezier(.36,.07,.19,.97) both}
.gsprev__panel[data-anim="scale"]{animation:gsScale .35s cubic-bezier(.4,0,.2,1) both}
.gsprev__panel[data-anim="flip"]{animation:gsFlip .45s cubic-bezier(.4,0,.2,1) both}
.gsprev__note{margin:.9rem 0 0;text-align:center;font-size:.8rem;color:rgba(255,255,255,.35)}
/* ══════════ questionnaire ══════════ */
.gssecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:2px;margin-bottom:clamp(1.5rem,2.6vw,2.2rem)}
.gssec{display:flex;align-items:flex-start;gap:.8rem;padding:.95rem 1.1rem;background:var(--void);text-align:left;
transition:background .45s var(--e-soft)}
.gssec:hover{background:rgba(255,255,255,.03)}
.gssec.is-on{background:linear-gradient(150deg,rgba(52,245,173,.12),rgba(16,185,129,.02))}
.gssec__n{flex:none;font-family:'Cabinet';font-weight:900;font-size:1.1rem;letter-spacing:-.05em;
color:rgba(255,255,255,.25);line-height:1.1}
.gssec.is-on .gssec__n{color:var(--mint)}
.gssec__t{font-family:'Satoshi';font-weight:700;font-size:.92rem;letter-spacing:-.03em;color:rgba(255,255,255,.78)}
.gssec__t small{display:block;font-family:'Switzer';font-weight:400;font-size:.75rem;
letter-spacing:0;color:rgba(255,255,255,.34);margin-top:.2rem;line-height:1.4}
.gspane{display:none}
.gspane.is-on{display:block}
.gscard{padding:clamp(1.2rem,2vw,1.7rem);border:1px solid var(--line);border-radius:20px;
background:rgba(255,255,255,.018);margin-bottom:.8rem}
.gsq__head{display:flex;align-items:flex-start;gap:.8rem}
.gsq__n{flex:none;font-family:'Cabinet';font-weight:900;font-size:1rem;color:rgba(52,245,173,.5);line-height:1.35}
.gscard .gsf__h{margin-left:1.8rem}
.gscard .gsgrid,.gscard>.pinput,.gscard .gspick,.gscard .gsfeat,.gscard .gsfile{margin-top:1rem}
.gsfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.55rem}
.gsfeat__i{text-align:left;padding:.85rem 1rem;border-radius:16px;border:1px solid var(--line);
background:rgba(255,255,255,.025);transition:border-color .45s var(--e-soft),background .45s var(--e-soft)}
.gsfeat__i:hover{border-color:rgba(52,245,173,.34)}
.gsfeat__i.is-on{border-color:var(--mint);background:rgba(52,245,173,.1)}
.gsfeat__t{display:flex;align-items:center;gap:.6rem;font-family:'Satoshi';font-weight:700;font-size:.9rem;
letter-spacing:-.03em;color:#fff}
.gsfeat__t em{margin-left:auto;font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:rgba(255,255,255,.3);white-space:nowrap}
.gsfeat__i.is-on .gsfeat__t em{color:var(--mint)}
.gsfeat__d{display:block;margin-top:.35rem;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.42)}
.gspers{margin-top:clamp(1.6rem,2.6vw,2.4rem);padding-top:clamp(1.4rem,2.4vw,2rem);border-top:1px solid var(--line)}
/* ══════════ quote ══════════ */
.gsquote{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.02)}
.gsquote__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
padding:clamp(1.2rem,2vw,1.7rem);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.gsquote__hd b{display:block;font-family:'Satoshi';font-weight:900;font-size:1.05rem;letter-spacing:-.035em;color:#fff}
.gsquote__hd small{display:block;margin-top:.3rem;font-size:.78rem;color:rgba(255,255,255,.38)}
.gsquote__no{text-align:right}
.gsquote__no span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.gsquote__no b{font-family:'Cabinet';font-weight:900;font-size:1.2rem;letter-spacing:-.04em}
.gsquote__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:640px){.gsquote__grid{grid-template-columns:1fr}}
.gsquote__grid>div{padding:.95rem 1.2rem;background:var(--void)}
.gsquote__grid span{display:block;font-size:.63rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.32)}
.gsquote__grid b{display:block;margin-top:.3rem;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.82);line-height:1.45}
.gsquote__lines{padding:clamp(1.1rem,2vw,1.6rem)}
.gsquote__ln{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.9rem;color:rgba(255,255,255,.6)}
.gsquote__ln b{font-family:'Satoshi';font-weight:900;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.gsquote__ln--tot{border-bottom:0;padding-top:1rem;font-size:1rem;color:#fff}
.gsquote__ln--tot b{font-size:1.5rem;color:var(--mint)}
.gsquote__ln--sub{border-bottom:0;padding-top:0;font-size:.82rem;color:rgba(255,255,255,.4)}
.gsquote__ln--sub b{font-size:.9rem;color:rgba(255,255,255,.6)}
.gsquote__inc,.gsquote__terms{padding:clamp(1.1rem,2vw,1.6rem);border-top:1px solid var(--line)}
.gsquote__inc ul,.gsquote__terms ul{margin:.9rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}
.gsquote__inc li,.gsquote__terms li{position:relative;padding-left:1.4rem;font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.55)}
.gsquote__inc li::before,.gsquote__terms li::before{content:"";position:absolute;left:.2rem;top:.6em;
width:5px;height:5px;border-radius:50%;background:var(--mint)}
.gsquote__terms b{color:#fff}
/* ══════════ contract ══════════ */
.gscontract{max-height:min(58vh,520px);overflow-y:auto;padding:clamp(1.2rem,2vw,1.8rem);
border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.018);
font-size:.9rem;line-height:1.75;color:rgba(255,255,255,.62);scrollbar-width:thin}
.gscontract:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.gscontract__hd{text-align:center;padding-bottom:1.2rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}
.gscontract__hd b{display:block;font-family:'Satoshi';font-weight:900;font-size:1.05rem;
letter-spacing:.06em;color:var(--mint)}
.gscontract__hd small{display:block;margin-top:.35rem;font-size:.75rem;color:rgba(255,255,255,.32)}
.gscontract__deal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem 1.2rem;
margin-bottom:1.6rem;padding:1rem 1.15rem;border-radius:16px;
border:1px solid rgba(52,245,173,.24);background:rgba(52,245,173,.06)}
.gscontract__deal div span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.34)}
.gscontract__deal div b{display:block;margin-top:.2rem;font-size:.9rem;color:#fff}
.gsclause{margin-bottom:1.5rem}
.gsclause h3{margin:0 0 .55rem;font-family:'Satoshi';font-weight:900;font-size:.88rem;
letter-spacing:.05em;color:var(--mint)}
.gsclause b{color:#fff}
.gsclause ul{margin:.7rem 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem}
.gsclause li{position:relative;padding-left:1.3rem}
.gsclause li::before{content:"";position:absolute;left:.2rem;top:.72em;width:4px;height:4px;border-radius:50%;
background:rgba(52,245,173,.6)}
.gsaccept{display:flex;align-items:flex-start;gap:.9rem;margin-top:1.4rem;padding:1.1rem 1.2rem;
border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.022);cursor:pointer}
.gsaccept input{position:absolute;opacity:0;width:0;height:0}
.gsaccept>span:first-of-type{flex:none;width:22px;height:22px;border-radius:7px;margin-top:1px;
border:1px solid var(--line-2);background:rgba(255,255,255,.05);position:relative;
transition:background .35s,border-color .35s}
.gsaccept>span:first-of-type::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
border:solid #00170E;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
transition:transform .3s var(--e-back)}
.gsaccept input:checked+span{background:var(--mint);border-color:transparent}
.gsaccept input:checked+span::after{transform:rotate(45deg) scale(1)}
.gsaccept input:focus-visible+span{outline:2px solid var(--mint);outline-offset:3px}
.gsaccept__t{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.62)}
.gsaccept__t b{color:#FFC9C9}
/* ══════════ payment ══════════ */
.gspay{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:760px){.gspay{grid-template-columns:1fr}}
.gspay__sum,.gspay__card{padding:clamp(1.2rem,2vw,1.7rem);border-radius:22px;border:1px solid var(--line);
background:rgba(255,255,255,.022)}
.gspay__ln{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.6rem 0;
border-bottom:1px solid var(--line);font-size:.92rem;color:rgba(255,255,255,.6)}
.gspay__ln b{font-family:'Satoshi';font-weight:900;letter-spacing:-.03em;color:#fff}
.gspay__ln--tot{border-bottom:0;padding-top:.9rem;color:#fff}
.gspay__ln--tot b{font-size:1.55rem;color:var(--mint)}
.gspay__card{display:flex;flex-direction:column}
.gspay__brand{display:inline-flex;align-items:center;height:26px;padding:0 .75rem;border-radius:999px;
align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--line-2);
font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.gspay__card p{margin:.9rem 0 0;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.5)}
.gspay__card .btn{margin-top:auto;width:100%;justify-content:space-between}
/* ══════════ done ══════════ */
.gsdone{text-align:center;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.gsdone__tick{width:64px;height:64px;margin:0 auto 1.4rem;border-radius:50%;display:grid;place-items:center;
background:var(--mint);color:#00170E}
.gsdone__tick svg{width:28px;height:28px}
.gsdone .gstep__p{margin-inline:auto;text-align:center}
.gsreceipt{margin-top:clamp(1.6rem,2.6vw,2.2rem);padding:clamp(1.1rem,2vw,1.6rem);border-radius:20px;
border:1px solid var(--line);background:rgba(255,255,255,.02)}
.gsreceipt div>div{display:flex;gap:1.2rem;padding:.6rem .1rem;border-bottom:1px solid var(--line);font-size:.87rem}
.gsreceipt div>div:last-child{border-bottom:0}
.gsreceipt b{flex:none;width:130px;font-size:.63rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:rgba(255,255,255,.32);padding-top:.18rem}
.gsreceipt span{color:rgba(255,255,255,.7);line-height:1.55;word-break:break-word}
/* ══════════ reduced motion ══════════ */
@media (prefers-reduced-motion:reduce){
.gsprev__panel{animation:none!important}
/* the tstyle rules are (0,2,2) — a bare .gsprev__typing i would lose to them,
which is exactly how three scenes ended up permanently animating in round 4 */
.gsprev__typing i,
.gsprev[data-tstyle="wave"] .gsprev__typing i,
.gsprev[data-tstyle="bounce"] .gsprev__typing i{animation:none}
.gsprev__mic.is-rec{animation:none}
}
/* ══════════════════════════════════════════════════════════════════════════════
MOBILE — the wizard, 2026-07-29
Unlayered and last, same reasoning as section 15 of th.css.
The wizard is the one page a customer fills in ON A PHONE more often than on a
desktop, so nothing here is cosmetic: every rule is a measured 9.6–11.2px label,
a sub-40px control, or a two-column grid that had to become one.
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
.gs-hero{padding-top:clamp(118px,17vh,160px)}
.gs-hero__p{font-size:.98rem}
.gs-hero__pills{margin-top:1.3rem;gap:.4rem}
/* SMALL TYPE FLOOR — 12px minimum, letter-spacing reduced so the same label still
fits the same box */
.gsrail__lbl{font-size:.75rem;letter-spacing:.13em;margin-top:.55rem}
.gsrail__n{width:26px;height:26px;font-size:.74rem}
.gsopt__tag,.gsplan__badge,.gsf__l,.gschip,.gsnote,.gshint,
.gsplan__tag,.gsquote__k,.gspay__k{font-size:.76rem}
.gsf__l{letter-spacing:.06em}
/* ONE COLUMN */
.gsgrid,.gsgrid--2,.gspick,.gspick--two,.gsplans,.gsdesign,.gsquote__grid,
.gspay,.gsfaq__row,.gsswatches{grid-template-columns:1fr}
/* CONTROLS — a finger, not a pointer. 44px is the floor. */
.gsf input,.gsf select,.gsf textarea,.gsinput{min-height:48px;font-size:16px}
/* 16px is not a style choice: iOS Safari zooms the whole page on focus for
anything smaller, and the zoom does not come back. */
.gsbtn,.shimmer-btn,.gsnav__b{min-height:50px}
.gsopt,.gsplan{padding:1.1rem 1.15rem}
/* The class is .gschip. `.gsswatch` does not exist anywhere in the markup,
so this rule had never applied to anything and the swatches sat at 43px
— one pixel under the tap-target floor, on the one control that is
nothing BUT a tap target. A selector that matches nothing fails silently
for ever. */
.gschip{min-width:46px;min-height:46px}
.gstep{padding:1.15rem 1rem;border-radius:20px}
.gsnav{gap:.6rem}
}
@media (max-width:400px){
.gsrail{padding:.8rem .9rem;border-radius:18px}
.gsrail__lbl{letter-spacing:.1em}
}
/* ══════════════════════════════════════════════════════════════════════════════
MOBILE — LESS COPY IN THE WIZARD
Duval, 2026-07-29: "the get started page has way too much text in terms of small
paragraphs."
Same rule as section 16 of th.css: a paragraph goes only where the block still
makes sense without it. The "How it works" list keeps its four TITLES and loses
the four explanatory paragraphs under them — the titles alone already say
"tell us about you, verify, design, pay". Nothing that carries an instruction, a
validation rule, a price or a legal term is touched.
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
/* the four-paragraph explainer on step 0 and the four on the final step */
.gshow__i p{display:none}
.gshow__i b{font-size:.97rem}
.gshow{gap:.9rem}
/* the hero blurb repeats the step rail immediately below it */
.gs-hero__p{display:none}
.gs-hero__pills{margin-top:1.2rem}
/* the per-step intro paragraph is trimmed, not cut — some of them carry the
actual instruction for that step */
.gstep__p{font-size:.93rem;line-height:1.55;margin-top:.85rem;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* TEST MODE explainers are scaffolding for this build, not customer copy */
.gstest--block{font-size:.8rem;padding:.7rem .85rem;line-height:1.5}
}
/* ═══════════════════════════════════════════════════════════════════════════
THE LIVE WIRING (go-live 2026-07-30)
Everything below only ever renders when th-gs-engine.js is on the page.
═══════════════════════════════════════════════════════════════════════════ */
/* The hidden rig: legacy id mirrors + the honeypot. Off-screen rather than
display:none — a field that is display:none is the first thing a decent bot
skips, and the whole point of the honeypot is that a bot fills it in. */
.gsrig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.gshp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Turnstile renders VISIBLY on the payment step, the same as the live wizard.
Hiding it would break a managed-mode challenge the visitor has to complete. */
.gsts{margin:1rem 0 .2rem;min-height:65px}
.gsts iframe{border-radius:12px}
/* PayFast's onsite checkout, rendered in our own frame rather than its compact
popup, which our layout was clipping. */
.gspayfrwrap{margin-top:clamp(1.4rem,3vw,2.4rem);border-radius:var(--rad);
border:1px solid var(--line-2);background:#fff;overflow:hidden;
box-shadow:0 30px 90px rgba(0,0,0,.55)}
.gspayfrwrap[hidden]{display:none}
.gspayfr{display:block;width:100%;height:min(78vh,760px);border:0}
.gspay__err{margin-top:.9rem;font-size:.9rem;line-height:1.5;
color:#ffb4b4;background:rgba(239,68,68,.09);
border:1px solid rgba(239,68,68,.28);border-radius:14px;padding:.75rem .9rem}
.gspay__err[hidden]{display:none}
/* the trial's own verify block sits inline rather than as its own step */
.gsotp--ft{margin-bottom:clamp(1.1rem,2vw,1.6rem)}
/* ══════════════════════════════════════════════════════════════════════════
MOBILE — found by driving all eight screens on a real 390px iPhone, which
had never been done. Three things were actually broken, not merely tight.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
/* 1 · THE PRIMARY BUTTON RAN OFF THE SCREEN.
.gsnav is a flex row with space-between and .btn is white-space:nowrap, so
"Accept & continue to payment" beside "Back" measured 462px on a 390px
phone and the arrow chip was CLIPPED off the right edge. Stack them, full
width, primary nearest the thumb. */
.gsnav{flex-wrap:wrap;gap:.7rem}
.gsnav>span:empty{display:none}
.gsnav>.btn{flex:1 1 100%;width:100%;justify-content:space-between}
/* 2 · 33px TAP TARGETS. The segmented controls (VAT basis, document style,
document font) sat at 33px high — Apple's own floor is 44, and below it
people miss and then distrust the control. */
.gsseg{width:100%;flex-wrap:wrap}
.gsseg button{min-height:44px;flex:1 1 auto}
/* 3 · THE FILE INPUT CRUSHED ITS OWN HINT.
.gsfile is a flex ROW and a native does not shrink, so
the hint text was squeezed into a ~40px column, one word per line, and the
input itself overflowed to 420px. The input is now visually hidden and the
whole block is the control (see the label in th_gs_books.js) — which also
removes a 13.3px font that iOS Safari ZOOMS the page for on focus. */
.gsfile{flex-wrap:wrap;row-gap:.6rem}
.gsfile__t{flex:1 1 100%}
.gsfile__n{margin-left:0}
}
/* Every viewport: the raw file input is never the control. font-size stays at
16px even though it is 1px square — iOS Safari zooms the page when a field
under 16px takes FOCUS, and tapping the label moves focus here. */
.gsfile input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;font-size:16px}
.gsfile:focus-within{border-color:rgba(52,245,173,.55);background:rgba(52,245,173,.05)}
.gsfile__cta{margin-left:auto;flex:none;display:inline-flex;align-items:center;height:38px;
padding:0 1rem;border-radius:999px;border:1px solid var(--line-2);
font-size:.82rem;font-weight:600;color:#fff}
/* A plan the customer cannot pick must not look like one they can. */
.gsplan--readonly{opacity:.62;cursor:default}
.gsplan--readonly:hover{border-color:var(--line)}
/* ── THE ACTION BAR, ON A PHONE ────────────────────────────────────────────
Measured on a real 390px iPhone: the Continue button sat 2 648px below the
fold on step 3 and 2 401px below it on step 5. A customer on a phone had to
scroll past four screens of questions to reach the button that moves them
on — every step, eight times — and had no way to know how much further it
was. Sticking it to the bottom is the single biggest thing that makes this
quicker on a phone: the scroll becomes optional reading instead of a hunt.
`position:sticky` and not `fixed`: sticky stays inside the step, so it
cannot hover over the footer, and it needs no scroll maths. The blur and the
top hairline are what stop the page reading through it. */
@media (max-width:560px){
.gsnav{position:sticky;bottom:0;z-index:40;
margin:clamp(1.8rem,3vw,2.6rem) -1rem 0;padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
background:rgba(5,8,7,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-top:1px solid var(--line-2)}
/* Back is a way back to something already answered, not half the bar. */
.gsnav>.btn[data-bo="back"]{flex:0 0 auto;width:auto;min-width:112px}
.gsnav>.btn[data-bo="next"],.gsnav>.btn[data-bo="pay"]{flex:1 1 auto;width:auto}
}
/* ── FOLDED-AWAY OPTIONAL BLOCKS ───────────────────────────────────────────
Measured on a real phone: step 5 was 4 062px of scrolling — five screens —
and most of it was colour swatches, a template picker, a font picker and a
terms box, none of which a client has to decide before their first invoice
and all of which are now editable in Settings inside the app.
Nothing is removed: it is one tap away, open by default on a desktop-sized
screen where the room exists, and shut on a phone where it does not.
and not JS, because it works with the CSP, with the keyboard and
with a screen reader, and it cannot break. */
.gsmore{margin-top:1.1rem;border:1px solid var(--line);border-radius:18px;
background:rgba(255,255,255,.02);overflow:hidden}
.gsmore>summary{list-style:none;cursor:pointer;padding:1.05rem 1.2rem;
display:flex;flex-direction:column;gap:.2rem;min-height:44px;
transition:background .35s var(--e-soft)}
.gsmore>summary::-webkit-details-marker{display:none}
.gsmore>summary::after{content:'';position:absolute;right:1.3rem;width:9px;height:9px;
margin-top:.35rem;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);
transform:rotate(45deg);transition:transform .35s var(--e-soft)}
.gsmore[open]>summary::after{transform:rotate(-135deg)}
.gsmore>summary:hover{background:rgba(52,245,173,.05)}
.gsmore__t{font-family:'Satoshi';font-weight:700;font-size:.98rem;letter-spacing:-.02em;color:#fff;padding-right:2rem}
.gsmore__s{font-size:.8rem;color:rgba(255,255,255,.42);padding-right:2rem}
.gsmore>.gsblock,.gsmore>*:not(summary){padding:0 1.2rem 1.2rem}
.gsmore summary{position:relative}