/* Shared styles for the website pages (index, terms, privacy). The app (app.html) has its own. */
/* Same design tokens as app.html */
:root{
  color-scheme:light;
  --bg:#EEF0EC; --panel:#FFFFFF; --panel-2:#F6F7F4; --ink:#1C2320; --muted:#5C6962; --line:#D8DDD8;
  --accent:#1F6B55; --accent-2:#E3EFEA; --accent-ink:#FFFFFF;
  --floor:#FBFBF8; --grid:#ECEEE9; --wall:#2A312E;
  --table:#E6D4B8; --table-stroke:#8C6E4A; --chair:#6B7872; --chair-fill:#F2F3F0;
  --fixture:#D9D2C6; --fixture-stroke:#6E6558; --block:#E5E8E3; --plant:#B8D1A8; --plant-stroke:#5E8750;
  --st-free:#FBFBF8; --st-reserved:#8DB3E2; --st-seated:#7CC49A; --st-clearing:#F0C069;
  --good:#2E8B57; --bad:#C8372D;
  --shadow:0 1px 2px rgba(20,30,25,.06),0 8px 28px rgba(20,30,25,.08);
  --f-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --f-body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1311; --panel:#171C1A; --panel-2:#1C2220; --ink:#E4EAE6; --muted:#93A19A; --line:#2B3430;
    --accent:#62C3A0; --accent-2:#1D3129; --accent-ink:#0F1311;
    --floor:#1A201D; --grid:#212824; --wall:#C9D2CD;
    --table:#6B5A43; --table-stroke:#C4A57E; --chair:#9AA8A1; --chair-fill:#2A322E;
    --fixture:#4A443B; --fixture-stroke:#B3A898; --block:#232A26; --plant:#3E5A35; --plant-stroke:#8DB57D;
    --st-free:#1A201D; --st-reserved:#35598A; --st-seated:#2F7A52; --st-clearing:#8F6818;
    --good:#5CC48A; --bad:#F0675C;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1311; --panel:#171C1A; --panel-2:#1C2220; --ink:#E4EAE6; --muted:#93A19A; --line:#2B3430;
  --accent:#62C3A0; --accent-2:#1D3129; --accent-ink:#0F1311;
  --floor:#1A201D; --grid:#212824; --wall:#C9D2CD;
  --table:#6B5A43; --table-stroke:#C4A57E; --chair:#9AA8A1; --chair-fill:#2A322E;
  --fixture:#4A443B; --fixture-stroke:#B3A898; --block:#232A26; --plant:#3E5A35; --plant-stroke:#8DB57D;
  --st-free:#1A201D; --st-reserved:#35598A; --st-seated:#2F7A52; --st-clearing:#8F6818;
  --good:#5CC48A; --bad:#F0675C;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
.eyebrow{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.lede{font-size:18px;color:var(--muted);max-width:60ch;text-wrap:pretty}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;max-width:680px}
.section-head h2{font-size:clamp(30px,4vw,42px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-weight:600;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.small{height:38px;padding:0 14px;font-size:14px}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Nav */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand b{font:700 23px/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
/* The logo is black on transparent (assets/logo-mark.png); dark themes show it in white */
.brand-mark{display:block;height:32px;width:auto;flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-mark{filter:invert(1)}}
:root[data-theme="dark"] .brand-mark{filter:invert(1)}
.nav-links{display:flex;gap:22px;font-size:15px}
.nav-links a{text-decoration:none;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .signin{font-size:15px;font-weight:500;text-decoration:none}
.nav-cta .signin:hover{text-decoration:underline}

/* Hero */
.hero{padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(42px,6vw,66px);margin:16px 0 20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:14px;font-size:14px;color:var(--muted)}
.plan-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.plan-card svg{display:block;width:100%;height:auto;border-radius:10px}
.float{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px}
.float.stats{top:-22px;left:96px;display:flex;gap:20px}   /* over the room, clear of the palette */
.stat{display:flex;flex-direction:column;line-height:1.1}
.stat small{font:500 10px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stat strong{font:600 20px var(--f-display);font-variant-numeric:tabular-nums}
.float.legend{bottom:-20px;right:24px;display:flex;gap:14px;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;border:1px solid var(--chair)}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--accent-2);color:var(--good);align-self:center}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}

/* Floorplan illustration */
.fp-floor{fill:var(--floor)}
.fp-grid{stroke:var(--grid);stroke-width:1}
.fp-wall{fill:none;stroke:var(--wall);stroke-width:6}
.fp-block{fill:var(--block);stroke:var(--wall);stroke-width:2}
.fp-label{font:500 10px var(--f-mono);letter-spacing:.1em;fill:var(--muted);text-anchor:middle}
.fp-fixture{fill:var(--fixture);stroke:var(--fixture-stroke);stroke-width:1.5}
.fp-chair{fill:var(--chair-fill);stroke:var(--chair);stroke-width:1.5}
.fp-num{font:600 11px var(--f-mono);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.fp-plant{fill:var(--plant);stroke:var(--plant-stroke);stroke-width:1.5}
.t{stroke:var(--table-stroke);stroke-width:1.5}
.t.free{fill:var(--st-free)} .t.seated{fill:var(--st-seated)} .t.reserved{fill:var(--st-reserved)} .t.clearing{fill:var(--st-clearing)}
/* The palette beside the hero plan, and its animation (hero.js) */
.fp-pal{fill:var(--panel-2);stroke:var(--line)}
.fp-pal-title{font:500 9px var(--f-mono);letter-spacing:.1em;fill:var(--muted);text-anchor:middle}
.fp-tile{fill:var(--panel);stroke:var(--line)}
.fp-tile.active{stroke:var(--accent);stroke-width:1.5}
.fp-tile-label{font:500 8.5px var(--f-body);fill:var(--muted);text-anchor:middle}
.fp-new .fp-chair{transition:transform .35s cubic-bezier(.3,1.4,.6,1),opacity .3s}
.fp-new .fp-chair.out{opacity:0}
.fp-new.resizing .fp-chair{transition:none}
.fp-clash-ring{fill:none;stroke:var(--bad);stroke-width:2.5;stroke-dasharray:5 3;opacity:0;transition:opacity .2s}
.clash .fp-clash-ring{opacity:1}
.fp-sel{fill:none;stroke:var(--accent);stroke-width:1.5}
.fp-handle{fill:var(--panel);stroke:var(--accent);stroke-width:1.5}
.fp-stepper rect{fill:var(--panel);stroke:var(--line)}
.fp-stepper circle{fill:var(--accent-2);stroke:var(--accent);stroke-width:1;transition:fill .15s}
.fp-stepper circle.pressed{fill:var(--accent)}
.fp-stepper text{font:600 9.5px var(--f-body);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.fp-stepper .sign{font:600 12px var(--f-mono);fill:var(--accent)}
.fp-cursor path{fill:#fff;stroke:#1C2320;stroke-width:1.2;stroke-linejoin:round}
.fp-fade{transition:opacity .4s}
.pill.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.pill,.stat strong{transition:background-color .2s,color .2s}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,box-shadow .2s,transform .2s}
.feature::before{content:"";position:absolute;inset:0 24px auto;height:2px;border-radius:0 0 2px 2px;background:var(--accent);opacity:0;transition:opacity .2s}
@media (hover:hover){.feature:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow);transform:translateY(-2px)}
.feature:hover::before{opacity:1}}
.feature-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.feature-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-2)}
.feature svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature-kind{--kind:var(--accent);display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--f-body);padding:6px 11px 6px 9px;border-radius:999px;color:color-mix(in srgb,var(--kind) 50%,var(--ink));background:color-mix(in srgb,var(--kind) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--kind) 35%,var(--panel))}
.feature-kind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kind)}
.kind-service{--kind:var(--st-seated)}
.kind-team{--kind:var(--st-reserved)}
.feature h3{font-size:19px;letter-spacing:-.01em}
.feature p{color:var(--muted);font-size:15px}
@media (prefers-reduced-motion:reduce){.feature,.feature:hover{transform:none;transition:none}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step}
.step{border-top:2px solid var(--accent);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.step::before{counter-increment:step;content:"0" counter(step);font:500 13px var(--f-mono);color:var(--accent)}
.step h3{font-size:21px}
.step p{color:var(--muted);font-size:15px}

/* Teams */
.teams{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.teams .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.checks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%232E8B57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.team-card{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.team-card h3{font-size:20px;margin-bottom:4px}
.team-card .biz{font-size:14px;color:var(--muted);margin-bottom:10px}
.member{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-2);color:var(--accent);font-size:13px;font-weight:600}
.member div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.member small{color:var(--muted);font-size:13px}
.role{font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* Pricing */
.price-card{max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.price{font:700 64px/1 var(--f-display);letter-spacing:-.03em}
.price-card .checks{text-align:left;margin:8px 0 12px}
.price-card .hero-cta{margin-top:0;justify-content:center}

/* FAQ */
.faq{max-width:760px;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 20px/1 var(--f-mono);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--muted)}

/* Closing band + footer */
.closing{text-align:center}
.closing .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.closing h2{font-size:clamp(32px,4.5vw,48px)}
.footer{border-top:1px solid var(--line);padding:28px 0;font-size:14px;color:var(--muted)}
.footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.footer nav{display:flex;gap:18px;margin-left:auto}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink)}

@media (max-width:900px){
  .nav-links{display:none}
  .hero .wrap,.teams .wrap{grid-template-columns:minmax(0,1fr);gap:48px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .features{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .feature{display:grid;grid-template-columns:40px minmax(0,1fr);align-content:start;gap:4px 14px;padding:18px}
  .feature-top{display:contents}
  .feature-icon{grid-row:1/span 3;width:40px;height:40px;border-radius:10px}
  .feature svg{width:20px;height:20px}
  .feature-kind{grid-column:2;justify-self:start;margin-bottom:6px;font-size:11px;padding:4px 9px 4px 7px}
  .feature h3{grid-column:2;font-size:17px}
  .feature p{grid-column:2;font-size:14px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  section{padding:64px 0}
  .hero{padding:40px 0 64px}
  .nav .wrap{gap:12px}
  .nav-cta .btn{display:none}
  .plan-card{padding:10px}
  .float.stats{position:static;box-shadow:none;border:0;padding:4px 4px 12px;justify-content:space-between}
  .float.legend{position:static;box-shadow:none;border:0;padding:12px 4px 4px;flex-wrap:wrap;gap:8px 14px}
  .price-card{padding:28px 20px}
  .features{grid-template-columns:minmax(0,1fr);gap:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .feature{border:0;border-radius:0;padding:18px 16px}
  .feature + .feature{border-top:1px solid var(--line)}
  .feature-kind{display:none}
  .feature-icon{grid-row:1/span 2}
  .footer nav{margin-left:0}
}

/* Notice bar (e.g. after deleting a business) */
.notice{background:var(--accent-2);border-bottom:1px solid var(--line);padding:12px 0;font-size:15px}
[hidden]{display:none!important}

/* Legal pages (terms.html, privacy.html) */
.legal{padding:56px 0 88px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(34px,5vw,48px);margin:12px 0 8px}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:36px}
.legal h2{font-size:24px;margin:40px 0 12px}
.legal h3{font-size:18px;margin:24px 0 8px}
.legal p,.legal li{color:var(--ink);max-width:68ch}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin:12px 0;display:flex;flex-direction:column;gap:6px}
.legal a{color:var(--accent)}
.legal table{border-collapse:collapse;width:100%;margin:12px 0;font-size:15px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.legal th{font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.table-scroll{overflow-x:auto}
/* Details only the operator can supply, e.g. company name. Fill these in before launch. */
.fill{background:color-mix(in srgb,#F0C069 45%,transparent);border-radius:4px;padding:0 4px;font-weight:600}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:15px}
.toc ol{margin:8px 0 0;padding-left:20px;columns:2;column-gap:32px}
@media (max-width:640px){.toc ol{columns:1}.legal{padding:40px 0 64px}}

/* Pricing: Business and Individual account cards */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:880px;margin:0 auto}
.plans .price-card{max-width:none;margin:0;align-items:stretch;text-align:left}
.plans .price{font-size:48px}
.plans .checks{margin:4px 0 8px;flex:1}
.plan-for{color:var(--muted);font-size:15px}
.hero-note a{color:var(--accent)}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}}