@font-face { font-family:"Geist"; src:url(assets/Geist-Variable.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url(assets/GeistMono-Variable.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --s1:#181818; --s2:#1F1F1F; --s3:#272727; --line:#313131; --muted:#9B9B9B; --accent:#6EC6DB;
  --ok:#7BD99A; --warn:#F2BE5C; --ease:cubic-bezier(0.22,1,0.36,1);
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
body { margin:0; background:#000; color:#fff; font-family:"Geist",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,ul,ol,dl,dd,figure { margin:0; padding:0; }
ul,ol { list-style:none; }
h1,h2,h3 { text-wrap:balance; }
p,li,dd { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.t2 { font-size:18px; line-height:28px; font-weight:500; }
.t3 { font-size:16px; line-height:24px; font-weight:500; }
.t4 { font-size:14px; line-height:20px; font-weight:500; }
.b3 { font-size:16px; line-height:24px; }
.b5 { font-size:14px; line-height:20px; font-weight:500; }
.b6 { font-size:14px; line-height:20px; }
.b7 { font-size:18px; line-height:28px; }
.c3 { font-size:12px; line-height:16px; font-weight:600; }
.c4 { font-size:12px; line-height:16px; font-weight:500; }
.c5 { font-size:12px; line-height:16px; }
.h5 { font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.015em; }
.h3 { font-size:36px; line-height:40px; font-weight:600; letter-spacing:-.02em; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.muted { color:var(--muted); }
.ok { color:var(--ok); }
.warn { color:var(--warn); }

.wrap { max-width:1200px; margin-inline:auto; padding-inline:16px; box-sizing:border-box; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:8px; border:0; background:#fff; color:#000; cursor:pointer; white-space:nowrap; font-size:16px; line-height:24px; font-weight:600; transition:background-color 300ms var(--ease),transform 300ms var(--ease); }
.btn.sm { font-size:14px; line-height:20px; }
.btn:hover { background:#E5E5E5; transform:translateY(-1px); }
.btn:active { transform:scale(.98); }

.nav { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:50; display:flex; align-items:center; gap:8px; padding:8px; border-radius:16px; width:max-content; max-width:calc(100% - 32px); box-sizing:border-box; background:rgba(24,24,24,.72); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.08); }
.nav-links { display:none; gap:2px; }
.nav-links a { padding:8px 12px; border-radius:8px; color:var(--muted); transition:color 300ms var(--ease); }
.nav-links a:hover { color:#fff; }

.h1g { color:#fff; font-size:36px; line-height:40px; font-weight:600; letter-spacing:-.02em; max-width:680px; }

/* Scroll tabs */
.ptab { border:0; background:transparent; padding:8px 0; cursor:pointer; color:var(--muted); white-space:nowrap; transition:color 300ms var(--ease); }
.ptab:hover, .ptab.on { color:#fff; }
.pane { grid-area:1/1; min-width:0; visibility:hidden; opacity:0; transform:translateY(16px); transition:opacity 500ms var(--ease),transform 500ms var(--ease),visibility 0s linear 500ms; display:grid; gap:24px; align-content:start; }
.pane.on { visibility:visible; opacity:1; transform:none; transition:opacity 500ms var(--ease),transform 500ms var(--ease); }
.pts { display:none; flex-wrap:wrap; gap:4px 16px; margin-top:16px; }
.pts span { color:var(--muted); font-size:14px; line-height:20px; }

/* Product parts, no outer frames */
.fade { transition:opacity 500ms var(--ease),transform 500ms var(--ease); }
.off { opacity:0 !important; transform:translateY(8px); }
.views { display:grid; min-width:0; }
.views > * { grid-area:1/1; min-width:0; }
.head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.chip { padding:2px 8px; border-radius:9999px; background:var(--s3); color:var(--muted); white-space:nowrap; }
.chip.okc { color:var(--ok); }
.chip.warnc { color:var(--warn); }
.act { display:inline-block; background:var(--s3); color:#fff; border:1px solid var(--muted); padding:4px 8px; border-radius:8px; white-space:nowrap; }
.act.ghost { background:transparent; border-color:var(--line); color:var(--muted); }
.seg { padding:4px 8px; border-radius:8px; background:var(--s3); color:var(--muted); white-space:nowrap; text-align:center; transition:background-color 300ms var(--ease),color 300ms var(--ease); }
.seg.is { background:var(--accent); color:#000; }
.segs { display:flex; flex-wrap:wrap; gap:4px; }
.tile { background:var(--s1); border-radius:8px; padding:12px; display:grid; gap:8px; align-content:start; min-width:0; }
.rows { display:grid; }
.rows > div { display:flex; justify-content:space-between; gap:12px; padding-block:8px; border-bottom:1px solid var(--line); }
.rows > div:last-child { border-bottom:0; }
.rows dt { color:var(--muted); }
.rows .strong dt, .rows .strong dd { color:#fff; }
.rows .good dt, .rows .good dd { color:var(--ok); }
.rows .bad dt, .rows .bad dd { color:var(--warn); }
.tbl { display:grid; }
.tbl > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; padding-block:8px; border-bottom:1px solid var(--line); align-items:center; }
.tbl > div:last-child { border-bottom:0; }

.till { display:none; align-self:start; }
.board { position:relative; height:256px; --p:136px; }
.tk { position:absolute; left:0; top:0; width:calc((100% - 16px) / 3); height:120px; box-sizing:border-box; background:var(--s1); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:4px; transition:transform 500ms var(--ease),opacity 500ms var(--ease); overflow:hidden; }
.tk-top { display:flex; flex-direction:column; gap:2px; }
.tk-det { display:none; }
.tk-name { font-size:12px; line-height:16px; font-weight:500; }
.tk-foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:4px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; }
.ticket { background:#F8FBFB; color:#080B0B; padding:8px; font-family:var(--mono); display:grid; gap:4px; transition:transform 900ms var(--ease),opacity 300ms var(--ease); }
.paper { overflow:hidden; padding-inline:4px; }
.printer-top { display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--s3); padding:4px 8px; border-radius:8px; position:relative; z-index:1; }
.sr { display:grid; grid-template-columns:88px repeat(7,minmax(0,1fr)) 48px; gap:4px; align-items:center; }
.sr i { display:block; height:16px; border-radius:2px; background:var(--s3); }
.sr i.s { background:var(--accent); }
.sr i.w { background:var(--warn); }
.hide-m { display:none; }

.finger { position:absolute; top:0; left:0; width:24px; height:24px; pointer-events:none; z-index:5; transition:transform 500ms var(--ease),opacity 300ms var(--ease); }
.finger i { display:block; width:24px; height:24px; box-sizing:border-box; border-radius:9999px; background:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.8); transition:transform 200ms var(--ease); }
.pause { position:fixed; right:16px; bottom:16px; z-index:40; width:44px; height:44px; display:grid; place-items:center; border-radius:9999px; border:1px solid var(--line); background:rgba(24,24,24,.72); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); cursor:pointer; color:#fff; transition:background-color 300ms var(--ease); }
.pause:hover { background:var(--s3); }

.w { opacity:.3; transition:opacity 500ms var(--ease); }
.w.lit { opacity:1; }
.rv { opacity:0; transform:translateY(32px); transition:opacity 700ms var(--ease),transform 700ms var(--ease); }
.rv.seen { opacity:1; transform:none; }

.faq details { border-bottom:1px solid var(--line); }
.faq details:last-child { border-bottom:0; }
.faq summary { padding-block:12px; cursor:pointer; }
.faq details > p { padding-bottom:12px; color:var(--muted); }
.field { display:grid; gap:4px; }
.field input, .field select { width:100%; box-sizing:border-box; height:44px; padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--s2); font-size:16px; line-height:24px; transition:border-color 300ms var(--ease); }
.field input:hover, .field select:hover { border-color:var(--muted); }
.step { display:grid; gap:4px; padding-block:16px; border-bottom:1px solid var(--line); }
.step:last-child { border-bottom:0; }
.state { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; }
.state div { display:flex; gap:4px; }
.state dt { color:var(--muted); }
.state dd.t { color:var(--accent); }

/* Architect's floor plan behind the page: faint at rest, lit in a circle around the cursor */
.arch { position:fixed; left:0; top:0; width:100%; height:100vh; max-height:1400px; object-fit:cover; pointer-events:none; z-index:0; }
.arch.base { opacity:.02; }
.arch.spot { opacity:var(--ao,0); transition:opacity 500ms var(--ease); -webkit-mask-image:radial-gradient(circle 300px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.45) 50%,transparent 100%); mask-image:radial-gradient(circle 300px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.45) 50%,transparent 100%); }
main, #top > footer { position:relative; z-index:1; display:block; }
.skip { position:fixed; top:8px; left:8px; z-index:60; background:#fff; color:#000; padding:8px 12px; border-radius:8px; transform:translateY(-64px); transition:transform 300ms var(--ease); }
.skip:focus { transform:none; }
.toggle { width:36px; height:36px; border:0; background:transparent; border-radius:8px; display:grid; place-items:center; cursor:pointer; padding:0; }
.toggle span { grid-area:1/1; display:block; width:16px; height:2px; border-radius:2px; background:#fff; transition:transform 500ms var(--ease); }
.mpanel { position:fixed; inset:0; z-index:40; padding:96px 16px 32px; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; background:rgba(0,0,0,.94); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); opacity:0; visibility:hidden; transition:opacity 500ms var(--ease),visibility 0s linear 500ms; }
.mpanel.open { opacity:1; visibility:visible; transition:opacity 500ms var(--ease); }
.mpanel a { padding:12px 0; opacity:0; transform:translateY(24px); transition:opacity 500ms var(--ease),transform 500ms var(--ease); }
.mpanel a:nth-child(2) { transition-delay:60ms; }
.mpanel a:nth-child(3) { transition-delay:120ms; }
.mpanel.open a { opacity:1; transform:none; }
.hero-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px 40px; padding-top:24px; margin-top:24px; margin-bottom:40px; border-top:1px solid var(--line); }
.tall { display:none; }
html { scroll-behavior:smooth; }
#pricing, #faq { scroll-margin-top:96px; }
#book { scroll-margin-top:128px; } /* #book sits in a .rv block that still has translateY(32px) when the glide measures it, so it ends 32px higher than it was aimed */
#pin { --seg:720px; }
.pause.gone { opacity:0; visibility:hidden; }
@media (max-width:767px) {
  #pin { --seg:480px; }
  .tk .act { padding:4px; }
  .pane-l .b7 { display:none; }
  .pane-l { justify-content:flex-start; gap:8px; }
  .pane { grid-template-rows:auto minmax(0,1fr); align-content:stretch; }
  .ltabs .ltab { padding-top:12px; }
  .mq { display:none; }
}
@media (pointer:coarse) {
  .btn, .nav-links a { min-height:44px; box-sizing:border-box; }
  .toggle { width:44px; height:44px; }
  #top > footer a, a.tel { padding-block:12px; display:inline-block; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .arch.spot { display:none; }
}

/* Hero: a live stream of paper tickets fills the side and runs off the top and bottom */
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding-top:96px; padding-bottom:24px; position:relative; z-index:1; min-width:0; }
.stream { height:220px; overflow:hidden; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent); }
.stream-col { display:grid; gap:12px; align-content:start; padding-bottom:12px; animation:rise 40s cubic-bezier(.25,.25,.75,.75) infinite; }
.stream-col.down { animation-name:fall; }
@keyframes rise {
  from { transform:translateY(0); }
  to { transform:translateY(-50%); }
}
@keyframes fall {
  from { transform:translateY(-50%); }
  to { transform:translateY(0); }
}
.hticket { background:#F8FBFB; color:#080B0B; padding:12px; font-family:var(--mono); display:grid; gap:8px; }
.hticket hr { border:0; border-top:1px dashed #080B0B; margin:0; width:100%; }

/* Tabs fill the top: full width words with a scroll progress line */
.ltabs { display:grid; grid-template-columns:repeat(5,auto); gap:8px; }
.ltab { white-space:nowrap; border:0; background:transparent; padding:0 0 12px; text-align:left; cursor:pointer; color:var(--muted); position:relative; font-size:14px; line-height:20px; font-weight:500; transition:color 300ms var(--ease); }
.ltab:hover, .ltab.on { color:#fff; }
.bar { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--s3); overflow:hidden; }
.bar i { display:block; height:100%; background:#fff; transform-origin:left; transition:transform 300ms var(--ease); }

/* Left column: words at the top, the money figure at the bottom */
.pane-l { display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-width:0; }
.stat { display:grid; gap:4px; }
.big { font-family:var(--mono); font-size:36px; line-height:40px; font-weight:500; letter-spacing:-.04em; font-feature-settings:"tnum"; }
.pane > :last-child { align-self:center; }

/* Food strip fills the bottom */
.mq { overflow:hidden; padding-top:12px; border-top:1px solid var(--line); }
.mq-in { display:flex; width:max-content; animation:slide 36s cubic-bezier(.25,.25,.75,.75) infinite; }
.mq-in span { padding-right:64px; white-space:nowrap; color:var(--muted); font-size:14px; line-height:20px; font-weight:400; }
@keyframes slide {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

@media (min-width:768px) {
  .wrap { padding-inline:32px; }
  .ltabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .ltab { font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.015em; }
  .big { font-size:60px; line-height:60px; }
  .pane { grid-template-rows:minmax(0,1fr); align-content:stretch; }
  .pane .rows { font-size:16px; line-height:24px; }
  .pane .rows > div { padding-block:12px; }
  .pane .tbl { font-size:14px; line-height:20px; }
  .pane .tbl > div { padding-block:12px; }
  .pane .tile { padding:16px; gap:12px; }
  .tk-det { display:block !important; }
  .h1g { font-size:60px; line-height:60px; letter-spacing:-.03em; }
  .pts { display:flex; }
  .tk { padding:12px; width:calc((100% - 16px) / 3); height:148px; }
  .tk-top { flex-direction:row; justify-content:space-between; }
  .tk-name { font-size:14px; line-height:20px; }
  .board { height:304px; --p:156px; }
  .hide-m { display:grid; }
  .pane { grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px; }
  .tag-p { font-size:48px !important; line-height:48px !important; letter-spacing:-.025em; }
}
@media (min-width:1024px) {
  .nav-links { display:flex; }
  .till { display:grid; }
  .scene0 { grid-template-columns:minmax(0,4fr) minmax(0,7fr) !important; }
  .hero-sec { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:minmax(0,1fr) auto; column-gap:48px; min-height:min(100vh,900px); }
  .hero-copy { grid-column:1; grid-row:1; padding-bottom:40px; }
  .hero-facts { grid-column:1; grid-row:2; margin-top:0; margin-bottom:64px; }
  .stream-cell { position:relative; grid-column:2; grid-row:1 / 3; }
  .stream { position:absolute; inset:0; height:auto; }
  .toggle, .mpanel { display:none; }
}
@media (min-width:768px) and (min-height:820px) {
  .build { display:grid; gap:32px; align-content:center; }
  .build > * { grid-area:auto !important; }
  .build > .keep.off, .build.sfin .ft.off { opacity:1 !important; transform:none !important; }
  .tall { display:grid; }
}
@media (prefers-reduced-motion:reduce) {
  .pane, .pane.on, .fade, .tk, .ticket, .rv { transition:opacity 300ms linear; transform:none; }
  .w { opacity:1; }
  .finger, .pause { display:none; }
  .stream-col, .mq-in { animation:none; }
}

/* Added for the static build: what the mockup set inline or in script */
[hidden] { display:none !important; }
#pin { position:relative; height:calc(min(100vh,900px) + var(--seg) * 5); }
#pinin { position:sticky; top:0; height:min(100vh,900px); overflow:hidden; }
.panes { flex:1; display:grid; grid-template-rows:minmax(0,1fr); min-height:0; align-items:stretch; }
#e-form:empty, #e-file:empty, #e-menu:empty, #e-phone:empty { display:none; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } /* the honeypot: a person never sees or reaches it */
.btn:disabled { background:#fff; opacity:.6; cursor:default; transform:none; }
#sent:focus { outline:none; } /* focus lands here when the form is replaced; it is not a control */
#nojs { display:none; }

/* Short screens. Measured on real phone heights (PRO-246 final review): the scene is taller than the room under the left
   column, so the text ran into it and its foot clipped. The platform in use animation stays on every screen above 560
   tall, so these screens get a compact layout: smaller type, tiles and gaps, real sizes so the finger still lands.
   All of it sits below the sizes the owner reviewed (390x844, 1280x720, 1440x900), so those pixels do not move. */
@media (max-width:767px) and (max-height:759px), (min-width:768px) and (max-height:719px) {
  #pinin > .wrap { gap:8px !important; } /* over the inline gap:24px */
  .pane .tile { padding:8px 12px; gap:8px; }
  #panel1 > :last-child, #panel1 > :last-child > div:not(.segs) { gap:8px !important; } /* the menu scene's inline gap:16px */
}
/* A phone. The two line heading and the figure are the left column; they fit the scene under them from 375x629 up. */
@media (max-width:767px) and (max-height:759px) {
  .stat .b6 { display:none; }
  .pane { gap:8px; }
  .pane-l { gap:8px; } /* after the base .pane-l rule on purpose: the phone .pane-l rule far above it never won its gap */
  .pane-l h2 { font-size:24px; line-height:32px; margin-bottom:8px !important; } /* over the inline 12px */
  .pane-l .big { font-size:24px; line-height:32px; }
  .pane .rows > div { padding-block:4px; }
  .board { height:240px; --p:124px; }
  .tk { height:116px; }
}
/* 768 and up: the left column keeps its type (the scene sits beside it, not under it); the scene tightens. */
@media (min-width:768px) and (max-height:719px) {
  .pane .rows { font-size:14px; line-height:20px; }
  .pane .rows > div, .pane .tbl > div { padding-block:8px; }
  .tk { padding:8px; }
}
/* Wide enough that a ticket's text does not wrap to a third line, so the board can be shorter too. */
@media (min-width:1200px) and (max-height:719px) {
  .tk { height:124px; }
  .board { height:256px; --p:132px; }
}

/* No pin: a screen 560 tall or less (a phone on its side). The same layout as with JavaScript off, below: keep the two in
   step. app.js reads this same query to not start the scenes. */
@media (max-height:560px) {
  #pin { height:auto; }
  #pinin { position:static; height:auto; overflow:visible; }
  .panes { flex:none; grid-template-rows:none; gap:64px; }
  .pane { grid-area:auto; visibility:visible; opacity:1; transform:none; }
  .ltabs, .pause, .finger { display:none; }
  .stream-col, .mq-in { animation:none; } /* nothing moves on its own, so the hidden pause button is not owed */
}

/* No JavaScript: undo everything that pins, hides or animates, so every section just reads.
   The inline script in <head> adds .js to <html>; with it set, the page is the mockup.
   The script tag at the end of <body> removes .js again if app.js fails to load. */
html:not(.js) #pin { height:auto; }
html:not(.js) #pinin { position:static; height:auto; overflow:visible; }
html:not(.js) .panes { flex:none; grid-template-rows:none; gap:64px; }
html:not(.js) .pane { grid-area:auto; visibility:visible; opacity:1; transform:none; }
html:not(.js) .rv { opacity:1; transform:none; }
html:not(.js) .tag-p .w { opacity:1; }
html:not(.js) .stream-col { animation:none; }
html:not(.js) .finger, html:not(.js) .pause, html:not(.js) .arch,
html:not(.js) .ltabs, html:not(.js) .toggle, html:not(.js) .mpanel { display:none; }
html:not(.js) #nojs { display:block; }
html:not(.js) #form { display:none !important; } /* the form sets display inline; without JS it cannot send, and a bare submit would put the details in the URL */