/* The home page (Marquee Option 1, approved 2026-11-01). Dark only: explicit colors everywhere, so the page looks the same
   whatever the visitor's light/dark setting. Fonts are our own copies (no requests to Google): Outfit (text), Tilt Neon
   (neon signs), Big Shoulders Display 800-900 (marquee headings), DM Serif Display (the cafe in the Sparky demo). */
@font-face{font-family:"Outfit";src:url("../fonts/Outfit-VF.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Tilt Neon";src:url("../fonts/TiltNeon-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url("../fonts/BigShouldersDisplay-800-900-latin.woff2") format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("../fonts/DMSerifDisplay-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("../fonts/DMSerifDisplay-Italic-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  color-scheme:dark;
  --ink:#0B1026; --ink2:#141A38; --ink3:#1E2550; --line:rgba(255,255,255,.12);
  --pink:#FF2E88; --pink-hot:#FF5CA3; --cream:#FFF3E3; --text:#F3F1F7; --muted:#BAC0DA; --bulb:#FFE7BD;
  --glow:0 0 4px rgba(255,46,136,.95),0 0 14px rgba(255,46,136,.75),0 0 34px rgba(255,46,136,.5);
  --glow-cream:0 0 3px rgba(255,243,227,.9),0 0 12px rgba(255,46,136,.7),0 0 30px rgba(255,46,136,.45);
  --neon:"Tilt Neon","Outfit",system-ui,sans-serif;
  --marq:"Big Shoulders Display","Outfit",system-ui,sans-serif;
  --sans:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4.4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--pink);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk{color:var(--pink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:56px;padding:0 1.5em;border:0;border-radius:999px;background:var(--pink);color:var(--ink);font-weight:800;font-size:1.05rem;text-decoration:none;cursor:pointer;box-shadow:0 0 0 0 rgba(255,46,136,.0),0 10px 30px -10px rgba(255,46,136,.9);transition:transform .15s,background .15s}
.btn:hover{background:var(--pink-hot);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}

/* ---------- top bar ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:20px;padding:18px var(--gut)}
.top .logo img{width:150px;height:auto}
.top nav{display:flex;gap:26px;margin-left:auto;font-size:.98rem;font-weight:500}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a:hover{color:var(--text)}
.top .find{margin-left:8px;font-weight:600;font-size:.98rem;text-decoration:none;border:1.5px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 16px;white-space:nowrap}
.top .find:hover{border-color:var(--pink)}
.top .login{margin-left:8px;font-weight:600;font-size:.98rem;text-decoration:none;color:var(--text);white-space:nowrap;padding:9px 4px}
.top .login:hover{color:var(--pink)}
.motion{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:transparent;cursor:pointer;flex:none}
.motion svg{width:14px;height:14px}
.motion .play{display:none}
html.paused .motion .play{display:block}
html.paused .motion .pause{display:none}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:100svh;padding:100px 0 0;overflow:hidden;background:
  radial-gradient(70% 55% at 50% 100%,rgba(255,46,136,.30),transparent 70%),
  radial-gradient(40% 30% at 85% 20%,rgba(76,92,190,.28),transparent 70%),
  linear-gradient(#070B1D,var(--ink) 55%,#1a1238)}
.hero-grid{flex:1;width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center;padding:0 var(--gut);max-width:1360px;margin:0 auto}
.hero h1{font-family:var(--neon);font-weight:400;font-size:clamp(3.2rem,7.4vw,7.2rem);line-height:.98;letter-spacing:-.01em;color:var(--cream);text-shadow:var(--glow-cream)}
.hero h1 .w2{display:inline-block;color:#FFD3E6;text-shadow:var(--glow);animation:flicker 7s 3s infinite}
.hero .hk{margin-bottom:16px;font-weight:700;font-size:clamp(.9rem,1.2vw,1.05rem);letter-spacing:.09em;text-transform:uppercase;color:#FFB3D6}
.hero .sub{margin-top:22px;max-width:38ch;font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;font-size:.95rem;color:var(--muted)}
.chips li{display:flex;align-items:center;gap:8px}
.chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}

/* the neon flicker on the headline's pink line ("Free to see.") and the closing sign */
@keyframes flicker{0%,100%{opacity:1}2%{opacity:.4}3%{opacity:1}4%{opacity:.55}5.5%{opacity:1}}

/* request card */
.card{position:relative;margin-block:8px;background:linear-gradient(180deg,rgba(30,37,80,.92),rgba(20,26,56,.95));border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:clamp(22px,2.1vw,30px);box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,46,136,.08),0 0 60px -20px rgba(255,46,136,.5);scroll-margin-top:24px}
.spots{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:999px;background:rgba(255,46,136,.14);border:1px solid rgba(255,46,136,.45);font-size:.88rem;font-weight:700;color:var(--cream)}
.spots i{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(255,46,136,.7);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,46,136,.75)}80%,100%{box-shadow:0 0 0 10px rgba(255,46,136,0)}}
.card h2{margin-top:14px;font-family:var(--marq);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3vw,2.6rem);line-height:.95;letter-spacing:.005em;color:var(--cream)}
.card h2 .pk{display:block}
.step{margin-top:20px;display:grid;gap:14px}
.step[hidden]{display:none}
label span{display:block;font-weight:600;font-size:.98rem;margin-bottom:7px;color:var(--text)}
input[type=text],input[type=email],input[type=url],input:not([type]){width:100%;min-height:56px;padding:0 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,.28);background:#0B1026;color:var(--text);font-size:1.08rem}
textarea{display:block;width:100%;min-height:76px;padding:13px 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,.28);background:#0B1026;color:var(--text);font-size:1.02rem;line-height:1.4;resize:vertical}
label span .opt{display:inline;margin:0;font-weight:400;color:var(--muted)}
.q{font-weight:700;font-size:1.08rem;line-height:1.3;color:var(--cream)}
.wants{display:flex;flex-wrap:wrap;gap:8px;margin-top:-2px}
.wants button{min-height:44px;padding:8px 15px;border-radius:99px;border:1.5px solid rgba(255,255,255,.26);background:#0B1026;color:var(--text);font-weight:600;font-size:.95rem;cursor:pointer;transition:background .15s,border-color .15s}
.wants button:hover{border-color:rgba(255,46,136,.75)}
.wants button[aria-pressed=true]{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.wants button[aria-pressed=true]::before{content:"✓";margin-right:6px;font-weight:800}
.row2{display:flex;justify-content:space-between;align-items:center;gap:12px}
.skip-q{background:none;border:0;padding:6px 2px;color:var(--muted);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
input::placeholder,textarea::placeholder{color:#8F96B8}
input:focus,textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,46,136,.3)}
input[aria-invalid=true]{border-color:#FF8FB8}
.where{color:var(--muted);font-size:1rem}
.where b{color:var(--cream)}
.rq-site-q{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.back{justify-self:start;background:none;border:0;padding:6px 2px;color:var(--muted);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fine{margin-top:16px;font-size:.9rem;color:var(--muted)}
.dots{display:flex;gap:6px;margin-top:18px}
.dots span{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.16)}
.dots span.on{background:var(--pink);box-shadow:0 0 8px var(--pink)}
.rq-fields{display:block}
.rq-fields[hidden]{display:none}
.rq-msg{margin-top:10px;color:#FFB3CF;font-weight:600;font-size:.95rem}
.rq-msg:empty{display:none}
.rq-msg.busy{color:var(--muted)}
.rq-msg.busy::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.5em;vertical-align:-.1em;border:2px solid rgba(255,255,255,.35);border-top-color:var(--pink);border-radius:50%;animation:rq-spin .8s linear infinite}
@keyframes rq-spin{to{transform:rotate(360deg)}}
.rq-ts:empty{display:none}
.request .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the answer card request.js draws (.rq-result: icon, heading, text, buttons), in the approved pink box */
.rq-result{display:grid;gap:10px;justify-items:start;margin-top:18px;padding:18px 20px 20px;border-radius:16px;background:rgba(255,46,136,.12);border:1px solid rgba(255,46,136,.45);font-size:1.05rem;color:var(--cream);outline:none;scroll-margin-top:24px}
.rq-result[hidden]{display:none}
.rq-result .rq-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(95,211,154,.18);color:#7FE0B0}
.rq-result.wait .rq-icon{background:rgba(255,46,136,.2);color:var(--pink-hot)}
.rq-result.stop .rq-icon{background:rgba(255,212,59,.16);color:#FFD43B}
.card .rq-result h2{margin:0;font-family:var(--sans);font-weight:800;text-transform:none;font-size:1.3rem;line-height:1.2;letter-spacing:0;color:var(--cream)}
.rq-result p{color:var(--cream)}
.rq-result .rq-addr{display:block;margin-top:2px;font-weight:700;overflow-wrap:anywhere}
.rq-result a:not(.btn){color:var(--cream)}
.rq-result .rq-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.rq-result .rq-acts:empty{display:none}
.rq-result .btn{min-height:48px;font-size:1rem}
.rq-result .linkbtn{background:none;border:0;padding:6px 2px;font-weight:600;font-size:.95rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rq-result .linkbtn:hover{color:var(--text)}
.found{margin-top:14px;font-size:.92rem;color:var(--muted)}

/* ---------- Main Street ---------- */
.street{position:relative;flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;margin-top:clamp(24px,3vw,40px);height:var(--street-h,292px)}
.street::before{content:"";position:absolute;left:0;right:0;bottom:34px;height:250px;background:url("../img/home/skyline.svg") 0 100%/1440px 250px repeat-x;opacity:.95;animation:sky 260s linear infinite}
@keyframes sky{to{background-position:-1440px 100%}}
.street::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(#262c55,#141A38);box-shadow:0 -1px 0 rgba(255,255,255,.12),0 -30px 60px rgba(255,46,136,.25)}
.street.run{overflow:hidden}
.row{position:absolute;left:0;bottom:34px;display:flex;align-items:flex-end;gap:0;width:max-content;padding-left:var(--gut)}
.row.drift{animation:drift var(--dur,90s) linear infinite;padding-left:0}
@keyframes drift{to{transform:translateX(-50%)}}
.shop{position:relative;width:var(--shop-w,214px);margin-right:18px;flex:none}
.shop .bld::before{content:"";position:absolute;left:-6px;right:-6px;top:0;height:9px;border-radius:3px;background:#2E3878;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.shop.t3 .bld::before{display:none}
.shop.t2 .bld::after{content:"";position:absolute;left:50%;top:-16px;width:46%;height:18px;transform:translateX(-50%);background:var(--f);border-radius:4px 4px 0 0}
.shop .bld{position:relative;background:var(--f,#1E2550);border-radius:6px 6px 0 0;padding:14px 14px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.shop.t2 .bld{--f:#232B5E;padding-top:32px}
.shop.t3 .bld{--f:#18204A;border-radius:60px 60px 0 0;padding-top:28px}
.shop.t4 .bld{--f:#2A2456}
.sign{display:flex;justify-content:center;align-items:center;height:46px;margin:6px 4px 10px;border-radius:10px}
.shop.t2 .sign,.shop.t4 .sign{border:2px solid #FFD3E6;box-shadow:0 0 6px rgba(255,46,136,.9),0 0 16px rgba(255,46,136,.6),inset 0 0 10px rgba(255,46,136,.5);animation:frameon .5s calc(1.1s + var(--i)*.22s) backwards}
@keyframes frameon{from{border-color:#3A4170;box-shadow:none}}
.sign span{font-family:var(--neon);font-size:1.75rem;line-height:1;letter-spacing:.04em;color:var(--cream);text-shadow:var(--glow-cream);animation:signon .5s calc(1.1s + var(--i)*.22s) backwards,buzz var(--bz,9s) calc(4s + var(--i)*.7s) infinite}
.shop:nth-child(odd) .sign span{color:#FFD3E6;text-shadow:var(--glow)}
.win{position:relative;border-radius:4px;overflow:hidden;border:5px solid #0E1330;background:#0E1330}
.win{box-shadow:0 0 30px -6px rgba(255,231,189,.35)}
.win img{width:100%;aspect-ratio:520/326;object-fit:cover;animation:winon .6s calc(1.2s + var(--i)*.22s) backwards}
.win::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 38%);pointer-events:none}
.sill{height:20px;margin:0 -14px;background:linear-gradient(#0E1330,#141A38);border-top:3px solid rgba(255,255,255,.08)}
.awn{height:12px;margin:0 -6px 10px;border-radius:0 0 8px 8px;background:repeating-linear-gradient(90deg,var(--pink) 0 16px,#FFD3E6 16px 32px);opacity:.85}
.shop.t2 .awn,.shop.t4 .awn{background:repeating-linear-gradient(90deg,#3B4590 0 16px,#5A66B8 16px 32px)}
.lamp{position:absolute;bottom:0;right:-14px;width:4px;height:210px;background:#2E3667;z-index:2}
.lamp::before{content:"";position:absolute;top:-6px;left:-10px;width:24px;height:10px;border-radius:10px 10px 4px 4px;background:#3A4378}
.lamp::after{content:"";position:absolute;top:2px;left:-36px;width:76px;height:120px;background:radial-gradient(50% 60% at 50% 0,rgba(255,231,189,.35),transparent 70%);pointer-events:none}
@keyframes signon{0%{color:#3A4170;text-shadow:none}30%{color:var(--cream);text-shadow:var(--glow)}45%{color:#3A4170;text-shadow:none}100%{}}
@keyframes winon{from{filter:brightness(.18) saturate(.2)}to{filter:none}}
@keyframes buzz{0%,100%{opacity:1}1%{opacity:.35}2%{opacity:1}3.2%{opacity:.6}4%{opacity:1}}

/* ---------- ticker ---------- */
.ticker{position:relative;overflow:hidden;background:var(--pink);color:var(--ink);border-block:2px solid #FF8FC0}
.ticker ul{display:flex;width:max-content;padding:13px 0}
.ticker.run ul{animation:drift 46s linear infinite}
.ticker li{display:flex;align-items:center;gap:22px;padding-right:22px;font-family:var(--marq);font-weight:800;font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.ticker li::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}

/* ---------- sections ---------- */
section{position:relative}
.pad{padding:clamp(72px,9vw,128px) var(--gut)}
.in{max-width:1240px;margin:0 auto}
.kick{display:inline-block;font-family:var(--neon);font-size:1.4rem;color:var(--pink);text-shadow:0 0 10px rgba(255,46,136,.55)}
.big{font-family:var(--marq);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,8vw,7.4rem);line-height:.86;letter-spacing:-.005em;color:var(--cream)}
.lede{margin-top:20px;max-width:48ch;font-size:1.12rem;color:var(--muted)}

/* our work */
.work{padding-inline:0;background:radial-gradient(60% 50% at 50% 0,rgba(76,92,190,.22),transparent 70%),var(--ink)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;padding:0 var(--gut);max-width:calc(1240px + 2*var(--gut));margin:0 auto}
.reel{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;margin-top:48px}
.reel.run{overflow:hidden}
.reel + .reel{margin-top:28px}
.reel ul{display:flex;gap:44px;width:max-content;padding:10px var(--gut) 18px}
.reel.run ul{animation:drift var(--dur,110s) linear infinite;padding-left:0;padding-right:0}
.reel.run ul > li{margin-right:0}
.reel.rev.run ul{animation-direction:reverse}
.pair{position:relative;width:var(--desk-w,430px);flex:none;padding-bottom:30px}
.frames{position:relative;padding-right:62px}
.pair .desk{border-radius:10px;overflow:hidden;background:#0E1330;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.pair .bar{display:flex;gap:6px;padding:8px 10px;background:#1E2550}
.pair .bar i{width:8px;height:8px;border-radius:50%;background:#4A5390}
.pair .bar i:first-child{background:var(--pink)}
.pair .desk img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pair .ph{position:absolute;right:0;bottom:-22px;width:var(--ph-w,112px);border-radius:18px;padding:5px;background:#05081A;border:1px solid rgba(255,255,255,.2);box-shadow:-14px 20px 40px -12px rgba(0,0,0,.9)}
.pair .ph img{width:100%;aspect-ratio:390/700;object-fit:cover;object-position:top;border-radius:13px}
/* held back until the visitor scrolls close (home.js fills in data-src and lifts .wait); the frames keep their size.
   With JavaScript off, each picture's <noscript> copy shows instead. */
.pair img:not([src]){display:none}
.work.wait .pair .desk::after{content:"";display:block;aspect-ratio:16/10}
.work.wait .pair .ph::after{content:"";display:block;aspect-ratio:390/700}


/* how it works: four switches on one wire */
.how{background:linear-gradient(180deg,var(--ink),#121839)}
.wire{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;padding-top:40px}
.wire::before{content:"";position:absolute;left:3.9%;right:2%;top:0;height:3px;background:rgba(255,46,136,.28);border-radius:3px}
.wire::after{content:"";position:absolute;top:-6px;left:4%;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 22px var(--pink),0 0 40px var(--pink);animation:spark 8s linear infinite}
@keyframes spark{0%{left:3.4%;opacity:0}3%{opacity:1}78%{left:94%;opacity:1}84%,100%{left:94%;opacity:0}}
.wire li::before{content:"";position:absolute;top:-41px;left:46px;width:3px;height:41px;background:rgba(255,46,136,.28)}
.wire li{position:relative;padding:22px 22px 26px;border-radius:20px;background:var(--ink2);border:1px solid var(--line)}
.wire .tg{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tg .p{position:relative;width:52px;height:28px;border-radius:99px;background:var(--pink);box-shadow:0 0 14px rgba(255,46,136,.7);animation:tgp 8s infinite;animation-delay:var(--d)}
.tg .p::after{content:"";position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#fff;animation:tgk 8s infinite;animation-delay:var(--d)}
@keyframes tgp{0%,1%{background:#323a6b;box-shadow:none}6%,92%{background:var(--pink);box-shadow:0 0 14px rgba(255,46,136,.7)}97%,100%{background:#323a6b;box-shadow:none}}
@keyframes tgk{0%,1%{transform:translateX(-24px)}6%,92%{transform:none}97%,100%{transform:translateX(-24px)}}
.tg .n{font-family:var(--marq);font-weight:900;font-size:2.4rem;line-height:1;color:var(--cream)}
.wire h3{font-family:var(--marq);font-weight:800;text-transform:uppercase;font-size:1.75rem;line-height:1;letter-spacing:.01em;color:var(--cream)}
.wire p{margin-top:10px;color:var(--muted);font-size:1rem}

/* Sparky: a working demo on a made-up cafe's website (real HTML, changed live in the page) */
.sparky{background:#121839;overflow:hidden}
.sp-top{display:grid;grid-template-columns:1.1fr .9fr;gap:20px 64px;align-items:end}
.sp-top .lede{margin-top:0}
.steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.steps li{display:flex;align-items:center;gap:9px;padding:6px 16px 6px 7px;border-radius:99px;border:1.5px solid rgba(255,255,255,.18);color:var(--muted);font-weight:700;font-size:.95rem;transition:border-color .3s,color .3s,box-shadow .3s}
.steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2A3366;color:var(--text);font-size:.82rem;transition:background .3s}
.steps li.on{border-color:var(--pink);color:var(--cream);box-shadow:0 0 16px -3px rgba(255,46,136,.8)}
.steps li.on b{background:var(--pink);color:var(--ink)}
.demo{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);margin-top:22px;align-items:stretch}

/* chat (on narrow screens the thread has a fixed height and flex:none, so the page below never moves while the demo plays) */
.sp-chat{display:flex;flex-direction:column;min-width:0;border-radius:26px;padding:16px;background:var(--ink2);border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 70px -30px rgba(255,46,136,.55)}
.sc-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sc-head img{width:36px;height:36px;border-radius:10px}
.sc-head b{display:block;line-height:1.1}
.sc-head small{color:var(--muted);font-size:.85rem}
.sc-hello{align-self:flex-start;max-width:90%;margin-top:14px;padding:10px 14px;border-radius:18px;border-bottom-left-radius:6px;background:rgba(30,37,80,.6);color:var(--muted);font-size:.95rem;line-height:1.38}
.sc-thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px 0;min-height:250px}
.bub{max-width:90%;padding:10px 14px;border-radius:18px;font-size:.97rem;line-height:1.38;animation:pop .35s ease-out}
@keyframes pop{from{transform:translateY(10px) scale(.96)}}
.bub.me{align-self:flex-end;background:var(--pink);color:var(--ink);font-weight:600;border-bottom-right-radius:6px}
.bub.them{align-self:flex-start;background:var(--ink3);border-bottom-left-radius:6px}
.att{display:flex;align-items:center;gap:8px;margin-top:8px;padding:5px 10px 5px 5px;border-radius:10px;background:rgba(11,16,38,.16);font-size:.84rem;font-weight:600}
.att i{flex:none;width:42px;height:30px;border-radius:6px;background-size:cover;background-position:center}
.att.doc i{width:26px;display:grid;place-items:center;background:#fff}
.att.doc svg{width:14px;height:16px}
.dots3{display:flex;gap:5px;padding:14px 16px}
.dots3 span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blip 1s infinite}
.dots3 span:nth-child(2){animation-delay:.15s}.dots3 span:nth-child(3){animation-delay:.3s}
@keyframes blip{30%{transform:translateY(-4px);background:var(--text)}}
.sc-acts{display:flex;align-items:center;gap:8px;align-self:flex-start;animation:pop .35s ease-out}
.sc-acts span{position:relative;white-space:nowrap;padding:8px 16px;border-radius:99px;font-weight:700;font-size:.9rem;border:1.5px solid rgba(255,255,255,.3);transition:transform .15s,background .3s,color .3s}
.sc-acts .ok{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.sc-acts .ok.tap{transform:scale(.9)}
.sc-acts .ok.tap::after{content:"";position:absolute;inset:-3px;border-radius:99px;border:2px solid var(--pink);animation:ring .6s ease-out forwards}
@keyframes ring{to{inset:-16px;border-color:rgba(255,46,136,0)}}
.sc-acts .ok.yes{background:var(--pink);border-color:var(--pink);color:var(--ink);box-shadow:0 0 16px rgba(255,46,136,.7)}
.sc-compose{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:24px;border:1.5px solid rgba(255,255,255,.22);background:var(--ink)}
.sc-field{flex:1;min-width:0;min-height:24px;font-size:.95rem;line-height:1.3;color:var(--text)}
.sc-field .ph{color:#9AA1C2}
.typing .ch{color:transparent}.typing .ch.on{color:inherit}
.typing .ch.cur{position:relative}
.typing .ch.cur::after{content:"";position:absolute;right:-2px;top:.08em;width:2px;height:1.05em;background:var(--pink);animation:caret 1s steps(2) infinite}
.bub.me.typing .ch.cur::after{background:var(--ink)}
@keyframes caret{50%{background:transparent}}
.sc-send{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink)}
.sc-send svg{width:16px;height:16px}

/* the website */
.sp-site{min-width:0;display:flex;flex-direction:column}
.ss-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:34px;margin-bottom:16px;color:var(--muted);font-size:.98rem}
.pill{display:inline-flex;align-items:center;gap:8px;min-width:7.6rem;padding:5px 13px 5px 10px;border-radius:99px;font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid rgba(255,255,255,.3);color:var(--text);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#8F96B8}
.pill.pv{border-color:#FFD27A;color:#FFE2A8}
.pill.pv::before{background:#FFD27A;box-shadow:0 0 8px #FFD27A}
.pill.lv{background:var(--pink);border-color:var(--pink);color:var(--ink);box-shadow:0 0 18px rgba(255,46,136,.75);animation:flip .5s}
.pill.lv::before{background:var(--ink)}
@keyframes flip{40%{transform:scale(1.18)}}
.ss-frames{position:relative;flex:1;padding:0 16% 6% 0;--p:0%;transition:filter .5s}
.dim .ss-frames{filter:brightness(.62) saturate(.75)}
.browser{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:#0E1330;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);container-type:inline-size;transition:box-shadow .4s}
.bbar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1E2550}
.bbar i{flex:none;width:9px;height:9px;border-radius:50%;background:#4A5390}
.bbar i:first-child{background:var(--pink)}
.addr{flex:1;max-width:300px;margin-left:10px;padding:2px 12px;border-radius:99px;background:#0B1026;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden}
.phone{position:absolute;right:0;bottom:0;width:23%;padding:6px;border-radius:24px;background:#05081A;border:1px solid rgba(255,255,255,.22);box-shadow:-18px 24px 50px -14px rgba(0,0,0,.9);container-type:inline-size;transition:box-shadow .4s}
.phone .vp{border-radius:18px}
.sweeping .browser,.sweeping .phone{box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,46,136,.6),0 0 44px -6px rgba(255,46,136,.7)}
.golive .browser,.golive .phone{animation:golive 1s ease-out}
@keyframes golive{25%{box-shadow:0 0 0 2px var(--pink),0 0 60px 4px rgba(255,46,136,.8)}}
.vp{position:relative;overflow:hidden;background:#FFF8EC}
.vp.d{aspect-ratio:56/35;font-size:calc(100cqw / 56)}
.vp.m{aspect-ratio:22.5/42;font-size:calc(100cqw / 22.5)}
.lay{position:absolute;inset:0;overflow:hidden}
.lay.a{z-index:2;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.flare{position:absolute;top:0;bottom:0;right:calc(100% - var(--p));width:24%;z-index:3;pointer-events:none;background:linear-gradient(270deg,rgba(255,46,136,.2),rgba(255,46,136,0));visibility:hidden}
.seam{position:absolute;top:0;bottom:0;left:var(--p);width:0;z-index:4;pointer-events:none;visibility:hidden}
.sweeping .flare,.sweeping .seam{visibility:visible}
.seam::before{content:"";position:absolute;top:-2px;bottom:-2px;left:-2px;width:4px;border-radius:4px;background:linear-gradient(90deg,var(--pink),#fff 45%,#fff 55%,var(--pink));box-shadow:0 0 8px 2px var(--pink),0 0 26px 6px rgba(255,46,136,.85),0 0 70px 16px rgba(255,46,136,.4)}
.seam::after{content:"";position:absolute;left:-14px;top:-90px;width:28px;height:90px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,214,232,.8) 35%,rgba(255,46,136,0));mix-blend-mode:screen;animation:run 1.1s linear infinite}
@keyframes run{to{top:100%}}
.sparks i{position:absolute;left:-2px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px var(--pink),0 0 2px #fff;opacity:0}
.sweeping .sparks i{animation:spark .9s ease-out infinite}
.sparks i:nth-child(1){top:12%;--dx:-18px;--dy:-14px}
.sparks i:nth-child(2){top:28%;--dx:-24px;--dy:10px;animation-delay:.3s}
.sparks i:nth-child(3){top:47%;--dx:-16px;--dy:-18px;animation-delay:.6s}
.sparks i:nth-child(4){top:63%;--dx:-28px;--dy:8px;animation-delay:.15s}
.sparks i:nth-child(5){top:80%;--dx:-20px;--dy:-10px;animation-delay:.45s}
.sparks i:nth-child(6){top:92%;--dx:-14px;--dy:12px;animation-delay:.75s}
@keyframes spark{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}

/* the cafe's site: sizes in em, so it scales with its frame */
/* its serif font (DM Serif Display) is only asked for once the section is close (home.js adds .near), so it isn't part of the first screen */
.sparky{--cf-serif:Georgia,serif}
.sparky.near{--cf-serif:"DM Serif Display",Georgia,serif}
.cf{position:relative;display:flex;flex-direction:column;height:100%;background:#FFF8EC;color:#1F2A44;font-family:var(--sans);font-size:1em;line-height:1.35}
.cf p{margin:0}
.cf-top{flex:none;position:relative;z-index:2;background:#FFFDF7;box-shadow:0 .1em .6em rgba(31,42,68,.1)}
.cf-ban{padding:.6em 1em;background:#3D63B6;color:#fff;text-align:center;font-weight:700;font-size:.92em}
.cf-head{display:flex;align-items:center;gap:1.6em;padding:.9em 2em}
.cf-logo{display:flex;align-items:center;gap:.35em;font-family:var(--cf-serif);font-size:1.45em;line-height:1;color:#22305A;white-space:nowrap}
.cf-logo em{color:#3D63B6}
.cf-logo svg{width:1.05em;height:1.05em}
.cf-nav{display:flex;gap:1.3em;font-weight:600;font-size:.9em;color:#4A5675}
.cf-hrs{display:flex;align-items:center;gap:.45em;margin-left:auto;font-size:.85em;font-weight:600;color:#2C6440;white-space:nowrap}
.cf-hrs i{width:.55em;height:.55em;border-radius:50%;background:#3AA35B}
.cf-call{display:inline-flex;align-items:center;gap:.45em;padding:.5em 1em;border-radius:99em;background:#22305A;color:#fff;font-weight:700;font-size:.85em;white-space:nowrap}
.cf-call svg,.cf-bar svg{width:1em;height:1em}
.big-call .cf-call{padding:.75em 1.5em;background:#C7401F;font-size:1.12em;box-shadow:0 .3em .9em rgba(199,64,31,.35)}
.cf-body{flex:1;position:relative;overflow:hidden}
.cf-in{position:relative;transform:translateY(calc(var(--sy,0) * -1em));transition:transform .9s cubic-bezier(.6,.05,.25,1)}
.now .cf-in{transition:none}
.cf-hero{display:grid;grid-template-columns:1fr 1.08fr;gap:2em;align-items:center;padding:2em 2em 2.2em}
.cf-k{font-size:.76em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3D63B6}
.cf .cf-h{margin-top:.35em;font-family:var(--cf-serif);font-size:2.45em;line-height:1.02;color:#1C2747}
.cf .cf-p{margin-top:.7em;color:#4A5675}
.cf .cf-btns{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.2em}
.cf-btns span{padding:.62em 1.2em;border-radius:99em;border:.12em solid #22305A;font-weight:700;font-size:.9em}
.cf-btns .cf-b1{background:#3D63B6;border-color:#3D63B6;color:#fff}
.big-call .cf-btns .cf-b2{padding:.8em 1.6em;background:#C7401F;border-color:#C7401F;color:#fff;font-size:1.1em}
.cf-hp{height:19em;border-radius:1em;background-size:cover;background-position:center;box-shadow:0 .8em 2em -1em rgba(31,42,68,.45)}
.cf-menu,.cf-cater,.cf-visit{padding:1.6em 2em}
.cf-h2{font-family:var(--cf-serif);font-size:1.7em;line-height:1.1;color:#1C2747}
.cf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;margin-top:.8em}
.cf-card{overflow:hidden;border-radius:.9em;background:#fff;box-shadow:0 .3em 1em rgba(31,42,68,.1)}
.cf-ci{height:8.5em;background-size:cover;background-position:center}
.cf .cf-card p{display:flex;justify-content:space-between;gap:.5em;padding:.7em .9em;font-size:.88em}
.cf-card span{color:#3D63B6;font-weight:700}
.cf-cater{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.8em;align-items:center;background:#E9EFFC}
.cf-cater .cf-ci{height:12em;border-radius:.9em}
.cf-list{margin-top:.6em}
.cf-list li{display:flex;justify-content:space-between;gap:1em;padding:.45em 0;border-bottom:.08em dashed #AFBDE2;font-size:.92em}
.cf-list b{color:#3D63B6}
.cf-visit{margin-top:1em;background:#22305A;color:#E9EDF8}
.cf-visit .cf-h2{color:#fff}
.cf-vg{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin-top:.8em}
.cf-vg p{font-size:.92em}
.cf-vg b{display:block;margin-bottom:.2em;font-size:.78em;letter-spacing:.12em;text-transform:uppercase;color:#F4C542}
.cf-foot{padding:1em 2em 1.4em;background:#22305A;color:#AEB8D6;font-size:.8em}
.cf-bar{display:none}
.cf .hl{box-shadow:0 0 0 .2em #FF2E88,0 0 1.4em .2em rgba(255,46,136,.55)}
.cf [data-h].hl,.cf-nav .hl{padding:0 .2em;border-radius:.3em;background:rgba(255,46,136,.16);box-shadow:0 0 0 .14em #FF2E88}
.cf .cf-visit [data-h].hl{background:rgba(255,46,136,.32);color:#fff}
.cf .cf-ban.hl,.cf .cf-cater.hl{box-shadow:inset 0 0 0 .22em #FF2E88,inset 0 0 1.6em rgba(255,46,136,.45)}
.glow .lay.a .hl{animation:hlp 1s ease-in-out 2}
@keyframes hlp{50%{filter:drop-shadow(0 0 .6em rgba(255,46,136,.9))}}
/* phone version of the cafe site */
.m .cf-head{flex-wrap:wrap;gap:.35em .6em;padding:.8em 1em .7em}
.m .cf-logo{font-size:1.3em}
.m .cf-nav{display:none}
.m .cf-call{margin-left:auto;padding:.55em}
.m .cf-call .cf-cl{display:none}
.m .big-call .cf-call{padding:.7em;font-size:1em}
.m .cf-hrs{order:3;width:100%;margin:0;font-size:.82em}
.m .cf-hero{grid-template-columns:1fr;gap:1em;padding:0 0 1.4em}
.m .cf-hp{order:-1;height:12.5em;border-radius:0;box-shadow:none}
.m .cf-hp.hl{box-shadow:inset 0 0 0 .22em #FF2E88}
.m .cf-ht{padding:0 1em}
.m .cf .cf-h{font-size:1.85em}
.m .cf .cf-p{font-size:.92em}
.m .cf-menu,.m .cf-cater,.m .cf-visit{padding:1.3em 1em}
.m .cf-cards{grid-template-columns:1fr;gap:.6em}
.m .cf-card{display:flex;align-items:center}
.m .cf-card .cf-ci{flex:none;width:5.6em;height:4.4em}
.m .cf .cf-card p{flex:1;flex-direction:column;gap:0}
.m .cf-cater{grid-template-columns:1fr;gap:1em}
.m .cf-cater .cf-ci{height:9em}
.m .cf-vg{grid-template-columns:1fr;gap:.6em}
.m .cf-foot{padding:1em 1em 5em}
.m .big-call .cf-bar{position:absolute;left:.8em;right:.8em;bottom:.8em;z-index:3;display:flex;align-items:center;justify-content:center;gap:.5em;padding:.9em;border-radius:99em;background:#C7401F;color:#fff;font-weight:800;font-size:1.05em;box-shadow:0 .4em 1.2em rgba(0,0,0,.3)}
.near .ph-room{background-image:url(../img/home/cafe-room.webp)}
.near .ph-toast{background-image:url(../img/home/cafe-toast.webp)}
.near .ph-burger{background-image:url(../img/home/cafe-burger.webp)}
.near .ph-roast{background-image:url(../img/home/cafe-roast.webp)}
.near .ph-salad{background-image:url(../img/home/cafe-salad.webp)}
.near .ph-eggs{background-image:url(../img/home/cafe-eggs.webp)}

/* example picker and pause */
.sp-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.try{flex-basis:100%;margin-bottom:-2px;font-weight:700;font-size:.98rem;color:var(--cream)}
.reqs{display:flex;flex-wrap:wrap;gap:8px}
.reqs button{position:relative;overflow:hidden;padding:10px 16px;border-radius:99px;border:1.5px solid rgba(255,255,255,.22);background:var(--ink2);color:var(--text);font-weight:600;font-size:.95rem;cursor:pointer}
.reqs button:hover{border-color:rgba(255,46,136,.7)}
.reqs button[aria-pressed=true]{border-color:var(--pink);background:#2A1E4A}
.reqs button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--f,0) * 100%);background:var(--pink);box-shadow:0 0 6px var(--pink)}
.sp-pause{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;border:1.5px solid rgba(255,255,255,.28);background:transparent;color:var(--text);font-weight:600;font-size:.92rem;cursor:pointer}
.sp-pause[hidden]{display:none}
.sp-pause svg{width:12px;height:12px}
.sp-pause .play{display:none}
html.paused .sp-pause .play{display:block}
html.paused .sp-pause .pause{display:none}
.sp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 28px;margin-top:44px}
.sp-list li{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:1rem}
.sp-list svg{flex:none;width:22px;height:22px;margin-top:2px}

/* the $49 plan as a theater marquee */
.plan{background:radial-gradient(60% 60% at 30% 40%,rgba(255,46,136,.18),transparent 70%),var(--ink)}
.pl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.marquee{position:relative;padding:34px 30px;border-radius:18px;background:linear-gradient(#1E2550,#141A38);border:2px solid #3B4590;box-shadow:0 0 0 8px #141A38,0 0 0 10px #3B4590,0 40px 90px -30px rgba(255,46,136,.55);text-align:center}
.bulbs{height:18px;margin:0 -8px;background:radial-gradient(circle,var(--bulb) 0 4px,rgba(255,231,189,.45) 5px,transparent 8px) 0 50%/24px 18px repeat-x}
.run-bulbs .bulbs{background:
  radial-gradient(circle,#fff 0 4px,rgba(255,231,189,.7) 5px,transparent 9px) 0 50%/72px 18px repeat-x,
  radial-gradient(circle,#7d6a4c 0 4px,transparent 5px) 0 50%/24px 18px repeat-x;animation:chase .9s steps(3) infinite}
@keyframes chase{to{background-position:72px 50%,0 50%}}
.marquee .now{margin:18px 0 6px;font-family:var(--neon);font-size:1.6rem;color:var(--pink);text-shadow:0 0 12px rgba(255,46,136,.6)}
.marquee h2{font-family:var(--marq);font-weight:900;text-transform:uppercase;color:var(--cream);line-height:.86;font-size:clamp(2.6rem,5.4vw,4.6rem)}
.marquee .price{display:block;margin:12px 0 4px;font-size:clamp(5.4rem,12vw,9.6rem);line-height:.82;color:var(--cream);text-shadow:0 0 30px rgba(255,46,136,.6)}
.marquee .price sup{font-size:.4em;vertical-align:.95em;margin-right:.04em}
.marquee .mo{display:block;font-size:.55em;color:var(--pink)}
.marquee .no{margin:16px 0 18px;color:var(--muted);font-size:1rem}
.incl{display:grid;gap:4px}
.incl li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.08rem}
.incl li:first-child{border-top:1px solid var(--line)}
.incl svg{flex:none;width:26px;height:26px;margin-top:1px}
.incl b{color:var(--cream);font-weight:700}
.star{margin-top:14px;font-size:.9rem;color:var(--muted)}
.plan .btn{margin-top:26px}

/* FAQ */
.faq{background:#121839}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,90px);align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:1.12rem;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:linear-gradient(var(--pink),var(--pink)) center/12px 2px no-repeat,linear-gradient(var(--pink),var(--pink)) center/2px 12px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:60ch}

/* final call */
.final{text-align:center;overflow:hidden;background:radial-gradient(60% 70% at 50% 100%,rgba(255,46,136,.3),transparent 70%),linear-gradient(#121839,#0B1026)}
.final .sign-big{font-family:var(--neon);font-size:clamp(4.4rem,14vw,11rem);line-height:.95;color:var(--cream);text-shadow:var(--glow-cream)}
.final .sign-big .pk{color:#FFD3E6;text-shadow:var(--glow);display:inline-block;animation:flicker 6s 1s infinite}
.final p.lede{margin:18px auto 0}
.final .spots{margin-bottom:26px}
.mini{display:flex;gap:10px;max-width:560px;margin:34px auto 0;text-align:left}
.mini label{flex:1}
.mini .btn{flex:none}
.final .fine{margin-top:16px}

/* footer (content from index.html) */
footer{background:#070B1D;padding:48px var(--gut) 120px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
footer .in{display:grid;gap:22px}
footer img{width:125px}
footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}
footer nav a{text-decoration:none;color:var(--text)}
footer nav a:hover{color:var(--pink)}
.legal{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem}

/* sticky action */
.sticky{position:fixed;z-index:30;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);transition:transform .3s,opacity .3s}
.sticky .btn{box-shadow:0 0 0 2px rgba(11,16,38,.7),0 14px 40px -6px rgba(255,46,136,.9)}
.sticky.hide{transform:translateY(160%);opacity:0;pointer-events:none}

/* ---------- tablet & phone ---------- */
@media (max-width:1040px){
  .top nav{display:none}
  .top .login{margin-left:auto}.top .find{margin-left:8px}
  .hero-grid{grid-template-columns:1fr}
  .hero .sub{max-width:40ch}
  .card{max-width:560px}
  .wire{grid-template-columns:1fr 1fr}
  .wire{padding-top:0}
  .wire::before,.wire::after,.wire li::before{display:none}
  .pl-grid,.faq-grid{grid-template-columns:1fr}
  .sp-top,.demo{grid-template-columns:1fr}
  .sp-chat{width:100%;max-width:620px}
  .sc-thread{flex:none;height:236px;min-height:0;overflow:hidden}
}
@media (max-width:640px){
  body{font-size:17px}
  .top{padding:14px 16px;gap:10px}
  .top .logo img{width:124px}
  .top .find{padding:8px 13px;font-size:.9rem;margin-left:4px}
  .top .login{font-size:.9rem;padding:8px 2px}
  .motion{width:38px;height:38px}
  .hero{padding-top:86px}
  .hero h1{font-size:clamp(2.9rem,13.4vw,3.6rem)}
  .hero .hk{margin-bottom:12px;font-size:.84rem;letter-spacing:.07em}
  .hero .sub{margin-top:16px;font-size:1.05rem}
  .chips{display:none}
  .card{padding:20px 18px;border-radius:22px;margin-top:-4px}
  .card h2{font-size:1.9rem}
  .hero{min-height:0}
  .street{--street-h:244px;margin-top:36px}
  .shop{--shop-w:176px;margin-right:14px}
  .street::before{height:200px;background-size:1152px 200px}
  .shop .bld{padding:10px 10px 0}
  .shop.t2 .bld{padding-top:22px}
  .shop.t3 .bld{padding-top:20px}
  .sign{height:36px;margin-bottom:9px}
  .sign span{font-size:1.32rem}
  .sill{margin:0 -10px;height:16px}
  .lamp{height:160px}
  .ticker li{font-size:1.2rem}
  .reel ul{gap:26px}
  .pair{--desk-w:290px;--ph-w:80px}
  .frames{padding-right:42px}
  .pair .ph{border-radius:14px;padding:4px;bottom:-18px}
  .pair .ph img{border-radius:10px}
  .wire{grid-template-columns:1fr;gap:14px;margin-top:36px}
  .wire li{padding:18px 18px 20px}
  .marquee{padding:24px 18px}
  .wants{gap:6px}
  .wants button{min-height:40px;padding:6px 12px;font-size:.88rem}
  .q{font-size:1.02rem}
  .steps{gap:6px;margin-top:28px}
  .steps li{gap:6px;padding:4px 10px 4px 5px;font-size:.84rem}
  .steps b{width:21px;height:21px;font-size:.74rem}
  .demo{gap:18px;margin-top:16px}
  .sp-chat{padding:12px 14px 14px;border-radius:22px}
  .sc-head,.sc-hello{display:none}
  .sc-thread{flex:none;height:206px;min-height:0;padding:0;gap:8px;overflow:hidden}
  .sc-compose{display:none}
  .att{margin-top:6px;padding:3px 8px 3px 3px;font-size:.8rem}
  .att i{width:34px;height:24px}
  .bub{font-size:.93rem;padding:9px 13px}
  .ss-status{margin-bottom:10px;font-size:.9rem}
  .ss-frames{padding:0}
  .browser{display:none}
  .phone{position:relative;width:min(68vw,256px);margin:0 auto;border-radius:22px}
  .vp.m{aspect-ratio:22.5/34}
  .reqs button{padding:8px 13px;font-size:.88rem}
  .sp-ctl{margin-top:22px}
  .sp-list{margin-top:34px}
  .mini{flex-direction:column}
  .sticky{left:16px;right:16px;bottom:14px}
  .sticky .btn{width:100%;min-height:52px}
}

/* motion off: everything sits in its finished, lit state */
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .wire::after{display:none}
}