@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/atkinson-hyperlegible-mono-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:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/atkinson-hyperlegible-mono.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:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-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:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next.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:'Schibsted Grotesk';font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/schibsted-grotesk-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:'Schibsted Grotesk';font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/schibsted-grotesk.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}
/* Layout: mobile-first Swiss grid. One column on phones with a thumb-reach booking dock; 12 columns from 960px. Flush-left type, hairline rules, one cyan accent for marks and line drawing. Day and night palettes follow the visitor's local time. */
:root{
  --paper:#FAFAF7; --ink:#111111; --mute:#5C5C59; --line:#E2E2DD; --soft:#F1F1EC; --accent:#0891B2; --accent-ink:#0E7490; --on-ink:#FAFAF7;
  --sans:"Atkinson Hyperlegible Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display:"Schibsted Grotesk", "Atkinson Hyperlegible Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"Atkinson Hyperlegible Mono", ui-monospace, Menlo, Consolas, monospace;
  --plate:#FFFFFF; --bezel:#161616; --panel:#F0F1EE; --street:#DCDED9; --avenue:#C5C9C2; --water:#E2E8EE; --lane:#E1E2DE; --road:#CDD0CA; --major:#B3B8B0;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:20px;
  color-scheme:light;
}
:root[data-tod="night"]{
  --paper:#121212; --ink:#ECECE7; --mute:#9C9C96; --line:#2A2A28; --soft:#1A1A19; --accent:#22D3EE; --accent-ink:#22D3EE; --on-ink:#121212;
  --plate:#4A4F55; --bezel:#3A3A37; --panel:#0C1015; --street:#1A2129; --avenue:#27313B; --water:#0F1B26; --lane:#1B222A; --road:#2A343F; --major:#3C4855;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px;hanging-punctuation:first last;scrollbar-color:var(--mute) var(--paper);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-kerning:normal;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--accent);-webkit-tap-highlight-color:transparent;transition:background-color .6s var(--ease),color .6s var(--ease)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--paper)}
::selection{background:var(--accent);color:var(--on-ink)}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;text-wrap:balance}
h3{line-height:1.25}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
.mark{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--accent);transition:background-color .6s}

/* header: brand + theme switch; section links scroll sideways under it on phones */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);border-bottom:1px solid var(--line);transition:background-color .6s}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;padding-block:8px 0}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:600;font-size:1.06rem;letter-spacing:-.01em;margin-right:auto}
.brand .gate{width:22px;height:22px;fill:currentColor;flex:none}

/* hero */
.hero{padding-block:28px 64px}
.hero .grid{display:flex;flex-direction:column}
.hero h1{font-size:clamp(2.5rem,11.5vw,6rem);line-height:1;letter-spacing:-.04em;font-weight:600}
.hero h1 .l2{color:var(--mute)}
.hero .dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--accent);margin-left:.04em;transition:background-color .6s}
.hero .lede{margin-top:24px;font-size:1.08rem;line-height:1.55;max-width:46ch}
.hero .actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:28px}
.hero .actions .text{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;background:var(--ink);color:var(--on-ink);text-decoration:none;font-weight:500;font-size:1.02rem;padding:0 24px;border-radius:10px;transition:background-color .25s,gap .35s var(--ease),transform .15s}
.btn svg{width:18px;height:10px}
.btn svg *{fill:none;stroke:currentColor;stroke-width:1.4}
.btn:active{transform:scale(.98)}
@media (hover:hover){.btn:hover{gap:20px;background:var(--accent);color:var(--on-ink)}}


/* section frame */
.sec{padding-block:64px 8px}
.sec-head{display:flex;flex-direction:column;gap:4px;margin-bottom:28px}
.sec-head h2{font-size:clamp(1.65rem,7vw,2.4rem);letter-spacing:-.03em;line-height:1.1}



/* principles */


/* close */
.status{font-size:.9rem;color:var(--mute)}
footer .wrap{display:flex;flex-direction:column;gap:4px;padding-block:22px 112px;border-top:1px solid var(--line);font-size:.86rem;color:var(--mute)}

/* booking dock: thumb reach on phones, appears after the opening screen */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:12;padding:10px max(var(--gut),env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(var(--gut),env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--paper) 92%,transparent);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
.dock.show{transform:none}
.dock .btn{width:100%}

/* tablet */
@media (min-width:640px){
  :root{--gut:32px}
  .hero{padding-block:40px 88px}
  .hero .actions,.close .actions{flex-direction:row;align-items:center;gap:14px 28px}
  .sec-head{flex-direction:row;justify-content:space-between;align-items:baseline}
}

