/* tapin-usa.com website (shown at / to visitors who aren't signed in and didn't come from a barber's link).
   Everything is scoped to #site and every class starts with "w-", so the barber app's styles and the site's never mix.
   Editorial and cool (palette 2026-11-11): porcelain and midnight navy, an Instrument Serif display face with Geist, real
   product screens in device frames, one cobalt for small accents, and each app's own color where it is shown (Portfolio black and white,
   Kiosk lime). Motion is slow and physical (floating devices, a feature ticker, reveals); reduced motion turns it off. */
html:not(.site) #site{display:none}
html.site #app,html.site #toast,html.site .appfoot{display:none}
html.site body{background:#EEF1F5}
html.site body::before{background:rgba(238,241,245,.85)}
#site{--paper:#EEF1F5;--paper2:#F9FAFC;--ink:#0B1424;--ink2:#111C30;--fg:#0B1424;--mut:#596274;--mut2:#98A1B1;--line:#DAE0E8;--line2:#C3CBD6;
  --sig:#3D63FF;--sig-lt:#93AAFF;--sig-ink:#2443C9;--lime:#C6F432;--ease:cubic-bezier(.2,.8,.2,1);
  --serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--paper);color:var(--fg);font:16px/1.6 "Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;color-scheme:light;position:relative}
/* film grain: a fine, static noise over everything, for warmth */
#site::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#site *{box-sizing:border-box}
#site h1,#site h2,#site h3{margin:0;color:inherit;letter-spacing:-.02em}
#site h2::after{content:none;display:none}
#site p{margin:0}
#site a{color:inherit;text-decoration:none}
#site img{display:block;max-width:100%;height:auto}
#site em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
#site [hidden]{display:none!important}
#site :focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:6px}
#site .w-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
#site .w-narrow{max-width:820px}
#site .w-mono{font-family:var(--mono);letter-spacing:0}

/* top bar */
#site .w-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;transition:background .3s,box-shadow .3s}
#site.scrolled .w-top{background:rgba(238,241,245,.82);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
#site .w-top .w-wrap{display:flex;align-items:center;gap:32px;height:68px}
#site .w-brand img{height:26px;width:auto}
#site .w-links{display:flex;gap:28px;font-size:14px;color:var(--mut);margin-right:auto}
#site .w-links a{position:relative;transition:color .2s}
#site .w-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
#site .w-links a:hover{color:var(--fg)}#site .w-links a:hover::after{transform:scaleX(1)}
#site .w-menu{position:relative}
#site .w-pop{position:absolute;right:0;top:calc(100% + 10px);width:260px;padding:6px;border-radius:14px;background:var(--paper2);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(11,20,36,.3);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
#site .w-menu.open .w-pop{opacity:1;transform:none;pointer-events:auto}
#site .w-pop a{display:block;padding:12px;border-radius:10px}
#site .w-pop a:hover{background:#fff}
#site .w-pop b{display:block;font-weight:500;font-size:15px}#site .w-pop small{color:var(--mut);font-size:13px}
@media(max-width:760px){#site .w-links{display:none}#site .w-top .w-wrap{justify-content:space-between;gap:10px}#site .w-brand{margin-right:auto}}
/* phone menu: full-screen navy sheet */
#site .w-burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--fg);place-items:center;cursor:pointer;padding:0}
#site .w-burger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:760px){#site .w-burger{display:grid}}
#site .w-sheet{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) 22px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;
  opacity:0;transform:translateY(-12px);transition:opacity .28s,transform .4s var(--ease);pointer-events:none}
#site .w-sheet[hidden]{display:none}
#site .w-sheet.open{opacity:1;transform:none;pointer-events:auto}
#site .w-sh-top{display:flex;justify-content:space-between;align-items:center;height:54px}
#site .w-sh-top img{height:26px;width:auto;filter:invert(1) brightness(1.1)}
#site .w-sheet .w-x{display:grid;color:var(--paper);border-color:rgba(238,241,245,.25)}
#site .w-sh-links{display:grid;margin-top:26px}
#site .w-sh-links a{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(238,241,245,.12);font-family:var(--serif);font-size:44px;line-height:1.08;letter-spacing:-.01em;color:var(--paper);
  opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s var(--ease)}
