/* bayloop.app (Imants, 2026-11-10: the "Bayloop Landing Refined" canvas). One dark bay floor, no cards as structure:
   each section is type on the ground with hairlines, and only real product pieces (the night shift, the inbox, the
   phones, the queue on the TV, a site preview, the job's screen) get a frame. Lime marks one thing: the assistant acting,
   and the one main button. The Look switch (Appearance) sets data-look (dark, light), data-pal (the accent), data-shape
   (oval, rounded, strict) and data-glass (on, off) on <html> (build.mjs before the first paint, landing.js after).
   Below the page: the try-it demos' window and its parts, the sign-up and sign-in windows, the legal pages. */
:root{
  color-scheme:dark;
  --bg:#0d0e0f; --panel:#141618; --field:#1a1d20; --line:#24272b; --line-strong:#353a40;
  --text:#f3f2ef; --muted:#b3b7bc; --label:#8f949a;
  --accent:#d4f54a; --accent-hover:#e2f97e; --on-accent:#121407; --hold:#ff9a8b;
  --paper:#f2f0eb; --ink:#1b1c1e; --ink-soft:#5a5c61; --paper-line:#dedbd3;
  --f-display:"Libre Franklin",Manrope,system-ui,sans-serif;
  --f-body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --pill:999px; --wrap:1120px;
  --accent-ink:var(--accent);
}
:root[data-pal="signal"]{--accent:#ff6a1f;--accent-hover:#ff8547;--on-accent:#160a02}
:root[data-pal="amber"]{--accent:#ffb020;--accent-hover:#ffc14d;--on-accent:#1a1205}
:root[data-look="light"]{color-scheme:light;
  --bg:#efeeeb; --panel:#fbfaf8; --field:#f3f2ef; --line:#d9d7d2; --line-strong:#bfbcb5;
  --text:#15171a; --muted:#45494f; --label:#585d64; --hold:#a8233a;
  --accent:#d4f54a; --accent-hover:#c6ea2c; --on-accent:#121407; --accent-ink:#4d6600}
:root[data-look="light"][data-pal="amber"]{--accent:#ffb020;--accent-hover:#f0a000;--on-accent:#1a1205;--accent-ink:#8a5800}
:root[data-look="light"][data-pal="ceramic"]{--accent:#2d59e8;--accent-hover:#234bd0;--on-accent:#fff;--accent-ink:#2952d6}
:root[data-look="light"][data-pal="violet"]{--accent:#6a47df;--accent-hover:#5c3bcd;--on-accent:#fff;--accent-ink:#5b3bcc}
:root{--sky:none;--frost:none;--glass-shadow:none;--glass-fill:none}
:root[data-glass="on"]{
  --sky:radial-gradient(62% 36% at 16% 108%,rgba(219,135,97,.95) 0%,rgba(219,135,97,0) 70%),radial-gradient(70% 42% at 88% 114%,rgba(181,96,74,.95) 0%,rgba(181,96,74,0) 70%),radial-gradient(46% 26% at 56% 104%,rgba(75,36,57,.9) 0%,rgba(75,36,57,0) 72%),radial-gradient(110% 70% at 85% 0%,#3e54a8 0%,rgba(62,84,168,0) 60%),linear-gradient(180deg,#0a1230 0%,#1b2a63 40%,#55558f 66%,#a9727c 100%);
  --bg:#0c1432; --panel:rgba(255,255,255,.09); --field:rgba(255,255,255,.08); --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.24);
  --muted:#cdd1e2; --label:#a9afc8; --bar:rgb(20 26 48/.62); --pop:rgb(24 31 58/.95);
  --frost:blur(28px);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07)),rgb(20 26 48/.26);
  --glass-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 22px -8px rgba(4,6,18,.34),0 30px 48px -26px rgba(4,6,18,.5)}
:root[data-glass="on"][data-look="light"]{
  --sky:radial-gradient(90% 60% at 15% 5%,#fff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#d3dfef 0%,#e6edf6 50%,#f3f6fa 100%);
  --bg:#e9eff7; --panel:rgba(255,255,255,.58); --field:rgba(255,255,255,.6); --line:rgba(24,40,80,.12); --line-strong:rgba(24,40,80,.24);
  --muted:#3f4656; --label:#545c6e; --bar:rgba(255,255,255,.62); --pop:rgba(255,255,255,.96); --glass-fill:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.44));
  --glass-shadow:0 0 0 1px rgba(24,40,80,.1),inset 0 1px 0 rgba(255,255,255,.7),0 10px 22px -8px rgba(24,40,80,.16),0 30px 48px -26px rgba(24,40,80,.22)}
:root[data-glass="on"] body{background:var(--sky) fixed,var(--bg)}
:root[data-glass="on"] :is(.top,.menu){background:var(--bar);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost)}
:root[data-glass="on"] :is(.shift,#hub .inbox,.screen,.look-pop,.assist,.phone){border-color:transparent;background:var(--glass-fill);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost)}
:root[data-glass="on"] :is(.look-pop,.assist){background:var(--pop)}
:root[data-shape="rounded"]{--pill:10px;--r:12px}
:root[data-shape="strict"]{--pill:6px;--r:6px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scrollbar-color:var(--line-strong) var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* No ligatures or contextual alternates: a font may draw "(c)" as a copyright sign, as in the (c) of a list in the Terms. */
body,input,textarea,select,button{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--bg)}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:6px}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance}
h1{font-size:clamp(38px,4.9vw,64px);line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(28px,3.1vw,40px);line-height:1.1;letter-spacing:-.02em}
h3{font-size:17px;line-height:1.3;letter-spacing:-.005em}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.small{font-size:14px;color:var(--label)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mk{width:16px;height:16px;flex:none}
.mk-ring{fill:none;stroke:var(--accent-ink);stroke-width:4.2}
.mk-dot{fill:var(--text)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:var(--pill);border:1px solid var(--line-strong);background:transparent;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--label);background:var(--field)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.sm{height:36px;padding:0 16px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
.textlink{background:none;border:0;padding:0;cursor:pointer;font-weight:600;color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.textlink:hover{text-decoration-color:var(--accent)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.logo .mk{width:26px;height:26px}
.nav{display:flex;gap:26px}
.nav a{font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--text)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:20px}
.top .signin{font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer;padding:0;white-space:nowrap}
.top .signin:hover{color:var(--text)}
.langs{display:flex;border:1px solid var(--line-strong);border-radius:var(--pill);padding:3px;gap:2px}
.langs a{height:28px;padding:0 10px;border-radius:var(--pill);display:grid;place-items:center;text-decoration:none;font-weight:700;font-size:12.5px;color:var(--muted)}
.langs a[aria-current="page"]{background:var(--text);color:var(--bg)}
.look{position:relative}
.look-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:none;display:grid;place-items:center;cursor:pointer;color:var(--muted);padding:0}
.look-btn:hover{color:var(--text);border-color:var(--label)}
.look-pop{position:absolute;right:0;top:calc(100% + 12px);z-index:60;width:300px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:0 18px 40px rgba(0,0,0,.35);padding:16px;display:grid;gap:14px}
.look-pop .row{display:grid;gap:8px;font-size:13.5px;font-weight:600;color:var(--label)}
.look-pop .seg{display:flex;border:1px solid var(--line-strong);border-radius:var(--pill);padding:3px;gap:2px}
.look-pop .seg button{flex:1;height:30px;padding:0 10px;border:0;border-radius:var(--pill);background:transparent;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.look-pop .seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.look-pop .swatches{display:flex;flex-wrap:wrap;gap:8px}
.look-pop .swatches button{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:var(--pill);border:1px solid var(--line-strong);background:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--muted)}
.look-pop .swatches button[aria-pressed="true"]{border-color:var(--text);color:var(--text)}
.look-pop .swatches i{width:20px;height:20px;border-radius:50%;display:block}
@media (max-width:520px){.look-pop{position:fixed;left:16px;right:16px;top:calc(72px + env(safe-area-inset-top,0px));width:auto}}
.menu-btn{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:none;place-items:center;cursor:pointer;padding:0}
.menu{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line-strong);box-shadow:0 18px 30px rgba(0,0,0,.5)}
.menu .wrap{display:grid;height:auto;gap:0;padding-block:6px 14px;align-items:stretch}
.menu a,.menu button{display:block;padding:13px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.menu a:first-child{border-top:0}
@media (max-width:860px){.nav{display:none}.menu-btn{display:grid}.top .right{gap:10px}}
@media (min-width:861px){.menu{display:none}}
.top .start .short{display:none}
@media (max-width:360px){.top .wrap{gap:8px}.top .right{gap:6px}.logo{font-size:17px;gap:7px}.logo .mk{width:22px;height:22px}.top .btn.sm{padding:0 12px}.flowsteps button{padding-inline:1px;font-size:11.5px}}
@media (max-width:480px){.top .signin{display:none}.top .start .long{display:none}.top .start .short{display:inline}.top .wrap{gap:12px}}

section{padding-block:96px}
main>section+section,footer{background:linear-gradient(var(--line),var(--line)) top center/min(calc(100% - 40px),calc(var(--wrap) - 40px)) 1px no-repeat}
.head{display:grid;gap:16px;max-width:720px;margin-bottom:48px}
@media (max-width:700px){section{padding-block:64px}.head{margin-bottom:36px}}

/* hero: words on the left, the night shift (the bay and its log, one piece) on the right */
.hero{padding-block:72px 88px}
.hero .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.hero .lede{margin-top:22px;max-width:44ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .small{margin-top:16px}
.shift{border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--panel);min-width:0}
.shift img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:60% 55%}
.shift-bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.shift-bar b{color:var(--text);font-weight:600}
.shift-head{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.shift-head h3{font-size:15px}
.shift-head span{font-size:13.5px;color:var(--label);margin-left:auto}
@media (max-width:520px){.shift-head span{display:none}}
.log{max-height:268px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.log li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:12px 18px;border-top:1px solid var(--line);transition:background .6s}
.log li:first-child{border-top:0}
.log time{font-family:var(--f-mono);font-size:12.5px;color:var(--label);padding-top:2px}
.log p{font-size:14.5px;line-height:1.45}
.log li.now{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.log li.now time{color:var(--accent-ink)}
.stance{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.stance::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.stance.own::before{background:var(--accent-ink)}
.stance.ask::before{box-shadow:inset 0 0 0 1.5px var(--muted)}
.stance.never::before{background:var(--hold);border-radius:2px}
.log .stance{margin-top:6px}
@media (max-width:920px){.hero{padding-block:44px 64px}.hero .grid{grid-template-columns:minmax(0,1fr);gap:40px}.hero .lede{max-width:60ch}}

/* what it does: a job description in five groups, an icon for each job, then what it never does alone */
.note{display:flex;gap:10px;align-items:center;margin-bottom:8px;font-size:15px;color:var(--muted)}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--text);margin-top:1px}
.group{padding-top:26px;margin-top:20px;border-top:1px solid var(--line-strong)}
.group>h3{font-size:15px;color:var(--label);font-family:var(--f-body);font-weight:600;margin-bottom:6px}
.items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.job{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:16px;align-items:start;padding-block:16px;border-top:1px solid var(--line)}
.job:nth-child(-n+2){border-top:0}
.job b{display:block;font-size:16px;font-weight:700}
.job p{font-size:14.5px;color:var(--muted)}
.job .stance{margin-top:8px}
.try{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--pill);border:1px solid var(--line-strong);background:none;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.try:hover{border-color:var(--accent)}
.try svg{width:10px;height:10px}
.limits{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;margin-top:64px;padding-top:40px;border-top:1px solid var(--line-strong)}
.limits h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;margin-bottom:12px}
.limits h4{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--label)}
.limits .small{margin-top:14px}
.limits ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.limits li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:15px}
.limits li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:2px;background:var(--hold)}
.tabs{display:none;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:18px;padding-bottom:2px;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;height:38px;padding:0 16px;border-radius:var(--pill);border:1px solid var(--line-strong);background:none;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;scroll-snap-align:start}
.tabs button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
@media (max-width:820px){.tabs{display:flex}.group{display:none;border-top:0;margin-top:0;padding-top:8px}.group.on{display:block}.group>h3{display:none}.items{grid-template-columns:minmax(0,1fr)}.job:nth-child(2){border-top:1px solid var(--line)}.limits{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px}}
@media (max-width:520px){.limits ul{grid-template-columns:minmax(0,1fr)}.limits li:last-child{border-bottom:0}}

/* messages */
.hub{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
#hub .inbox{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);overflow:hidden;min-width:0}
#hub .inbox header{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
#hub .inbox header b{font-size:15px}
#hub .inbox header span{font-size:13px;color:var(--label)}
#hub .inbox li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
#hub .inbox li:first-child{border-top:0}
#hub .inbox .ch{width:22px;height:22px;fill:currentColor;color:var(--text)}
#hub .inbox .ch.line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#hub .inbox li b{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;font-size:14.5px;white-space:nowrap}
#hub .inbox li b span{font-weight:500;font-size:12.5px;color:var(--label);white-space:nowrap}
#hub .inbox p{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hub .inbox .st{display:grid;justify-items:end;gap:2px}
#hub .inbox time{font-family:var(--f-mono);font-size:12px;color:var(--label)}
#hub .inbox .stance{font-size:12.5px}
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:36px}
.who div{padding-block:18px;border-top:1px solid var(--line)}
.who dt{font-weight:700;font-size:16px;margin-bottom:4px}
.who dd{font-size:14.5px;color:var(--muted)}
@media (max-width:920px){.hub{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:560px){.who{grid-template-columns:minmax(0,1fr)}}

/* the apps: a phone each, drawn small, with what it is for */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.app{display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;align-items:start}
.app h3{font-size:20px;margin-bottom:6px}
.app>div>p{color:var(--muted);font-size:15.5px}
.app .points{margin-top:16px}
.app .points li{font-size:15px;padding-block:11px}
.phone{border:1px solid var(--line-strong);border-radius:30px;padding:8px;background:var(--panel)}
.scr{border-radius:23px;padding:12px 10px 0;display:flex;flex-direction:column;gap:8px;min-height:452px;font-size:12px;line-height:1.35;background:#0c0d0f;color:#f2f1ee;--s-surface:#15171a;--s-line:#23272c;--s-soft:#a3a7ae;--s-fill:#1f2226;--s-ok:#46bd91;--s-warm:#ff8a3d;--s-acc:#d4f54a;--s-on:#0e0f11}
.scr.light{background:#f3f5f8;color:#171c24;--s-surface:#fff;--s-line:#dce1e8;--s-soft:#5b6675;--s-fill:#e8ecf1;--s-ok:#17885f;--s-warm:#c4520f;--s-acc:var(--brand,#1f5fd1);--s-on:#fff}
.scr small{display:block;font-size:11px;color:var(--s-soft)}
.p-head{display:flex;align-items:center;gap:8px;padding:0 2px 8px;border-bottom:1px solid var(--s-line)}
.p-logo{width:28px;height:28px;border-radius:9px;background:var(--s-acc);color:var(--s-on);display:grid;place-items:center;font:700 11px/1 var(--f-display);flex:none;transition:background .2s}
.p-who b{display:block;font-size:13px}
.p-sec{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--s-soft);padding:2px 2px 0}
.p-card{display:grid;gap:6px;padding:10px;border-radius:13px;background:var(--s-surface);border:1px solid var(--s-line)}
.p-card.hero{border-color:color-mix(in srgb,var(--s-acc) 55%,var(--s-line))}
.p-card>b{font-size:13px}
.p-row{display:flex;align-items:center;gap:8px}
.p-row+.p-row{padding-top:8px;border-top:1px solid var(--s-line)}
.p-row .g{flex:1;min-width:0}
.p-row .g b{display:block;font-size:12.5px}
.p-row .mono{font-size:11.5px;color:var(--s-soft);width:36px;flex:none}
.p-row em{font-style:normal;font-weight:700;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--s-fill);color:var(--s-soft)}
.p-row em.ok{background:color-mix(in srgb,var(--s-ok) 16%,transparent);color:var(--s-ok)}
.p-time{font-size:13.5px;font-weight:500;white-space:nowrap}
.p-row .p-time{width:auto;color:inherit}
.p-bar{height:5px;border-radius:3px;background:var(--s-line);overflow:hidden}
.p-bar i{display:block;height:100%;background:var(--s-acc)}
.scr .go,.scr .ghost{height:34px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:12.5px}
.scr .go{background:var(--s-acc);color:var(--s-on);transition:background .2s}
.scr .ghost{border:1px solid var(--s-line);background:var(--s-surface)}
.scr .two2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.p-three{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.p-three span{height:28px;border-radius:9px;border:1px solid var(--s-line);display:grid;place-items:center;font-size:10.5px;font-weight:600;white-space:nowrap}
.p-tabs{margin:auto -10px 0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;text-align:center;font-size:10.5px;font-weight:600;color:var(--s-soft);padding:11px 4px;border-top:1px solid var(--s-line);background:var(--s-surface);border-radius:0 0 23px 23px}
.p-tabs .on{color:inherit;font-weight:700}
/* the customer's phone as a short film: the screens sit on top of each other, one shown at a time */
.flow{position:relative;padding:0;gap:0}
.fs{position:absolute;inset:0;padding:12px 10px 0;display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),visibility 0s .4s}
.fs.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.fs.gone{transform:translateX(-14px)}
.f-mid{flex:1;display:grid;justify-items:center;align-content:center;gap:10px;text-align:center;padding-inline:8px}
.f-big{font-family:var(--f-display);font-size:18px;letter-spacing:-.01em}
.f-dock{margin:auto -10px 0;padding:10px;display:grid;gap:6px;border-top:1px solid var(--s-line);background:var(--s-surface);border-radius:0 0 23px 23px}
.f-mid+.f-dock,.f-mid+.p-card{margin-top:0}
.fs .p-tabs{margin-top:auto}
.scr .go.dark{background:#111317;color:#fff}
.faceid{position:relative;width:64px;height:64px;border-radius:20px;background:color-mix(in srgb,var(--s-acc) 14%,transparent);color:var(--s-acc);display:grid;place-items:center}
.faceid .ic{width:32px;height:32px;margin:0;color:inherit;grid-area:1/1}
.faceid .tick{opacity:0;transform:scale(.6)}
.faceid.done{background:color-mix(in srgb,var(--s-ok) 16%,transparent);color:var(--s-ok)}
.fs.scanning .scan{animation:scan 1s ease-in-out}
.fs.passed .scan{opacity:0;transition:opacity .2s}
.fs.passed .tick{opacity:1;transform:none;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.fs.passed .faceid{background:color-mix(in srgb,var(--s-ok) 16%,transparent);color:var(--s-ok);transition:background .25s,color .25s}
@keyframes scan{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.hit{position:relative}
.fs.tap .hit{transform:scale(.97);filter:brightness(.92);transition:transform .15s,filter .15s}
.fs.tap .hit::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:rgba(127,127,127,.35);animation:tapring .5s ease-out forwards}
@keyframes tapring{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}
.p-opt{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:var(--s-surface);border:1px solid var(--s-line)}
.p-opt.on{border-color:var(--s-acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--s-acc) 16%,transparent)}
.p-opt .g{flex:1}
.p-opt .g b{display:block;font-size:12.5px}
.rad{width:16px;height:16px;border-radius:50%;border:2px solid var(--s-line);flex:none}
.p-opt.on .rad{border:5px solid var(--s-acc)}
.p-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.p-slots span{height:32px;border-radius:10px;border:1px solid var(--s-line);background:var(--s-surface);display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums}
.p-slots .on{background:var(--s-acc);color:var(--s-on);border-color:transparent}
.flowbox{display:grid;gap:12px;min-width:0}
.flowsteps{display:flex;flex-wrap:wrap;gap:2px;justify-content:space-between}
.flowsteps button{background:none;border:0;padding:4px 4px;font-size:12px;font-weight:600;color:var(--label);cursor:pointer;border-bottom:2px solid transparent}
.flowsteps button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){.fs{transform:none}.fs.gone{transform:none}}

@media (max-width:1000px){.apps{grid-template-columns:minmax(0,1fr);gap:48px}}
@media (max-width:560px){.app{grid-template-columns:minmax(0,1fr);gap:20px}.phone,.flowbox{width:236px}}

/* car wash: the queue as the waiting area sees it */
.wash{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.tv{min-width:0}
.tv-in{border:1px solid var(--line-strong);border-radius:var(--r);background:#0b0f17;color:#fff;padding:0 0 20px;overflow:hidden;--w:#1f5fd1}
.tv-head{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid #1d2533;font-size:17px}
.tv-head b{flex:1}
.tv-head .mono{font-size:19px}
.tv-logo{width:30px;height:30px;border-radius:9px;background:var(--w);display:grid;place-items:center;font-weight:800;font-size:14px}
.tv-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;padding:16px 22px 0}
.tv small{display:block;font-size:17px;font-weight:800;margin-bottom:10px}
.tv small.gap{margin-top:16px}
.q-now{display:grid;grid-template-columns:60px auto minmax(0,1fr);gap:8px;align-items:center;padding:10px 12px;border-radius:13px;background:#141b27;margin-bottom:8px}
.q-now.turn{background:var(--w)}
.q-now i{font-style:normal;font-size:13px;font-weight:600;color:#c9d1dc}
.q-now.turn i{color:#fff}
.q-now b,.q-next b{justify-self:end;font-size:14px;white-space:nowrap}
.q-next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding-block:5px}
.q-next b{color:#c9d1dc;font-weight:600}
.tv .plate{font-family:var(--f-mono);font-weight:700;font-size:17px;line-height:1;background:#fff;color:#0b0f17;border-radius:7px;padding:6px 10px;letter-spacing:.02em;white-space:nowrap}
.q-next .plate{font-size:15px;min-width:104px;text-align:center}
.tv .plate.q{background:#2b3647;color:#fff}
.q-next.ready .plate{background:#3ccf8e}
.tv figcaption{margin-top:12px;font-size:14px;color:var(--label)}
@media (max-width:920px){.wash{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:520px){.tv-cols{grid-template-columns:minmax(0,1fr);gap:14px;padding-inline:14px}.tv-head{padding-inline:14px}.q-now{grid-template-columns:64px auto minmax(0,1fr);gap:8px;padding-inline:10px}.tv .plate{font-size:17px}}

/* payments */
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.cols4 div{padding-top:18px;border-top:1px solid var(--line-strong)}
.cols4 h3{margin-bottom:8px}
.cols4 p{font-size:15px;color:var(--muted)}
@media (max-width:920px){.cols4{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media (max-width:480px){.cols4{grid-template-columns:minmax(0,1fr);gap:22px}}

/* sales */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.cols3 div{padding-top:18px;border-top:1px solid var(--line-strong)}
.cols3 h3{margin-bottom:8px}
.cols3 p{font-size:15px;color:var(--muted)}
.cols3 .textlink{margin-top:12px;font-size:14.5px}
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px}
.strip figure{display:grid;gap:10px;min-width:0}
.media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:var(--panel)}
.media img{width:100%;height:100%;object-fit:cover}
.strip figcaption{font-size:14px;color:var(--muted)}
.strip figcaption b{color:var(--text);font-weight:600}
.strip-cap{margin-top:14px}
.ba{--x:50%}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.ba .media{cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba img{-webkit-user-drag:none}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#f3f2ef;pointer-events:none}
.knob{position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:#f3f2ef;color:#121407;display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.ba-tag{position:absolute;bottom:10px;font-size:12.5px;font-weight:600;background:rgba(13,14,15,.8);color:#f3f2ef;padding:3px 9px;border-radius:var(--pill);pointer-events:none}
.ba-tag.l{left:10px}.ba-tag.r{right:10px}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.media:has(input:focus-visible) .knob{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:820px){.cols3{grid-template-columns:minmax(0,1fr);gap:24px}.strip{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}}

/* website */
.web{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.points{display:grid;margin-top:28px}
.points li{padding-block:13px;border-top:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.points b{color:var(--text)}
.snippet{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:var(--pill);padding:5px 5px 5px 18px;margin-top:24px}
.snippet code{flex:1;min-width:0;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.web .small{margin-top:10px}
.colours{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;font-weight:600}
.colours div{display:flex;gap:8px}
.colours button{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);outline:1px solid var(--line-strong);cursor:pointer;padding:0}
.colours button[aria-pressed="true"]{outline:2px solid var(--text)}
.web .site{border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--paper);color:var(--ink);min-width:0}
.web .site .url{padding:9px 16px;background:var(--panel);color:var(--muted);font-family:var(--f-mono);font-size:12.5px;border-bottom:1px solid var(--line)}
.web .site .url b{color:var(--text);font-weight:500}
:root[data-glass="on"] .web .site .url{background:var(--pop)}
.web .site .in{padding:22px;display:grid;gap:16px}
.web .site h4{font-family:var(--f-display);font-size:22px;margin:0;letter-spacing:-.02em}
.web .site h4+p{font-size:13.5px;color:var(--ink-soft)}
.web .site .gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.web .site .gal img{height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;width:100%}
.web .site .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.web .site .box{background:#fff;border:1px solid var(--paper-line);border-radius:12px;padding:14px;display:grid;gap:8px;font-size:13px}
.web .site .box>b{font-size:14px}
.web .site .f{height:34px;border-radius:9px;border:1px solid var(--paper-line);display:flex;align-items:center;padding:0 12px;color:var(--ink-soft)}
.web .site .go{height:36px;border-radius:var(--pill);background:var(--brand,var(--ink));color:#fff;display:grid;place-items:center;font-weight:700;transition:background .2s}
.web .site .m{background:var(--paper);border-radius:12px 12px 12px 4px;padding:8px 11px;line-height:1.4}
.web .site .m.a{transition:background .2s;background:var(--brand,var(--ink));color:#fff;border-radius:12px 12px 4px 12px}
@media (max-width:920px){.web{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:520px){.web .site .two{grid-template-columns:minmax(0,1fr)}}

/* one job through the system: a real sequence, each step with the screen it happens on */
.tour{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.trail li{border-top:1px solid var(--line)}
.trail li:last-child{border-bottom:1px solid var(--line)}
.trail button{display:grid;grid-template-columns:84px minmax(0,1fr);gap:2px 16px;width:100%;padding:14px 12px;background:none;border:0;text-align:left;cursor:pointer;border-radius:0;transition:background .2s}
.trail button:hover{background:var(--panel)}
.trail button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.trail time{grid-row:1/4;font-family:var(--f-mono);font-size:12.5px;color:var(--label);padding-top:3px}
.trail button[aria-pressed="true"] time{color:var(--accent-ink)}
.trail b{font-size:16px}
.trail p{font-size:14.5px;color:var(--muted)}
.does{display:flex;gap:9px;align-items:flex-start;margin-top:4px;font-size:14px;color:var(--text)}
.does .mk{margin-top:3px;width:14px;height:14px}
.screen{position:sticky;top:calc(88px + env(safe-area-inset-top,0px));border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--panel);min-width:0}
.screen .bar{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:11px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.screen .bar span{font-family:var(--f-mono);font-size:12px;color:var(--label)}
.shot{aspect-ratio:16/10;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--line) 55%,transparent) 14px 15px)}
.shot span{font-size:13px;font-weight:600;color:var(--label)}
.shot p{font-size:16px;max-width:34ch}
.swipe{display:none;margin-top:12px;font-size:13.5px;color:var(--label)}
.also{margin-top:28px;font-size:15px;color:var(--muted);max-width:86ch}
.also b{color:var(--text)}
@media (max-width:920px){.tour{grid-template-columns:minmax(0,1fr);gap:24px}.screen{position:static;order:-1}}
@media (max-width:760px){
  .trail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
  .trail::-webkit-scrollbar{display:none}
  .trail li,.trail li:last-child{flex:0 0 84%;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .trail li:has(button[aria-pressed="true"]){border-color:var(--line-strong)}
  .trail button{grid-template-columns:minmax(0,1fr);height:100%;align-content:start;padding:14px 16px}
  .trail time{grid-row:auto;padding:0 0 2px}
  .swipe{display:block}
}

/* price */
.price{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.big{font-family:var(--f-display);font-size:clamp(64px,7vw,88px);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.big small{font-family:var(--f-body);font-size:18px;color:var(--muted);font-weight:600;letter-spacing:0;margin-left:8px}
.ticks{margin-top:24px;display:grid;gap:10px;font-size:15.5px}
.ticks li{display:flex;gap:12px}
.ticks li::before{content:"";flex:none;width:13px;height:7px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg);margin-top:7px}
.use h3{margin-bottom:6px}
.use li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding-block:16px;border-top:1px solid var(--line)}
.use ul{margin-top:18px;border-bottom:1px solid var(--line)}
.use b{font-size:15.5px}
.use li span{grid-column:1;font-size:14px;color:var(--muted)}
.use li i{grid-column:2;grid-row:1;font-style:normal;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.use li i.inc{color:var(--accent-ink)}
.use .small{margin-top:16px}
@media (max-width:920px){.price{grid-template-columns:minmax(0,1fr);gap:48px}}

/* questions and the call */
.end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.end h2{margin-bottom:20px}
details{border-top:1px solid var(--line);padding-block:16px}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary svg{flex:none;width:12px;height:12px;color:var(--label);transition:transform .2s}
details[open] summary svg{transform:rotate(45deg)}
details p{color:var(--muted);font-size:15px;margin-top:10px;max-width:60ch}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.field{display:grid;gap:6px;min-width:0;font-size:13.5px;color:var(--muted);font-weight:600}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{height:46px;border-radius:10px;border:1px solid var(--line-strong);background:var(--field);padding:0 14px;font-size:15px;width:100%;color:var(--text);font-weight:500;caret-color:var(--accent)}
.field textarea{height:92px;padding:12px 14px;resize:vertical}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--accent)}
:root[data-glass="on"] .field select option{background:var(--bg)}
.send{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:18px}
@media (max-width:920px){.end{grid-template-columns:minmax(0,1fr);gap:56px}}
@media (max-width:520px){.fields{grid-template-columns:minmax(0,1fr)}}
/* the forms' own parts (assets/signup.js): the address with its suffix, the free-or-taken hint, the message, the robot check */
.address{display:flex;align-items:center;gap:8px}
.address input{flex:1;min-width:0}
.suffix{font-family:var(--f-mono);font-size:13px;color:var(--muted);white-space:nowrap}
.hint{font-size:13px;color:var(--label)}
.field .hint.ok{color:var(--green)}
.field .hint.bad{color:var(--red)}
.msg{margin-top:12px;font-size:14px;color:var(--red);font-weight:600}
.msg:empty{display:none}
.msg.ok{padding:14px 16px;border-radius:var(--r-row);background:var(--accent-soft);color:var(--accent-ink)}
.turnstile{margin-top:12px}
.turnstile:empty{display:none}
.form-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.link{all:unset;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px}
.link:hover{color:var(--text)}

/* footer */
footer{padding-block:56px 32px;font-size:14.5px}
.foot{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.foot .about p{color:var(--muted);max-width:34ch;margin-top:14px}
.foot .about .mail{display:inline-block;margin-top:14px;font-weight:600;text-decoration:none}
.foot h3{font-family:var(--f-body);font-size:13.5px;font-weight:600;color:var(--label);margin-bottom:14px}
.foot ul{display:grid;gap:10px}
.foot ul a,.foot ul button{color:var(--text);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.foot a:hover,.foot ul button:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--label);font-size:13.5px}
@media (max-width:820px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot .about{grid-column:1/-1}}

/* the assistant on this page: the same chat a workshop puts on its own site (scripted answers for now, landing.js) */
.ask-btn{position:fixed;z-index:45;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ask-btn:hover{background:var(--accent-hover)}
.ask-btn .ic{color:inherit;width:24px;height:24px;margin:0}
.assist{position:fixed;z-index:46;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;padding:0;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.45);overflow:hidden}
.assist header{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.assist header .mk{width:22px;height:22px}
.assist header div{flex:1;min-width:0;display:grid}
.assist header b{font-size:15px}
.assist header span{font-size:12.5px;color:var(--label)}
.assist header button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:none;display:grid;place-items:center;cursor:pointer;padding:0}
.assist ol{flex:1;overflow:auto;display:grid;gap:10px;align-content:start;padding:16px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.assist li{max-width:88%;font-size:14.5px;line-height:1.45;padding:9px 13px;border-radius:14px 14px 14px 4px;background:var(--field)}
.assist li.me{justify-self:end;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--accent) 20%,transparent)}
.ask-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.ask-sugg button{height:auto;min-height:34px;padding:6px 12px;border-radius:var(--pill);border:1px solid var(--line-strong);background:none;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.ask-sugg button:hover{border-color:var(--accent-ink)}
.assist form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.assist input{flex:1;min-width:0;height:40px;border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--field);padding:0 14px;font-size:14.5px;caret-color:var(--accent-ink)}
.assist input:focus{outline:none;border-color:var(--accent-ink)}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:200;background:var(--text);color:var(--bg);padding:11px 18px;border-radius:var(--pill);font-weight:600;font-size:14px;max-width:calc(100% - 32px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* ---------- below the page: the try-it demos (assets/demo-<lang>.js), the sign-up, sign in, the legal pages ---------- */
/* The demos' own tokens, on the page's ground: the soft fills, the status colours and the corners follow the Look. */
:root{
  --raised:#24272b; --raised-hover:#2b2f34; --line-hover:#4a4f56; --panel-hover:#1b1d20; --scrim:rgba(6,7,8,.78); --shadow:rgba(0,0,0,.45);
  --blue:#a3c4ff; --booked:#6cb8ff; --violet:#c9a7ff; --orange:#ff8a3d; --yellow:#f5c451; --red:#ff8e7e; --green:#7fdca4;
  --accent-text:var(--accent-ink);
  --r-pill:var(--pill); --r-field:10px; --r-row:var(--r); --r-tile:var(--r); --r-panel:calc(var(--r) + 4px); --r-sheet:calc(var(--r) + 8px);
}
:root{--accent-soft:color-mix(in srgb,var(--accent) 12%,transparent); --orange-soft:color-mix(in srgb,var(--orange) 13%,transparent); --red-soft:color-mix(in srgb,var(--red) 14%,transparent); --green-soft:color-mix(in srgb,var(--green) 13%,transparent); --blue-soft:color-mix(in srgb,var(--blue) 13%,transparent)}
:root[data-look="light"]{--raised:#e4e3df; --raised-hover:#dad8d3; --line-hover:#9a978f; --panel-hover:#fff; --scrim:rgba(20,22,26,.42); --shadow:rgba(20,24,30,.14);
  --green:#136b45; --yellow:#8f6100; --red:#a8233a; --blue:#0b55c4; --booked:#0b55c4; --orange:#9a4009; --violet:#5b38cf}
:root[data-glass="on"]{--raised:rgba(255,255,255,.12); --raised-hover:rgba(255,255,255,.18); --panel-hover:rgba(255,255,255,.14)}
:root[data-glass="on"][data-look="light"]{--raised:rgba(24,40,80,.08); --raised-hover:rgba(24,40,80,.13); --panel-hover:rgba(255,255,255,.8)}
.label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
.num{font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;background:var(--raised);color:var(--muted);white-space:nowrap}
.chip.own{background:var(--accent-soft);color:var(--accent-text)}
.chip.ask{background:var(--blue-soft);color:var(--blue)}
.chip.never{background:var(--red-soft);color:var(--red)}
.chip.warn{background:var(--orange-soft);color:var(--orange)}
.chip.ok{background:var(--green-soft);color:var(--green)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.avatar-ai{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;font-weight:800;font-size:12px;font-family:var(--f-mono);flex:none}
.photo{position:absolute;inset:0;background:#111 center/cover no-repeat}
.bubble{background:var(--raised);border-radius:16px 16px 16px 6px;padding:8px 12px;font-size:13px;line-height:1.4;max-width:92%}
.bubble.me{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:16px 16px 6px 16px;justify-self:end}
.bubble small{display:block;color:var(--muted);font-size:11px;margin-bottom:2px;font-family:var(--f-mono)}
.modal .plate{font-family:var(--f-mono);font-size:11px;background:#f2f1ee;color:#111;border-radius:5px;padding:1px 6px;letter-spacing:.04em;white-space:nowrap}
.modal .seg{display:inline-flex;background:var(--field);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;gap:2px}
.modal .seg button{height:30px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.modal .seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.modal .seg button:disabled{opacity:.35;cursor:not-allowed}
.modal .btn{background:var(--raised)}
.modal .btn:hover{background:var(--raised-hover)}
.modal .btn.primary{background:var(--accent)}
.modal .btn.primary:hover{background:var(--accent-hover)}
.modal-body,.tabs-sc,.tbl-wrap,.planner{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}

/* modals */
.modal{position:fixed;inset:0;z-index:100;background:var(--scrim);display:flex;align-items:stretch;justify-content:center;padding:16px}
.modal-box{background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-sheet);width:100%;max-width:1240px;display:flex;flex-direction:column;overflow:hidden;animation:pop .25s ease}
.modal.narrow .modal-box{max-width:580px;margin:auto 0;max-height:100%}
@keyframes pop{from{transform:scale(.98);opacity:0}}
.modal-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head .t{min-width:0}
.modal-head h3{font-size:18px}
.modal-head p{font-size:13px;color:var(--muted)}
.modal-head .x{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--raised);cursor:pointer;font-size:18px;line-height:1}
.modal-body{flex:1;overflow:auto;padding:20px}
.modal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--line);background:var(--panel)}
.modal-foot .step{font-size:13.5px;color:var(--muted);flex:1;min-width:200px}
.modal-foot .step b{color:var(--accent-text)}
.tabs-sc{display:flex;gap:6px;overflow-x:auto;padding:10px 20px;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs-sc button{flex:none;height:34px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:700;font-size:12.5px;cursor:pointer}
.tabs-sc button[aria-current="true"]{background:var(--raised);color:var(--text);border-color:var(--line-strong)}
dialog.signin{border:1px solid var(--line-strong);border-radius:var(--r-sheet);background:var(--bg);color:var(--text);padding:24px;width:min(460px,calc(100% - 32px))}
dialog.signin::backdrop{background:var(--scrim)}
dialog.signin h3{margin-bottom:6px}
dialog.signin .ctas{display:flex;gap:10px;margin-top:16px}

/* the demos' shared parts */
.ui-grid{display:grid;gap:14px}
.ui-2{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
@media (max-width:860px){.ui-2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-tile);padding:16px;min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ai-note{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 14px;border-radius:var(--r-row);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-size:14px}
.ai-note .avatar-ai{width:28px;height:28px;font-size:10.5px}
.ai-note.held{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.ai-note.held .avatar-ai{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.ai-note.askn{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.ai-note.askn .avatar-ai{background:color-mix(in srgb,var(--blue) 18%,transparent);color:var(--blue)}
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.2}}

/* planner */
.planner{overflow-x:auto}
.pl{min-width:720px;display:grid;grid-template-columns:150px minmax(0,1fr)}
.pl .hours{display:grid;grid-template-columns:repeat(10,1fr);font-family:var(--f-mono);font-size:11px;color:var(--label);padding-bottom:6px;border-bottom:1px solid var(--line)}
.pl .bayname{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);font-size:13px}
.pl .bayname b{display:block;font-size:14px}
.pl .bayname span{font-size:11.5px;color:var(--label)}
.pl .lane{position:relative;border-bottom:1px solid var(--line);background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:10% 100%;min-height:64px;transition:background-color .15s}
.pl .lane.over{background-color:color-mix(in srgb,var(--accent) 7%,transparent)}
.pl .lane.bad{background-color:color-mix(in srgb,var(--red) 8%,transparent)}
.jobbar{position:absolute;top:10px;bottom:10px;border-radius:12px;padding:6px 10px;font-size:12px;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid rgba(255,255,255,.08)}
.jobbar b{display:block;font-size:12px}
.wait{display:flex;gap:10px;flex-wrap:wrap}
.wjob{touch-action:none;user-select:none;cursor:grab;background:var(--field);border:1px dashed var(--line-strong);border-radius:var(--r-row);padding:10px 14px;font-size:13px;min-width:200px;flex:1}
.wjob b{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wjob span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.wjob.placed{opacity:.35;cursor:default}
.wjob.sel{border-color:var(--accent);border-style:solid}
.drag-ghost{position:fixed;z-index:300;pointer-events:none;opacity:.9;transform:rotate(-2deg);box-shadow:0 12px 30px rgba(0,0,0,.5)}

/* invoice */
.inv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:760px){.inv-cols{grid-template-columns:minmax(0,1fr)}}
.doc{background:#f4f2ed;color:#1b1c1e;border-radius:var(--r-tile);padding:18px;font-size:13px}
.doc h4{font-family:var(--f-display);font-size:20px;margin:0}
.doc .meta{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:10px 0;font-size:12px;color:#55575c}
.doc .meta .v{color:#1b1c1e;font-family:var(--f-mono);font-size:11.5px;transition:background .3s}
.doc table{width:100%;border-collapse:collapse;font-size:12.5px}
.doc th{text-align:left;font-weight:700;color:#77797e;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:6px 4px;border-bottom:1px solid #dcd9d0}
.doc td{padding:7px 4px;border-bottom:1px solid #e6e3db;transition:background .3s}
.doc td.r,.doc th.r{text-align:right;font-variant-numeric:tabular-nums}
.doc .flag{background:#ffe1d6}
.doc .okc{background:#e6f5c4}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:14px;align-items:start;opacity:.35;transition:opacity .3s}
.checks li.on{opacity:1}
.checks li .s{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--raised)}
.checks li.good .s{background:var(--green-soft);color:var(--green)}
.checks li.badc .s{background:var(--red-soft);color:var(--red)}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px;min-height:340px}
.chat .msg-b{max-width:min(620px,90%);padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5}
.chat .msg-b.u{align-self:flex-end;background:color-mix(in srgb,var(--accent) 14%,transparent);border-bottom-right-radius:6px}
.chat .msg-b.a{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:6px}
.chat .msg-b ul{margin:6px 0 0;padding-left:18px}
.chat .msg-b small{display:block;font-family:var(--f-mono);font-size:11px;color:var(--label);margin-bottom:3px}
.sugg{display:flex;flex-wrap:wrap;gap:8px}
.sugg button{height:auto;min-height:36px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--field);font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.sugg button:hover{border-color:var(--accent)}
.as-input{display:flex;gap:8px}
.as-input input{flex:1;min-width:0;height:46px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--field);padding:0 18px}

/* inbox */
.modal .inbox{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}
@media (max-width:820px){.modal .inbox{grid-template-columns:minmax(0,1fr)}}
.thread-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:12px;border-radius:var(--r-row);border:1px solid var(--line);background:var(--panel);cursor:pointer;text-align:left;width:100%}
.thread-item[aria-current="true"]{border-color:var(--accent)}
.thread-item .av{width:36px;height:36px;border-radius:50%;background:var(--raised);display:grid;place-items:center;font-weight:800;font-size:12px}
.thread-item b{font-size:14px;display:flex;justify-content:space-between;gap:6px}
.thread-item p{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal .ch{font-family:var(--f-mono);font-size:11px;padding:1px 7px;border-radius:var(--r-pill);background:var(--raised);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}

/* ad maker */
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ph{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;cursor:pointer;border:2px solid transparent;padding:0;background:none}
.ph.sel{border-color:var(--accent)}
.ph .tag{position:absolute;left:6px;top:6px;font-family:var(--f-mono);font-size:11px;background:rgba(0,0,0,.6);color:#fff;padding:2px 7px;border-radius:var(--r-pill)}
.ph .n{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:12px;display:none;place-items:center}
.ph.sel .n{display:grid}
.stage{position:relative;margin:0 auto;border-radius:22px;overflow:hidden;background:#000;border:1px solid var(--line-strong)}
.stage.r916{width:min(260px,100%);aspect-ratio:9/16}
.stage.r11{width:min(340px,100%);aspect-ratio:1/1}
.stage .frame{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.stage .frame.on{opacity:1}
.stage .frame .photo{animation:kb 2.6s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.stage .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7))}
.stage .cap{position:absolute;left:14px;right:14px;bottom:18px;color:#fff;font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.stage .cap small{display:block;font-family:var(--f-body);font-weight:600;font-size:12px;opacity:.85;margin-top:6px}
.stage .endcard{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:#121407}
.stage .endcard b{font-family:var(--f-display);font-size:24px;display:block}
.stage .endcard .cta{display:inline-block;margin-top:12px;background:#121407;color:#fff;border-radius:var(--r-pill);padding:8px 16px;font-weight:700;font-size:13px}
.stage .prog{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:4px;z-index:2}
.stage .prog i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.stage .prog i b{display:block;height:100%;width:0;background:#fff}
.modal .swatches{display:flex;gap:8px}
.modal .swatches button{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.modal .swatches button[aria-pressed="true"]{border-color:var(--text)}

/* security */
.site-plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.site-plan{grid-template-columns:minmax(0,1fr)}}
.zone{background:var(--field);border:1px solid var(--line);border-radius:var(--r-tile);padding:12px}
.zone .spots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.spot{min-height:62px;border-radius:14px;border:1px dashed var(--line-strong);background:var(--panel);padding:8px;font-size:11.5px;color:var(--label);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:5px}
.spot.free:hover{border-color:var(--accent);color:var(--text)}
.spot.has{border-style:solid}
.spot.unsafe{border-color:color-mix(in srgb,var(--orange) 70%,transparent);background:var(--orange-soft)}
.spot.safe{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.spot.picked{outline:2px solid var(--accent);outline-offset:2px}
.keys{display:grid;gap:8px}
.keyrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--r-row);background:var(--panel);border:1px solid var(--line);font-size:13.5px}

/* stock */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--label);text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
.lvl{width:90px;height:6px;background:var(--raised);border-radius:99px;overflow:hidden}
.lvl i{display:block;height:100%;border-radius:99px}
input[type=range]{accent-color:var(--accent);width:100%}
.po{border:1px solid var(--line);border-radius:var(--r-tile);padding:14px;background:var(--panel);display:grid;gap:8px;font-size:13.5px;animation:pop .3s ease}

/* mail sort */
.mail-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 16px;border-radius:var(--r-row);background:var(--panel);border:1px solid var(--line);transition:border-color .3s}
.mail-row b{font-size:14px}
.mail-row p{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-row .res{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mail-row.done{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}

/* legal pages */
.legal{max-width:780px;padding-block:56px 80px}
.legal h1{font-size:clamp(34px,5vw,52px);margin-bottom:10px}
.legal h2{font-size:22px;margin:36px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--muted);font-size:16px;line-height:1.65}
.legal p+p{margin-top:12px}
.legal ul{list-style:disc;padding-left:20px;display:grid;gap:6px;margin:10px 0 0}
.legal .updated{font-family:var(--f-mono);font-size:12.5px;color:var(--label)}
.legal .todo{background:var(--orange-soft);color:var(--orange);border-radius:6px;padding:0 6px;font-weight:700}
/* Live legal pages (apps/api/src/setup.ts): the version line, a version coming, the history, all documents. */
.legal .version{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:12px;font-family:var(--f-mono);font-size:12.5px;color:var(--label)}
.legal .notice{margin:18px 0 6px;padding:14px 16px;border-radius:var(--r-row);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--text);font-size:15px}
.legal .notice p{color:var(--text);margin:4px 0 0}
.legal .notice a{color:var(--accent-text);font-weight:700}
.legal .history,.legal .docs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding:0;list-style:none}
.legal .history a,.legal .docs a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--field);text-decoration:none;font-size:13.5px;font-weight:600;color:var(--muted)}
.legal .history a[aria-current="page"],.legal .docs a[aria-current="page"]{border-color:var(--accent);color:var(--text)}
.legal .index{display:grid;gap:10px;margin-top:24px}
.legal .index a{display:grid;gap:2px;padding:16px 18px;border-radius:var(--r-tile);border:1px solid var(--line);background:var(--panel);text-decoration:none}
.legal .index a b{font-size:17px;color:var(--text)}
.legal .index a span{font-size:13px;color:var(--label);font-family:var(--f-mono)}
.legal h2+p,.legal h2+ul{margin-top:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}