/* desktop */
@media (min-width:960px){
  :root{--gut:40px}
  html{scroll-padding-top:80px}
  .top .wrap{flex-wrap:nowrap;column-gap:28px;padding-block:14px}
  .dock{display:none}
  .hero{padding-block:64px 104px}
  .hero .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .hero h1{grid-column:1 / span 6;grid-row:2;font-size:clamp(3rem,5.4vw,5rem)}
  .hero .lede{grid-column:1 / span 5;grid-row:3;margin-top:32px;font-size:1.18rem}
  .hero .actions{grid-column:1 / span 6;grid-row:4;margin-top:36px;align-self:start}
  .map{grid-column:7 / -1;grid-row:2 / span 4;margin:0;align-self:start}
  .sec{padding-block:96px 24px}
  .sec-head{margin-bottom:40px}
  footer .wrap{flex-direction:row;justify-content:space-between;padding-block:24px 32px}
}
.also{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.also h3,.also .h3{font-size:1.25rem;letter-spacing:-.02em;line-height:1.25}
.also p{color:var(--mute);max-width:52ch}
/* tactical map */
.map{position:relative;margin:40px calc(-1 * max(var(--gut),env(safe-area-inset-left,0px))) 0;background:var(--panel);border-block:1px solid var(--line);overflow:hidden;transition:background-color .6s}
.map svg{display:block;width:100%;height:auto;aspect-ratio:1/1}
.hud{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:.82rem;color:var(--mute);line-height:1.4;border-bottom:1px solid var(--line)}
.hud:last-child{border-bottom:0;border-top:1px solid var(--line);font-size:.76rem}
.hud b{font-weight:500;color:var(--ink)}
.sim{display:inline-flex;align-items:center;gap:6px}
.lane,.road,.major,.river{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s}
.lane{stroke:var(--lane);stroke-width:1.1}
.road{stroke:var(--road);stroke-width:2}
.major{stroke:var(--major);stroke-width:3.2}
.river{stroke:var(--water);stroke-width:26}
.lane,.road,.major{vector-effect:non-scaling-stroke}
.st-label{font-family:var(--sans);font-size:8.5px;font-weight:600;fill:var(--mute);paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.scan-edge{fill:none;stroke:var(--accent);stroke-width:2}
.vpin{fill:var(--panel);stroke:var(--ink);stroke-width:1.3;transition:fill .3s,stroke .3s}
.vn{font-family:var(--sans);font-size:7px;font-weight:700;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.vring{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:0}
.v.hot .vpin{fill:var(--accent);stroke:var(--accent)}
.v.hot .vn{fill:var(--on-ink)}
.v.ping .vring{animation:vping 1.2s var(--ease)}
@keyframes vping{from{r:5;opacity:.9}to{r:22;opacity:0}}
.v.peek .vring{animation:vpeek .9s var(--ease)}
@keyframes vpeek{from{r:4;opacity:.55}to{r:12;opacity:0}}
.v.top .vpin{stroke:var(--accent);stroke-width:2}
#mapfx{position:absolute;inset:0;cursor:pointer}
/* activity on the map: a label that grows out of the venue where it happens (animated by GSAP in site.js) */
.mapview{position:relative}
.tags{position:absolute;inset:0;pointer-events:none;contain:layout style}
.mtag{position:absolute}
.mtag .stem{position:absolute;left:var(--sx,50%);top:100%;width:1.5px;margin-left:-.75px;height:14px;border-radius:1px;background:var(--accent)}
.mtag.below .stem{top:auto;bottom:100%;background:var(--accent)}
.pill{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:6px;background:color-mix(in srgb,var(--paper) 94%,transparent);border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:0 1px 2px rgb(0 0 0 / .06),0 12px 32px -10px rgb(0 0 0 / .32);font-size:.78rem;line-height:1.2;color:var(--mute);white-space:nowrap}
.pill .mi{flex:none;width:22px;height:22px;padding:5px;border-radius:4px;background:color-mix(in srgb,var(--accent) 14%,transparent);fill:none;stroke:var(--accent);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.pill b{font-weight:600;color:var(--ink)}
.pill .val{position:relative;display:inline-block;font-variant-numeric:tabular-nums}
.pill .strk{position:absolute;left:-2px;right:-2px;top:54%;height:1.5px;border-radius:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.vheat{fill:url(#hg)}
#hg stop{stop-color:var(--accent)}
.tally dd.fl{animation:fl 1.2s ease-out}
@keyframes fl{from{color:var(--accent-ink)}to{color:var(--ink)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vtop{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:3 3.4;stroke-linecap:round}
/* the numbers the activity adds up to */
.tally{border-top:1px solid var(--line);padding:10px 14px 12px}
.tl-h{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.76rem;color:var(--mute)}
#spark{width:96px;height:16px;flex:none}
#spark rect{fill:var(--accent);opacity:.8}
.tally dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:8px 0 0}
.tally dl div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0}
.tally dt{font-size:.72rem;line-height:1.3;color:var(--mute)}
.tally dd{margin:0;display:flex;height:1.3em;overflow:hidden;font-family:var(--display);font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--ink)}
.feed li.ins{color:var(--ink)}
.feed li.ins .m{white-space:normal}
.feed li.ins b{font-weight:600;display:inline-flex;align-items:center;gap:7px;margin-right:4px}
.feed li.ins b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dg{display:inline-block;height:1.3em;overflow:hidden;}
.reel{display:flex;flex-direction:column}
.reel span{display:block;height:1.3em;line-height:1.3em;text-align:center}
.gs .feed li{animation:none}
.feed{list-style:none;margin:0;padding:8px 14px 10px;border-top:1px solid var(--line);font-size:.86rem;line-height:1.45;height:128px;overflow:hidden}
.feed li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:4px 0;color:var(--mute);animation:feedin .5s var(--ease)}
.feed li:first-child{color:var(--ink)}
.feed .num{font-size:.8rem;color:var(--mute)}
.feed .m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:960px){.feed{height:auto;min-height:118px}}
@keyframes blink{to{visibility:hidden}}
@keyframes feedin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:640px){.map{margin-inline:0;border:1px solid var(--line)}}

/* demo player: one fixed-height stage, tabs with progress, a finger that shows each tap, a caption per step */
.player{display:flex;flex-direction:column;gap:14px}
.ptabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ptabs button{font:inherit;color:var(--mute);background:none;border:0;padding:10px 0 0;min-height:44px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:color .2s}
.ptabs button[aria-selected="true"]{color:var(--ink)}
.pt{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt .lg,.pd{display:none}
.pbar{display:block;height:2px;background:var(--line);overflow:hidden;margin-top:auto}
.pbar i{display:block;height:100%;width:0;background:var(--ink)}
.stage{--sh:410px;position:relative;height:var(--sh);border:1px solid var(--line);background:var(--soft);overflow:hidden;font-variant-numeric:tabular-nums;transition:background-color .6s}
.phone{position:absolute;left:0;right:0;top:18px;margin:0 auto;width:min(272px,calc(100% - 32px));height:calc(var(--sh) + 40px);border:8px solid var(--bezel);border-radius:38px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.08);transition:background-color .6s,border-color .6s}
.sbar{position:relative;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:11px;font-weight:600}
.isl{position:absolute;left:50%;top:6px;width:64px;height:17px;margin-left:-32px;border-radius:999px;background:var(--bezel)}
.bat{width:20px;height:10px;border:1px solid currentColor;border-radius:3px;position:relative;opacity:.8}
.bat::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:currentColor;border-radius:1px}
.screen{position:relative;height:calc(var(--sh) - 18px - 16px - 28px + 8px)}
.demo.act{display:flex}
.finger{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1.5px solid var(--ink);opacity:0;pointer-events:none;z-index:5;transition:transform .5s var(--ease),opacity .3s}
.finger.on{opacity:1}
.finger.press{animation:press .3s var(--ease)}
@keyframes press{50%{scale:.72}}
.pcap{display:flex;align-items:baseline;gap:12px;color:var(--mute);font-size:.95rem;line-height:1.5}
.bub{position:absolute;left:0;top:0;z-index:6;max-width:min(80%,280px);padding:8px 12px;border-radius:12px;background:var(--ink);color:var(--on-ink);font-size:13px;line-height:1.35;font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:left .45s var(--ease),top .45s var(--ease),opacity .3s,background-color .6s}
.bub.on{opacity:1}
.bub::after{content:"";position:absolute;left:calc(var(--tx,50%) - 6px);bottom:-5px;width:12px;height:12px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.bub.below::after{bottom:auto;top:-5px}
.bub.notail::after{display:none}
.bub.pop{animation:bpop .35s var(--ease)}
@keyframes bpop{from{scale:.94}to{scale:1}}
.pdesc{max-width:44ch}
@media (min-width:960px){
  .player{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .ptabs{grid-column:1 / span 5;grid-template-columns:1fr;gap:0}
  .ptabs button{padding:18px 0 0;gap:6px}
  .ptabs button:first-child{padding-top:0}
  .pt{font-size:1.3rem;letter-spacing:-.02em;white-space:normal}
  .pt .lg{display:inline}
  .pd{display:block;color:var(--mute);font-size:1rem;line-height:1.55;max-width:40ch;padding-bottom:12px}
  .pstage{grid-column:7 / -1}
  .stage{--sh:470px}
  .phone{width:300px}
  .pdesc{display:none}
}
/* animated demos in "What we build", of a booking sheet and a menu. JS adds cumulative s1..sN classes:
   oN hides and nN shows at step N, tN taps at step N, pN/uN pick and unpick a chip at step N. */
.demo{position:absolute;inset:0;padding:10px 14px 34px;overflow:hidden;display:none;flex-direction:column;gap:8px;font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;transition:background-color .6s}
.demo.nt,.demo.nt *,.demo.nt *::before,.demo.nt *::after{transition:none!important;animation:none!important}
.n1,.n2,.n3,.n4,.n5{display:none}
.demo.s1 .n1,.demo.s2 .n2,.demo.s3 .n3,.demo.s4 .n4,.demo.s5 .n5{display:inline}
.demo.s1 .o1,.demo.s2 .o2,.demo.s3 .o3,.demo.s4 .o4,.demo.s5 .o5{display:none}
.tp{position:relative}
.tp::after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--accent);border-radius:inherit;opacity:0;pointer-events:none}
.demo.s1 .t1::after,.demo.s2 .t2::after,.demo.s3 .t3::after,.demo.s4 .t4::after{animation:tap .7s var(--ease)}
@keyframes tap{from{opacity:.9;transform:scale(.88)}to{opacity:0;transform:scale(1.18)}}
.dm-l{font-size:10.5px;color:var(--mute);font-weight:400;letter-spacing:.02em;white-space:nowrap}
.dm-row{display:flex;gap:5px;align-items:center}
.chip{flex:1;min-width:0;text-align:center;padding:4px 0;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--mute);white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.chip.on,.demo.s1 .chip.p1,.demo.s2 .chip.p2{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.demo.s1 .chip.u1,.demo.s2 .chip.u2{background:var(--paper);color:var(--mute);border-color:var(--line)}
.stp{flex:none;display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.stp i{font-style:normal;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:var(--mute)}
.stp b{min-width:14px;text-align:center;font-weight:500}
.dm-btn{text-align:center;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:500;white-space:nowrap;transition:background-color .3s,color .3s,box-shadow .3s}
/* bookings: the guest builds a message for the venue's chat; the venue replies */
.msg{display:flex;flex-direction:column;gap:1px;padding:7px 10px;background:var(--paper);border:1px solid var(--line);border-radius:10px 10px 10px 2px}
.msg .dm-l{margin-bottom:2px}
.msg p{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-book.s4 .b-send{background:transparent;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}
.dm-reply{position:absolute;left:12px;right:12px;bottom:34px;padding:8px 10px;background:var(--ink);color:var(--on-ink);border-radius:10px 10px 2px 10px;transform:translateY(170%);transition:transform .55s var(--ease)}
.dm-reply .dm-l{display:block;color:inherit;opacity:.65}
.d-book.s5 .dm-reply{transform:none}
/* menus */
@keyframes flash{from{border-color:var(--accent)}to{border-color:var(--line)}}
/* menus by message: the owner sends one line, the reply confirms, the menu changes */
.bb{max-width:86%;padding:6px 10px;font-size:11.5px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease)}
.bb.me{align-self:flex-end;background:var(--ink);color:var(--on-ink);border-radius:10px 10px 2px 10px}

.cmp{flex:none;display:flex;align-items:center;gap:6px;padding:4px 4px 4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.cmp-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-t{color:var(--mute)}
.cmp-s{flex:none;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:500}
/* order list: the guest adds dishes, then shows the list to the staff */
.ol{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:4px;padding:12px 14px 40px;background:var(--paper);border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.08);transform:translateY(105%);transition:transform .55s var(--ease)}
.d-list.s3 .ol{transform:none}
.ol-r{display:flex;justify-content:space-between;gap:8px}
.ol-m{color:var(--mute)}
.ol-t{padding-top:5px;margin-top:2px;border-top:1px solid var(--line);font-weight:600}
/* loyalty pass: join from the table QR, claim a drop, staff mark it served */
.jn{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);background:var(--paper);transition:opacity .3s}
.jn-u{padding:4px 10px;border:1px solid var(--line);border-radius:3px;color:var(--mute)}
.jn-u b{color:var(--ink);font-weight:500}
.d-pass.s1 .jn{display:none}
.card,.drop{display:none;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);background:var(--paper)}
.d-pass.s1 .card{display:flex;animation:flash 1.2s var(--ease)}
.d-pass.s2 .card{animation:none}
.d-pass.s2 .drop{display:flex}
.card>div,.drop>div{flex:1;min-width:0;display:flex;flex-direction:column}
.card b,.drop b{font-weight:600}
.drop .dm-btn{flex:none}
.proof{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:20px 18px 44px;background:var(--ink);color:var(--on-ink);opacity:0;pointer-events:none;transition:opacity .4s,background-color .4s}
.d-pass.s3 .proof{opacity:1}
.proof b{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.pf-k,.pf-m{font-size:11px;opacity:.75}
.pf-u{font-size:15px;font-weight:500;margin-bottom:6px}
.pf-b{align-self:flex-start;margin-top:10px;padding:5px 12px;border-radius:999px;border:1px solid currentColor;font-weight:500}
.d-pass.s4 .pf-b{opacity:.4}
.d-pass.s4 .pf-k{opacity:1}
/* below the demos */
.alsos{display:grid;grid-template-columns:minmax(0,1fr);margin-top:28px}
.alsos .also{margin-top:0;padding-block:20px}
.alsos .also+.also{border-top:1px solid var(--line)}
@media (min-width:960px){.alsos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.alsos .also+.also{border-top:1px solid var(--line)}}
/* a hero without the map (vertical pages) */
.crumb{color:var(--mute);text-decoration:none}
.crumb:hover{color:var(--ink)}
@media (min-width:960px){
  .hero.plain h1{grid-column:1 / span 9}
  .hero.plain .lede{grid-column:1 / span 6}
}


/* Why Warpgate: a list of terms, like the summary on a contract */
.terms>div{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);column-gap:16px;padding:16px 0 18px;border-bottom:1px solid var(--line)}
.terms dt{font-family:var(--display);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.terms dd{margin:0;color:var(--mute);line-height:1.5;max-width:52ch}
@media (min-width:640px){.terms>div{grid-template-columns:minmax(0,13rem) minmax(0,1fr);column-gap:32px;padding:20px 0 22px}.terms dt{font-size:1.1rem}}
@media (min-width:960px){.terms>div{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.terms dt{grid-column:1 / span 4}.terms dd{grid-column:5 / -1;font-size:1.06rem}}

/* Data font: live figures (times, amounts, counts) set in Atkinson Hyperlegible Mono, the body font's mono partner. Headings, body and street names stay as they are. */
:is(.feed .num,.pill .val.fig,.tally dd,#cnt,#clockline .num){font-family:var(--mono);letter-spacing:-.01em}
.pill .val.fig{font-size:.74rem}
.feed .num{font-size:.76rem}
.tally dd{font-weight:500;font-size:1.15rem}


/* Daily work: the jobs that run, beside an example of the weekly brief */

:root{--r-card:10px;
  /* motion tokens (warpgate-motion-design): durations by job, eases from the expo/power family */
  --dur-press:100ms; --dur-micro:160ms; --dur-enter-s:240ms; --dur-enter-l:320ms; --dur-shared:380ms;
  --ease-out-quart:cubic-bezier(.25,1,.5,1); --ease-out-cubic:cubic-bezier(.33,1,.68,1); --ease-io-cubic:cubic-bezier(.65,0,.35,1)}
@media (min-width:960px){:root{--dur-enter-s:280ms;--dur-enter-l:360ms;--dur-shared:420ms}}
.so{font-size:11px;font-weight:600;color:var(--accent-ink);white-space:nowrap}

/* fragment: the top of a phone showing the venue's menu, the same screen as the Hospitality demo */
.mini{position:absolute;left:50%;top:22px;width:236px;margin-left:-118px;padding:32px 12px 0;bottom:-14px;border:7px solid var(--bezel);border-bottom:0;border-radius:30px 30px 0 0;background:var(--paper);display:flex;flex-direction:column;gap:8px;font-size:11.5px;line-height:1.3;box-shadow:0 0 0 1px var(--line)}
.mini .isl{top:6px;width:56px;height:15px;margin-left:-28px}
.mini-c{display:flex;flex-direction:column;gap:2px}
.mini-c b{font-family:var(--vdisp);font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.1}
.mini-c b i{font-style:normal;font-weight:400;margin-left:3px;color:var(--mute)}
.mini-c span{display:flex;align-items:center;gap:5px;color:var(--mute);font-size:10.5px}
.v-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.mini-t{display:flex;gap:12px;margin:0 -12px;padding:0 12px 5px;border-bottom:1px solid var(--line);color:var(--mute)}
.mini-t .on{position:relative;color:var(--ink);font-weight:600}
.mini-t .on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent)}
.mini-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.mini-k{display:flex;flex-direction:column;gap:1px;min-width:0}
.mini-k b{font-weight:500;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur-enter-s) var(--ease-out-cubic)}
.mini-k .num{font-weight:700}
.mini-ph{position:relative;display:block;aspect-ratio:1;border-radius:7px;overflow:hidden;background:var(--soft)}
.mini-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease-out-cubic)}
.mini-ph .so{position:absolute;left:5px;bottom:5px;padding:2px 7px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:10px;font-weight:600;transition:opacity var(--dur-enter-s) var(--ease-out-cubic),transform var(--dur-enter-s) var(--ease-out-quart)}
/* what changed: without script the tart is shown sold out; with it, the change plays once in view */
#tart:not(.live) img,#tart.out img{opacity:.4}
#tart:not(.live) b,#tart.out b{color:var(--mute)}
#tart.live:not(.out) .so{opacity:0;transform:translateY(4px)}

