/* Self-hosted fonts — replaces the demo's Google Fonts @import (the ONLY
   intended divergence from reference/approved-demo.html; everything below the
   fold line is the approved artifact, ported verbatim).

   THE THREE FACES THIS SITE ACTUALLY USES LOAD FROM THIS DEPLOYMENT (slice 15,
   2026-08-16). They were pointed at the PRODUCTION Next domain by absolute URL,
   so the demo's typography depended on a SECOND Vercel project being reachable
   — and demo/fonts/ has held byte-identical copies the whole time (sha256
   23aab0b2 / 44241ec6 / c9407645, matched against public/fonts/ before the
   switch). Nothing about the type changes; what changes is that it no longer
   travels over the network to another deployment to get here.

   IT ALSO MADE THE FONT-STATE MEASUREMENT DISHONEST, which is how this was
   found. CLAUDE.md's rule is that every width assertion runs twice, fonts
   loaded and fonts blocked. In a sandbox that cannot reach the production
   domain BOTH runs are the fallback state — document.fonts.check('1em "Big
   Shoulders Display"') === false with nothing blocked — so the two-state guard
   was measuring one state twice and could not have caught a loaded-font
   regression. Serving the faces locally is what makes the "loaded" half real.

   The candidate faces further down still point at the production domain on
   purpose: they are declared and UNUSED, no page rule selects them, so no
   browser ever requests one. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/anton-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-var-latin.woff2') format('woff2');
}

/* Space Mono (SIL OFL) is used by the internal /styles compare page only. */
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/space-mono-latin.woff2') format('woff2'); }

/* TYPOGRAPHY-ROUND CANDIDATES (all SIL OFL, self-hosted, no network calls).
   Declared but UNUSED by any page rule, so a browser downloads none of them
   until the dev-only type lab actually switches to one. That is why they cost
   nothing against the weight budget. The next round picks a display face to
   replace Anton, whose apexes only approximate the badge's lettering. */
@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/archivo-black-latin.woff2') format('woff2'); }
@font-face { font-family:'Alfa Slab One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/alfa-slab-one-latin.woff2') format('woff2'); }
@font-face { font-family:'Bungee'; font-style:normal; font-weight:400; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/bungee-latin.woff2') format('woff2'); }
@font-face { font-family:'Titan One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/titan-one-latin.woff2') format('woff2'); }
@font-face { font-family:'Passion One'; font-style:normal; font-weight:700; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/passion-one-latin.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/figtree-latin.woff2') format('woff2'); }
/* TYPE-MATCH CANDIDATES (round E). The badge's lettering is a HEAVY CONDENSED
   face with tapered, slightly pointed terminals and tight tracking, not a slab.
   Alfa Slab One is the incumbent favourite and is kept as the control. Lilita
   One is the hybrid reading: condensed weight with the badge's rounded softness.
   Declared but unused, so nothing downloads until the type lab selects one. */
@font-face { font-family:'Fjalla One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/fjalla-one-latin.woff2') format('woff2'); }
/* USED — the display face the whole site is set in, so it loads from here (see
   the note at the top of this file). */
@font-face { font-family:'Big Shoulders Display'; font-style:normal; font-weight:800; font-display:swap;
  src:url('./fonts/big-shoulders-latin.woff2') format('woff2'); }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/oswald-latin.woff2') format('woff2'); }
