:root{
  --teal:#0E2A20; --teal-deep:#0A2018; --teal-bright:#178A5A; --teal-soft:#7FE3B0;
  --accent:#1E9E63; --accent-hover:#178A5A;
  --cream:#FAF8F3; --paper:#ffffff; --mist:#F6F4EE;
  --ink:#2B3A33; --ink-2:#54625B; --ink-3:#8A968F; --line:#e7ebe6;
  --warn:#C2643B; --green-tint:#E4F4EC;
  --label:'General Sans','Satoshi',system-ui,sans-serif;
  --disp:'Satoshi',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --wrap:1240px; --r:22px; --rf:26px;
  --sh-1:0 1px 2px rgba(16,40,34,.04),0 8px 24px rgba(16,40,34,.05);
  --sh-2:0 2px 6px rgba(16,40,34,.06),0 18px 44px rgba(16,40,34,.09);
  --sh-3:0 4px 12px rgba(16,40,34,.07),0 32px 70px rgba(16,40,34,.13);
  --ease:cubic-bezier(.22,.61,.36,1);
}
.whl *{box-sizing:border-box}
.whl{background:var(--cream);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
.whl h1,.whl h2,.whl h3,.whl h4{font-family:var(--disp);color:var(--teal);letter-spacing:-.02em;margin:0}
.whl p{margin:0}
.whl button{font-family:var(--body)}
.whl :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.whl .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.whl-nav{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.whl-nav__in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px}
.whl-mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.whl-mark svg{width:34px;height:34px}
.whl-mark b{font-family:var(--disp);font-weight:900;font-size:20px;color:var(--teal)}
.whl-nav__back{margin-left:8px;font-size:14px;color:var(--ink-2);text-decoration:none}
.whl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-weight:600;font-size:15px;color:#fff;background:var(--teal);border-radius:13px;padding:13px 22px;text-decoration:none;transition:background .18s,transform .18s;white-space:nowrap}
.whl-btn:hover{background:var(--teal-deep);transform:translateY(-1px)}
.whl-btn--sm{font-size:13.5px;padding:9px 16px;border-radius:11px;margin-left:auto}
.whl-btn--go{background:var(--accent);box-shadow:0 6px 18px -6px rgba(30,158,99,.7)}
.whl-btn--go:hover{background:var(--accent-hover)}
.whl-eyebrow{display:inline-block;font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}

/* Panel 44%, form column the rest. The row stretches, so the panel's height is
   the taller of the two columns rather than a viewport figure: the form pane
   swaps between four states (account, code, one-question detail, confirmation)
   whose heights differ by several hundred pixels, and a 100vh floor on the
   section left a dead green band beside the short ones. The floor now lives on
   the panel itself and is small enough that the form always sets the height
   when it is the taller. */
.split{display:grid;grid-template-columns:44% 1fr;align-items:stretch;position:relative}
.hs-left{background:linear-gradient(160deg,var(--teal-deep),#123B2C 52%,#17553D);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-self:stretch;height:100%;min-height:clamp(460px,62svh,620px)}
.hs-left::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 320px at 82% -8%,rgba(127,227,176,.16),transparent 62%),radial-gradient(520px 300px at 0% 112%,rgba(30,158,99,.15),transparent 60%);pointer-events:none}
/* Scales with the panel now that the panel is 44% rather than half the
   width: at a fixed 340px it read as a third of the artwork. */
.hs-left__mark{position:absolute;right:-60px;bottom:-60px;width:clamp(200px,24vw,300px);height:auto;aspect-ratio:1;opacity:.08;pointer-events:none;z-index:2}
.hs-net{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.hs-left__in{padding:clamp(40px,5vw,72px) clamp(28px,4.5vw,56px);position:relative;max-width:640px;z-index:3}
.hs-left .whl-eyebrow{color:var(--teal-soft)}
/* One step down the scale from 56px: the panel is 44% rather than 51% wide
   now, and the old size broke "founding" onto a line of its own. */
.hs-left h1{color:#fff;font-weight:900;font-size:clamp(34px,3.8vw,48px);line-height:1.06;text-wrap:balance}
.hs-left .sub{margin-top:18px;font-size:clamp(15.5px,1.5vw,18px);line-height:1.65;color:rgba(255,255,255,.72);max-width:520px}
.hs-left .sub b{color:#fff}
.trust{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.trust span{display:inline-flex;align-items:center;gap:7px;font-family:var(--label);font-weight:600;font-size:13px;color:rgba(255,255,255,.82)}
.trust svg{width:15px;height:15px;stroke:var(--teal-soft);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* The pane used to be centred in this column under a 480px width, so a 616px
   column put 68px of dead mist on each side and the pane's own 36px of padding
   sat on top of that: 104px between the panel edge and the first field, all of
   it accidental. It is left-aligned against the panel now and the inline start
   padding is stated once, on the column. */
.hs-right{background:var(--mist);display:flex;align-items:center;justify-content:flex-start;position:relative;padding-inline:clamp(40px,4vw,72px) clamp(24px,3vw,48px)}
.form-pane{width:100%;max-width:560px;margin-inline-end:auto;padding:clamp(30px,4vw,48px) 0}
.form-pane h3{font-size:23px;font-weight:900}
.form-pane .fsub{margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.jf{margin-top:15px}
.jf label{display:block;font-family:var(--label);font-weight:600;font-size:12.5px;color:var(--teal);margin-bottom:7px}
.jf input{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;color:var(--ink);padding:12px 14px;font-size:15px;transition:border-color .15s;font-family:var(--body)}
.jf input::placeholder{color:#AEB8B2}
.jf input:focus{outline:none;border-color:var(--accent)}
.jf input.err{border-color:var(--warn);animation:shake .3s}
.namerow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#j-pc{text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.okc{display:none;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--accent)}
.okc.on{display:block;animation:rise .3s var(--ease)}
.pwhint{display:block;margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}

/* Code-entry step. Shown after /signup accepts the form; the account exists at
   that point but stays inert until the code proves the address. */
.otp{display:flex;gap:8px;margin-top:16px;justify-content:space-between}
.otp input{width:100%;min-width:0;aspect-ratio:1/1;padding:0;text-align:center;font-family:var(--disp);font-weight:700;font-size:21px;color:var(--teal);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;transition:border-color .15s}
.otp input:focus{outline:none;border-color:var(--accent)}
.otp.err input{border-color:var(--warn)}
.otp-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--ink-2)}
.otp-meta button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.otp-meta button:disabled{color:var(--ink-3);cursor:default;text-decoration:none}
.devcode{margin-top:14px;padding:10px 13px;border-radius:12px;font-size:12.5px;line-height:1.5;background:#F7E7DD;border:1px solid #E8C7AE;color:#7A3A19}
.reflink{display:block;margin-top:14px;background:none;border:none;padding:0;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.reflink:hover{color:var(--teal)}
.go{margin-top:20px;width:100%;background:var(--accent);font-size:15.5px;padding:15px 20px}
.go:hover{background:var(--accent-hover)}
/* On the confirmation the checkup is the step and the dashboard is the way
   past it, so only one of the two is filled. Outlined rather than shrunk: it
   is still the route out for a member who has just been signed in, and the
   comment on that anchor explains why it must stay easy to find. The colour
   needs the `.whl a.whl-btn` specificity to beat the white-on-green rule that
   exists so filled anchors do not render accent-on-accent. */
.go--quiet{background:none;border:1.5px solid #CFE3D8;box-shadow:none}
.whl a.whl-btn.go--quiet{color:var(--accent)}
.go--quiet:hover{background:var(--green-tint)}
.whl a.whl-btn.go--quiet:hover{color:var(--accent-hover)}
.perksline{margin-top:14px;font-size:11.5px;line-height:1.6;color:var(--ink-3);text-align:center}
.perksline b{color:var(--ink-2)}

.jdone{display:none}
.jdone.on{display:block;animation:rise .4s var(--ease)}
.donehead{display:flex;align-items:flex-start;gap:12px}
.donehead .chk{flex:none;width:40px;height:40px;border-radius:12px;background:var(--green-tint);display:grid;place-items:center}
.donehead .chk svg{width:20px;height:20px;stroke:var(--accent);stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.donehead h3{font-size:21px;font-weight:900}
.donehead p{margin-top:5px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
/* The checkup is the step that follows joining, so the confirmation offers it
   rather than leaving it to be found. Warm-tinted against the green
   confirmation above it, so it reads as an action still owed. */
.jnext{margin-top:18px;border:1.5px solid #E7CFB9;background:#FDF7F1;border-radius:14px;padding:16px}
.jnext b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--teal)}
.jnext p{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.55}
.jnext .whl-btn{margin-top:13px;width:100%}
.share{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.share b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--teal)}
.share p{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.share .srow{display:flex;gap:8px;margin-top:12px}
.share .lnk{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--teal-bright);background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:11px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.share .cp{flex:none;background:var(--teal);border:none;color:#fff;border-radius:10px;font-size:12.5px;font-weight:600;padding:0 16px;cursor:pointer;transition:background .18s}
.share .cp:hover{background:var(--teal-deep)}

/* Stage 2 is one question, so no grid: the .j2f two-column layout, the spot
   strength meter, the switch-threshold chips and the bill dropzone all went
   with the fields they belonged to. */
.j2one{margin-top:16px}
.j2lab{display:block;font-family:var(--label);font-weight:600;font-size:11.5px;color:var(--teal);margin-bottom:5px}
.save{margin-top:15px;width:100%;background:var(--accent);font-size:14.5px;padding:12px 18px}
.skip{display:block;margin:11px auto 0;background:none;border:none;color:var(--ink-3);font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.skip:hover{color:var(--ink)}
.svc{display:grid;gap:8px}
.svcrow{display:flex;align-items:center;gap:8px}
.svct{flex:1;display:flex;align-items:center;gap:10px;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .14s,background .14s;font-family:var(--body)}
.svct:hover{border-color:#c6d5cc}
.svct .tk{flex:none;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;transition:all .14s}
.svcrow.on .svct{border-color:var(--accent);background:#F7FCF9;color:var(--teal)}
.svcrow.on .svct .tk{background:var(--accent);border-color:var(--accent)}
.svcrow.on .svct .tk::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.qty{flex:none;display:none;align-items:center;gap:2px;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;padding:3px}
.svcrow.on .qty{display:flex}
.qty button{width:26px;height:26px;border:none;background:var(--mist);color:var(--teal);border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;line-height:1;display:grid;place-items:center}
.qty button:hover{background:var(--green-tint)}
.qty b{min-width:22px;text-align:center;font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--teal)}
.svcx{flex:none;display:none;width:130px;min-width:0;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;color:var(--ink);padding:9px 11px;font-size:12.5px;font-family:var(--body)}
.svcrow.on .svcx{display:block}
.svcx:focus{outline:none;border-color:var(--accent)}
.sopt{font-weight:400;font-size:10.5px;color:var(--ink-3);text-transform:none;letter-spacing:0}

.sect{padding:clamp(64px,9vw,104px) 0}
.sect+.sect{padding-top:clamp(24px,3vw,40px)}
.sect--mist{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{text-align:center;max-width:680px;margin:0 auto clamp(30px,4vw,44px)}
.shead .whl-eyebrow{margin-bottom:12px}
.shead h2{font-size:clamp(26px,3.4vw,38px);font-weight:900}
.shead p{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.6}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--rf);box-shadow:var(--sh-1);padding:14px 14px 22px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tcard.vis{opacity:1;transform:none}
.pviz{border:1px solid var(--line);border-radius:16px;background:var(--cream);padding:6px;margin:0 0 15px}
.pviz svg{width:100%;height:auto;display:block}
.tcard .k{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;display:block;padding:0 6px}
.tcard h2{font-size:19px;font-weight:900;margin-top:5px;padding:0 6px}
.tcard .tdesc{margin-top:8px;padding:0 6px;font-size:13px;line-height:1.6;color:var(--ink-2)}

#viz1 .hs{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
#viz1 .hs.on{animation:hpop .55s var(--ease) forwards}
@keyframes hpop{0%{opacity:0;transform:translateY(12px) scale(.55)}60%{opacity:1;transform:translateY(-3px) scale(1.07)}100%{opacity:1;transform:translateY(0) scale(1)}}
#v1link{opacity:0;transition:opacity .5s}
#v1link.on{opacity:.85;animation:flow 3.6s linear infinite}
#v1ring{transform-box:fill-box;transform-origin:center}
#v1ring.on{animation:ripple 1.05s var(--ease) 2}
@keyframes ripple{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
#viz2 .clr{opacity:0;transition:opacity .35s}
#viz2 .v2row.on .clr{opacity:1}
#viz2 .fog{transform-box:fill-box;transition:opacity .5s var(--ease),transform .5s var(--ease)}
#viz2 .v2row.on .fog{opacity:0;transform:translateX(12px)}
#viz2 .ck{stroke-dasharray:40;stroke-dashoffset:40}
#viz2 .v2row.on .ck{animation:ckdraw .45s .18s var(--ease) forwards}
@keyframes ckdraw{to{stroke-dashoffset:0}}
#viz2 .vbar{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform .55s .28s var(--ease)}
#viz2 .v2row.on .vbar{transform:scaleX(1)}
.v3flow{animation:flow 2.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-48}}
.v3pulse{animation:vpulse 2.4s var(--ease) infinite;transform-origin:center}
@keyframes vpulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.55)}}
.qnode{animation:qspin 7s linear infinite,qf1 3.4s linear infinite}
.qnode.q2{animation:qspin 7s linear infinite,qf2 3.4s linear infinite}
@keyframes qspin{to{stroke-dashoffset:-27}}
@keyframes qf1{0%,40%{stroke-opacity:.45}52%{stroke-opacity:1;stroke-width:3}64%,100%{stroke-opacity:.45}}
@keyframes qf2{0%,84%{stroke-opacity:.4}96%{stroke-opacity:1;stroke-width:3}100%{stroke-opacity:.4}}
.v3spark{animation:spark 3.4s linear infinite}
@keyframes spark{0%{transform:translateX(45px);opacity:0}7%{opacity:1}90%{opacity:1}100%{transform:translateX(268px);opacity:0}}

.stay3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.s3card{background:var(--cream);border:1px solid var(--line);border-radius:var(--rf);padding:24px 22px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sect--mist .s3card{background:var(--cream)}
.s3card.vis{opacity:1;transform:none}
.s3card .ntile{width:44px;height:44px;border-radius:13px;background:var(--green-tint);display:grid;place-items:center;flex:none}
.s3card .ntile svg{width:20px;height:20px;stroke:var(--teal-bright);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s3card .s3head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.s3card b{font-family:var(--disp);font-weight:900;font-size:17px;color:var(--teal)}
.s3card p{margin-top:7px;font-size:13px;line-height:1.6;color:var(--ink-2)}

.faqwrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.faqwrap.vis{opacity:1;transform:none}
.qa{background:var(--paper);border-radius:20px;box-shadow:var(--sh-1);padding:6px clamp(20px,3vw,28px);transition:box-shadow .2s var(--ease)}
.qa>button{width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;padding:20px 0;cursor:pointer;text-align:left}
.qa>button b{font-family:var(--disp);font-weight:700;font-size:16.5px;color:var(--ink)}
.qa>button .pm{margin-left:auto;flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--ink);transition:transform .25s var(--ease)}
.qa>button .pm svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qa.open>button .pm{transform:rotate(180deg)}
.qa .ans{display:none;padding:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:700px}
.qa .ans b{color:var(--teal)}
.qa.open .ans{display:block;animation:rise .3s var(--ease)}

.whl a{color:var(--accent);text-decoration:none}
.whl a:hover{color:var(--teal)}
/* An anchor styled as a button: `.whl a` is one specificity step above
   `.whl-btn`, so without this the label is accent green on an accent green
   fill, i.e. an invisible button. */
.whl a.whl-btn{color:#fff}
.whl a.whl-btn:hover{color:#fff}

.wm-ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,32,24,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)}
.wm-ov.on{display:flex;opacity:1}
.wm{width:min(460px,100%);background:var(--paper);border-radius:var(--rf);box-shadow:0 40px 100px -30px rgba(10,32,24,.6);overflow:hidden;transform:translateY(14px) scale(.98);transition:transform .35s var(--ease);position:relative;max-height:92vh;overflow-y:auto}
.wm-ov.on .wm{transform:none}
.wm__top{background:linear-gradient(150deg,var(--teal-deep),#123B2C 55%,#17553D);color:#fff;padding:30px 30px 26px;position:relative;overflow:hidden;text-align:center}
.wm__top::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 180px at 80% -20%,rgba(127,227,176,.22),transparent 60%);pointer-events:none}
.wm__badge{width:60px;height:60px;border-radius:18px;background:rgba(127,227,176,.16);border:1px solid rgba(127,227,176,.4);display:grid;place-items:center;margin:0 auto 16px;position:relative}
.wm__badge svg{width:30px;height:30px;stroke:var(--teal-soft);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:wmdraw .55s .3s var(--ease) forwards}
@keyframes wmdraw{to{stroke-dashoffset:0}}
.wm__ey{font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-soft);position:relative}
.wm__top h3{color:#fff;font-size:24px;font-weight:900;margin-top:9px;position:relative;letter-spacing:-.02em}
.wm__top p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.75);margin-top:9px;position:relative}
.wm__body{padding:22px 26px 26px}
.wm__list{display:grid;gap:11px;margin-bottom:20px}
.wm__li{display:flex;gap:11px;align-items:flex-start}
.wm__li .n{flex:none;width:26px;height:26px;border-radius:9px;background:var(--green-tint);color:var(--teal-bright);font-family:var(--mono);font-size:12px;font-weight:600;display:grid;place-items:center;margin-top:1px}
.wm__li b{display:block;font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--teal)}
.wm__li span{font-size:12px;color:var(--ink-2);line-height:1.5}
.wm__cta{display:grid;grid-template-columns:1fr;gap:9px}
.wm__cta .whl-btn{width:100%}
.ghost{background:var(--paper);color:var(--teal);border:1.5px solid var(--line);text-decoration:none}
.ghost:hover{background:#fff;border-color:#c6d5cc;color:var(--teal)}
.wm__share{position:relative}
.wm__sheet{display:none;margin-top:9px;background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:12px}
.wm__sheet.on{display:block;animation:rise .25s var(--ease)}
.wm__apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wm__app{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:10px 6px;cursor:pointer;text-decoration:none;transition:border-color .14s,transform .12s}
.wm__app:hover{border-color:#c6d5cc;transform:translateY(-1px)}
.wm__app svg{width:20px;height:20px}
.wm__app span{font-size:10px;font-weight:600;color:var(--ink-2)}
.wm__copy{display:flex;gap:8px;margin-top:9px}
.wm__copy input{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.wm__copy button{flex:none;background:var(--teal);color:#fff;border:none;border-radius:10px;font-size:12px;font-weight:600;padding:0 15px;cursor:pointer}
.wm__copy button:hover{background:var(--teal-deep)}
.wm__x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:17px;cursor:pointer;display:grid;place-items:center;z-index:3;line-height:1}
.wm__x:hover{background:rgba(255,255,255,.24)}

/* Stacked below 1024: panel first, form beneath. The panel's desktop floor
   comes off, so its height is its own padding and copy. */
@media (max-width:1023.98px){
  .split{grid-template-columns:1fr}
  .hs-left{min-height:auto;height:auto;padding-block:clamp(40px,8vw,72px)}
  .hs-left__in{padding-block:0}
  .hs-right{padding:10px 20px 44px;justify-content:center}
  .form-pane{max-width:560px;margin-inline:auto}
  .trio,.stay3{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* 14 rather than 20: the page carries the UA's 8px body margin, so this
     lands the fields on a 22px gutter. */
  .hs-right{padding-inline:14px}
  /* 44px minimum on the stepper controls, and the "Something else" input
     shares the row instead of forcing it onto a second line. */
  .qty button{width:44px;height:44px;border-radius:10px}
  .qty b{min-width:26px}
  .svcx{flex:1 1 96px;width:auto}
}

/* thank-you popup */
.ty-ov{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,32,24,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)}
.ty-ov.on{display:flex;opacity:1}
.ty{position:relative;width:min(400px,92vw);aspect-ratio:1/1;border-radius:var(--rf);overflow:hidden;background:linear-gradient(155deg,var(--teal-deep),#123B2C 55%,#17553D);color:#fff;box-shadow:0 40px 100px -30px rgba(10,32,24,.65);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 34px;transform:translateY(16px) scale(.94);opacity:0;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.ty-ov.on .ty{transform:none;opacity:1}
.ty::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 200px at 82% -12%,rgba(127,227,176,.22),transparent 62%),radial-gradient(260px 200px at 6% 112%,rgba(30,158,99,.2),transparent 60%);pointer-events:none}
.ty::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:16px 16px;opacity:.5;pointer-events:none}
.ty__badge{width:78px;height:78px;position:relative;margin-bottom:22px}
.ty__badge .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(127,227,176,.35)}
.ty__badge .ring.pulse{animation:tyring 2.4s var(--ease) infinite}
@keyframes tyring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
.ty__badge .core{position:absolute;inset:0;border-radius:22px;background:rgba(127,227,176,.16);border:1px solid rgba(127,227,176,.45);display:grid;place-items:center}
.ty__badge svg{width:38px;height:38px;stroke:var(--teal-soft);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ty__badge .heart{stroke-dasharray:60;stroke-dashoffset:60}
.ty-ov.on .heart{animation:tydraw .7s .35s var(--ease) forwards}
@keyframes tydraw{to{stroke-dashoffset:0}}
.ty__ey{position:relative;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:12px}
.ty h2{position:relative;font-family:var(--disp);font-weight:900;font-size:clamp(24px,4.4vw,30px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:0;text-wrap:balance}
.ty h2 em{font-style:normal;color:var(--teal-soft)}
.ty p{position:relative;margin-top:14px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);max-width:280px}
.ty__x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;line-height:1;z-index:4;transition:background .15s}
.ty__x:hover{background:rgba(255,255,255,.26)}
.ty .spark{position:absolute;width:7px;height:7px;pointer-events:none;opacity:0}
.ty .spark::before,.ty .spark::after{content:"";position:absolute;background:var(--teal-soft);border-radius:2px}
.ty .spark::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.ty .spark::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
.ty-ov.on .spark{animation:tytwinkle 2.6s var(--ease) infinite}
@keyframes tytwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.8;transform:scale(1)}}
.ty .s1{top:22%;left:16%;animation-delay:.2s!important}
.ty .s2{top:30%;right:18%;animation-delay:1.1s!important}
.ty .s3{bottom:26%;left:22%;animation-delay:.7s!important}
.ty .s4{bottom:20%;right:16%;animation-delay:1.6s!important}

/* Field-level errors. WHOLLAR.fieldError wires role="alert" + aria-describedby
   so a failed field is announced, not just outlined in red.
   #A34F2B clears WCAG AA (4.7:1) on the cream and white backgrounds here;
   the previous #C2643B was 3.8:1. */
.whl-fielderr{margin:6px 0 0;font-size:12px;font-weight:600;color:#A34F2B;line-height:1.45}