/* fragment: the owner's chat with the venue's agent, as it arrives in their messaging app (Telegram-style thread, no app branding) */
.mini.tg{padding:30px 0 0;gap:0;background:var(--tg-head);--tg-bg:#DCE7D3;--tg-head:#FFFFFF;--tg-in:#FFFFFF;--tg-out:#E3F8CF;--tg-txt:#111;--tg-tm:#7A8A73;--tg-tick:#4FAE4E}
:root[data-tod="night"] .mini.tg{--tg-bg:#0E1621;--tg-head:#17212B;--tg-in:#182533;--tg-out:#2B5278;--tg-txt:#F2F4F6;--tg-tm:#8095A8;--tg-tick:#6AB2F2}
.tg-h{display:flex;align-items:center;gap:8px;padding:6px 10px 8px;background:var(--tg-head);color:var(--tg-txt);border-bottom:1px solid color-mix(in srgb,var(--tg-txt) 8%,transparent)}
.tg-h .v-stk{width:28px;height:28px;font-size:10px;box-shadow:none;background:#0E7490;color:#FFFFFF}
.tg-h div{display:flex;flex-direction:column;min-width:0}
.tg-h b{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-h div span{font-size:10.5px;color:var(--tg-tm)}
.tg-b{font-size:20px;line-height:1;color:var(--tg-tick);margin-right:-2px}
.tg-w{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 10px 18px;background:var(--tg-bg);color:var(--tg-txt)}
.cb{position:relative;max-width:82%;padding:6px 9px 6px 10px;border-radius:12px;font-size:12px;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.cb.me{align-self:flex-end;background:var(--tg-out);border-bottom-right-radius:4px}
.cb.ai{align-self:flex-start;background:var(--tg-in);border-bottom-left-radius:4px}
.tm{float:right;margin:5px 0 -3px 8px;font-size:9.5px;color:var(--tg-tm);font-variant-numeric:tabular-nums}
.tm i{font-style:normal;color:var(--tg-tick);letter-spacing:-3px}


/* how it works: a sequence, not objects. A cyan spine fills as each stage is reached (vertical on phones, horizontal on desktop) */
.steps{display:grid;grid-template-columns:1fr;position:relative;list-style:none;margin:0;padding:0}
.steps::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--line)}
.steps li{position:relative;padding:0 0 32px 34px;display:flex;flex-direction:column;gap:6px}
.steps li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);transition:background-color .3s,border-color .3s}
.steps li.seen::before{background:var(--accent);border-color:var(--accent)}
.steps::after{content:"";position:absolute;left:6px;top:0;width:1px;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .7s var(--ease)}
@media (prefers-reduced-motion:no-preference){.steps.armed li{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease)}.steps.armed li.seen{opacity:1;transform:none}}
.steps h3{font-size:1.5rem;letter-spacing:-.025em}
.steps p{color:var(--mute);max-width:36ch}
@media (min-width:960px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .steps::before{left:0;right:0;top:6px;bottom:auto;width:auto;height:1px}
  .steps::after{left:0;top:6px;width:100%;height:1px;transform-origin:left;transform:scaleX(var(--p,0))}
  .steps li{padding:34px 0 0}
  .steps li::before{top:0}
}