@font-face { font-family:'Saira Condensed'; font-style:normal; font-weight:900; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/saira-cond-latin.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:900; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/barlow-cond-latin.woff2') format('woff2'); }
@font-face { font-family:'Archivo Condensed'; font-style:normal; font-weight:900; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/archivo-cond-latin.woff2') format('woff2'); }
@font-face { font-family:'Lilita One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/lilita-one-latin.woff2') format('woff2'); }

@font-face { font-family:'Public Sans'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('https://smashtime-website.vercel.app/fonts/public-sans-latin.woff2') format('woff2'); }

/* ---- approved demo CSS below — do not "clean up" (see DECISIONS.md) ---- */

:root{
  --ink:#0A0A0A; --surface:#16120F; --card:#1b1714;
  --red:#E0241B; --red-deep:#B3160F; --flame:#F7641E; --cheese:#F9B017;
  /* Price TEXT only. The brand red is 4.18:1 on ink and 3.76:1 on a raised
     panel, under the 4.5:1 floor; this clears it on every dark ground we use
     (5.02:1 worst case) and still reads as the same red. Fills and buttons keep
     --red. DESIGN.md principle 3: voice never costs readability. */
  --red-lit:#FF3B2E;
  --cream:#F6ECD9; --white:#fff; --muted:#A8A6A2; --pickle:#3E8E72;
  /* ANTON IS THE FONT (Carlos, 2026-08-16; landed slice 23 after slice 13
     produced no commit). It was already NAMED here, second, behind Big
     Shoulders — which is why the record said "Anton locked" while every
     visitor got Big Shoulders. A stack that mentions a face is not a stack
     that uses it. Block 67 measures the RENDERED page for exactly that. */
  --display:'Anton',Impact,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* ------------------------------------------------------------------ *
   * THE BADGE PALETTE — the client's real logo is the source of truth.  *
   * These replace our earlier approximations. Contrast is measured, and *
   * the numbers below are load-bearing: see DESIGN.md.                  *
   * ------------------------------------------------------------------ */
  --sign-red:#C8322A;      /* the ring red */
  --butter:#F5DFA8;        /* the cream. The colour of BURGER CO itself. */
  --cheese-gold:#E8A33A;   /* the bun / the melt */
  --patty:#7B4A2A;         /* the meat */
  --outline:#14100E;       /* every keyline, and type on cream */

  /* Type behind variables so a face swap is ONE change, not a refactor
     (typography round is next). The lab bar writes these at runtime. */
  --font-display:var(--display);
  --font-body:var(--body);
  --type-scale:1;          /* multiplies the display scale */
  --type-tracking:0em;     /* added to display tracking */
}
*{margin:0;padding:0;box-sizing:border-box}
/* ⚠️ S94/2 — SAFARI'S OWN CHROME, NOT OUR LAYOUT. UNVERIFIED: see below.
   Carlos sees the iPhone Safari bottom bar paint CREAM/TAN against this dark
   page, on the checkout. <meta name="theme-color" content="#100c0a"> is present
   and correct on production, so the tag is not missing - it is being ignored or
   overridden, and Safari falls back to deciding for itself.

   TWO THINGS MEASURED HERE THAT COULD MAKE IT DECIDE WRONG, both true before
   this change (headless Chromium, 390x664, on the review step):

     getComputedStyle(documentElement).colorScheme === "normal"
        The document NEVER said it was dark. color-scheme: dark existed in
        exactly one place in the whole demo - the catering form's inputs - so
        the browser had no document-level statement to work from and is entitled
        to render its UI light.

     getComputedStyle(documentElement).backgroundColor === "rgba(0, 0, 0, 0)"
        The ROOT element had no background at all. Only <body> carried one. A
        browser sampling the root for its chrome finds transparent and falls
        back to its own default, which is light.

   Both are fixed here, and neither touches a single one of the page's own
   colours - html takes the same --ink <body> already had, so nothing repaints.
   S94/2.4: the cream checkout card is the design and is not being altered to
   chase this.

   🔴 THIS IS NOT VERIFIED AND MUST NOT BE REPORTED AS FIXED. There is no iOS
   Safari in this container and no way to reproduce the symptom here. Carlos is
   the only instrument. What is verified is that the two conditions above were
   real and are now gone. */
html{
  color-scheme: dark;
  background: var(--ink);
}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:var(--body);line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.5px}

/* sticker buttons — red fill, white text, hard offset shadow (7th St signature) */
.btn{display:inline-block;background:var(--red);color:#fff;font-family:var(--display);font-size:1.05rem;
  letter-spacing:1px;text-transform:uppercase;padding:14px 30px;border-radius:8px;border:none;cursor:pointer;
  box-shadow:5px 5px 0 var(--red-deep);transition:transform .12s ease,box-shadow .12s ease,background .2s ease}
.btn:hover{background:#f23128;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--red-deep)}
.btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--red-deep)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);box-shadow:none}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}

