:root{--yellow:#fff34d;--ink:#111;--muted:#474747;--soft:#f3f3f3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;background:#fff;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-shell{overflow:hidden}.yellow-stage{background:#fff}.white-stage{background:#fff;padding:0 0 121px}.site-header{height:128px;display:flex;justify-content:center;align-items:center;position:relative;z-index:5}.nav-pill{width:414px;height:66px;padding:0 24px;border-radius:18px;background:#f3f3f3;display:flex;align-items:center;justify-content:space-between}.nav-pill img{display:block;width:114px;height:23px}.button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:16px;font-weight:700;min-height:40px;padding:0 14px;border-radius:999px;transition:transform .18s ease,background-color .18s ease}.button:hover{transform:translateY(-2px)}.button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #6d4dff;outline-offset:3px}.button-dark{background:#111;color:#fff}.hero{height:1152px;position:relative}.hero h1,.section h2,.notify h2{font-family:Impact,'Arial Narrow',Arial,sans-serif;text-transform:none;font-weight:900;letter-spacing:-.035em}.hero h1{font-size:clamp(76px,10.7vw,154px);line-height:.83;position:relative;text-align:center;margin:4px auto 0;text-transform:uppercase;z-index:2}.hero-art{position:absolute;width:min(92vw,1325px);aspect-ratio:1325.477/994.108;left:50%;top:117px;transform:translateX(-50%)}.hand-phone{width:100%;height:100%;display:block}.phone-screen{position:absolute;left:37.93%;top:18.1%;width:23.36%;height:66.2%;overflow:hidden;border-radius:10%/4.7%;background:#fff;isolation:isolate;font-size:clamp(5px,.7vw,10px)}.phone-winter{height:50%;position:absolute;inset:0 0 auto;overflow:hidden}.phone-winter img{width:100%;height:100%;object-fit:cover}.phone-winter:after{content:"";position:absolute;inset:55% 0 -2px;background:linear-gradient(transparent,#fff)}.phone-status{position:relative;z-index:2;display:flex;justify-content:space-between;padding:3% 6%;color:#fff;font-weight:700}.phone-topline{position:relative;z-index:2;display:flex;gap:2%;padding:2% 5%}.phone-topline>*{height:3em;display:flex;align-items:center;border-radius:999px;background:#ffffff35;color:#fff}.phone-topline .avatar{width:3em;justify-content:center}.phone-topline .search{flex:1;padding-left:6%}.phone-categories{display:flex;gap:1.5%;padding:0 5%;overflow:hidden;position:relative;z-index:2;white-space:nowrap}.phone-categories span{background:#ffffff35;color:#fff;border-radius:999px;padding:3%}.phone-referral{height:34%;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#fff;gap:7%;font-size:1.6em;line-height:1.05}.phone-referral span{font-size:.7em;background:#fff;color:#22101e;padding:4% 7%;border-radius:999px;font-weight:700}.phone-content{position:absolute;left:5%;right:0;top:48%;bottom:8%;overflow:hidden;background:linear-gradient(transparent,#fff 7%)}.phone-label{font-weight:700;margin:6% 0 4%;font-size:1.1em}.phone-products,.phone-stores{display:flex;gap:3%;width:max-content}.phone-products>div{width:7.7em}.phone-products figure{margin:0;position:relative;width:7.7em;height:7.7em;background:#fff;border-radius:1.4em;box-shadow:0 1px 8px #0002;overflow:hidden}.phone-products figure img{width:100%;height:100%;object-fit:contain}.phone-products b{position:absolute;left:5%;top:5%;background:#666a;color:#fff;border-radius:999px;font-size:.8em;padding:.25em .5em}.phone-products span,.phone-stores span{display:block;font-size:.9em;margin-top:.4em}.phone-stores>div{width:12em}.phone-stores img{width:12em;height:7.5em;object-fit:cover;border-radius:1em}.phone-tabs{position:absolute;bottom:2%;left:19%;right:19%;height:7%;background:#fafafa;border-radius:999px;box-shadow:0 4px 15px #0002;display:flex;align-items:center;justify-content:space-around;color:#666;font-size:2.2em}.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:410px;background:linear-gradient(transparent,var(--yellow) 78%);pointer-events:none}.section{max-width:1068px;margin:auto}.steps{padding:0 0 121px}.section h2{font-size:68px;line-height:.81;margin:0 0 40px}.card-grid{display:grid;gap:24px}.card-grid.three{grid-template-columns:repeat(3,1fr)}.info-card{min-width:0}.blank-tile{width:100%;border-radius:32px}.three .blank-tile{height:471px}.blank-tile.white{background:#fff}.card-copy{padding:28px 24px 0;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.18}.card-copy h3,.card-copy p{margin:0}.card-copy p{margin-top:4px;color:#474747}.three .card-copy p{color:#2a2a2a}.brands{padding-top:116px}.brand-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:calc(100% + max(0px,(100vw - 1068px)/2));padding-bottom:3px}.brand-track::-webkit-scrollbar{display:none}.brand-card{flex:0 0 313px;scroll-snap-align:start}.brand-image{height:420px;border-radius:32px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f3f3f3}.brand-image:before{content:"";position:absolute;inset:0;background-size:cover;background-position:center}.brand-image.wyld:before{background-image:url('./assets/imgSunlitAlpineValleyAndRuggedPeaks1.png');background-position:center 58%}.brand-image.stiiizy{background:#000}.brand-image.kiva:before{background-image:url('./assets/imgImage25.png');background-position:57% center}.brand-image.rythm:before{background-image:url('./assets/imgImage24.png');background-position:center}.brand-logo{position:relative;z-index:1;max-width:82%;max-height:36%;object-fit:contain}.cash-pill{position:absolute;bottom:16px;left:16px;z-index:2;color:#fff;background:#1119;backdrop-filter:blur(14px);border-radius:999px;padding:10px 12px;font-size:16px;font-weight:700}.stiiizy .cash-pill{background:#2a2a2a}.brand-card h3{font-size:20px;line-height:1.2;margin:28px 24px 0;font-weight:600}.notify{padding:244px 20px 0;text-align:center}.notify h2{font-size:68px;line-height:.81;margin:0 0 40px;text-transform:uppercase}.notify form{width:347px;max-width:100%;margin:auto;background:#f3f3f3;padding:8px 8px 8px 24px;border-radius:31px;display:flex;align-items:center}.notify input{border:0;background:transparent;min-width:0;flex:1;font-size:16px;font-weight:600;outline:none}.notify input::placeholder{color:#898989}.form-message{font-size:14px;min-height:20px;margin:12px auto 0;max-width:390px;color:#474747}.footer{max-width:1068px;height:620px;margin:185px auto 0;background:#f3f3f3;border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between}.footer-top,.footer-bottom{display:flex;justify-content:space-between}.footer-top>img{width:114px;height:23px}.social-icons{display:flex;gap:16px}.social-icons img{width:28px;height:28px}.footer-bottom{align-items:flex-end;gap:40px}.footer-bottom>p{font-size:14px;font-weight:500;color:#898989;line-height:1.35;max-width:504px;margin:0}.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:16px;font-weight:700;white-space:nowrap}.footer-links a:hover{text-decoration:underline}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1120px){.section{margin-left:5vw;margin-right:5vw}.brand-track{width:calc(100% + 5vw)}.footer{margin-left:5vw;margin-right:5vw}}@media(max-width:700px){.site-header{height:94px}.nav-pill{width:min(90vw,414px);height:58px;padding:0 15px;border-radius:16px}.nav-pill img{width:100px;height:auto}.nav-pill .button{font-size:14px;min-height:36px}.hero{height:690px}.hero h1{font-size:clamp(56px,16vw,90px);margin-top:18px;line-height:.86}.hero-art{width:155vw;top:127px}.phone-screen{font-size:clamp(4px,1.05vw,7px)}.hero:after{height:160px}.section{margin-left:20px;margin-right:20px}.section h2,.notify h2{font-size:clamp(44px,12vw,68px);margin-bottom:28px}.steps{padding-bottom:90px}.card-grid.three{grid-template-columns:1fr;gap:30px}.three .blank-tile{height:320px}.card-copy{font-size:18px;padding:16px 12px 0}.brands,.notify{padding-top:100px}.brand-track{width:calc(100% + 20px);gap:16px}.brand-card{flex-basis:min(74vw,313px)}.brand-image{height:360px}.brand-card h3{margin:16px 12px 0}.notify{padding-left:20px;padding-right:20px}.notify h2{font-size:clamp(40px,10.5vw,60px)}.footer{height:auto;min-height:420px;margin:130px 20px 0;padding:24px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:32px}.footer-links{align-items:flex-start}.white-stage{padding-bottom:40px}}@media(max-width:390px){.hero{height:620px}.hero-art{top:122px}.three .blank-tile{height:260px}}

/* Exact Figma navigation and hero geometry */
.nav-pill img{width:115px;height:23px}
.nav-pill .button{height:40px;min-height:40px;padding:10px 12px;font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hero h1{max-width:793px;margin:clamp(0px,calc(min(20.0694vw,100dvh - 518px) - var(--hero-raise)),248px) auto 0;font-size:120px;line-height:100px;letter-spacing:-2.52px;text-align:center;text-transform:uppercase;color:var(--ink)}
.hero{--hero-raise:min(41px,2.8472vw);height:auto;padding:0 16px calc(min(397px,27.5694vw) + var(--hero-raise))} /* v7: CTA bottom 883 → How-it-works 1280 = 397px (27.5694vw). Raise: half the height v7 added ((48px subtext + 34px gap)/2 = 41px, 2.8472vw), taken off the heading margin and returned to the bottom padding so How-it-works stays at y1280. */
.hero-ctas{display:flex;justify-content:center;gap:12px;margin-top:34px} /* v7 Frame 288 column gap 34px */
.hero-ctas .button,.notify .hero-cta{height:50px;min-height:50px;padding:0 15px;border-radius:999px;font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.button-soft{background:var(--soft);color:var(--ink)}
@media(max-width:700px){.hero h1{font-size:clamp(56px,16vw,90px);line-height:.8333;letter-spacing:-.021em}.nav-pill img{width:115px;height:23px}.nav-pill .button{height:36px;min-height:36px}}
.button{transition:none}
.button:hover{transform:none}

/* Bundled typography */
@font-face{font-family:Inter;src:url('./assets/inter-latin-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:InterFigma;src:url('./assets/inter-figma-semibold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Greed;src:url('./assets/greed-collection-variable.woff2') format('woff2');font-style:normal;font-weight:300 900;font-stretch:75% 130%;font-display:swap}
.hero h1,.section h2,.notify h2{font-family:Greed,Arial,Helvetica,sans-serif;font-weight:700;font-stretch:89%;font-variation-settings:"wght" 700,"wdth" 89,"slnt" 0;font-synthesis:none}
.section h2,.notify h2{font-size:0;line-height:0;letter-spacing:0;text-transform:none}
.section h2{margin:0 0 34px}
.steps h2{margin-bottom:35px}
.notify{padding-top:185px}
@media(max-width:700px){.notify{padding-top:90px}}
/* Preserve the cropped artwork boxes while scaling live type and its baseline together. */
.display-heading{--heading-font-size:68;--heading-line-height:55;--heading-top:-3.768;--heading-left:0;--heading-text-width:var(--heading-width);display:block;position:relative;width:calc(var(--heading-width)*1px);max-width:100%;aspect-ratio:var(--heading-width)/var(--heading-height);container-type:inline-size}
.display-heading-text{display:block;position:absolute;left:calc(100cqw*var(--heading-left)/var(--heading-width));top:calc(100cqw*var(--heading-top)/var(--heading-width));width:calc(100cqw*var(--heading-text-width)/var(--heading-width));font-size:calc(100cqw*var(--heading-font-size)/var(--heading-width));line-height:calc(100cqw*var(--heading-line-height)/var(--heading-width));letter-spacing:0;white-space:nowrap;color:var(--ink)}
#steps-title .display-heading{--heading-width:511;--heading-height:115;--heading-left:-1.25;--heading-text-width:514}
#brands-title .display-heading{--heading-width:466;--heading-height:110;--heading-left:0;--heading-text-width:466} /* v7 2111:6007: Discount the / brands you carry, 466x110 */
#notify-title .display-heading{--heading-width:439;--heading-height:110;--heading-top:-2.855;margin:0 auto} /* v7 2111:6087: APPLY FOR / KLUTCH TODAY text box 439x110 */
#notify-title .display-heading-text{text-transform:uppercase}

/* Exact Figma card geometry and copy */
.blank-tile{border-radius:32px;mix-blend-mode:normal;opacity:1}
.step-illustration{display:flex;align-items:center;justify-content:center;overflow:hidden}
.step-illustration img{display:block;width:100%;height:100%;object-fit:contain}
.step-illustration--map img{width:90%;height:90%}
.three .blank-tile{height:471px;background:#fff}
.card-copy{width:min(284px,100%);padding:28px 0 0 24px;font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-size:20px;font-weight:600;line-height:24px;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.card-copy h3,.card-copy p{font:inherit;letter-spacing:0;mix-blend-mode:normal;opacity:1}
.card-copy h3{color:#111}
.card-copy p{margin-top:4px;color:#474747}
.steps .card-copy{mix-blend-mode:luminosity}
.three .card-copy p{color:#2a2a2a}
@media(max-width:700px){
  .steps .blank-tile{height:auto;aspect-ratio:1}
  /* Figma Text Md Bold: Inter 18px, auto line-height, 600. */
  .steps .card-copy{font-size:18px;font-weight:600;line-height:normal;letter-spacing:0}
}
.cash-pill{height:40px;padding:0 12px;display:inline-flex;align-items:center;font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;line-height:19px;letter-spacing:0;background:rgba(17,17,17,.56);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.stiiizy .cash-pill{background:#2a2a2a}
.brand-card h3{width:260px;max-width:calc(100% - 48px);font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:#111;mix-blend-mode:luminosity;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Business hero: no phone or tile wave; shared tile base kept for the footer wave */
.hero{overflow:hidden;isolation:isolate}
.wave-tile{position:absolute;left:0;top:0;width:168px;height:168px;opacity:0;contain:paint;will-change:transform;backface-visibility:hidden}
.wave-tile-media{display:block;width:168px;height:168px;object-fit:cover;transform-origin:center}
.hero:after{display:none}
html{scrollbar-gutter:stable}
.signup-open,.signup-open body{overflow:hidden}
.waitlist-dialog{border:0;border-radius:24px;padding:32px;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 80px #0004;color:var(--ink);background:#fff;opacity:0;transform:scale(.96);transform-origin:center;transition:opacity 200ms var(--motion-ease-out),transform 200ms var(--motion-ease-out),display 200ms allow-discrete,overlay 200ms allow-discrete;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.waitlist-dialog[open]{opacity:1;transform:scale(1);transition-duration:250ms}
.waitlist-dialog::backdrop{background:#1119;opacity:0;transition:opacity 200ms var(--motion-ease-out),display 200ms allow-discrete,overlay 200ms allow-discrete}
.waitlist-dialog[open]::backdrop{opacity:1;transition-duration:250ms}
@starting-style{.waitlist-dialog[open]{opacity:0;transform:scale(.96)}.waitlist-dialog[open]::backdrop{opacity:0}}
.waitlist-dialog[data-instant],.waitlist-dialog[data-instant]::backdrop{transition:none}
.waitlist-dialog h2{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:0 0 8px;padding-right:48px}
.waitlist-dialog #waitlist-title:focus{outline:none}
.waitlist-dialog p{font-size:14px;line-height:1.5;margin:0;color:var(--muted)}
.waitlist-content{display:grid}
.waitlist-view{grid-area:1/1;min-width:0;opacity:1;visibility:visible;transition:opacity 200ms var(--motion-ease-out),visibility 0s}
.waitlist-view[inert]{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,200ms}
.waitlist-dialog[data-instant] .waitlist-view{transition:none}
.waitlist-confirmation{display:grid;align-content:center;justify-items:center;gap:24px;padding:24px 0;text-align:center}
.waitlist-confirmation h2{margin:0;padding:0}
.waitlist-confirmation p{max-width:290px}
.waitlist-check{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--ink)}
#waitlist-form{display:grid;gap:16px;margin-top:24px}
#waitlist-form>.waitlist-submit{margin-top:8px}
.waitlist-field{display:grid;gap:8px}
.waitlist-field label,.waitlist-submit{font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-weight:600;letter-spacing:0}
.waitlist-field label{font-size:14px;line-height:18px}
.waitlist-field input{width:100%;min-width:0;min-height:48px;padding:12px 16px;border:1px solid transparent;border-radius:14px;background:var(--soft);color:var(--ink);font-size:16px;line-height:22px}
.waitlist-field input::placeholder{color:#898989;opacity:1}
.waitlist-field input[aria-invalid="true"]{border-color:var(--ink)}
.waitlist-dialog .field-error{color:var(--ink);font-size:13px;line-height:1.4}
.waitlist-field input::selection{background:var(--yellow);color:var(--ink)}
.waitlist-submit{width:100%;min-height:48px;font-size:16px;line-height:19px;color:#fff}
.dialog-close{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--soft);color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.waitlist-dialog :is(button,input,a):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.waitlist-dialog .button:focus-visible:active,.dialog-close:focus-visible:active{transform:none}
@media(max-width:480px){.waitlist-dialog{padding:24px}.waitlist-dialog h2{font-size:28px}.dialog-close{right:12px;top:12px}}
@media(prefers-reduced-motion:reduce){
  .waitlist-dialog,.waitlist-dialog[open]{transform:none}
  @starting-style{.waitlist-dialog[open]{transform:none}}
}

/* Restrained motion system */
:root{--motion-ease-out:cubic-bezier(.23,1,.32,1);--motion-ease-in-out:cubic-bezier(.77,0,.175,1);--motion-ease-drawer:cubic-bezier(.32,.72,0,1)}
.motion-ready.motion-assets-ready .nav-pill,.motion-ready.motion-assets-ready #hero-title,.motion-ready.motion-assets-ready .hero-sub,.motion-ready.motion-assets-ready .hero-ctas{animation:hero-item-in 500ms var(--motion-ease-out) both}
.motion-ready.motion-assets-ready #hero-title{animation-delay:100ms}
.motion-ready.motion-assets-ready .hero-sub{animation-delay:200ms}
.motion-ready.motion-assets-ready .hero-ctas{animation-delay:300ms}
@keyframes hero-item-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes hero-fade-in{from{opacity:0}to{opacity:1}}
.button,.dialog-close{transition:transform 160ms var(--motion-ease-out);transform-origin:center}
.button:active{transform:scale(.97)}
.dialog-close:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
  .motion-ready .nav-pill,.motion-ready #hero-title,.motion-ready .hero-sub,.motion-ready .hero-ctas{animation:none;opacity:1;transform:none}
  .button,.dialog-close{transition-duration:80ms}
  .button:active,.dialog-close:active{transform:none;opacity:.78}
}

/* The scroll viewport reaches the screen edges; its padding aligns cards with the heading. */
.brands{--brand-bleed:max(0px,(100vw - 1068px)/2);--brand-gap:24px;--brand-page-duration:400ms}
.brands .brand-track{display:block;width:calc(100% + 2*var(--brand-bleed));margin-inline:calc(-1*var(--brand-bleed));padding:0 var(--brand-bleed) 3px;scroll-behavior:auto;scroll-snap-type:none;overscroll-behavior-x:contain}
.brand-items{display:flex;width:max-content;gap:var(--brand-gap);transition:transform var(--brand-page-duration) var(--motion-ease-drawer)}
.brands .brand-card{width:313px;min-width:0;flex:0 0 313px}
.brand-image.jeeter{background:#fedb02}
.brand-image.kanha{background:linear-gradient(180deg,#fbd506,#f39a22)}
.brand-image.back-forty{background:#e35d2d}
.brand-image.raw-garden:before{background-image:url('./assets/brand-raw-garden.png')}
.kanha .brand-logo{max-height:none}
.brand-logo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:calc(100% - 48px)}
.brand-logo-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px}
.brand-pagination{position:relative;left:50%;transform:translateX(-50%);display:flex;align-items:center;width:max-content;margin:32px 0 0;padding:0 4px;color:#fff;background:rgba(17,17,17,.56);backdrop-filter:blur(14px);border-radius:999px;font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;line-height:19px}
.brand-pagination[hidden]{display:none}
.brand-page-dots{display:grid;overflow:hidden}
.brand-page-group{grid-area:1/1;display:flex;transition:transform var(--brand-page-duration) var(--motion-ease-drawer)}
.brand-page-group[aria-hidden="true"]{pointer-events:none}
.brand-pagination button{display:grid;place-items:center;flex-shrink:0;height:44px;padding:0;border:0;border-radius:999px;color:inherit;background:transparent;cursor:pointer;transition:transform 160ms var(--motion-ease-out)}
.brand-page-arrow{width:44px}
.brand-page-dot{width:24px}
.brand-page-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;transition:opacity 200ms var(--motion-ease-drawer)}
.brand-page-dot[data-selected]::before{opacity:1}
.brand-pagination button[aria-disabled="true"]{opacity:.35;cursor:default}
.brand-page-arrow:active:not([aria-disabled="true"]){transform:scale(.97)}
.brand-pagination button:focus-visible{outline:3px solid #6d4dff;outline-offset:2px;transition:none}
.brand-pagination button:focus-visible:active{transform:none}
.brand-page-dots button:focus-visible{outline-offset:-3px}
.brand-pagination[data-instant] .brand-page-group,.brand-pagination[data-instant] .brand-page-dot::before,.brand-page-group[data-instant] .brand-page-dot::before{transition:none}
.brand-track:focus-visible{outline:3px solid #6d4dff;outline-offset:6px;border-radius:4px}
@media(max-width:1120px){.brands{--brand-bleed:5vw}}
@media(max-width:700px){
  .brands{--brand-bleed:20px;--brand-gap:16px;--brand-art-width:min(74vw,313px)}
  .brands .brand-card{width:calc(var(--brand-art-width) - 24px);flex-basis:calc(var(--brand-art-width) - 24px)}
  /* Keep the original artwork scale inside the narrower mobile cards. */
  .brands .brand-image:before{left:50%;right:auto;width:var(--brand-art-width);transform:translateX(-50%)}
  .brands .brand-logo{max-width:calc(var(--brand-art-width)*.82)}
  .brand-pagination{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.brand-items,.brand-page-group,.brand-pagination button,.brand-page-dot::before{transition:none}.brand-pagination button:active:not([aria-disabled="true"]){transform:none}}

.social-icons a{display:flex;flex-shrink:0;width:28px;height:28px;transition:transform 160ms var(--motion-ease-out);transform-origin:center}
.social-icons a:active{transform:scale(.97)}
.social-icons a:focus-visible{transition:none}
.social-icons a:focus-visible:active{transform:none}
@media(prefers-reduced-motion:reduce){.social-icons a{transition:none}.social-icons a:active{transform:none;opacity:.78}}

.footer{position:relative;overflow:hidden;isolation:isolate}
.footer-top,.footer-bottom{position:relative;z-index:2}
.footer-wave{position:absolute;z-index:1;left:50%;top:104px;width:3840px;height:300px;transform:translateX(-50%);pointer-events:none}
.footer-wave .wave-tile{width:168px;height:168px}
.footer-wave.is-rendered .wave-tile{opacity:1}
.footer-wave .wave-tile-media{width:168px;height:168px}
.white-stage{padding-bottom:121px}
@media(max-width:700px){
  .white-stage{padding-bottom:32px}
  .footer{min-height:700px}
  .footer-wave{top:124px;height:300px}
}

/* Business hero photo sphere (WebGL) — two canvases sandwich the hero copy: back cards(900) < h1(1000) < CTAs(2000) < front cards(2500) < header(3000), so near cards sweep over the heading and buttons while the nav stays on top. The layer is sized by script to reach the page top so rising cards are never clipped; both canvases ignore pointer events so CTAs stay clickable. */
.hero{touch-action:pan-y;overflow:visible} /* consumer hero clips its tile wave; the business sphere layer must rise past the hero top (canvas bounds still cap the excursion) */
.hero.is-dragging,.site-header.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
/* The wrapper (not the canvases) is the drag hit area for the sphere's span
   above the hero box; it sits below the h1/CTAs/header planes, so their
   clicks are untouched, and events bubble to the hero's drag handlers. */
.hero-sphere{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:auto;touch-action:pan-y}
.site-header{touch-action:pan-y}
.hero-sphere canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hero-sphere .sphere-back{z-index:900}
.hero-sphere .sphere-front{z-index:2500}
.hero h1{z-index:1000}
.hero-ctas{position:relative;z-index:2000}
.site-header{z-index:3000}

/* Business "How it works" (Figma 2108:3674): single-line 68px/55 heading box
   349x55; blank stone-50 tiles (no illustrations in the design yet), radius 32
   from the shared .blank-tile rule; card copy is Inter Semi Bold 20px, normal
   leading, -0.2px tracking, titles #111 (--ink) and subtext #474747 (--muted). */
#steps-title .display-heading{--heading-width:349;--heading-height:55;--heading-left:0;--heading-text-width:352}
.steps h2{margin-bottom:40px} /* Figma: cards frame at y95 = 55 heading + 40 gap */
.steps .blank-tile{background:var(--soft)}
.steps .card-copy h3,.steps .card-copy p{letter-spacing:-.2px} /* Figma Text Lg: 20px Semi Bold, -1% tracking */
.steps .card-copy p{color:var(--muted)}
/* Frosted stone surfaces: sphere cards blend through the nav pill and Chat with us. rgba(235,235,235,.6) composites to exactly #f3f3f3 over the white page (.6*235+.4*255=243); 14px = existing .cash-pill backdrop blur token. */
.nav-pill,.button-soft{background:rgba(235,235,235,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* Step illustrations: consumer "-cutout" treatment (edge white removed, interior white kept). Scale = midpoint between prior 82%/36% render and consumer .step-illustration tiles, measured as ink extent: 1440 width (74.8%+63.9%)/2=69%, 390 height (58.0%+35.7%)/2=47%. */
.steps .blank-tile{display:flex;align-items:center;justify-content:center}
.steps .blank-tile img{max-width:69%;max-height:47%;object-fit:contain}

/* v7 hero subtext (Figma 2111:5983: Inter Semi Bold 20px, ls -0.2px, stone-800 #474747, width 407.5, 34px column gaps).
   Frosted-ink typography: same per-channel alpha solve as the frosted nav surfaces above —
   target C over white: C = a*C' + (1-a)*255, smallest a keeping C' >= 0 gives C' = 0, a = 1 - C/255.
   #111 (17):  a = 238/255 = .93333 -> rgba(0,0,0,.93333); check .93333*0 + .06667*255 = 17  (exact #111)
   #474747(71): a = 184/255 = .72157 -> rgba(0,0,0,.72157); check .72157*0 + .27843*255 = 71 (exact #474747)
   backdrop blur is a surface property (it would blur the whole text box rectangle, not glyphs), so type takes only the alpha-compositing half. */
.hero h1{color:rgba(0,0,0,.93333)}
.hero-sub{position:relative;z-index:1000;max-width:408px;margin:34px auto 0;font-family:InterFigma,Inter,Arial,Helvetica,sans-serif;font-size:20px;font-weight:600;line-height:normal;letter-spacing:-.2px;text-align:center;color:rgba(0,0,0,.72157);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Persistent navigation: mirrors the consumer fixed header + flow compensation (consumer styles.css "Persistent navigation" block). Business header keeps its existing z-index:3000 (above both sphere canvases); the frosted pill (rgba+blur above) now samples scrolled page content. */
.yellow-stage{padding-top:128px}
.site-header{position:fixed;inset:0 0 auto}
@media(max-width:700px){.yellow-stage{padding-top:94px}}

/* Mobile shared section-heading type scale, mirrored from the consumer
   styles.css mobile block (min(68px,(100vw - 55px)*68/widest)) with the
   business widest heading text: brands 466 (v7 2111:6007). All section
   headings shrink by the same ratio so their computed sizes match and the
   widest line always fits the viewport. */
@media(max-width:700px){
  :root{--section-heading-font-size:min(68px,calc((100vw - 55px)*68/466));--section-heading-line-height:min(55px,calc((100vw - 55px)*55/466))}
  .section h2 .display-heading-text,.notify h2 .display-heading-text{top:0;font-size:var(--section-heading-font-size);line-height:var(--section-heading-line-height)}
  .section h2 .display-heading,.notify h2 .display-heading{height:calc(var(--heading-lines)*var(--section-heading-line-height));aspect-ratio:auto}
  #steps-title .display-heading{--heading-lines:1}
  #brands-title .display-heading,#notify-title .display-heading{--heading-lines:2}
}

/* Google Calendar scheduling popup open: hide the shell so promoted layers
   (sphere canvases, hero h1, fixed nav) can't composite above the overlay */
.gcal-open .site-shell{visibility:hidden}