/* working with us: a ledger; questions: an accordion. Plain lists, no box around them */
.terms{margin:0;border-top:1px solid var(--ink)}

/* close: the one inverted card */
.close{padding-block:72px 40px}
.cta{position:relative;overflow:hidden;padding:36px 22px 24px;border-radius:var(--r-card);background:var(--ink);color:var(--on-ink);transition:background-color .6s}
.cta>*:not(.gate-bg){position:relative}
.cta .gate-bg{position:absolute;right:-8%;bottom:-30%;width:min(70vw,420px);height:auto;fill:color-mix(in srgb,var(--on-ink) 9%,transparent);pointer-events:none}
.cta h2{font-size:clamp(2.2rem,10vw,4.6rem);letter-spacing:-.045em;line-height:1;max-width:12ch}
.cta p{margin-top:16px;color:color-mix(in srgb,var(--on-ink) 70%,transparent);max-width:44ch;font-size:1.06rem}
.cta .actions{margin-top:28px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.cta .btn{background:var(--on-ink);color:var(--ink)}
@media (hover:hover){.cta .btn:hover{background:var(--accent);color:#fff}}
.cta .status{color:color-mix(in srgb,var(--on-ink) 70%,transparent)}

@media (min-width:640px){
  .steps{grid-auto-columns:46%}
  .cta{padding:56px 44px 40px}
  .cta .actions{flex-direction:row;align-items:center}
}
@media (min-width:960px){
      .steps{margin:0;padding:0;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;overflow:visible}
  .steps li{min-height:260px}
  .close{padding-block:112px 64px}
  .cta{padding:80px 64px 56px}
}
/* the inverted card borrows the other theme's cyan so the full stop keeps its contrast */
.cta{--accent:#22D3EE;--accent-ink:#22D3EE}

/* pause controls for anything that plays on its own (WCAG 2.2.2) */
.pz{position:relative;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.8rem;color:var(--mute);background:none;border:0;padding:0 2px;min-height:32px;cursor:pointer;touch-action:manipulation}
.pz::after{content:"";position:absolute;inset:-6px -8px}
.pz i{width:8px;height:9px;border-inline:2.5px solid currentColor}
.pz[aria-pressed="true"] i{border:0;width:0;height:0;border-block:5px solid transparent;border-left:8px solid currentColor}
@media (hover:hover){.pz:hover{color:var(--ink)}}
.map .hud .osm{margin-left:auto}
.pcap .pz{flex:none;margin-left:auto;order:3}

/* the menu row that the message changes: price first, then sold out */

/* press feedback (warpgate-motion-design 3.8) */
.btn:active{transform:scale(.97)}

/* accordion opens by height where the browser can animate to auto */
@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
}

/* theme switch cross-fade, and the Hospitality screens carried from the landing card into the demo stage */
::view-transition-old(root),::view-transition-new(root){animation-duration:240ms;animation-timing-function:var(--ease-out-cubic)}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:0s!important}}

/* White-label venue screens (v71). The phones show a generic client, "Your Restaurant", in its own look:
   its own accent and type, real photos, so they read as the venue's product, not Warpgate's or anyone else's.
   Redefining the site tokens inside the phone themes every demo rule below and above at once. */
.screen img{display:block;width:100%;height:100%;object-fit:cover}
.v-name{font-family:var(--vdisp);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.05;font-variation-settings:"opsz" 72}
.v-name i{font-style:normal;font-weight:400;margin-left:4px;color:var(--mute)}
.v-top{display:flex;flex-direction:column;gap:3px;padding-top:4px}
.v-st{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mute)}
.v-st i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.v-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:var(--soft)}
.v-seg span{text-align:center;padding:5px 0;border-radius:999px;color:var(--mute);font-weight:500}
.v-seg .on{background:var(--ink);color:var(--paper)}
.v-tabs{display:flex;gap:14px;margin:0 -14px;padding:0 14px 6px;border-bottom:1px solid var(--line);color:var(--mute);white-space:nowrap;overflow:hidden}
.v-tabs .on{position:relative;color:var(--ink);font-weight:600}
.v-tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--accent)}
.v-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
.v-card{display:flex;flex-direction:column;gap:2px;min-width:0}
.v-card b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.v-pr{font-weight:700;font-variant-numeric:tabular-nums}
.v-ph{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--soft)}
.v-ph img{transition:opacity .45s}
.v-so{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:10.5px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .45s var(--ease)}
.demo>*{flex-shrink:0}
.v-n{position:absolute;right:6px;top:6px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;box-shadow:0 0 0 2px var(--paper);background:var(--accent);color:var(--on-acc);font-size:11px;font-weight:700}
.v-acc,.screen .dm-btn.v-acc{background:var(--accent);color:var(--on-acc)}
/* menu by message: the owner's chat slides up over the menu, then away */
.v-sheet{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:8px;padding:12px 12px 40px;background:var(--soft);border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -12px 30px rgba(0,0,0,.14);transform:translateY(105%);transition:transform .5s var(--ease)}
.v-sh-h{font-size:10.5px;color:var(--mute)}
.d-menu.s1 .v-sheet{transform:none}
.d-menu.s3 .v-sheet{transform:translateY(105%)}
.bb.ai{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:10px 10px 10px 2px}
.bb.me{background:var(--accent);color:var(--on-acc)}
.d-menu.s2 .bb.me,.d-menu.s2 .bb.ai{opacity:1;transform:none}
.d-menu.s2 .bb.ai{transition-delay:.6s}
.d-menu.s3 .c-tart img{opacity:.38}
.d-menu.s3 .c-tart .v-so{opacity:1;transform:none}
.d-menu.s3 .c-tart b{color:var(--mute)}
.screen .cmp-s{background:var(--accent);color:var(--on-acc)}
/* booking: the venue's own photo on top */
.v-hero{position:relative;flex:none;height:112px;margin:-10px -14px 2px;overflow:hidden;color:#fff}
.v-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.62))}
.v-hero>div{position:absolute;left:14px;right:14px;bottom:10px;z-index:1;display:flex;flex-direction:column;gap:1px}
.v-hero span{font-size:11px;opacity:.9}
.v-hero .v-who{position:absolute;right:10px;top:8px;z-index:1;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.45);font-size:10px!important}
.v-lab{font-size:10.5px;color:var(--mute);margin-bottom:-4px}
/* order list: photo cards, a count on each, the accent bar that opens the list */
.d-list .v-grid{gap:10px 8px}
.v-bar{position:absolute;left:12px;right:12px;bottom:38px;z-index:1;display:flex;justify-content:space-between;padding:9px 14px;border-radius:999px;background:var(--accent);color:var(--on-acc);font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.d-list .ol{z-index:3}
.screen .d-book.s4 .b-send{background:transparent;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}
/* loyalty pass */
.v-stk{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-acc);font:normal 700 12px/1 var(--vdisp);letter-spacing:-.02em;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent)}
.d-pass .jn{align-items:flex-start;border-radius:12px}
.d-pass .jn .dm-btn{align-self:stretch}
.d-pass .card{border:0;border-radius:12px;background:var(--accent);color:var(--on-acc);padding:14px 12px}
.d-pass .card .dm-l,.d-pass .card .cnum{color:inherit;opacity:.8}
.d-pass .card .v-stk{background:var(--on-acc);color:var(--accent);box-shadow:none}
.d-pass .drop{border-radius:12px}
.drop img{flex:none;width:44px;height:44px;border-radius:8px}
.proof img{width:84px;height:84px;border-radius:50%;margin-bottom:8px;box-shadow:0 0 0 3px var(--accent)}
.d-pass .proof{background:var(--ink);color:var(--paper)}
.proof b{font-family:var(--vdisp)}

