/* Shared shell for every public page (doc 10 surfaces).
   Tokens + the header, so a customer moving business page → menu → advance orders →
   pay never sees the chrome change under them. Page-specific layout stays local
   to each page; only what must match lives here. Paper & Ink per docs/DESIGN.md. */

:root{
  --paper:#F7F6F3; --card:#FFFFFF; --hair:#E7E5E0;
  --ink:#1C1B19; --ink2:#5F5D57; --ink3:#8F8C85;
  --accent:#4C51E0;                 /* Indigo — shell accent, never the tenant's */
  --brand:#111111; --on-brand:#ffffff;   /* set per business at runtime */
  /* ONE measure for every surface. The business page and the order page used to
     set their own (1000 vs 760) with differently-contained heroes, so the two
     read as separate sites on a wide screen. Everything centres on this. */
  --shell:100%; --gutter:20px;
}
@media (min-width:720px){ :root{ --shell:880px; --gutter:40px } }
@media (min-width:1100px){ :root{ --shell:1000px } }

/* The shared content measure: same width and gutters as the header's inner box,
   so body text lines up with the business name above it on every page. */
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
@media (prefers-color-scheme: dark){
  :root{ --paper:#161512; --card:#1E1C18; --hair:#2A2722;
         --ink:#ECEAE4; --ink2:#A8A499; --ink3:#6E6A60; }
}

*{box-sizing:border-box;margin:0}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
.serif{font-family:ui-serif,"New York",Georgia,serif}
button{font:inherit;border:0;cursor:pointer;background:none;color:inherit}

/* ── the header every surface shares ── */
.hero{background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 82%,#fff 0%),var(--brand));
  color:var(--on-brand);padding:34px 0 24px}
.hero .in{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.hero .logo{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:800;
  margin-bottom:12px;overflow:hidden}
.hero .logo img{width:100%;height:100%;object-fit:cover}
.hero h1{font-size:28px;font-weight:700;letter-spacing:-.01em}
.hero p{opacity:.92;font-size:14.5px;margin-top:4px}
.hero .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;background:rgba(255,255,255,.22);padding:4px 10px;
  border-radius:8px;margin-bottom:10px}
/* Back to the business page — the way out that the order surfaces were missing. */
.hero .back{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;
  font-size:13.5px;font-weight:600;opacity:.9;margin-bottom:14px}
.hero .back:hover{opacity:1}

@media (min-width:720px){
  .hero{padding:48px 0 34px}
  .hero h1{font-size:38px}
  .hero p{font-size:16px;margin-top:6px}
  .hero .logo{width:70px;height:70px;font-size:31px;border-radius:19px}
}