#site .w-sh-links small{font:500 12px var(--mono);color:var(--sig-lt);letter-spacing:0}
#site .w-sheet.open .w-sh-links a{opacity:1;transform:none}
#site .w-sheet.open .w-sh-links a:nth-child(2){transition-delay:.05s}#site .w-sheet.open .w-sh-links a:nth-child(3){transition-delay:.1s}#site .w-sheet.open .w-sh-links a:nth-child(4){transition-delay:.15s}
#site .w-sh-foot{margin-top:auto;padding-top:28px;display:grid;gap:10px}
#site .w-sh-k{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sig-lt)}
#site .w-sh-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-radius:14px;border:1px solid rgba(238,241,245,.2);color:var(--paper)}
#site .w-sh-card b{display:block;font-weight:500}#site .w-sh-card small{display:block;font-size:13px;opacity:.65}
#site .w-sh-card.w-sh-main{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#site .w-sh-card[hidden],#site .w-sh-k[hidden],#site .w-sh-cta[hidden]{display:none}
#site .w-sh-cta{margin-top:6px;display:flex;justify-content:center;align-items:center;height:52px;border-radius:999px;background:var(--sig);color:#fff;font-weight:500}
html.w-menu-open,html.w-menu-open body{overflow:hidden}
@media(min-width:761px){#site .w-sheet{display:none!important}}
@media(prefers-reduced-motion:reduce){#site .w-sheet,#site .w-sh-links a{transition:none}}

/* buttons */
#site .w-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--fg);
  font:500 15px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
#site .w-btn:hover{border-color:var(--fg)}
#site .w-btn:active{transform:scale(.98)}
#site .w-btn.w-ink{background:var(--ink);border-color:var(--ink);color:var(--paper2)}
#site .w-btn.w-ink:hover{background:#1B2740}
#site .w-btn.w-lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
#site .w-btn.w-ghost{color:var(--paper2);border-color:rgba(255,255,255,.25)}#site .w-btn.w-ghost:hover{border-color:var(--paper2)}
#site .w-btn.w-sm{height:38px;padding:0 16px;font-size:14px}
#site .w-btn.w-full{width:100%}
#site .w-btn[disabled]{opacity:.4;cursor:default}
#site .w-arr{transition:transform .25s var(--ease)}#site .w-btn:hover .w-arr{transform:translateX(3px)}

/* hero */
#site .w-hero{padding:64px 0 0;text-align:center;overflow:hidden}
#site .w-kicker{display:inline-flex;align-items:center;gap:10px;font:12px var(--mono);color:var(--mut);text-transform:uppercase;letter-spacing:.12em}
#site .w-kicker span{width:7px;height:7px;border-radius:50%;background:var(--sig)}
#site .w-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,9vw,112px);line-height:.95;letter-spacing:-.035em;margin:24px auto 24px;max-width:12ch}
#site .w-hero h1 em{color:var(--mut)}
#site .w-lead{font-size:clamp(16px,2vw,19px);color:var(--mut);max-width:56ch;margin:0 auto 32px;line-height:1.65}
#site .w-lead b{color:var(--fg);font-weight:500}
#site .w-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#site .w-stage{position:relative;max-width:1080px;margin:64px auto 0;height:clamp(300px,56vw,640px)}
#site .w-ipad{position:absolute;left:0;right:12%;top:0;margin:0;padding:14px;border-radius:34px;background:#0F0E0D;box-shadow:0 60px 120px -40px rgba(11,20,36,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
#site .w-ipad img{border-radius:22px;width:100%}
#site .w-iphone{position:absolute;right:0;bottom:-40px;width:clamp(170px,24vw,280px);margin:0;padding:10px;border-radius:44px;background:#0F0E0D;box-shadow:0 50px 100px -30px rgba(11,20,36,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
#site .w-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:30%;height:20px;border-radius:12px;background:#0F0E0D;z-index:2}
#site .w-pf{border-radius:34px;overflow:hidden;background:#fff;color:#111;aspect-ratio:9/19.2;display:flex;flex-direction:column;text-align:left}
#site .w-pf-cover{height:28%;background:linear-gradient(160deg,#2b2926,#0f0e0d);position:relative}
#site .w-pf-cover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}
#site .w-pf-av{width:26%;aspect-ratio:1;border-radius:50%;margin:-13% 0 0 8%;position:relative;z-index:1;background:#ddd;border:3px solid #fff;box-shadow:0 0 0 2px #111;display:grid;place-items:center;font-weight:600;font-size:clamp(10px,1.3vw,16px)}
#site .w-pf-in{padding:6% 8% 8%;display:flex;flex-direction:column;gap:6%;flex:1;font-size:clamp(8px,1.05vw,13px)}
#site .w-pf-in b{font-size:1.35em}
#site .w-pf-in .w-mono{color:#777;font-size:.85em}#site .w-pf-in i{font-style:normal;color:#111}
#site .w-pf-work{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
#site .w-pf-work i{aspect-ratio:4/5;border-radius:4px;background:linear-gradient(180deg,#e9e6e0,#cfcac1)}
#site .w-pf-work i:nth-child(2){background:linear-gradient(180deg,#d8d4cc,#a9a398)}
#site .w-pf-book{display:flex;justify-content:space-between;padding:.6em .8em;border:1px solid #e5e5e5;border-radius:8px}
#site .w-pf-times{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#site .w-pf-times i{font-family:var(--mono);text-align:center;padding:.45em 0;border:1px solid #e5e5e5;border-radius:6px;font-size:.9em}
#site .w-pf-times i.on{background:#111;color:#fff;border-color:#111}
#site .w-pf-btn{margin-top:auto;background:#111;color:#fff;border-radius:999px;text-align:center;padding:.8em 0;font-weight:500}
#site .w-float{animation:wfloat 9s ease-in-out infinite}
#site .w-float2{animation:wfloat 7s ease-in-out -2s infinite}
@keyframes wfloat{50%{transform:translateY(-12px)}}

/* ticker */
#site .w-ticker{margin-top:120px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#site .w-track{display:inline-flex;gap:48px;animation:wtick 50s linear infinite;padding-left:48px}
#site .w-track span{font-family:var(--serif);font-size:26px;font-style:italic;color:var(--mut);display:inline-flex;align-items:center;gap:48px}
#site .w-track span::after{content:"✦";font-style:normal;font-size:12px;color:var(--sig)}
@keyframes wtick{to{transform:translateX(-50%)}}

/* sections */
#site section{padding:140px 0}
#site .w-dark{background:var(--ink);color:var(--paper2)}
#site .w-ink{background:var(--ink2);color:var(--paper2)}
#site .w-light{background:var(--paper)}
#site .w-eyebrow{font:12px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--sig-ink);margin-bottom:22px}
#site .w-dark .w-eyebrow,#site .w-ink .w-eyebrow,#site .w-end .w-eyebrow{color:var(--sig-lt)}
#site section h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.03em;max-width:15ch}
#site section h2 em{color:var(--mut2)}
#site .w-dark h2 em,#site .w-ink h2 em{color:#8792A6}
#site .w-intro{font-size:18px;line-height:1.7;color:var(--mut);max-width:58ch;margin-top:26px}
#site .w-dark .w-intro{color:#A9B2C2}
#site .w-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
@media(max-width:900px){#site .w-split{grid-template-columns:minmax(0,1fr)}}
#site .w-points{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:18px}
#site .w-points li{padding-left:22px;position:relative;color:#A9B2C2;line-height:1.6}
#site .w-points li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;border:1px solid var(--sig-lt)}
#site .w-points b{color:var(--paper2);font-weight:500}
#site .w-soon{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px solid rgba(147,170,255,.55);color:var(--sig-lt);font:11px var(--mono);vertical-align:2px}

/* booking demo phone */
#site .w-demo{display:grid;justify-items:center;gap:14px}
#site .w-phone{position:relative;width:min(100%,340px);border-radius:46px;padding:12px;background:#0B0A09;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -30px rgba(0,0,0,.8)}
#site .w-phone .w-notch{top:20px}
#site .w-ph-head{display:flex;align-items:center;gap:12px;padding:52px 20px 16px;background:#fff;border-radius:36px 36px 0 0;color:#111}
#site .w-ph-av{width:44px;height:44px;border-radius:50%;background:#e8e5df;display:grid;place-items:center;font-weight:600;font-size:14px;box-shadow:0 0 0 2px #111;border:2px solid #fff}
#site .w-ph-head b{display:block;font-weight:600}#site .w-ph-head span{font-size:12px;color:#777}
#site .w-ph-body{background:#fff;color:#111;padding:4px 20px 24px;border-radius:0 0 36px 36px}
#site .w-ph-l{font-size:12px;color:#777;margin:14px 0 8px}
#site .w-opts{display:flex;flex-wrap:wrap;gap:6px}
#site .w-opt{height:36px;padding:0 12px;border-radius:999px;border:1px solid #e3e3e3;background:#fff;color:#111;font:14px inherit;font-family:inherit;cursor:pointer;transition:all .2s}
#site .w-opt small{color:#888;font-family:var(--mono);font-size:12px;margin-left:4px}
#site .w-opt.on{background:#111;color:#fff;border-color:#111}#site .w-opt.on small{color:#ccc}
#site .w-opt[disabled]{opacity:.3;text-decoration:line-through;cursor:default}
#site .w-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px}
#site .w-times .w-opt{padding:0;font-family:var(--mono);font-size:13px;border-radius:10px}
#site .w-done{position:absolute;inset:12px;border-radius:36px;background:#fff;color:#111;display:grid;place-items:center;align-content:center;text-align:center;gap:6px;padding:30px;opacity:0;pointer-events:none;transition:opacity .3s}
#site .w-done.on{opacity:1;pointer-events:auto}
#site .w-done svg{width:72px;height:72px;margin-bottom:10px}
#site .w-done circle,#site .w-done path{fill:none;stroke:#111;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#site .w-done circle{stroke-width:3;transform:rotate(-90deg);transform-origin:center}
#site .w-done path{stroke-width:6}
#site .w-done.on circle{animation:wdraw .7s var(--ease) forwards}#site .w-done.on path{animation:wdraw .4s .5s var(--ease) forwards}
@keyframes wdraw{to{stroke-dashoffset:0}}
#site .w-done b{font-family:var(--serif);font-weight:400;font-size:30px}
#site .w-done small{font:12px var(--mono);color:#777}
#site .w-done p{font-size:13px;color:#666;max-width:24ch;margin:6px 0 14px}
#site .w-note{font:12px var(--mono);color:#8792A6}

/* feature grids */
#site .w-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:96px;border-top:1px solid var(--line)}
#site .w-grid-dark{border-top-color:rgba(255,255,255,.12)}
@media(max-width:900px){#site .w-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#site .w-grid{grid-template-columns:minmax(0,1fr)}}
#site .w-f{padding:32px 28px 36px 0;border-bottom:1px solid var(--line)}
#site .w-grid-dark .w-f{border-bottom-color:rgba(255,255,255,.12)}
#site .w-f span{font:12px var(--mono);color:var(--sig-ink)}
#site .w-grid-dark .w-f span{color:var(--sig-lt)}
#site .w-f h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin:14px 0 10px;letter-spacing:-.01em}
#site .w-f p{font-size:15px;line-height:1.6;color:var(--mut)}
#site .w-grid-dark .w-f p{color:#97A1B3}

/* kiosk shots */
#site .w-shot{margin:72px 0 0;border-radius:28px;padding:14px;background:#0F0E0D;box-shadow:0 60px 120px -40px rgba(11,20,36,.35)}
#site .w-shot img{border-radius:18px;width:100%}
#site .w-shot figcaption{display:flex;flex-wrap:wrap;gap:8px 28px;padding:18px 8px 6px;color:#A9B2C2;font-size:14px}
#site .w-shot figcaption b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--ink);font:500 12px var(--mono);margin-right:10px}
#site .w-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:28px}
@media(max-width:900px){#site .w-strip{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,60%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none}
  #site .w-strip::-webkit-scrollbar{display:none}#site .w-strip figure{scroll-snap-align:start}}
#site .w-strip figure{margin:0;padding:8px;border-radius:30px;background:#0F0E0D;transition:transform .5s var(--ease)}
#site .w-strip figure:hover{transform:translateY(-6px)}
#site .w-strip img{border-radius:22px;width:100%}
#site .w-strip figcaption{color:#A9B2C2;font-size:13px;text-align:center;padding:12px 4px 6px}

/* pricing */
#site .w-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:64px}
@media(max-width:760px){#site .w-plans{grid-template-columns:minmax(0,1fr)}}
#site .w-plan{border-radius:28px;padding:40px;background:var(--paper2);color:var(--ink);display:flex;flex-direction:column;transition:transform .5s var(--ease)}
#site .w-plan:hover{transform:translateY(-4px)}
#site .w-plan-lime{background:var(--lime)}
#site .w-who{font:12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
#site .w-plan-lime .w-who{color:#3E4A12}
#site .w-plan h3{font-family:var(--serif);font-weight:400;font-size:36px;margin:10px 0 24px}
#site .w-price{font-family:var(--serif);font-size:84px;line-height:.9;letter-spacing:-.04em}
#site .w-price span{font-family:inherit;font-size:20px;letter-spacing:0;color:var(--mut);margin-left:6px}
#site .w-plan-lime .w-price span{color:#3E4A12}
#site .w-pnote{font:12px var(--mono);margin-top:14px;color:var(--mut)}
#site .w-plan-lime .w-pnote{color:#3E4A12}
#site .w-plan ul{list-style:none;padding:24px 0 0;margin:28px 0 32px;border-top:1px solid rgba(11,20,36,.15);display:grid;gap:12px;flex:1}
#site .w-plan li{padding-left:24px;position:relative;font-size:15px}
#site .w-plan li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
#site .w-plan-lime .w-btn{border-color:var(--ink)}

/* FAQ */
#site .w-faq{margin-top:48px;border-top:1px solid var(--line)}
#site details{border-bottom:1px solid var(--line)}
#site summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font-size:18px}
#site summary::-webkit-details-marker{display:none}
#site summary i{width:18px;height:18px;flex:none;position:relative}
#site summary i::before,#site summary i::after{content:"";position:absolute;left:2px;right:2px;top:8px;height:1.5px;background:var(--fg);transition:transform .3s var(--ease)}
#site summary i::after{transform:rotate(90deg)}
#site details[open] summary i::after{transform:rotate(0)}
#site details p{color:var(--mut);max-width:65ch;padding:0 0 26px;line-height:1.7}

/* closing + footer */
#site .w-end{background:var(--ink);color:var(--paper2);text-align:center;padding:160px 0}
#site .w-end h2{margin:0 auto 40px;max-width:14ch}
#site .w-foot{background:var(--ink);color:#8792A6;border-top:1px solid rgba(255,255,255,.08);padding:36px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:13px}
#site .w-foot .w-wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
#site .w-foot img{height:20px;width:auto;filter:invert(1);opacity:.9}
#site .w-foot .w-sp{margin-right:auto}
#site .w-foot a:hover{color:var(--paper2)}

/* reveal on scroll */
#site .w-rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
#site .w-rv.in{opacity:1;transform:none}
#site .w-d1{transition-delay:.08s}#site .w-d2{transition-delay:.16s}#site .w-d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){#site *,#site *::before,#site *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  #site .w-rv{opacity:1;transform:none}#site .w-done circle,#site .w-done path{stroke-dashoffset:0}}
@media(max-width:560px){#site section{padding:96px 0}#site .w-stage{height:auto;padding-bottom:40px}#site .w-ipad{position:relative;right:auto}
  #site .w-iphone{width:44%;right:-4%;bottom:-10px}#site .w-plan{padding:28px}#site .w-price{font-size:64px}}

/* "How it runs": a floating phone that plays the whole flow, with step captions beside it */
#site .w-run{background:var(--paper);padding:140px 0 120px}
#site .w-run-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
@media(max-width:900px){#site .w-run-grid{grid-template-columns:minmax(0,1fr)}#site .w-run-stage{order:-1}}
#site .w-steps{list-style:none;padding:0;margin:40px 0 0;counter-reset:st;display:grid;gap:4px}
#site .w-steps li{counter-increment:st;position:relative;padding:14px 0 14px 52px;border-top:1px solid var(--line);color:var(--mut2);transition:color .4s;cursor:pointer}
#site .w-steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:15px;font:12px var(--mono);color:var(--mut2)}
#site .w-steps li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left}
#site .w-steps li.on{color:var(--fg)}#site .w-steps li.on::before{color:var(--sig-ink)}
#site .w-steps li.on::after{animation:wstep var(--dur,3.2s) linear forwards}
@keyframes wstep{to{transform:scaleX(1)}}
#site .w-steps b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.01em}
#site .w-steps span{display:block;font-size:14px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
#site .w-steps li.on span{max-height:48px;opacity:1;margin-top:4px;color:var(--mut)}
#site .w-run-stage{position:relative;display:grid;place-items:center;min-height:640px}
#site .w-run-phone{position:relative;width:300px;border-radius:50px;padding:11px;background:#0B0A09;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 70px 120px -40px rgba(11,20,36,.55),0 30px 60px -30px rgba(11,20,36,.35);
  animation:wfloat 8s ease-in-out infinite;transform-style:preserve-3d}
#site .w-run-phone .w-notch{top:20px}
#site .w-scr{position:relative;aspect-ratio:9/19.5;border-radius:40px;overflow:hidden;background:#fff;color:#111}
#site .w-scene{position:absolute;inset:0;opacity:0;transform:translateX(18px) scale(.985);transition:opacity .6s var(--ease),transform .7s var(--ease);font-size:13px}
#site .w-scene.on{opacity:1;transform:none}
#site .w-scene.out{opacity:0;transform:translateX(-18px) scale(.985)}
#site .w-sc-img img{width:100%;height:100%;object-fit:cover;object-position:top}
#site .w-sc-cover{height:26%;background:linear-gradient(160deg,#2b2926,#0f0e0d)}
#site .w-sc-av{width:70px;height:70px;border-radius:50%;margin:-35px 0 0 20px;background:#e8e5df;border:3px solid #fff;box-shadow:0 0 0 2px #111;display:grid;place-items:center;font-weight:600}
#site .w-sc-pad{padding:12px 20px;display:flex;flex-direction:column;gap:10px}
#site .w-sc-top{padding-top:64px}
#site .w-sc-name{font-size:19px}#site .w-sc-link{font:11px var(--mono);color:#888;margin-top:-6px}
#site .w-sc-story{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
#site .w-sc-story i{aspect-ratio:4/5;border-radius:6px;background:linear-gradient(180deg,#ece9e3,#c9c3b9)}
#site .w-sc-story i:nth-child(2n){background:linear-gradient(180deg,#d6d1c8,#a39c90)}
#site .w-sc-row{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid #eee;border-radius:10px}
#site .w-sc-cta{margin-top:auto;background:#111;color:#fff;text-align:center;padding:12px;border-radius:999px;font-weight:500}
#site .w-sc-small{font:11px var(--mono);color:#888}#site .w-sc-h{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em}
#site .w-sc-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 12px}
#site .w-sc-times i{font:500 12px var(--mono);font-style:normal;text-align:center;padding:9px 0;border:1px solid #e6e6e6;border-radius:9px}
#site .w-sc-times i.x{opacity:.3;text-decoration:line-through}
#site .w-scene.on .w-sc-times i:nth-child(3){animation:wpick .4s 1s var(--ease) forwards}
@keyframes wpick{to{background:#111;color:#fff;border-color:#111}}
#site .w-tap{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(61,99,255,.35);left:52%;top:41%;opacity:0}
#site .w-scene.on .w-tap{animation:wtap .9s .7s ease-out}
@keyframes wtap{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
#site .w-sc-p{font-size:13px;line-height:1.55;color:#555}
#site .w-sc-card{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:12px;background:#111;color:#fff;font:12px var(--mono)}
#site .w-sc-card b{font-weight:500;font-size:14px}
#site .w-sc-check{display:flex;gap:10px;align-items:center;font-size:13px}
#site .w-sc-check i{width:18px;height:18px;border-radius:5px;border:1.5px solid #111;position:relative}
#site .w-scene.on .w-sc-check i{animation:wcheck .3s 1.2s forwards}
@keyframes wcheck{to{background:#111;box-shadow:inset 0 0 0 3px #fff}}
#site .w-sc-lock{background:linear-gradient(180deg,#2a2622,#0e0d0c);color:#fff;text-align:center;padding-top:70px}
#site .w-sc-time{font-size:64px;font-weight:300;letter-spacing:-.03em;line-height:1}
#site .w-sc-date{font-size:13px;opacity:.75;margin-top:6px}
#site .w-sc-notif{margin:28px 14px 0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;
  opacity:0;transform:translateY(-14px)}
#site .w-sc-notif b{display:block;font-size:11px;opacity:.7;margin-bottom:2px}#site .w-sc-notif span{font-size:13px}
#site .w-sc-notif.w-n2{margin-top:8px}
#site .w-scene.on .w-sc-notif{animation:wnotif .6s .5s var(--ease) forwards}
#site .w-scene.on .w-sc-notif.w-n2{animation-delay:1.3s}
@keyframes wnotif{to{opacity:1;transform:none}}
#site .w-run-bar{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);width:120px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
#site .w-run-bar i{display:block;height:100%;width:0;background:var(--fg)}
#site .w-chip{position:absolute;z-index:2;padding:10px 14px;border-radius:14px;background:var(--paper2);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(11,20,36,.35);font-size:13px;font-weight:500;white-space:nowrap}
#site .w-c1{left:2%;top:18%;animation:wfloat 6s ease-in-out infinite}
#site .w-c2{right:0;top:44%;animation:wfloat 7s ease-in-out -3s infinite}
#site .w-c3{left:8%;bottom:14%;animation:wfloat 6.5s ease-in-out -1.5s infinite;background:var(--lime);border-color:var(--lime)}
@media(max-width:560px){#site .w-run-phone{width:250px}#site .w-run-stage{min-height:560px}#site .w-chip{font-size:12px}#site .w-c2{right:-4%}}

/* ===== Visuals (2026-11-11): floating device intros, interactive tilt, drawn barber & shop objects, people ===== */
#site section,#site .w-hero{position:relative}
#site section>.w-wrap,#site .w-hero>.w-wrap{position:relative;z-index:1}
#site .w-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* background objects: ink line drawings that drift, react to the pointer and move with scroll (site.js) */
#site .w-objs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#site .w-obj{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  color:#4F5A6E;opacity:.5;rotate:var(--r,0deg);animation:wdrift var(--t,14s) ease-in-out calc(var(--i,0) * -1.7s) infinite alternate;will-change:transform}
#site .w-objs-light .w-obj{color:#C9D3E3;opacity:.32}
@keyframes wdrift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(6px,-14px,0) rotate(5deg)}100%{transform:translate3d(-8px,8px,0) rotate(-4deg)}}
#site .w-spk{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;font-style:normal;color:var(--sig);animation:wtwinkle 3.6s ease-in-out calc(var(--i,0) * -1.1s) infinite}
#site .w-spk::before{content:"✦";font-size:14px;line-height:1}
@keyframes wtwinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
@media(max-width:760px){#site .w-obj.w-od{display:none}#site .w-obj.w-om{left:var(--mx);top:var(--my);width:var(--ms);height:var(--ms);opacity:.38}
  #site .w-objs-light .w-obj.w-om{opacity:.24}#site .w-spk:not(.w-om){display:none}#site .w-spk.w-om{left:var(--mx);top:var(--my)}}
/* the pointer's soft light over the hero */
#site .w-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;
  background:radial-gradient(520px circle at var(--lx,50%) var(--ly,30%),rgba(255,255,255,.55),transparent 65%)}
#site .w-hero.w-lit::before{opacity:1}

/* hero stage: laptop + phone + notifications, tilting toward the pointer */
#site .w-hero{padding-bottom:96px}#site .w-hero+.w-ticker{margin-top:24px}
#site .w-stage{perspective:1800px;height:clamp(300px,52vw,620px)}
#site .w-stage-in{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
#site .w-laptop{position:absolute;left:3%;top:0;width:80%;margin:0;z-index:1}
#site .w-laptop .w-bob{perspective:2200px;animation:wfloat 9s ease-in-out infinite}
#site .w-lid{position:relative;padding:1.5% 1.5% 2.1%;border-radius:clamp(10px,1.8vw,22px) clamp(10px,1.8vw,22px) 6px 6px;background:#0F0E0D;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 -1px 0 rgba(255,255,255,.04);transform-origin:50% 100%;transform-style:preserve-3d}
#site .w-lid img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:4px;background:#FAFAF9}
#site .w-cam{position:absolute;top:.55%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2A2826}
#site .w-glare{position:absolute;inset:1.5% 1.5% 2.1%;border-radius:4px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 38%),radial-gradient(600px circle at var(--gx,30%) var(--gy,10%),rgba(255,255,255,.12),transparent 60%)}
#site .w-deck{position:relative;height:clamp(9px,1.5vw,17px);margin:0 -7%;border-radius:2px 2px 50% 50%/2px 2px 100% 100%;
  background:linear-gradient(180deg,#E6EAF0 0%,#C1C8D2 45%,#8A93A1 100%);box-shadow:0 42px 70px -26px rgba(11,20,36,.55),0 18px 30px -18px rgba(11,20,36,.35)}
#site .w-deck i{position:absolute;left:50%;top:0;width:15%;height:42%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:rgba(11,20,36,.16)}
#site .w-iphone{position:absolute;right:1%;bottom:-36px;left:auto;top:auto;width:clamp(150px,22vw,262px);margin:0;padding:0;border-radius:0;background:none;box-shadow:none;z-index:3}
#site .w-iphone .w-bob{animation:wfloat 7s ease-in-out -2s infinite}
#site .w-ph{position:relative;padding:9px;border-radius:44px;background:#0F0E0D;box-shadow:0 50px 100px -30px rgba(11,20,36,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
#site .w-pf{position:relative}
#site .w-pf-times button{font:inherit;font-family:var(--mono);text-align:center;padding:.45em 0;border:1px solid #e5e5e5;border-radius:6px;font-size:.9em;background:#fff;color:#111;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
#site .w-pf-times button:hover{border-color:#111}
#site .w-pf-times button.on{background:#111;color:#fff;border-color:#111}
#site .w-pf-times button:active,#site button.w-pf-btn:active{transform:scale(.96)}
#site button.w-pf-btn{border:0;font:inherit;font-weight:500;cursor:pointer;width:100%}
#site .w-pf-sent{position:absolute;inset:0;z-index:3;background:#fff;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s}
#site .w-pf-sent svg{width:34%;margin-bottom:8px}
#site .w-pf-sent circle,#site .w-pf-sent path{fill:none;stroke:#111;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#site .w-pf-sent circle{stroke-width:4;transform:rotate(-90deg);transform-origin:center}#site .w-pf-sent path{stroke-width:8}
#site .w-pf.sent .w-pf-sent{opacity:1;pointer-events:auto}
#site .w-pf.sent .w-pf-sent circle{animation:wdraw .6s var(--ease) forwards}#site .w-pf.sent .w-pf-sent path{animation:wdraw .35s .45s var(--ease) forwards}
#site .w-pf-sent b{font-family:var(--serif);font-weight:400;font-size:clamp(16px,2vw,24px)}
#site .w-pf-sent small{font:clamp(9px,.9vw,11px) var(--mono);color:#777}
/* notifications = the people on the other side */
#site .w-nt{position:absolute;z-index:4;text-align:left}
#site .w-nt .w-bob{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(251,250,246,.92);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 22px 50px -22px rgba(11,20,36,.45);white-space:nowrap;animation:wfloat 6s ease-in-out infinite;transition:box-shadow .3s}
#site .w-nt b{display:block;font-size:13px;font-weight:600;line-height:1.25}#site .w-nt small{display:block;font-size:12px;color:var(--mut);line-height:1.3}
#site .w-av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--c,#E1E6EE);display:inline-grid;place-items:center;font:600 12px/1 inherit;color:#2A3242;box-shadow:0 0 0 2px #fff}
#site .w-avs{display:inline-flex}#site .w-avs .w-av{width:28px;height:28px;font-size:10px}#site .w-avs .w-av+.w-av{margin-left:-6px}
#site .w-dot{width:30px;height:30px;flex:none;border-radius:50%;background:var(--lime);position:relative}
#site .w-dot::after{content:"";position:absolute;left:10px;top:8px;width:7px;height:11px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
#site .w-warn{width:30px;height:30px;flex:none;border-radius:50%;background:#E3E9FF;color:var(--sig-ink);display:grid;place-items:center;font:600 14px var(--mono)}
#site .w-p1{left:-5%;top:14%}#site .w-p1 .w-bob{animation-duration:6.5s}
#site .w-p2{left:52%;top:5%}#site .w-p2 .w-bob{animation-duration:7.5s;animation-delay:-2s}
#site .w-p3{left:7%;bottom:-6%}#site .w-p3 .w-bob{animation-duration:7s;animation-delay:-4s}
#site .w-p4{right:-2%;top:-1%;z-index:4}#site .w-p4 .w-bob{animation-duration:8s;animation-delay:-1s}
@media(max-width:900px){#site .w-p4{display:none}#site .w-p1{left:-2%}}
@media(max-width:560px){#site .w-stage{height:auto;margin-top:48px;padding-bottom:56px}#site .w-stage-in{position:relative}
  #site .w-laptop{position:relative;left:auto;width:100%}#site .w-iphone{width:38%;right:-3%;bottom:6px}
  #site .w-nt .w-bob{padding:7px 10px 7px 7px;gap:7px;border-radius:12px}#site .w-nt b{font-size:11px}#site .w-nt small{font-size:10px}
  #site .w-av{width:24px;height:24px;font-size:9px}#site .w-dot,#site .w-warn{width:22px;height:22px}#site .w-dot::after{left:7px;top:5px;width:5px;height:9px}
  #site .w-nt{pointer-events:none}#site .w-p1{left:-2%;top:-2%}#site .w-p2{right:auto;left:30%;top:auto;bottom:-14px}#site .w-p3{display:none}}

/* intro: the laptop opens, the phone flies in, then the notifications pop (only with JS, never with reduced motion) */
@media(prefers-reduced-motion:no-preference){
  html.w-js #site .w-hero .w-in{transition:opacity .9s var(--ease),transform 1.5s cubic-bezier(.16,1,.3,1)}
  html.w-js #site .w-hero .w-lid{transition:transform 1.6s cubic-bezier(.2,.9,.25,1) .45s}
  html.w-js #site .w-hero:not(.w-go) .w-laptop .w-in{opacity:0;transform:translateY(90px) scale(.92)}
  html.w-js #site .w-hero:not(.w-go) .w-lid{transform:rotateX(-88deg)}
  html.w-js #site .w-hero .w-iphone .w-in{transition-delay:.9s}
  html.w-js #site .w-hero:not(.w-go) .w-iphone .w-in{opacity:0;transform:translate(140px,190px) rotate(16deg) scale(.86)}
  html.w-js #site .w-hero .w-nt .w-in{transition:opacity .6s var(--ease),transform .8s cubic-bezier(.34,1.56,.64,1)}
  html.w-js #site .w-hero:not(.w-go) .w-nt .w-in{opacity:0;transform:translateY(18px) scale(.86)}
  html.w-js #site .w-hero .w-p1 .w-in{transition-delay:1.7s}html.w-js #site .w-hero .w-p2 .w-in{transition-delay:2.05s}
  html.w-js #site .w-hero .w-p3 .w-in{transition-delay:2.4s}html.w-js #site .w-hero .w-p4 .w-in{transition-delay:2.75s}
  html.w-js #site .w-hero .w-obj,html.w-js #site .w-hero .w-spk{transition:opacity 1.2s var(--ease) calc(.3s + var(--i,0) * .09s),scale 1.4s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--i,0) * .09s)}
  html.w-js #site .w-hero:not(.w-go) .w-obj,html.w-js #site .w-hero:not(.w-go) .w-spk{opacity:0;scale:.5}
}

/* Kiosk: the iPad tips up into place as you scroll, a receipt prints beside it, a card taps */
#site .w-shotwrap{position:relative;margin-top:72px}
#site .w-shot{margin:0;transform-origin:50% 0;transform:perspective(1600px) rotateX(calc((1 - var(--p,1)) * 26deg)) translateY(calc((1 - var(--p,1)) * 70px)) scale(calc(.9 + var(--p,1) * .1));
  opacity:calc(.25 + var(--p,1) * .75);will-change:transform}
#site .w-rcpt{position:absolute;right:-3%;top:12%;width:clamp(150px,17vw,200px);z-index:2;filter:drop-shadow(0 24px 30px rgba(11,20,36,.25))}
#site .w-slot{height:12px;border-radius:8px;background:#111C30;position:relative;z-index:2;box-shadow:inset 0 -3px 0 #000}
#site .w-feed{overflow:hidden;margin-top:-5px;padding:0 8px 6px}
#site .w-paper{padding:14px 12px 16px;background:#FFFEFB;color:#222;font:10.5px/1.5 var(--mono);
  clip-path:polygon(0 0,100% 0,100% 100%,94% 98%,88% 100%,82% 98%,76% 100%,70% 98%,64% 100%,58% 98%,52% 100%,46% 98%,40% 100%,34% 98%,28% 100%,22% 98%,16% 100%,10% 98%,4% 100%,0 98%);
  transform-origin:50% 0;animation:wprint 7s cubic-bezier(.5,0,.3,1) infinite}
#site .w-paper b{display:block;text-align:center;font:600 12px var(--mono)}#site .w-paper small{display:block;text-align:center;color:#888;font-size:9.5px}
#site .w-paper hr{border:0;border-top:1px dashed #ccc;margin:7px 0}
#site .w-paper span{display:flex;justify-content:space-between;gap:8px}#site .w-paper i{font-style:normal}
#site .w-paper .w-tot{font-weight:600;font-size:12px;margin-top:2px}
#site .w-paper em{display:block;text-align:center;margin-top:8px;font:600 10px var(--mono);color:#3E6B0B;letter-spacing:.08em;text-transform:uppercase}
#site .w-bars{height:22px;margin-top:8px;background:repeating-linear-gradient(90deg,#222 0 1px,transparent 1px 3px,#222 3px 5px,transparent 5px 6px,#222 6px 7px,transparent 7px 10px)}
@keyframes wprint{0%{transform:translateY(-100%) scaleY(.2);opacity:0}8%{opacity:1}38%{transform:none}86%{transform:none;opacity:1}100%{transform:translateY(20px);opacity:0}}
#site .w-tapcard{position:absolute;left:-2%;bottom:16%;width:clamp(130px,15vw,180px);z-index:2}
#site .w-cardy{aspect-ratio:1.586;border-radius:12px;background:linear-gradient(135deg,#1B2740,#0F0E0D 60%,#3A3530);box-shadow:0 26px 40px -18px rgba(11,20,36,.6),inset 0 0 0 1px rgba(255,255,255,.08);
  position:relative;animation:wtapc 4.2s cubic-bezier(.5,0,.3,1) infinite}
#site .w-chipc{position:absolute;left:12%;top:30%;width:18%;height:22%;border-radius:4px;background:linear-gradient(135deg,#E8D9A8,#B9A46A)}
#site .w-cn{position:absolute;left:12%;bottom:14%;color:#E9E5DD;font:11px var(--mono);letter-spacing:.06em}
@keyframes wtapc{0%,100%{transform:translate(0,0) rotate(-10deg)}35%,55%{transform:translate(22%,-30%) rotate(-4deg)}}
#site .w-wave{position:absolute;right:-18%;top:-30%;width:44%;aspect-ratio:1;border-radius:50%;border:2px solid var(--lime);opacity:0;animation:wwave 4.2s ease-out infinite}
#site .w-w2{animation-delay:.25s}#site .w-w3{animation-delay:.5s}
@keyframes wwave{0%,30%{opacity:0;transform:scale(.3)}40%{opacity:.9}70%,100%{opacity:0;transform:scale(1.5)}}
@media(max-width:760px){#site .w-rcpt{right:-6px;top:-34px;width:118px}#site .w-paper span:not(.w-tot),#site .w-paper hr:first-of-type{display:none}#site .w-paper{font-size:8.5px;padding:10px 8px 12px}#site .w-paper b{font-size:10px}
  #site .w-tapcard{left:-6px;top:-44px;bottom:auto;width:96px}#site .w-shotwrap{margin-top:96px}}
@media(max-width:560px){#site .w-hero{padding-bottom:24px}}
/* phone screens tilt toward the pointer */
#site .w-strip figure{transform-style:preserve-3d;will-change:transform}
#site .w-strip figure:hover{box-shadow:0 40px 70px -30px rgba(11,20,36,.5)}
@media(prefers-reduced-motion:reduce){#site .w-obj,#site .w-spk{animation:none}#site .w-shot{transform:none;opacity:1}#site .w-paper{transform:none}}
#site .w-iphone:hover .w-bob,#site .w-nt:hover .w-bob{animation-play-state:paused}
#site .w-nt:hover .w-bob{box-shadow:0 30px 60px -24px rgba(11,20,36,.55)}

/* Floating barcode scanner (Kiosk section): it scans products on its own, or when clicked; each beep adds to the sale */
#site .w-scanbox{position:absolute;right:24px;top:0;width:min(42%,420px);height:360px;z-index:2}
#site .w-scan-in{position:relative;width:100%;height:100%;transform-style:preserve-3d}
#site .w-prod{position:absolute;left:4%;bottom:6%;width:68%;padding:16px 18px 14px;border-radius:16px;background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:0 30px 60px -28px rgba(11,20,36,.45);transition:opacity .35s,transform .45s var(--ease);animation:wfloat 8s ease-in-out -3s infinite}
#site .w-prod.swap{opacity:0;transform:translateY(10px) scale(.97)}
#site .w-prod-k{display:block;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
#site .w-prod b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;margin-top:4px}
#site .w-prod small{display:block;font-size:12px;color:var(--mut)}
#site .w-bc{height:54px;margin-top:12px}
#site .w-bc svg{display:block;width:100%;height:100%}
#site .w-bcnum{display:block;font:11px var(--mono);letter-spacing:.18em;text-align:center;margin-top:4px;color:#333}
#site .w-line{position:absolute;left:12px;right:12px;top:calc(100% - 78px);height:2px;border-radius:2px;background:#FF3B30;box-shadow:0 0 10px 2px rgba(255,59,48,.7);opacity:0}
#site .w-scanbox.scanning .w-line{animation:wsweep .7s ease-in-out}
@keyframes wsweep{0%{opacity:0;transform:translateY(-18px)}20%{opacity:1}50%{transform:translateY(22px)}80%{opacity:1}100%{opacity:0;transform:translateY(0)}}
#site .w-gun{position:absolute;right:0;top:2%;width:62%;padding:0;border:0;background:none;cursor:pointer;z-index:2;rotate:-12deg;animation:wfloat 6s ease-in-out infinite;transition:scale .2s var(--ease)}
#site .w-gun:hover{scale:1.03}#site .w-gun:active{scale:.97}
#site .w-gun svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 26px 30px rgba(11,20,36,.35))}
#site .w-gun-b{fill:#111C30}#site .w-gun-h{fill:#0B1424}#site .w-gun-t{fill:none;stroke:#0B1424;stroke-width:8;stroke-linecap:round}
#site .w-gun-w{fill:#3A1015}#site .w-gun-l{fill:var(--lime)}
#site .w-scanbox.scanning .w-gun-w{fill:#FF3B30}
#site .w-beam{position:absolute;left:10%;top:72%;width:66%;height:150px;pointer-events:none;opacity:0;transform-origin:50% 0;rotate:12deg;
  background:linear-gradient(180deg,rgba(255,59,48,.55),rgba(255,59,48,0));clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
#site .w-scanbox.scanning .w-beam{animation:wbeam .7s ease-in-out}
@keyframes wbeam{0%,100%{opacity:0}15%,85%{opacity:.75}50%{opacity:.45}}
#site .w-gun-tip{position:absolute;right:6%;top:-6px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:var(--paper2);border:1px solid var(--line);
  padding:4px 8px;border-radius:999px;rotate:12deg;opacity:.9;transition:opacity .3s}
#site .w-scanbox.used .w-gun-tip{opacity:0}
#site .w-beep{position:absolute;right:-2%;top:50%;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:14px;background:var(--paper2);border:1px solid var(--line);
  box-shadow:0 20px 40px -18px rgba(11,20,36,.45);font-size:13px;white-space:nowrap;opacity:0;transform:translateY(10px) scale(.9);transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1);z-index:3}
#site .w-beep i{width:24px;height:24px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--ink)}
#site .w-beep b{font-family:var(--mono);font-weight:500}
#site .w-scanbox.beeped .w-beep{opacity:1;transform:none}
#site .w-sum{position:absolute;left:0;top:4%;padding:12px 16px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:0 24px 40px -20px rgba(11,20,36,.6);z-index:3;min-width:150px}
#site .w-sum small{display:block;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#98A1B1}
#site .w-sum b{display:block;font:500 26px/1.15 var(--mono);letter-spacing:-.02em}
#site .w-sum b.bump{animation:wbump .5s var(--ease)}
@keyframes wbump{40%{color:var(--lime);transform:scale(1.06)}}
#site .w-sum span{font-size:12px;color:#A9B2C2}
@media(max-width:1180px){#site .w-scanbox{position:relative;right:auto;top:auto;width:min(100%,400px);height:330px;margin:48px auto 0}}
@media(max-width:420px){#site .w-scanbox{height:300px}#site .w-prod b{font-size:22px}#site .w-sum b{font-size:22px}#site .w-beep{right:0}}
#site .w-objs-light .w-spk,#site .w-dark .w-spk,#site .w-ink .w-spk,#site .w-end .w-spk{color:var(--sig-lt)}

/* "On the road" illustration: barber supply truck, owner scanning a saved item with the tablet camera */
#site .w-truck{position:relative;margin:96px 0 0;padding:0}
#site .w-truck-svg{display:block;width:100%;height:auto;border-radius:28px;background:linear-gradient(180deg,#F9FAFC,#EEF1F5);box-shadow:inset 0 0 0 1px var(--line)}
#site .w-truck figcaption{max-width:64ch;margin:20px auto 0;text-align:center;color:var(--mut);font-size:15px;line-height:1.65}
#site .w-truck figcaption b{color:var(--fg);font-weight:500}
#site .wt-tab{cursor:pointer;outline:none}
#site .wt-tab:focus-visible rect:first-child{stroke:var(--sig);stroke-width:4}
#site .wt-line{transform-box:fill-box;transform-origin:center;opacity:0}
#site .w-truck.scan .wt-line{animation:wtline .8s ease-in-out}
@keyframes wtline{0%{opacity:0;transform:translateY(-22px)}15%{opacity:1}50%{transform:translateY(20px)}85%{opacity:1}100%{opacity:0;transform:translateY(0)}}
#site .wt-added{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1);transform:translateY(8px) scale(.9)}
#site .w-truck.added .wt-added{opacity:1;transform:none}
#site .wt-owner{transform-box:fill-box;transform-origin:50% 100%;animation:wtbreath 5s ease-in-out infinite}
@keyframes wtbreath{50%{transform:translateY(-2px)}}
#site .wt-cust{transform-box:fill-box;transform-origin:50% 100%;animation:wtbreath 6s ease-in-out -2s infinite}
#site .w-tchip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(249,250,252,.94);border:1px solid var(--line);
  box-shadow:0 22px 50px -22px rgba(11,20,36,.45);white-space:nowrap;animation:wfloat 7s ease-in-out infinite;z-index:2}
#site .w-tchip b{display:block;font-size:13px;font-weight:600;line-height:1.25}#site .w-tchip small{display:block;font-size:12px;color:var(--mut)}
#site .w-tnum{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 13px var(--mono)}
#site .w-tc1{left:3%;top:8%}#site .w-tc2{right:3%;top:10%;animation-delay:-3s}
#site .w-tchip.bump{animation:wbump .5s var(--ease),wfloat 7s ease-in-out infinite}
@media(max-width:700px){#site .w-truck{margin-top:64px}#site .w-truck-svg{border-radius:18px}#site .w-tchip{position:relative;left:auto;right:auto;top:auto;display:inline-flex;margin:12px 6px 0 0;animation:none}
  #site .w-truck figcaption{font-size:14px;text-align:left}}
#site .w-scanbox.isnew .w-beep i{background:#FFD6CF;color:#B42318}#site .w-scanbox.isnew .w-beep i::before{content:"!"}#site .w-scanbox.isnew .w-beep i{font-size:0}#site .w-scanbox.isnew .w-beep i::before{font-size:13px}
#site .w-beep,#site .w-sum,#site .w-prod{pointer-events:none}
#site .w-scanbox{cursor:pointer}#site .w-scanbox:hover .w-gun,#site .w-scanbox:hover .w-prod{animation-play-state:paused}

/* Example people and work (drawn) in the demo portfolios, and the three example pages (Clean, Shop, Bold) */
#site .w-pic,#site .w-wk{display:block;width:100%;height:100%}
#site .w-av{overflow:hidden;padding:0}
#site .w-pf-av,#site .w-sc-av,#site .w-ph-av{overflow:hidden;padding:0}
#site .w-pf-cover,#site .w-sc-cover{overflow:hidden}
#site .w-pf-cover::after{content:none}
#site .w-pf-cover svg,#site .w-sc-cover svg{display:block;width:100%;height:100%}
#site .w-pf-work i,#site .w-sc-story i{overflow:hidden;background:none}
#site .w-looks{margin-top:110px;text-align:center}
#site .w-looks-k{font:12px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--sig-lt);margin-bottom:36px}
#site .w-looks-n{font:12px var(--mono);color:#8792A6;margin-top:28px}
#site .w-looks-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:980px;margin:0 auto;align-items:start}
#site .w-look{margin:0;transform-style:preserve-3d;will-change:transform}
#site .w-look:nth-child(1){rotate:-3deg}#site .w-look:nth-child(2){translate:0 26px}#site .w-look:nth-child(3){rotate:3deg}
#site .w-lk-scr{border-radius:34px;border:9px solid #05080F;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 50px 90px -34px rgba(0,0,0,.85);overflow:hidden;aspect-ratio:9/17.500;background:#FAFAFA;color:#111;text-align:left;
  display:flex;flex-direction:column;font-size:11px}
#site .w-look figcaption{margin-top:18px;color:#A9B2C2;font-size:13px}
#site .w-look figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;color:var(--paper2);margin-bottom:2px}
#site .w-lk-cover{height:24%;overflow:hidden}#site .w-lk-cover svg{display:block;width:100%;height:100%}
#site .w-lk-av{width:52px;height:52px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 1.500px #111;flex:none}
#site .w-lk-clean .w-lk-av{margin:-26px 0 0 14px;position:relative}
#site .w-lk-in{padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
#site .w-lk-in>b,#site .w-lk-head b{font-size:15px;font-weight:600;display:block;line-height:1.200}
#site .w-lk-in span{color:#777;font-size:10px}
#site .w-lk-stats{display:flex;gap:14px}#site .w-lk-stats i{font-style:normal;color:#777;font-size:9px}#site .w-lk-stats b{display:block;color:#111;font-size:13px}
#site .w-lk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;flex:1;min-height:0}
#site .w-lk-grid i{border-radius:10px;overflow:hidden;min-height:0}
#site .w-lk-btn{margin-top:auto;background:#111;color:#fff;text-align:center;padding:9px;border-radius:999px;font-weight:600;font-size:12px}
#site .w-lk-head{display:flex;align-items:center;gap:10px}
#site .w-lk-shop .w-lk-scr{background:#F4F1EA}
#site .w-lk-shop .w-lk-in{padding-top:30px}
#site .w-lk-shop .w-lk-av{border-radius:8px;width:44px;height:44px}
#site .w-lk-mason{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#site .w-lk-mason>div{display:grid;gap:5px;align-content:start}
#site .w-lk-mason i{display:block;height:var(--h);border-radius:4px;overflow:hidden}
#site .w-lk-svc{display:flex;justify-content:space-between;padding:7px 9px;border:1px solid #DDD8CC;border-radius:4px;background:#fff;font-size:11px}
#site .w-lk-svc span{color:#111;font-size:11px}
#site .w-lk-shop .w-lk-btn{border-radius:4px}
#site .w-lk-bold .w-lk-scr{background:#0B0B0C;color:#F4F4F5}
#site .w-lk-bold .w-lk-in{padding-top:30px}
#site .w-lk-tag{font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9A9AA1!important}
#site .w-lk-big{font-size:44px!important;font-weight:800!important;line-height:.880!important;letter-spacing:-.030em}
#site .w-lk-bold .w-lk-av{border-color:#0B0B0C;box-shadow:0 0 0 1.500px #F4F4F5;width:40px;height:40px}
#site .w-lk-bold .w-lk-in span{color:#9A9AA1}
#site .w-lk-strip{display:grid;grid-template-columns:1.700fr 1fr;gap:5px;flex:1;min-height:0}
#site .w-lk-strip i{border-radius:12px;overflow:hidden;min-height:0}
#site .w-lk-bold .w-lk-btn{background:#F4F4F5;color:#111}
@media(max-width:760px){#site .w-looks{margin-top:72px}#site .w-looks-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(210px,64%);overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:6px 4px 14px;scrollbar-width:none}
  #site .w-looks-row::-webkit-scrollbar{display:none}#site .w-look{scroll-snap-align:center;rotate:none!important;translate:none!important}}
#site .w-lk-mason{flex:1;min-height:0;overflow:hidden}
#site .w-sc-av{position:relative;z-index:1}
/* in the tilted 3D stage, lift the phone and cards off the stage plane so taps always land on them */
#site .w-iphone{transform:translateZ(60px)}#site .w-nt{transform:translateZ(90px)}
@media(max-width:560px){#site .w-pf-book{display:none}#site .w-pf-in{gap:4%;padding-bottom:6%}#site .w-pf-in .w-mono{display:none}}