/* logo badge — THE REAL PNG HAS ARRIVED HERE TOO. 2026-08-15, the deferred
   half of the 2026-08-12 V1 ruling: app/globals.css dropped this scaffolding
   when logo-badge.png went transparent, and this byte-identical copy was
   deliberately left until the badge-mark family was regenerated. It now is —
   the badge-mark-96 art is the whole keyed badge with its OWN cream and black
   rings — so the stand-in dressing (cream ground, 3px red ring, 50% mask)
   would paint a third ring around it, measured at 5x before this was cut.
   The two chromes are back in step. */
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.6rem;letter-spacing:1px}
.logo .mark{width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;font-size:20px}
.logo b{color:var(--red)}

/* promo strip */
.promo{background:var(--red);color:#fff;text-align:center;font-family:var(--display);letter-spacing:1px;
  text-transform:uppercase;font-size:.95rem;padding:9px 40px 9px 16px;position:relative}
.promo .x{position:absolute;right:14px;top:50%;transform:translateY(-50%);opacity:.8;font-family:var(--body);cursor:pointer}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.navlinks{display:flex;gap:30px;font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.navlinks a{color:var(--muted)}.navlinks a:hover{color:#fff}
@media(max-width:780px){.navlinks{display:none}}

/* hero */
.hero{position:relative;min-height:84vh;min-height:84dvh;display:flex;align-items:center;
  background:
    radial-gradient(1100px 560px at 72% 14%,rgba(247,100,30,.32),transparent 56%),
    radial-gradient(1000px 520px at 16% 92%,rgba(224,36,27,.30),transparent 60%),
    linear-gradient(180deg,#0A0A0A,#16120F)}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 2px,transparent 2px 4px);pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding:46px 24px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--cheese);margin-bottom:18px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#36d07a;box-shadow:0 0 10px #36d07a}
h1.hero-title{font-family:var(--display);font-size:clamp(3.2rem,9.5vw,7rem);text-transform:uppercase;line-height:.9}
h1.hero-title .red{color:var(--red)}
.hero p.sub{max-width:560px;margin:22px 0 32px;font-size:1.15rem;color:#e7e4dd}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.playhint{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;font-weight:700}
.playhint .tri{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}

/* marquee */
.marquee{background:var(--cheese);color:#3a1d00;overflow:hidden;white-space:nowrap;border-top:3px solid #000;border-bottom:3px solid #000}
.marquee .track{display:inline-block;padding:11px 0;font-family:var(--display);font-size:1.1rem;letter-spacing:2px;text-transform:uppercase;animation:scroll 26s linear infinite;will-change:transform}
.marquee span{margin:0 10px}
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){
  .marquee .track{animation:none}
}

/* generic section */
section{padding:84px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px}
.sec-head h2{font-family:var(--display);font-size:clamp(2.1rem,5vw,3.4rem);text-transform:uppercase;line-height:1}
.sec-head h2 .accent{color:var(--cheese)}
.sec-head p{color:var(--muted);max-width:340px}

/* honesty block */
.honesty{background:var(--surface);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);text-align:center}
.honesty h2{font-family:var(--display);font-size:clamp(1.8rem,4.5vw,3rem);text-transform:uppercase;line-height:1.02}
.honesty h2 .red{color:var(--red)}
.honesty p{color:#d9d6cf;max-width:620px;margin:16px auto 0;font-size:1.1rem}

/* featured cards */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.menu-grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .14s ease,border-color .2s ease}
.card:hover{transform:translateY(-5px);border-color:rgba(224,36,27,.55)}
.card .pic{height:158px;display:flex;align-items:center;justify-content:center;font-size:64px;background:radial-gradient(circle at 50% 38%,rgba(249,176,23,.42),rgba(247,100,30,.2) 60%,#120f0d 100%)}
.card .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-family:var(--display);font-size:1.35rem;letter-spacing:.5px;text-transform:uppercase}
.card p{color:var(--muted);font-size:.9rem;flex:1}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.card .price{font-family:var(--display);font-size:1.2rem;color:var(--cheese)}
.card .mini{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--red)}

/* full menu */
.menu-full{background:var(--surface);border-top:1px solid rgba(255,255,255,.06)}
.menu-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media(max-width:760px){.menu-cols{grid-template-columns:1fr;gap:30px}}
.mcat h3{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;color:var(--cheese);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid rgba(255,255,255,.1)}
.mitem{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.mitem .n{font-weight:700}.mitem .d{color:var(--muted);font-size:.86rem;font-weight:400}
.mitem .p{font-family:var(--display);color:#fff;white-space:nowrap}

/* bronx */
.bronx .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media(max-width:820px){.bronx .wrap{grid-template-columns:1fr}}
.bronx h2{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);text-transform:uppercase;line-height:.92}
.bronx h2 .red{color:var(--red)}
.bronx p{color:#e7e4dd;margin-top:18px;font-size:1.06rem;max-width:520px}
.bronx .badge{display:inline-block;margin-top:22px;border:1px solid rgba(249,176,23,.4);color:var(--cheese);border-radius:999px;padding:8px 16px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.bridge{aspect-ratio:4/3;border-radius:14px;background:radial-gradient(700px 300px at 50% 120%,rgba(247,100,30,.4),transparent 60%),linear-gradient(180deg,#231a14,#120f0d);border:1px solid rgba(255,255,255,.08);display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden}
.bridge .skyline{font-family:var(--display);font-size:1.9rem;color:#fff;opacity:.85;margin-bottom:18px;letter-spacing:1px}
.bridge::before{content:"";position:absolute;left:8%;right:8%;bottom:60px;height:2px;background:rgba(255,255,255,.25);box-shadow:0 22px 0 rgba(255,255,255,.12)}

/* social proof */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
@media(max-width:760px){.reviews{grid-template-columns:1fr}}
.review{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:22px}
.review .stars{color:var(--cheese);letter-spacing:2px;margin-bottom:10px}
.review p{font-size:.98rem;color:#e7e4dd}.review .who{margin-top:12px;font-weight:800;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:760px){.iggrid{grid-template-columns:repeat(3,1fr)}}
.ig{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:34px;background:radial-gradient(circle at 50% 35%,rgba(249,176,23,.26),rgba(224,36,27,.14) 60%,#120f0d 100%);border:1px solid rgba(255,255,255,.05)}

/* capture */
.join{background:linear-gradient(180deg,#1c0a08,#0A0A0A);text-align:center;border-top:1px solid rgba(255,255,255,.06)}
.join h2{font-family:var(--display);font-size:clamp(2.1rem,6vw,3.7rem);text-transform:uppercase}
.join h2 .red{color:var(--red)}
.join p{color:#e7e4dd;margin:14px auto 26px;max-width:500px;font-size:1.05rem}
.joinform{display:flex;gap:12px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.joinform input{flex:1;min-width:220px;background:#120f0d;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:8px;padding:14px 16px;font-size:1rem;font-family:var(--body)}
.joinform input::placeholder{color:#8a8782}
.tiny{color:var(--muted);font-size:.78rem;margin-top:14px}

/* location */
.loc .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:760px){.loc .wrap{grid-template-columns:1fr}}
.loc h2{font-family:var(--display);font-size:clamp(2.1rem,5vw,3.2rem);text-transform:uppercase}
.loc .open{display:inline-flex;align-items:center;gap:8px;color:#36d07a;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;margin:14px 0}
.loc .open .dot{width:8px;height:8px;border-radius:50%;background:#36d07a;box-shadow:0 0 10px #36d07a}
.loc address{font-style:normal;color:#e7e4dd;font-size:1.1rem;line-height:1.8;margin-bottom:18px}
.map{aspect-ratio:16/11;border-radius:14px;background:linear-gradient(135deg,#1b1714,#231a14);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem}

/* footer */
footer{background:#070707;padding:58px 0 38px;border-top:1px solid rgba(255,255,255,.07)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr;gap:24px}}
footer h4{font-family:var(--display);letter-spacing:1px;font-size:1.05rem;margin-bottom:12px;color:var(--cheese);text-transform:uppercase}
footer p,footer a{color:var(--muted);font-size:.92rem;line-height:1.9;display:block}
footer a:hover{color:#fff}
footer .logo{font-size:1.7rem;margin-bottom:12px}
.copy{max-width:1180px;margin:34px auto 0;padding:18px 24px 0;border-top:1px solid rgba(255,255,255,.07);color:#5d5b57;font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* sticky mobile order bar */
.mobilebar{display:none}
@media(max-width:780px){
  .mobilebar{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(10,10,10,.95);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);padding:10px 12px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .mobilebar a{text-align:center;padding:12px 6px;border-radius:8px;font-family:var(--display);letter-spacing:1px;text-transform:uppercase;font-size:.85rem;background:#1b1714;color:#fff;border:1px solid rgba(255,255,255,.12)}
  .mobilebar a.order{background:var(--red);border:none}
  /* Only reserve space when a mobile bar is actually on the page. The bare
     `body` rule left a dead strip under every candidate skin that does not
     render one (style-explore round). V1 is unchanged: it renders .mobilebar. */
  /* READS THE DERIVED HEIGHT, with 70 kept only as the fallback (2026-08-23).
     --mobilebar-h is published by the bar itself (index.html, mobileBarRef) and
     its measured rect already contains env(safe-area-inset-bottom), which a
     typed number cannot. The literal survives as the value for any surface that
     renders a .mobilebar without publishing the token - which is what the
     :has() guard below is already about. Measured on the demo: this reserve
     contributes 0px, because .skin-home's own reserve already reaches the
     document end. It is the OTHER skins this rule exists for. */
  body:has(.mobilebar){padding-bottom:var(--mobilebar-h,70px)}

  /* ---- GOOGLE'S reCAPTCHA BADGE CLEARS THE BAR (2026-08-25) --------------
     NOT COSMETIC, AND NOT OURS TO HIDE. The badge is fixed bottom-right at
     roughly 256x60 with a z-index in the billions; .mobilebar is fixed at
     bottom:0 with z-index 60. Measured at 320 and 390, the badge's footprint
     covers 256x49 of that bar - including the primary ORDER button, 102x38 at
     320 and 129x38 at 390. Google paints over it on every phone, so the shop's
     main call to action is behind a badge nobody can move but us.

     REPOSITIONED, NOT HIDDEN. Google's terms allow moving the badge while it
     stays visible; hiding it requires their disclosure text naming their
     Privacy Policy and Terms - and if the badge belongs to Clover's SDK,
     hiding their vendor's compliance mark is a conversation with Clover, not
     a CSS decision.

     KEYED TO THE BAR'S OWN MEASUREMENT, not a typed number: --mobilebar-h is
     published by the bar itself and its rect already contains
     env(safe-area-inset-bottom), which is exactly the value this container
     reports as 0 and a real iPhone does not.

     !important because Google injects its own stylesheet for this class and
     we do not control its order. */
  .grecaptcha-badge{bottom:calc(var(--mobilebar-h,70px) + 12px) !important}
}

/* ---- additions beyond the approved artifact (each logged in DECISIONS.md) ---- */

/* THE ORDERING-SOON TOAST IS GONE (2026-08-25). It read "Online ordering drops
   soon. Until then: call it in" on a site that now takes orders and takes
   cards. It never reached a customer - opacity 0, pointer-events none, and no
   code ever added .show - which is exactly why it survived: invisible, and one
   class away from contradicting the product. Block 122. */

/* velvet-rope state for the VIP form */
.rope{background:#120f0d;border:1px dashed rgba(249,176,23,.5);border-radius:10px;
  max-width:460px;margin:0 auto;padding:18px 20px;color:var(--cheese);
  font-family:var(--display);letter-spacing:1px;text-transform:uppercase;font-size:1.05rem}
.rope small{display:block;margin-top:6px;font-family:var(--body);color:var(--muted);
  text-transform:none;letter-spacing:0;font-size:.85rem}

/* consent row at the VIP field (10DLC) */
.consent{display:flex;gap:10px;align-items:flex-start;max-width:460px;margin:14px auto 0;text-align:left;color:var(--muted);font-size:.8rem}
.consent input{margin-top:3px;accent-color:var(--red)}
.consent a{text-decoration:underline}

/* ---- dev-only type lab (self-removes when LAUNCHED flips) ---------------- */
/* the .typelab panel's styles were deleted in slice 24: they dressed the
   repo's TypeLab, which this demo never renders. Carlos's type wheel - the one
   control that DID use this vocabulary - went in slice 23. */