@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/playfair-display-600-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/playfair-display-600-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ───────────────── Washroomer · washroomer.com ───────────────── */
:root{
  --ink:#0B0B0F; --ink2:rgba(11,11,15,.64); --ink3:rgba(11,11,15,.56);
  --panel:#F6F6F8; --line:rgba(11,11,15,.08);
  --crimson:#E8142B; --crimsonLift:#FF3B4E; --crimsonDeep:#B30E21; --crimsonTint:#FDE8EB;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,4vw,48px);
  --navh:76px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--navh)}
body{background:#fff;color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:700;box-shadow:0 8px 24px rgba(11,11,15,.18)}
.skip:focus{left:12px}

.wrap{width:min(1248px,calc(100% - 2 * var(--gutter)));margin-inline:auto;position:relative}
h1{font-size:clamp(52px,7.2vw,96px);line-height:.98;letter-spacing:-.05em;font-weight:700}
h2{font-size:clamp(38px,4.5vw,64px);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.lead{font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--ink2);letter-spacing:-.2px}
.eyebrow{font-size:15px;font-weight:700;color:var(--crimson)}
.pf{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600}
section{position:relative}

/* reveal on scroll (only when JS is running) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .in .rv{opacity:1;transform:none}
.js .in .d1{transition-delay:.08s}.js .in .d2{transition-delay:.16s}.js .in .d3{transition-delay:.24s}.js .in .d4{transition-delay:.34s}.js .in .d5{transition-delay:.46s}

/* ── buttons ── */
.logo{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.6px}
.mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--crimson),var(--crimsonLift));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(232,20,43,.3)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 26px 0 22px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 14px 34px -10px rgba(11,11,15,.45);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.store small{display:block;font-size:11px;font-weight:500;opacity:.7;line-height:1}
.store b{display:block;font-size:21px;font-weight:700;letter-spacing:-.5px;line-height:1.15}
.store[href]:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(11,11,15,.5)}
.store.soon{cursor:default}
.join{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:60px;padding:0 26px;border-radius:16px;border:2px solid var(--crimson);color:var(--crimson);font-size:17px;font-weight:700;letter-spacing:-.3px;background:#fff;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.join:hover{background:var(--crimson);color:#fff}
.join.solid{background:#fff;border-color:#fff;color:var(--crimson);box-shadow:0 14px 34px -12px rgba(0,0,0,.35)}
.join.solid:hover{transform:translateY(-2px);background:#fff;color:var(--crimsonDeep)}
.fine{font-size:14px;color:var(--ink3);margin-top:16px}

/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav .wrap{height:100%;display:flex;align-items:center}
.nav.scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--line)}
.links{margin-left:auto;display:flex;align-items:center;gap:34px;font-size:15px;font-weight:500;color:var(--ink2)}
.links a:not(.navbtn):hover{color:var(--ink)}
.navbtn{height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;display:inline-flex;align-items:center;transition:background .25s}
.navbtn:hover{background:var(--crimson)}

/* ── phone frame (scales from --pw) ── */
.phone{--pw:300px;width:var(--pw);border-radius:calc(var(--pw) * .1667);background:#0B0B0F;padding:calc(var(--pw) * .0267);box-shadow:0 50px 80px -30px rgba(11,11,15,.5),0 0 0 1px rgba(11,11,15,.08);position:relative;flex:0 0 auto}
.phone .scr{border-radius:calc(var(--pw) * .14);overflow:hidden;background:#fff;position:relative}
.phone .isl{height:calc(var(--pw) * .1333);background:#fff;display:flex;justify-content:center;align-items:center}
.phone .isl i{width:calc(var(--pw) * .3067);height:calc(var(--pw) * .0867);border-radius:999px;background:#0B0B0F;display:block}
.phone .img{position:relative;width:100%;aspect-ratio:284/616;overflow:hidden}
.phone .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:bottom}

/* ═════════ HERO ═════════ */
#hero{overflow:hidden;min-height:min(900px,100svh);display:flex;align-items:center;padding:calc(var(--navh) + 40px) 0 60px}
#hero > .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,5vw,80px)}
.hero-copy{position:relative;z-index:5;max-width:620px}
.pill{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px;border-radius:999px;background:var(--crimsonTint);color:var(--crimsonDeep);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase}
.pill i{width:7px;height:7px;border-radius:9px;background:var(--crimson);display:block}
#hero h1{margin-top:26px}
#hero h1 .pf{color:var(--crimson);letter-spacing:-.02em}
#hero .lead{margin-top:24px;max-width:470px}
#hero .ctas{margin-top:36px}
.stage{position:relative;z-index:4;margin-right:clamp(0px,7vw,94px)}
.stage .phone{animation:float 7s ease-in-out infinite;z-index:2}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.radar{position:absolute;left:50%;top:50%;width:0;height:0;z-index:0;pointer-events:none}
.radar span{position:absolute;width:1100px;height:1100px;left:-550px;top:-550px;border-radius:50%;border:1.5px solid var(--crimson);opacity:0;animation:ring 4.8s cubic-bezier(.2,.6,.3,1) infinite}
.radar span:nth-child(3){animation-delay:1.6s}.radar span:nth-child(4){animation-delay:3.2s}
.radar b{position:absolute;width:520px;height:520px;left:-260px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(232,20,43,.10),rgba(232,20,43,0) 70%)}
@keyframes ring{0%{transform:scale(.18);opacity:.7}100%{transform:scale(1);opacity:0}}

/* ═════════ STORY — sticky phone, scrolling text ═════════ */
#story{background:var(--panel)}
.story{display:flex}
.col-text{width:560px;flex:0 0 auto}
.slide{min-height:max(640px,100vh);display:flex;flex-direction:column;justify-content:center;transition:opacity .6s var(--ease)}
.trio{display:flex;gap:10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3);font-weight:500}
.trio span.on{color:var(--crimson)}
.trio i{font-style:normal;opacity:.5}
.slide h2{margin-top:20px}
.slide .lead{margin-top:22px;max-width:470px}
.slide-phone{display:none}
.col-phone{flex:1;position:relative}
.sticky{position:sticky;top:0;height:100vh;min-height:640px;display:flex;align-items:center;justify-content:center}
.sticky .phone{--pw:clamp(230px,calc((100vh - 150px) * .4464),300px)}
.sticky .phone .img img{opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.sticky .phone .img img.on{opacity:1;transform:none}
.dots{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.dots i{width:8px;height:8px;border-radius:9px;background:rgba(11,11,15,.18);display:block;transition:all .4s var(--ease)}
.dots i.on{background:var(--crimson);height:28px}
.js .slide{opacity:.22}.js .slide.on{opacity:1}

/* ═════════ FREE ACCOUNT ═════════ */
#join{background:var(--crimson);color:#fff;overflow:hidden;padding:clamp(80px,10vw,100px) 0}
#join::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 600px at 80% 0%,rgba(255,255,255,.18),transparent 62%);pointer-events:none}
#join > .wrap{display:flex;align-items:center;gap:40px;min-height:760px}
#join .txt{width:560px;flex:0 0 auto;position:relative}
#join .eyebrow{color:rgba(255,255,255,.82)}
#join h2{margin-top:16px}
#join .lead{color:rgba(255,255,255,.88);margin-top:22px;max-width:480px}
.perks{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.perk{display:flex;align-items:center;gap:16px;font-size:18px;font-weight:500;letter-spacing:-.2px}
.perk .ic{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#join .ctas{margin-top:40px}
#join .fine{color:rgba(255,255,255,.8)}
.duo{flex:1;display:flex;justify-content:center;align-items:flex-start;padding-bottom:calc(var(--pw-duo,300px) * .2333)}
.duo .phone{--pw:var(--pw-duo,300px);box-shadow:0 60px 90px -30px rgba(80,0,10,.55)}
.duo .p2{margin-left:calc(var(--pw) * -.0667);margin-top:calc(var(--pw) * .2333)}

/* ═════════ GET THE APP ═════════ */
#get{overflow:hidden;text-align:center;padding-top:clamp(80px,9vw,110px)}
#get .txt{position:relative;z-index:5}
#get h2{font-size:clamp(44px,5.6vw,80px)}
#get .lead{margin-top:18px}
#get .ctas{justify-content:center;margin-top:32px}
.city{display:flex;justify-content:center;margin-top:clamp(20px,3vw,40px);position:relative;z-index:1}
.city-in{position:relative;width:min(940px,100%);flex:0 0 auto}
.city img{width:100%;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.035) translateY(-6px)}}
.city .rings{position:absolute;left:50%;top:46.3%;width:0;height:0}
.city .rings span{position:absolute;width:calc(var(--cw,940px) * .51);aspect-ratio:480/250;left:calc(var(--cw,940px) * -.255);top:calc(var(--cw,940px) * -.133);border-radius:50%;border:2.5px solid var(--crimson);opacity:0;animation:ring2 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.city .rings span:nth-child(2){animation-delay:1.2s}.city .rings span:nth-child(3){animation-delay:2.4s}
@keyframes ring2{0%{transform:scale(.12);opacity:.85}70%{opacity:.18}100%{transform:scale(1);opacity:0}}

/* ═════════ FOOTER ═════════ */
.foot{border-top:1px solid var(--line);padding:36px 0 calc(36px + env(safe-area-inset-bottom))}
.foot .wrap{display:flex;align-items:center;gap:20px 44px;flex-wrap:wrap}
.foot .note{font-size:13px;color:var(--ink3);margin-top:6px;max-width:440px}
.foot .fl{margin-left:auto;display:flex;gap:30px;font-size:15px;color:var(--ink2);font-weight:500}
.foot .fl a:hover{color:var(--crimson)}
.foot .cp{font-size:14px;color:var(--ink3)}

/* ═════════ LEGAL PAGES ═════════ */
.doc{width:min(760px,calc(100% - 2 * var(--gutter)));margin:0 auto;padding:calc(var(--navh) + 60px) 0 90px}
.doc h1{font-size:clamp(40px,5vw,60px);letter-spacing:-.045em}
.doc .meta{margin-top:14px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink3)}
.doc .intro{margin-top:28px;font-size:19px;line-height:1.6;color:var(--ink2)}
.doc h2{font-size:24px;letter-spacing:-.6px;line-height:1.25;margin-top:48px}
.doc h3{font-size:18px;letter-spacing:-.3px;margin-top:26px}
.doc p,.doc li{font-size:17px;line-height:1.65;color:var(--ink2);margin-top:12px}
.doc ul{margin-top:8px;padding-left:4px}
.doc li{position:relative;padding-left:22px;margin-top:8px}
.doc li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--crimson)}
.doc a{color:var(--crimson);text-decoration:underline;text-underline-offset:3px}
.doc strong{color:var(--ink);font-weight:700}
.nf{min-height:calc(100svh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--navh) + 40px) var(--gutter) 60px}
.nf .lead{margin-top:16px}
.nf .ctas{margin-top:32px;justify-content:center}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width:1180px){
  .col-text{width:50%}
  #join .txt{width:50%}
  .duo{--pw-duo:clamp(220px,22vw,280px)}
}
@media (max-width:959px){
  :root{--navh:68px}
  /* hero stacks */
  #hero{min-height:0;display:block;padding-top:calc(var(--navh) + 48px)}
  #hero > .wrap{grid-template-columns:1fr;gap:48px}
  .stage{margin:0 auto}
  .stage .phone{--pw:280px}
  .radar span{width:760px;height:760px;left:-380px;top:-380px}
  /* story: inline phones */
  .col-phone{display:none}
  .col-text{width:100%}
  .slide,.js .slide{min-height:0;opacity:1;padding:80px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
  .slide + .slide{border-top:1px solid var(--line)}
  .slide-phone{display:flex;justify-content:center}
  .slide-phone .phone{--pw:250px}
  /* account */
  #join > .wrap{flex-direction:column;align-items:stretch;min-height:0;gap:56px}
  #join .txt{width:auto}
  .duo{--pw-duo:240px}
}
@media (max-width:640px){
  .links a:not(.navbtn){display:none}
  .navbtn{height:40px;padding:0 16px;font-size:14px}
  .ctas{flex-direction:column;align-items:stretch}
  .store,.join{justify-content:center;height:56px}
  .stage .phone{--pw:260px}
  .slide,.js .slide{display:block;padding:72px 0}
  .slide-phone{margin-top:36px}
  .slide-phone .phone{--pw:260px}
  .perk{font-size:16px}
  .duo .p2{display:none}
  .duo{padding-bottom:0;--pw-duo:260px}
  .city-in{width:620px;--cw:620px}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .foot .fl{margin-left:0}
}
@media (min-width:641px) and (max-width:959px){
  .city-in{--cw:min(940px,calc(100vw - 2 * var(--gutter)))}
}
@media (min-width:960px) and (max-width:1035px){
  .city-in{--cw:calc(100vw - 2 * var(--gutter))}
}

/* ═════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .stage .phone,.city img{animation:none}
  .radar span,.city .rings span{animation:none;opacity:0}
  .radar span:nth-child(2){transform:scale(.36);opacity:.5}
  .radar span:nth-child(3){transform:scale(.62);opacity:.3}
  .radar span:nth-child(4){transform:scale(.9);opacity:.12}
  .city .rings span:nth-child(1){transform:scale(.3);opacity:.7}
  .city .rings span:nth-child(2){transform:scale(.62);opacity:.4}
  .city .rings span:nth-child(3){transform:scale(.92);opacity:.15}
  .sticky .phone .img img{transition:none}
}
.nf .pf{color:var(--crimson)}