/* footer links: the industry pages live here and in the header */
.fnav{display:flex;gap:18px}
.fnav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.fnav a[aria-current]{color:var(--mute)}
@media (hover:hover){.fnav a:hover{color:var(--accent-ink)}}

/* ===== v80 studio layer (2026-11-10) =====
   Dark, technical, product-first. No gradients, glows or coloured shadows (AI tells). Kept from before: the gate mark, Schibsted Grotesk, Atkinson Hyperlegible.
   The craft lives in the working product (live map, venue screens, demos); the frame stays quiet. */
:root{
  --paper:#FAFAF8; --ink:#111214; --mute:#5E6166; --line:#E3E4E6; --soft:#F2F3F4; --raise:#FFFFFF; --on-ink:#FAFAF8;
  --accent:#0891B2; --accent-ink:#0E7490;
  --panel:#F3F5F7; --street:#DCDED9; --avenue:#C5C9C2; --water:#E2E8EE; --lane:#E1E2DE; --road:#CDD0CA; --major:#B3B8B0;
  --r:14px; color-scheme:light;
}
:root[data-tod="night"]{
  --paper:#08090A; --ink:#EDEDEA; --mute:#8B8D8F; --line:#1E2023; --soft:#0F1113; --raise:#14171A; --on-ink:#08090A;
  --accent:#22D3EE; --accent-ink:#22D3EE;
  --panel:#0B0E12; --street:#18202A; --avenue:#243040; --water:#0D1824; --lane:#161D26; --road:#26313E; --major:#36465A;
  --r:14px; color-scheme:dark;
}
body{background:var(--paper)}
::selection{background:var(--accent);color:#000}

/* header */
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{padding-block:10px;flex-wrap:nowrap}
.top-r{display:flex;align-items:center;gap:16px;font-size:.92rem;white-space:nowrap}
@media (min-width:640px){.top-r{gap:22px}}
.top-r a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--mute);transition:color .2s}
.top-r a:hover{color:var(--ink)}
.top-r .wide{display:none}
.tt{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 -10px;padding:0;border:0;background:none;color:var(--mute);cursor:pointer;transition:color .2s}
.tt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25}
.tt svg path{fill:currentColor;stroke:none}
:root[data-tod="day"] .tt svg{transform:scaleX(-1)}
@media (hover:hover){.tt:hover{color:var(--ink)}}
.top-r a.b{min-height:36px;padding:0 14px;border-radius:8px;background:var(--ink);color:var(--on-ink);font-weight:600}
.top-r a.b:hover{background:var(--accent);color:#000}

/* hero */
.hero{padding-block:44px 72px}
.hero h1{font-size:clamp(2.9rem,12.4vw,7.2rem);line-height:1.04;letter-spacing:-.05em}
.hero h1 .l2{color:var(--mute)}
.hero .lede{margin-top:26px;font-size:1.12rem;color:var(--mute);max-width:40ch}
@media (min-width:640px){.hero .actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 24px}}
.btn{min-height:52px;border-radius:10px;background:var(--ink);color:var(--on-ink);font-weight:600}
@media (hover:hover){.btn:hover{background:var(--accent);color:#000}}
.hero .actions .text{color:var(--mute);text-decoration:none}
.hero .actions .text:hover{color:var(--ink)}
.dot,.mark,.gate-bg{display:none}

/* the live map, framed as a working console */
.map{margin:44px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);}
.hud{font-size:.78rem}
.hud .num{font-family:var(--mono)}
.hud:last-child{font-family:var(--sans);font-size:.74rem;align-items:center}
.pill{border-radius:6px;background:var(--panel);border-color:var(--line);box-shadow:none}
.pill .mi{border-radius:4px}
.tally dd{font-family:var(--display);font-weight:600}

/* section frame */
.sec{padding-block:88px 8px}
.sec-head{gap:12px;margin-bottom:36px}
.sec-head h2{font-size:clamp(2rem,9vw,3.4rem);letter-spacing:-.04em;line-height:1.08}

/* What we build: product tiles */
.rows{display:grid;gap:14px}
.row{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--soft);overflow:hidden}
.row h3{font-size:1.4rem;letter-spacing:-.03em;line-height:1.2}
.row p{color:var(--mute);max-width:40ch}
.plate{position:relative;margin:14px -20px 0;height:300px;overflow:hidden;}
.plate .mini{position:absolute;left:50%;top:28px;bottom:-14px;width:252px;margin-left:-126px;padding:34px 13px 0;border:7px solid #1C1F23;border-bottom:0;border-radius:34px 34px 0 0;box-shadow:0 0 0 1px #2C3036,0 30px 80px -20px rgba(0,0,0,.8)}
.plate .mini .isl{display:block;top:7px;width:58px;height:16px;margin-left:-29px;background:#1C1F23}
.plate .mini.tg{padding:30px 0 0}
/* the customer's screen is the venue's light product; the owner's agent thread is dark, as in the app */
.plate .mini:not(.tg),:root[data-tod="night"] .plate .mini:not(.tg),.phone,:root[data-tod="night"] .phone{--paper:#FFFFFF;--ink:#141414;--mute:#6B6B6B;--line:#E8E8E8;--soft:#F3F3F3;--on-ink:#FFFFFF;--accent:#141414;--accent-ink:#141414;--on-acc:#FFFFFF;--vdisp:var(--display);color:var(--ink);background:var(--paper)}
.mini-c b{font-weight:600}
.mini-ph{border-radius:6px}
.mini-ph .so{border-radius:4px}

/* How we work: four numbered stages */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.steps::before,.steps::after{display:none}
.steps li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:4px 8px;padding:20px 0 22px;border-bottom:1px solid var(--line);min-height:0}
.steps li::before{content:counter(s,decimal-leading-zero);counter-increment:s;position:static;width:auto;height:auto;border:0;border-radius:0;background:none;grid-row:span 2;font-family:var(--mono);font-size:.8rem;color:var(--accent);line-height:2.1}
.steps li.seen::before{background:none}
.steps h3{font-size:1.25rem;letter-spacing:-.025em}
.steps p{color:var(--mute)}

/* Why Warpgate */
.terms{border-top:1px solid var(--line)}
.terms dt{font-size:1.05rem}

/* close */
.close{padding-block:104px 40px}
.cta{position:relative;padding:44px 22px 30px;border:1px solid var(--line);border-radius:var(--r);background:var(--soft);color:var(--ink)}
.cta h2{font-size:clamp(2.4rem,11vw,5.6rem);letter-spacing:-.05em;line-height:1.04}
.cta p{color:var(--mute)}
.cta .btn{background:var(--ink);color:var(--on-ink)}
footer .wrap{font-size:.8rem;border-top:0}
.dock{background:var(--paper);border-top:1px solid var(--line)}

@media (min-width:640px){
  .rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{padding:28px 28px 0}
  .plate{margin-inline:-28px;height:340px}
}
@media (min-width:960px){
  .top-r .wide{display:inline-flex}
  .hero{padding-block:80px 120px}
  .hero h1{grid-column:1 / span 7;font-size:clamp(4rem,7vw,7rem)}
  .hero .lede{grid-column:1 / span 5}
  .map{grid-column:8 / -1;grid-row:1 / span 5;margin:0}
  .sec{padding-block:140px 16px}
  .sec-head{margin-bottom:56px}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;border-top:0}
  .steps li{display:flex;flex-direction:column;gap:10px;padding:20px 0 0;border-bottom:0;border-top:1px solid var(--line)}
  .steps li::before{line-height:1;margin-bottom:28px}
  .terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:0}
  .terms>div{display:flex;flex-direction:column;gap:8px;padding:24px 0 28px;border-top:1px solid var(--line);border-bottom:0}
  .terms dt{font-size:1.3rem}
  .close{padding-block:160px 64px}
  .cta{padding:96px 64px 64px}
  footer .wrap{padding-block:24px 32px}
}
.stage{border:1px solid var(--line);border-radius:var(--r);background:var(--soft)}
/* body type: smaller and tighter (v81) */
body{font-size:15px;line-height:1.45}
.hero .lede{font-size:1.02rem;line-height:1.45}
.pcap,.pd,.terms dd{line-height:1.45}
.pd{font-size:.95rem}
.cta p{font-size:1.02rem;line-height:1.45}
@media (min-width:960px){.hero .lede,.cta p{font-size:1.1rem}.terms dd{font-size:inherit}}
@media (min-width:960px){.hero h1{grid-row:1}.hero .lede{grid-row:2}.hero .actions{grid-row:3}.map{grid-row:1 / span 4}}
/* no step numbers (v82) */
.steps li::before{display:none}
.steps li{display:flex;flex-direction:column;gap:6px}
.more{margin-top:24px;color:var(--mute);max-width:46ch}
.more a{color:var(--ink)}
/* Hospitality: the demo is the hero (v93). Phone: intro, tabs, phone. Desktop: intro and tabs left, phone right. */
.hero.prod .intro{display:flex;flex-direction:column;margin-bottom:40px}
.hero.prod .alsos{margin-top:48px}
@media (min-width:960px){
  .hero.prod .intro{grid-column:1 / span 5;grid-row:1;margin-bottom:0}
  .hero.prod h1{font-size:clamp(3rem,4.6vw,4.4rem)}
  .hero.prod .ptabs{grid-column:1 / span 5;grid-row:2;margin-top:56px}
  .hero.prod .pstage{grid-column:7 / -1;grid-row:1 / span 2;position:sticky;top:96px;align-self:start}
}