/* ═══════════════════════════════════════════════════════════════════════════
   🍕 TOMATO HILL PIZZERIA — a DEMONSTRATION site by Bots On Staff (30 Sep 2026).
   The pizzeria, its people, address and reviews are invented.
   ⭐ Owner, 30 Sep: "it can be dark, just needs to be right for the website".
   The best independent pizzeria sites at night read warm and dark: charcoal,
   tomato red, cream type and the orange of an oven mouth. That is this sheet.
   ⛔ NO BLOBS: every shade here is a LINEAR gradient from an edge. No radial,
   no ellipse, no glow circle anywhere.
   ⛔ Never overflow-x:hidden on html/body — it breaks the sticky header. clip.
   ⛔ Hand CSS stays ABOVE the selling-band marker; tools/demo-sellband.mjs
   rewrites everything below it and derives its accent from --tomato.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --tomato:#e0492f;                 /* brand token read by demo-sellband.mjs */
  --bg:#15110f;--bg2:#1c1714;--bg3:#241d19;--card:#211a16;
  --line:#3a2f29;--line2:#5a4a40;
  --ink:#f7efe3;--ink2:#e2d6c6;--ink3:#bfb09e;
  --acc:#ef5a3c;                    /* tomato as TEXT on the dark ground: 5.2:1 */
  --btn:#c2331c;--btn-h:#a82a15;    /* white on it: 5.6:1 */
  --gold:#f5b963;                   /* the oven glow: headline accent, prices */
  --basil:#9ccb7c;
  --paper:#f5ecdd;--paper-ink:#2a1e16;--paper-ink2:#5b4a3d;
  --r:18px;--r-sm:12px;
  --sh:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.35);
  --sh-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --hh:80px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--hh) + 64px)}
body{margin:0;background:var(--bg);color:var(--ink2);font:400 17px/1.62 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block;height:auto}  /* ⛔ height:auto, or the height ATTRIBUTE wins over aspect-ratio and every photo renders at its file height */
a{color:var(--gold);text-underline-offset:3px;text-decoration-color:rgba(245,185,99,.45)}
a:hover{text-decoration-color:var(--gold)}
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);font-weight:700;margin:0 0 .45em;line-height:1.1;letter-spacing:-.01em;overflow-wrap:break-word}
h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(30px,3.6vw,48px)}
h3{font-size:clamp(20px,1.7vw,23px);line-height:1.25}
p{margin:0 0 1em}
.hl{color:var(--gold);font-style:italic}
.skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--gold);color:#1a120c;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:10px}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tw{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.ts{padding:clamp(64px,8vw,112px) 0}
.ts--alt{background:var(--bg2)}
.ts--paper{background:var(--paper);color:var(--paper-ink2)}
.ts--paper h2,.ts--paper h3{color:var(--paper-ink)}
.ts--paper a{color:#9b2a15}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 16px}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor}
.ts--paper .eyebrow{color:#a8321c}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink2);max-width:62ch}
.ts--paper .lead{color:var(--paper-ink2)}
.head{max-width:760px;margin:0 0 clamp(32px,4vw,52px)}
.head--c{margin-inline:auto;text-align:center}.head--c .eyebrow{justify-content:center}.head--c .lead{margin-inline:auto}
.muted{color:var(--ink3)}

/* ── buttons (not .btn: check-demo-polish polices .btn order) ───────────── */
.tb{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:999px;
  background:var(--btn);color:#fff !important;border:1.5px solid var(--btn);font:700 16px/1.2 var(--f);text-decoration:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px rgba(194,51,28,.35);cursor:pointer;transition:background .18s ease,transform .18s ease}
.tb:hover{background:var(--btn-h);border-color:var(--btn-h);transform:translateY(-1px)}
.tb svg{width:19px;height:19px;flex:0 0 auto}
.tb--ghost{background:transparent;color:var(--ink) !important;border-color:rgba(247,239,227,.55);box-shadow:none}
.tb--ghost:hover{background:rgba(247,239,227,.08);border-color:var(--ink)}
.ts--paper .tb--ghost{color:var(--paper-ink) !important;border-color:#8c7766}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tlink{font-weight:700;text-decoration:none !important;display:inline-flex;gap:6px;align-items:center;color:var(--gold)}
.tlink::after{content:"\2192";transition:transform .18s ease}
.tlink:hover::after{transform:translateX(3px)}
.ts--paper .tlink{color:#9b2a15}

/* ═══ HEADER v2 (rule 8b, owner 30 Sep: "make sure the headers on the demo sites all look way better") ═══
   Utility bar: live open/closed status, invented short address, phone, monochrome socials that go
   NOWHERE (href="#"), and a small DEMO pill. Then a dark glass header that shrinks 80→64 and gains
   a shadow once a sentinel leaves the viewport (IntersectionObserver, not a scroll listener).
   ⛔ The drawer and its backdrop live OUTSIDE .hx-hd: backdrop-filter makes the header the
   containing block for position:fixed children, which would trap the drawer. */
.utilbar{background:#0e0b0a;color:var(--ink2);font-size:13.5px;border-bottom:1px solid #2a221d;position:relative;z-index:1001}
.utilbar__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:38px;display:flex;align-items:center;gap:18px}
.ub{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink2);text-decoration:none}
.ub svg{width:15px;height:15px;color:var(--ink3);flex:0 0 auto}
a.ub:hover{color:#fff}
.ub--status b{color:#fff;font-weight:650}
.ub__dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:0 0 auto;box-shadow:0 0 0 3px rgba(191,176,158,.18)}
.ub--status[data-state="open"] .ub__dot{background:#5fd18a;box-shadow:0 0 0 3px rgba(95,209,138,.2)}
.ub--status[data-state="soon"] .ub__dot{background:var(--gold);box-shadow:0 0 0 3px rgba(245,185,99,.22)}
.ub--status[data-state="closed"] .ub__dot{background:#ef7a64;box-shadow:0 0 0 3px rgba(239,122,100,.2)}
.ub__sep{width:1px;height:14px;background:#3a2f29}
.ub__push{margin-left:auto}
.social{display:inline-flex;gap:2px;align-items:center}
.social a{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:8px;color:var(--ink3)}
.social a:hover{color:#fff;background:rgba(255,255,255,.06)}
.social svg{width:15px;height:15px}
.demostrip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:999px;background:#2a211c;border:1px solid #4d3f35;
  color:var(--ink) !important;text-decoration:none !important;font-size:12.5px;white-space:nowrap;line-height:1.3}
.demostrip b{font-weight:800;letter-spacing:.08em;color:var(--gold);font-size:11.5px}
.demostrip__dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.demostrip:hover{border-color:var(--gold)}
@media (max-width:1180px){ .ub--addr,.ub__sep--addr{display:none} }
@media (max-width:900px){ .social,.ub__sep--soc{display:none} }
@media (max-width:640px){ .ub--tel .ub__txt{display:none} .utilbar__in{gap:10px;min-height:36px;justify-content:space-between} .ub--status .ub__hrs{display:none} .ub__push{display:none} }
@media (max-width:480px){ .ub--tel .ub__num{display:none} .ub--tel{width:30px;height:30px;justify-content:center;border:1px solid #3a2f29;border-radius:50%;margin-left:auto} .ub--tel svg{width:14px;height:14px;color:var(--gold)} }
@media (max-width:380px){ .ub--tel{display:none} .utilbar{font-size:12.5px} .demostrip{padding:3px 9px 3px 8px;font-size:12px} }

.hx-sentinel{position:absolute;top:0;left:0;width:1px;height:120px;pointer-events:none}
.hx-hd{position:sticky;top:0;z-index:1000;background:rgba(21,17,15,.86);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:inset 0 -1px 0 rgba(90,74,64,.55);transition:box-shadow .25s ease,background .25s ease}
html[data-scrolled] .hx-hd{background:rgba(17,13,11,.93);box-shadow:inset 0 -1px 0 rgba(90,74,64,.55),0 10px 30px rgba(0,0,0,.45)}
.hx-hd__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);height:var(--hh);display:flex;align-items:center;gap:22px;transition:height .25s ease}
html[data-scrolled] .hx-hd__in{height:64px}
.hx-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none !important;color:var(--ink) !important;flex:0 0 auto}
.hx-brand .nav__mark{width:44px;height:44px;flex:0 0 auto;transition:width .25s ease,height .25s ease}
html[data-scrolled] .hx-hd .hx-brand .nav__mark{width:38px;height:38px}
.hx-brand__t{display:flex;flex-direction:column;line-height:1}
.hx-brand__n{font:700 23px/1 var(--fd);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.hx-brand__n i{color:var(--gold);font-style:italic;font-weight:700}
.hx-brand__tag{font:650 11px/1.2 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-top:6px;white-space:nowrap}
.hx-nav{margin-left:auto;align-self:stretch;display:flex}
.hx-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.hx-nav__list>li{display:flex;align-items:center;align-self:stretch}
.hx-nav__t{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 12px;color:var(--ink) !important;text-decoration:none !important;
  font:600 15.5px/1 var(--f);white-space:nowrap;cursor:pointer;border-radius:10px}
.hx-nav__t::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.hx-nav__t:hover::after,.hx-dd.is-open>.hx-nav__t::after{transform:scaleX(1)}
.hx-nav__t[aria-current]::after{transform:scaleX(1);background:var(--acc)}
.hx-nav__t svg{width:12px;height:12px;transition:transform .2s ease;color:var(--ink3)}
.hx-dd.is-open>.hx-nav__t svg{transform:rotate(180deg);color:var(--gold)}
.hx-mega,.hx-drop{position:absolute;top:100%;visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;z-index:5}
.hx-dd.is-open>.hx-mega,.hx-dd.is-open>.hx-drop,
html:not(.hx-js) .hx-dd:hover>.hx-mega,html:not(.hx-js) .hx-dd:focus-within>.hx-mega,
html:not(.hx-js) .hx-dd:hover>.hx-drop,html:not(.hx-js) .hx-dd:focus-within>.hx-drop{visibility:visible;opacity:1;transform:none;transition:opacity .16s ease,transform .16s ease}
.hx-mega{left:0;right:0;background:#1a1512;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 40px 70px rgba(0,0,0,.55)}
.hx-mega__in{max-width:1240px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 30px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px}
.hx-mega__k{font:700 12.5px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 12px 12px}
.hx-mega__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px}
.hx-mega__grid a{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:13px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none !important;color:var(--ink3) !important}
.hx-mega__grid a:hover,.hx-mega__grid a:focus-visible{background:#261e19}
.hx-mega__ico{grid-row:span 2;width:44px;height:44px;border-radius:12px;background:#2c211b;border:1px solid #45362d;color:var(--gold);display:grid;place-items:center}
.hx-mega__ico svg{width:22px;height:22px}
.hx-mega__grid b{color:var(--ink);font:650 15.5px/1.3 var(--f)}
.hx-mega__grid small{font-size:13.5px;line-height:1.4}
.hx-mega__all{margin:14px 0 0 12px;font-size:15px}
.hx-mega__side{background:#231b17;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;margin:0}
.hx-mega__side img{width:100%;height:150px;object-fit:cover}
.hx-mega__side div{padding:16px 18px 18px;display:grid;gap:10px}
.hx-mega__side b{color:var(--ink);font:700 18px/1.25 var(--fd)}
.hx-mega__side p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.hx-mega__side .tb{width:100%;min-height:46px;font-size:15px;white-space:normal;text-align:center;line-height:1.25}
.hx-mega__tel{font-weight:650;text-align:center;color:var(--ink) !important;text-decoration:none !important;font-size:15px}
.hx-dd--drop{position:relative}
.hx-drop{left:-8px;width:300px;background:#1a1512;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px rgba(0,0,0,.55);padding:8px}
.hx-drop a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none !important;color:var(--ink3) !important}
.hx-drop a:hover,.hx-drop a:focus-visible,.hx-drop a[aria-current]{background:#261e19}
.hx-drop b{display:block;color:var(--ink);font:650 15.5px/1.3 var(--f)}
.hx-drop small{font-size:13.5px}
.hx-telblock{display:inline-flex;align-items:center;gap:10px;text-decoration:none !important;color:var(--ink) !important;white-space:nowrap}
.hx-telblock__i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--gold)}
.hx-telblock__i svg{width:18px;height:18px}
.hx-telblock small{display:block;font:650 11px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.hx-telblock b{display:block;font:700 16px/1.25 var(--f)}
.hx-telblock:hover .hx-telblock__i{border-color:var(--gold)}
.hx-hd .tb{min-height:46px;padding:10px 20px;font-size:15.5px;white-space:nowrap}
.hx-call{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);color:var(--gold) !important;place-items:center;flex:0 0 auto}
.hx-call svg{width:19px;height:19px}
@media (min-width:1024px) and (max-width:1279px){ .hx-telblock{display:none} .hx-nav__t{padding:10px 9px} .hx-nav__t::after{left:9px;right:9px} .hx-hd__in{gap:14px} .hx-brand__tag{display:none} }
/* the phone drawer */
.hx-navq{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hx-burger{display:none;height:44px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line2);cursor:pointer;align-items:center;gap:8px;
  color:var(--ink);font:650 15px/1 var(--f);flex:0 0 auto}
.hx-burger__i{display:inline-flex;flex-direction:column;gap:4px}
.hx-burger i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .22s ease}
.hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(2){opacity:0}
.hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:#17120f;z-index:1200;display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s;box-shadow:-20px 0 60px rgba(0,0,0,.6);border-left:1px solid var(--line)}
.hx-navq:checked ~ .hx-drawer{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.hx-backdrop{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.hx-navq:checked ~ .hx-backdrop{opacity:1;visibility:visible;transition:opacity .28s ease}
html.hx-lock,html.hx-lock body{overflow:hidden}
.hx-drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 16px;border-bottom:1px solid var(--line)}
.hx-drawer__hd .hx-brand .nav__mark{width:36px;height:36px}
.hx-drawer__hd .hx-brand__n{font-size:19px}
.hx-x{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;position:relative;flex:0 0 auto}
.hx-x i{position:absolute;left:13px;top:22px;width:18px;height:2px;border-radius:2px;background:var(--ink)}
.hx-x i:nth-child(1){transform:rotate(45deg)}.hx-x i:nth-child(2){transform:rotate(-45deg)}
.hx-drawer__nav{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:6px 10px 12px}
.hx-drawer__nav>a,.hx-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 12px;
  font:650 17px/1.2 var(--f);color:var(--ink) !important;text-decoration:none !important;border-bottom:1px solid var(--line);cursor:pointer}
.hx-drawer__nav>a[aria-current]{color:var(--gold) !important}
.hx-acc>summary{list-style:none}
.hx-acc>summary::-webkit-details-marker{display:none}
.hx-acc>summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s ease}
.hx-acc[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.hx-acc>div{padding:4px 0 10px}
.hx-acc>div a{display:flex;align-items:center;min-height:46px;padding:0 12px 0 22px;border-radius:10px;font-size:16px;color:var(--ink2) !important;text-decoration:none !important}
.hx-acc>div a[aria-current]{color:var(--gold) !important;font-weight:650;background:#231b17}
.hx-drawer__ft{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:10px;background:#17120f}
.hx-drawer__ft .tb{width:100%;min-height:48px}
.hx-drawer__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink3)}
.hx-drawer__meta .social{display:inline-flex}
.hx-drawer__meta .social a{width:44px;height:44px}
@media (max-width:1023px){
  .hx-nav,.hx-telblock,.hx-hd .tb{display:none}
  .hx-burger{display:inline-flex}
  .hx-call{display:inline-grid;margin-left:auto}
  :root{--hh:64px}
  .hx-hd__in{gap:10px}
  html[data-scrolled] .hx-hd__in{height:60px}
}
@media (max-width:640px){ :root{--hh:60px} .hx-brand__tag{display:none} .hx-brand .nav__mark{width:36px;height:36px} .hx-brand__n{font-size:20px} .hx-brand{gap:9px} }
@media (max-width:360px){ .hx-brand__n{font-size:18px} .hx-burger{padding:0 11px} }
@media (min-width:1024px){ .hx-drawer,.hx-backdrop,.hx-burger{display:none !important} }
@media (prefers-reduced-motion:reduce){ .hx-mega,.hx-drop,.hx-drawer,.hx-backdrop,.hx-burger i,.hx-nav__t svg,.hx-nav__t::after,.hx-hd,.hx-hd__in,.hx-brand .nav__mark{transition:none !important} }

/* ── the offer ribbon (every page) ─────────────────────────────────────── */
.offerbar{background:linear-gradient(90deg,#3a130b,#5a1c10 50%,#3a130b);color:#fde9d9;font-size:14.5px;border-bottom:1px solid #6b2a1a}
.offerbar__in{max-width:1240px;margin:0 auto;padding:9px clamp(16px,4vw,40px);display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.offerbar b{color:#fff}
.offerbar a{color:#ffd79c;font-weight:650}
.offerbar svg{width:16px;height:16px;color:#ffd79c;flex:0 0 auto}
.offer--s{display:none}
@media (max-width:640px){ .offer--l,.offerbar svg{display:none} .offer--s{display:inline} .offerbar{font-size:13.5px} .offerbar__in{padding:8px 16px;gap:6px} }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero.hx-hero{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(620px,86vh,820px);display:flex;align-items:center;background:#0d0a09}
.hx-hero__img{position:absolute;inset:0;z-index:-2}
.hx-hero__img img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){ .hx-hero__img img{animation:hxpush 26s cubic-bezier(.2,.6,.3,1) both;transform-origin:70% 55%} }
@keyframes hxpush{from{transform:scale(1)}to{transform:scale(1.06)}}
.hx-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(13,10,9,.94) 0%,rgba(13,10,9,.86) 30%,rgba(13,10,9,.55) 50%,rgba(13,10,9,.12) 68%,rgba(13,10,9,0) 82%),
             linear-gradient(0deg,rgba(13,10,9,.75) 0%,rgba(13,10,9,0) 32%)}
.hx-hero__in{width:100%;max-width:1240px;margin:0 auto;padding:clamp(72px,9vw,120px) clamp(16px,4vw,40px) clamp(112px,11vw,150px)}
.hx-hero__copy{max-width:640px}
.hx-hero h1{color:#fff;margin:0 0 20px}
.hx-hero--page h1{font-size:clamp(36px,4.6vw,60px)}
.hx-hero__sub{color:#f1e7da;font-size:clamp(17px,1.5vw,20px);max-width:54ch;margin:0 0 30px}
.hx-crumbs{font-size:14px;color:var(--ink2);margin:0 0 14px}
.hx-crumbs a{color:#fff}
.hx-chips{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.hx-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(13,10,9,.62);
  border:1px solid rgba(247,239,227,.28);color:#fff;font-size:14.5px;font-weight:550}
.hx-chips svg{width:18px;height:18px;color:var(--gold);flex:0 0 auto}
.hx-hero--page{min-height:clamp(480px,64vh,620px)}
.hx-hero--page .hx-hero__in{padding-bottom:clamp(88px,9vw,120px)}
@media (min-width:1101px){ .hx-hero--page .hx-hero__scrim{background:linear-gradient(90deg,rgba(13,10,9,.95) 0%,rgba(13,10,9,.9) 36%,rgba(13,10,9,.7) 52%,rgba(13,10,9,.2) 72%,rgba(13,10,9,0) 86%),linear-gradient(0deg,rgba(13,10,9,.7) 0%,rgba(13,10,9,0) 32%)} }
/* ≤1100: the photo becomes a plate on top and the words sit under it on the dark ground,
   so the food is SEEN on a phone, not buried under a scrim (pool failed review on this) */
@media (max-width:1100px){
  .hero.hx-hero{min-height:0;display:block}
  .hx-hero__img{position:relative;inset:auto;z-index:0;aspect-ratio:16/9}
  .hx-hero__scrim{inset:auto;top:0;left:0;right:0;aspect-ratio:16/9;z-index:0;
    background:linear-gradient(180deg,rgba(13,10,9,0) 60%,rgba(13,10,9,.75) 88%,#0d0a09 100%)}
  .hx-hero__in{position:relative;z-index:1;margin-top:0;padding-top:22px;padding-bottom:88px}
  .hx-hero__copy{max-width:720px}
}
@media (min-width:821px) and (max-width:1100px){ .hx-hero__img,.hx-hero__scrim{aspect-ratio:21/9} }
@media (max-width:560px){ .hx-hero__img,.hx-hero__scrim{aspect-ratio:4/3} .hx-hero .tb{flex:1 1 100%} .hx-chips li{font-size:13.5px} }
.pagehead{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px);background:linear-gradient(180deg,#1f1814,var(--bg));border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(36px,4.6vw,56px)}

/* ── promise card on the hero's edge ─────────────────────────────────── */
.hx-promise{position:relative;z-index:3;margin:-64px auto 0;max-width:1240px;padding:0 clamp(16px,4vw,40px)}
.hx-promise__card{background:#1f1814;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);display:grid;grid-template-columns:repeat(4,1fr)}
.hx-promise__i{padding:26px 24px;border-left:1px solid var(--line)}
.hx-promise__i:first-child{border-left:0}
.hx-promise__i svg{width:28px;height:28px;color:var(--gold);margin-bottom:12px}
.hx-promise__i h3{font:700 17px/1.3 var(--f);margin:0 0 6px;color:var(--ink)}
.hx-promise__i p{font-size:15px;line-height:1.55;margin:0;color:var(--ink2)}
@media (max-width:980px){ .hx-promise__card{grid-template-columns:1fr 1fr} .hx-promise__i:nth-child(3){border-left:0} .hx-promise__i:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:1100px){ .hx-promise{margin-top:-40px} }
@media (max-width:560px){ .hx-promise__card{grid-template-columns:1fr}
  .hx-promise__i{border-left:0;border-top:1px solid var(--line);padding:20px 18px;display:grid;grid-template-columns:36px 1fr;column-gap:12px}
  .hx-promise__i:first-child{border-top:0} .hx-promise__i svg{grid-row:span 2;margin:2px 0 0} }

/* ── tonight at a glance ─────────────────────────────────────────────── */
.glance{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;min-width:0}
.gcard__k{font:700 12.5px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.gcard__big{font:700 26px/1.2 var(--fd);color:var(--ink);margin:0 0 6px}
.gcard p{margin:0 0 8px;font-size:15.5px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.wk__d{text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px 2px;font-size:12.5px;line-height:1.3;color:var(--ink3)}
.wk__d abbr{display:block;text-decoration:none;font-weight:700;color:var(--ink);font-size:13px}
.wk__d.is-today{border-color:var(--gold);background:#2b2119}
.wk__d.is-today abbr{color:var(--gold)}
@media (max-width:980px){ .glance{grid-template-columns:1fr 1fr} .gcard--hours{grid-column:1 / -1} }
@media (max-width:620px){ .glance{grid-template-columns:1fr} .wk{grid-template-columns:repeat(4,1fr)} }

/* ── pie cards ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.pie{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none !important;color:var(--ink2) !important;transition:transform .22s ease,border-color .22s ease;min-width:0}
a.pie:hover{transform:translateY(-3px);border-color:#6d574a}
.pie__ph{aspect-ratio:4/3;overflow:hidden;background:#2a211b;position:relative}
.pie__ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
a.pie:hover .pie__ph img{transform:scale(1.04)}
.pie__tag{position:absolute;left:14px;top:14px;background:rgba(13,10,9,.78);border:1px solid rgba(247,239,227,.25);color:#fff;font-size:12.5px;font-weight:650;padding:5px 10px;border-radius:999px}
.pie__b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pie__b h3{margin:0}
.pie__b p{margin:0;font-size:15.5px;line-height:1.55}
.pie__price{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px dashed var(--line2)}
.pie__price b{color:var(--gold);font:700 20px/1 var(--fd)}
.pie__price span{font-size:14px;color:var(--ink3)}
@media (max-width:1100px){ .grid,.grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid,.grid--4,.grid--2{grid-template-columns:1fr} }

/* ── "more than pizza" tiles ─────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;display:block;text-decoration:none !important;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(13,10,9,.92) 0%,rgba(13,10,9,.55) 38%,rgba(13,10,9,0) 62%)}
.tile__t{position:absolute;left:14px;right:14px;bottom:14px;color:#fff}
.tile__t b{display:block;font:700 19px/1.2 var(--fd)}
.tile__t small{font-size:13.5px;color:#f1e3cf}
@media (max-width:1100px){ .tiles{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .tiles{grid-template-columns:repeat(2,1fr);gap:10px} .tile__t b{font-size:17px} }

/* ── sizes, drawn to scale ───────────────────────────────────────────── */
.scale{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,64px);align-items:center}
.scale>*{min-width:0}
.scale__pair{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,3vw,30px)}
.scale__f{margin:0;text-align:center;flex:0 0 auto}
.disc{border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font:700 20px/1 var(--fd);color:#3a1a0d;
  background:repeating-conic-gradient(from 0deg,#e7a64c 0 44deg,#b86a2a 44deg 45deg);border:6px solid #c9853f;box-shadow:inset 0 0 0 6px #d9973f}
.disc span{background:#f7ead3;border-radius:999px;padding:4px 10px}
.disc--12{width:calc(var(--u) * 12)}.disc--16{width:calc(var(--u) * 16)}.disc--18{width:calc(var(--u) * 18)}
.disc{aspect-ratio:1}
.scale__pair{--u:12.5px}
@media (max-width:980px){ .scale{grid-template-columns:1fr} }
@media (max-width:620px){ .scale__pair{--u:calc((100vw - 76px) / 46);gap:12px} .disc{border-width:4px;font-size:15px} }
.scale__f figcaption{font-size:14.5px;color:var(--paper-ink2)}
.scale__f figcaption b{color:var(--paper-ink);display:block;font-size:16px}

/* ── splits ──────────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--r{grid-template-columns:6fr 5fr}
.split__ph{border-radius:var(--r);overflow:hidden;margin:0;box-shadow:var(--sh)}
.split__ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__ph--tall img{aspect-ratio:4/5}
.stack{display:grid;gap:20px;align-content:start;min-width:0}
.ticks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.ticks li::before{content:"";width:26px;height:26px;border-radius:50%;background:#33251d no-repeat center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5b963' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.ticks b{color:var(--ink)}
.ts--paper .ticks li::before{background-color:#ecd9bf}
.ts--paper .ticks b{color:var(--paper-ink)}
.note{background:#231b17;border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;margin:0 0 24px;font-size:16px;color:var(--ink2)}
.note b{color:var(--ink)}
@media (max-width:900px){ .split,.split--r{grid-template-columns:1fr} .split__ph img,.split__ph--tall img{aspect-ratio:4/3} }

/* ── chat showcase ───────────────────────────────────────────────────── */
.chatcard{background:#1f1814;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-lg);overflow:hidden;max-width:470px;justify-self:end;width:100%}
.chatcard__hd{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.chatcard__hd svg{width:40px;height:40px;flex:0 0 auto}
.chatcard__hd b{display:block;color:var(--ink);font-size:16px}
.chatcard__hd small{color:var(--ink3);font-size:13px}
.chatcard__bd{padding:20px;display:grid;gap:12px;background:#191411}
.bub{max-width:88%;padding:12px 16px;border-radius:18px 18px 18px 6px;background:#2a211c;border:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink)}
.bub--me{justify-self:end;border-radius:18px 18px 6px 18px;background:#5a2114;border-color:#7a2d1b;color:#fff}
.chatcard__opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.chatcard__opts a{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:999px;background:var(--btn);color:#fff !important;text-decoration:none !important;font-weight:650;font-size:15px}
.chatcard__opts a:hover{background:var(--btn-h)}
.chatcard__ft{padding:12px 20px;font-size:13px;color:var(--ink3);border-top:1px solid var(--line)}
@media (max-width:900px){ .chatcard{justify-self:stretch;max-width:none} }

/* ── reviews ─────────────────────────────────────────────────────────── */
.revsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 28px}
.revsum b{font:700 44px/1 var(--fd);color:var(--paper-ink)}
.revsum span{color:var(--paper-ink2)}
.stars{display:inline-flex;gap:2px;color:#a8551a}
.stars svg{width:18px;height:18px;fill:currentColor}
.stars .off{color:#cdb9a0}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{margin:0;background:#fffaf2;border:1px solid #e3d3bd;border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;color:var(--paper-ink2)}
.rev__hd{display:flex;align-items:center;gap:12px}
.rev__av{width:42px;height:42px;border-radius:50%;background:#7a2a17;color:#fff;display:grid;place-items:center;font:700 15px/1 var(--f);flex:0 0 auto}
.rev__hd b{display:block;color:var(--paper-ink);font-size:16px}
.rev__hd small{font-size:13.5px}
.rev blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--paper-ink)}
@media (max-width:1000px){ .revs{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .revs{grid-template-columns:1fr} }
.bars{display:grid;gap:8px;max-width:420px}
.bars div{display:grid;grid-template-columns:52px 1fr 44px;gap:10px;align-items:center;font-size:14.5px;color:var(--paper-ink2)}
.bars i{display:block;height:10px;border-radius:99px;background:#e6d5bd;overflow:hidden}
.bars i::before{content:"";display:block;height:100%;width:var(--w);background:#c2331c;border-radius:99px}

/* ── closing photo band ──────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(88px,10vw,150px) 0}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(13,10,9,.93) 0%,rgba(13,10,9,.84) 42%,rgba(13,10,9,.5) 70%,rgba(13,10,9,.2) 100%)}
.cta h2{color:#fff;max-width:17ch}
.cta p{color:#f1e7da;max-width:52ch;font-size:18px}
@media (max-width:820px){ .cta::before{background:linear-gradient(180deg,rgba(13,10,9,.62) 0%,rgba(13,10,9,.9) 100%)} }

/* ── the drawn map ───────────────────────────────────────────────────── */
.map{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#1b1613}
.map svg{display:block;width:100%;height:auto}
.map figcaption{padding:12px 16px;font-size:14px;color:var(--ink3);border-top:1px solid var(--line)}
.hours{width:100%;border-collapse:collapse;font-size:16px}
.hours th,.hours td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left}
.hours th{color:var(--ink);font-weight:650}
.hours td{text-align:right;color:var(--ink2)}
.hours tr.is-today th,.hours tr.is-today td{color:var(--gold)}
.towns{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px}
.towns li{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);font-size:15px;color:var(--ink);font-weight:550}

/* ── steps ───────────────────────────────────────────────────────────── */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.steps>li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;counter-increment:st}
.steps>li::before{content:counter(st);display:block;width:40px;height:40px;border-radius:50%;background:#3a1c12;color:var(--gold);font:700 18px/40px var(--fd);text-align:center;margin-bottom:14px}
.steps h3{font:700 18px/1.3 var(--f);margin:0 0 6px}
.steps p{margin:0;font-size:15.5px}
@media (max-width:1000px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;font:650 18px/1.4 var(--f);color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details>div{padding:0 22px 20px}
.faq details>div p:last-child{margin:0}

/* ── packages (catering, specials) ───────────────────────────────────── */
.pk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pk__k{font:700 12.5px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0}
.pk h3{margin:0}
.pk p{margin:0;font-size:15.5px}
.pk__price{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line2);font:700 24px/1 var(--fd);color:var(--gold)}
.deal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.deal__ph{position:relative;min-height:280px;margin:0}
.deal__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.deal__b{padding:28px;display:flex;flex-direction:column;gap:10px}
.deal__b h3{font-size:clamp(24px,2.4vw,30px);margin:0}
.deal__b .pk__price{font-size:30px}
@media (max-width:820px){ .deal{grid-template-columns:1fr} .deal__ph{min-height:0;aspect-ratio:16/10} }

/* ── forms (demo: they send nothing, and say so before any typing) ───── */
.demo-note{display:flex;gap:12px;align-items:flex-start;background:#2d2116;border:1px solid #6b5334;border-radius:var(--r-sm);padding:14px 16px;margin:0 0 22px;font-size:15.5px;color:#fbe9cf}
.demo-note svg{width:22px;height:22px;flex:0 0 auto;color:var(--gold);margin-top:1px}
.demo-note b{color:#fff}
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px)}
.form label{display:block;font-weight:650;color:var(--ink);margin:0 0 6px;font-size:15.5px}
.form .fld{margin:0 0 18px}
.form input[type=text],.form input[type=tel],.form input[type=email],.form input[type=date],.form input[type=number],.form select,.form textarea{
  width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:#15110f;color:var(--ink);font:400 16px/1.4 var(--f)}
.form textarea{min-height:110px;resize:vertical}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.radios{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;border:0;padding:0}
.radios legend{font-weight:650;color:var(--ink);margin:0 0 8px;font-size:15.5px;padding:0}
.radios label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;cursor:pointer;font-weight:550;color:var(--ink2);margin:0}
.radios input{accent-color:var(--btn)}
.form__done{margin:18px 0 0;background:#1d2a1a;border:1px solid #4d7a3c;border-radius:var(--r-sm);padding:14px 16px;color:#e4f4da}
@media (max-width:620px){ .form .two{grid-template-columns:1fr} }
.fees{background:#1f1814;border:1px solid var(--gold);border-radius:var(--r);padding:22px 24px;font-size:16px}
.fees h2,.fees h3{font:700 19px/1.3 var(--f);color:var(--ink);margin:0 0 10px}
.fees ul{margin:0;padding-left:1.1em}
.fees li{margin:0 0 8px}
.fees b{color:var(--ink)}

/* ═══ THE MENU PAGE ═══ */
.m-filters{position:sticky;top:var(--hh);z-index:40;background:rgba(21,17,15,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
html[data-scrolled] .m-filters{top:64px}
@media (max-width:1023px){ html[data-scrolled] .m-filters{top:60px} }
.m-rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px clamp(16px,4vw,40px);max-width:1240px;margin:0 auto}
.m-rail::-webkit-scrollbar{display:none}
.m-rail a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:600;white-space:nowrap}
.m-rail a:hover,.m-rail a.is-on{border-color:var(--gold);color:var(--ink);background:#261e19}
.m-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.m-chips span{font-weight:650;color:var(--ink);margin-right:4px}
.m-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;cursor:pointer;color:var(--ink2);font-weight:600;font-size:15px;background:transparent;font-family:var(--f)}
.m-chip input{accent-color:var(--btn);width:16px;height:16px}
.m-chip:has(input:checked){border-color:var(--gold);color:var(--ink);background:#2b2119}
.m-count{font-size:14.5px;color:var(--ink3)}
.m-sec{padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hh) + 70px)}
.m-sec__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.m-sec__hd h2{font-size:clamp(28px,3vw,40px);margin:0}
.m-sec__n{color:var(--ink3);font-size:14.5px}
.m-sec__intro{max-width:70ch;margin:10px 0 24px;color:var(--ink2)}
.m-sec__body{display:grid;grid-template-columns:320px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.m-sec__body--noimg{grid-template-columns:minmax(0,1fr)}
.m-shot{margin:0;border-radius:var(--r);overflow:hidden;position:sticky;top:calc(var(--hh) + 84px)}
.m-shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.item{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-bottom:1px dashed var(--line2);scroll-margin-top:calc(var(--hh) + 80px)}
.item h3{font:700 19px/1.3 var(--fd);margin:0;color:var(--ink)}
.item__d{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.tag{font-size:12.5px;font-weight:650;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--ink3)}
.tag--nomeat{color:var(--basil);border-color:#4b6a3b}
.tag--heat{color:#ff9c7e;border-color:#7a3a28}
.tag--nuts{color:#f3c98b;border-color:#7a5a2c}
.buy{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:999px;overflow:hidden;min-height:44px}
.opt__sz{padding:0 0 0 14px;font-size:14px;color:var(--ink3)}
.opt__amt{padding:0 10px 0 8px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;font-size:16px}
.opt__sz:empty{display:none}
.opt__sz:empty + .opt__amt{padding-left:14px}
.add{align-self:stretch;min-width:44px;border:0;border-left:1px solid var(--line2);background:#2a1f19;color:var(--ink);font:700 20px/1 var(--f);cursor:pointer}
.add:hover{background:var(--btn);color:#fff}
.add.is-added{background:#2f5a2a;color:#fff}
html:not(.js) .add{display:none}
.item.is-hidden{display:none}
@media (max-width:1100px){ .items{grid-template-columns:1fr} }
@media (max-width:860px){ .m-sec__body{grid-template-columns:1fr} .m-shot{position:static} .m-shot img{aspect-ratio:16/9} }
.smallprint{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.smallprint>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.smallprint h3{font:700 18px/1.3 var(--f)}
.smallprint p{margin:0;font-size:16px}
@media (max-width:1000px){ .smallprint{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .smallprint{grid-template-columns:1fr} }
/* the running list (menu + order pages) */
.tray{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:880;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;
  border-radius:999px;background:var(--gold);color:#1a120c;border:0;font:700 15.5px/1 var(--f);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.tray svg{width:19px;height:19px}
.sheet{border:1px solid var(--line2);border-radius:20px;background:#1c1714;color:var(--ink2);padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 40px)}
.sheet::backdrop{background:rgba(0,0,0,.6)}
.sheet__in{padding:22px}
.sheet__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px}
.sheet__top h2{font-size:26px;margin:0}
.sheet__x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--ink);font-size:22px;cursor:pointer}
.sheet__list{list-style:none;margin:0 0 12px;padding:0}
.sheet__list li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sheet__list b{color:var(--ink);font-weight:650}
.sheet__q{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px}
.sheet__q button{width:36px;height:36px;border:0;background:none;color:var(--ink);font-size:18px;cursor:pointer}
.sheet__total{display:flex;justify-content:space-between;font-size:18px;color:var(--ink);margin:10px 0 4px}
.sheet__total b{color:var(--gold)}
.sheet__note{font-size:15.5px;color:var(--ink3)}
.sheet__acts{display:grid;gap:10px;margin-top:14px}
.sheet__acts .tb{width:100%}
.sheet__clear{background:none;border:0;color:var(--ink3);text-decoration:underline;cursor:pointer;margin-top:12px;font:inherit;min-height:44px}
.orderlist{list-style:none;margin:0 0 16px;padding:0}
.orderlist li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink)}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{background:#0e0b0a;color:var(--ink3);padding:64px 0 36px;font-size:15px;border-top:1px solid var(--line)}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot h4{font:700 13px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 9px}
.foot a{color:var(--ink2);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.ft__brand{display:inline-flex;gap:12px;align-items:center;font:700 22px/1 var(--fd);color:var(--ink);margin:0 0 14px}
.ft__brand svg{width:40px;height:40px}
.ft__addr{margin:0 0 10px;line-height:1.7;color:var(--ink2)}
.ft__hours li.is-today{color:var(--gold);font-weight:650}
.ft__legal{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6}
@media (max-width:900px){ .ft__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ft__grid{grid-template-columns:1fr} }

/* ═══ THE CHAT (chat.js) — bottom-right pill, owner 24 Sep: "right and go" ═══ */
.launch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:900;display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:0 20px 0 16px;border-radius:999px;cursor:pointer;background:var(--btn);color:#fff;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 22px rgba(0,0,0,.5);font:650 15.5px/1.2 var(--f);transition:opacity .25s ease,transform .25s ease,visibility .25s,background .16s ease}
.launch:hover{background:var(--btn-h)}
html[data-hero-in-view] .launch{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px)}
.lchat__dot{position:relative;width:8px;height:8px;border-radius:50%;background:#fff;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){ .lchat__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;animation:lchat-pulse 2.4s ease-out infinite} }
@keyframes lchat-pulse{0%{transform:scale(1);opacity:.65}80%,100%{transform:scale(2.8);opacity:0}}
.lchat__sm{display:none}
@media (max-width:480px){ .lchat__lg{display:none} .lchat__sm{display:inline} }
.chatbox{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1100;width:min(380px,calc(100vw - 32px));
  max-height:min(600px,calc(100vh - 32px));display:flex;flex-direction:column;background:#1c1714;border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;color:var(--ink)}
.chatbox__hd{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#2a1a13;border-bottom:1px solid var(--line)}
.chatbox__hd svg{width:30px;height:30px;flex:0 0 auto}
.chatbox__t{font:650 15px/1.2 var(--f);color:#fff;margin-right:auto}
.chatbox__x{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.log{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:160px}
.msg{max-width:90%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.5;white-space:pre-line}
.msg--bot{background:#2a211c;border:1px solid var(--line);align-self:flex-start;color:var(--ink)}
.msg--me{background:#5a2114;border:1px solid #7a2d1b;align-self:flex-end;color:#fff}
.opts{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.chip{background:transparent;border:1.5px solid var(--line2);color:var(--ink);border-radius:999px;font:500 14px/1.3 var(--f);padding:9px 14px;cursor:pointer;text-align:left;min-height:40px}
.chip:hover{border-color:var(--gold)}
.opts .chip[type="submit"]{color:var(--gold);border-color:var(--gold);font-weight:650}
.ask{display:flex;gap:8px;padding:0 14px 12px}
.ask__in{flex:1 1 auto;min-width:0;cursor:text;background:#15110f}
@media (max-width:760px){ .ask__in,.opts input{font-size:16px} }
.chatbox__fine{font-size:12.5px;line-height:1.5;color:var(--ink3);padding:9px 14px;border-top:1px solid var(--line);margin:0}

/* ═══ 🍕 ORDER BY CHAT (chat.js) — owner, 2 Oct 2026 ═══════════════════════════
   The chat grows while an order is built; on a phone it fills the screen and
   chat.js sizes it to the visual viewport, so the keyboard never covers a field.
   Every tap target is 44px or more. ⛔ No blobs: flat fills and edge gradients. */
.chatbox.is-order{width:min(440px,calc(100vw - 32px));height:min(740px,calc(100vh - 32px));max-height:none}
.chatbox.is-order .ask,.chatbox.is-order .cm-tools{display:none !important}
.chatbox.is-order .log{min-height:110px}
.chatbox.is-order .opts{display:block;flex:0 1 auto;max-height:60%;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px;border-top:1px solid var(--line)}
@media (max-width:560px){
  .chatbox.is-order{left:0;right:0;top:0;bottom:auto;width:100%;height:100vh;height:100dvh;border-radius:0;border:0}
  .chatbox.is-order .chatbox__x{width:44px;height:44px}
  .chatbox.is-order .chatbox__fine{padding:6px 14px;font-size:12px}
}
.obc-p{display:flex;flex-direction:column;gap:10px}
.obc-p button{font-family:var(--f);cursor:pointer}
.obc-p button:focus-visible,.obc-bar button:focus-visible,.obc-ctl button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.obc-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.obc-big{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;min-height:96px;border-radius:14px;border:1.5px solid var(--line2);background:var(--bg3);color:var(--ink);text-align:left}
.obc-big span{font-size:24px;line-height:1;margin-bottom:4px}.obc-big b{font-size:16px}.obc-big small{font-size:12.5px;color:var(--ink3);line-height:1.35}
.obc-big--row{min-height:60px;width:100%}
.obc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.obc-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:80px;padding:11px 12px;border-radius:14px;border:1.5px solid var(--line2);background:var(--bg3);color:var(--ink);text-align:left}
.obc-tile__e{font-size:22px;line-height:1;margin-bottom:3px}
.obc-tile b{font-size:15px;line-height:1.2}
.obc-tile small{font-size:12.5px;color:var(--gold);font-weight:600}
.obc-tile:hover,.obc-item:hover,.obc-big:hover,.obc-time:hover{border-color:var(--gold)}
.obc-go{width:100%;min-height:48px;padding:10px 16px;border-radius:999px;border:0;background:var(--btn);color:#fff;font:650 15px/1.25 var(--f)}
.obc-go:hover{background:var(--btn-h)}.obc-go:disabled{opacity:.55;cursor:not-allowed}
.obc-go--big{min-height:54px;font-size:16.5px}
.obc-sec{width:100%;min-height:48px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line2);background:transparent;color:var(--ink);font:600 15px/1.25 var(--f)}
.obc-sec:hover{border-color:var(--ink2)}
.obc-link{align-self:center;min-height:44px;padding:6px 10px;background:none;border:0;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;font:500 14px var(--f)}
.obc-hd{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.obc-hd b{font-size:15.5px}
.obc-back{min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line2);background:transparent;color:var(--ink);font:600 14px var(--f)}
.obc-gh{display:block;margin:4px 0 0;font:700 12px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.obc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.obc-item{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-align:left}
.obc-item__t{flex:1 1 auto;min-width:0}
.obc-item__t b{display:block;font-size:15px;line-height:1.3}
.obc-item__t em{font-style:normal;font-size:12px;font-weight:700;color:var(--basil);margin-left:4px;white-space:nowrap}
.obc-item__t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.4;color:var(--ink3);margin-top:2px}
.obc-item__p{flex:0 0 auto;display:flex;align-items:center;gap:8px;color:var(--gold);font-weight:700;font-size:14px;white-space:nowrap}
.obc-item__p i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--btn);color:#fff;font-style:normal;font-size:20px;line-height:1}
.obc-det{display:flex;flex-direction:column;gap:8px}
.obc-det__n{font:700 21px/1.2 var(--fd);color:var(--ink)}
.obc-det p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.obc-det p.obc-gh{color:var(--ink3);font-size:12px}
.obc-seg{display:flex;flex-wrap:wrap;gap:8px}
.obc-seg button{flex:1 1 0;min-width:88px;min-height:52px;padding:8px 10px;border-radius:12px;border:1.5px solid var(--line2);background:transparent;color:var(--ink);font:600 15px/1.2 var(--f);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.obc-seg button small{font-size:12.5px;color:var(--gold);font-weight:600}
.obc-seg button[aria-pressed="true"]{border-color:var(--gold);background:#3a2516;box-shadow:inset 0 0 0 1px var(--gold)}
.obc-seg button:disabled{opacity:.45;cursor:not-allowed}
.obc-seg--tops button{flex:1 1 auto;font-size:14px}
.obc-det .obc-mini,.obc-mini{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink3)}
.obc-addrow{position:sticky;bottom:-12px;z-index:1;display:flex;gap:10px;align-items:center;margin:4px 0 -12px;padding:10px 0 12px;background:#1c1714;border-top:1px solid var(--line)}
.obc-addrow .obc-go{flex:1 1 auto;width:auto}
.obc-step{display:inline-flex;align-items:center;border:1.5px solid var(--line2);border-radius:999px;flex:0 0 auto}
.obc-step button{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);font:500 22px/1 var(--f)}
.obc-step button:hover{background:rgba(247,239,227,.08)}
.obc-step output{min-width:22px;text-align:center;font-weight:700}
.obc-cartl{list-style:none;margin:0;padding:0}
.obc-cartl li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n n" "s p";gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.obc-cartl__n{grid-area:n;font-size:14.5px;line-height:1.35}
.obc-cartl__n small{display:block;color:var(--ink3);font-size:12.5px}
.obc-cartl .obc-step{grid-area:s;justify-self:start}
.obc-cartl li>b{grid-area:p;color:var(--gold)}
.obc-sub{display:flex;justify-content:space-between;font-weight:700;font-size:16px}
.obc-sub b{color:var(--gold)}
.obc-allergy{margin:0;padding:10px 12px;border-radius:12px;background:#2b2216;border:1px solid #5a4528;color:var(--ink);font-size:14.5px;line-height:1.45}
.obc-allergy b{color:var(--gold)}
.obc-p textarea,.obc-p input{width:100%;min-height:48px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);font:16px/1.4 var(--f)}
.obc-p textarea{min-height:84px;resize:vertical}
.obc-p textarea:focus,.obc-p input:focus{outline:2px solid var(--gold);outline-offset:1px}
.obc-err{margin:0;color:#ffb3a3;font-size:13.5px}
.obc-times{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.obc-times .obc-big--row{grid-column:1/-1}
.obc-time{min-height:52px;padding:8px 10px;border-radius:12px;border:1.5px solid var(--line2);background:transparent;color:var(--ink);font:600 14.5px/1.25 var(--f)}
.obc-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;background:#2a1a13;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.obc-bar[hidden]{display:none}
.obc-bar b{color:var(--gold)}.obc-bar small{color:var(--ink3)}
.obc-bar button{flex:0 0 auto;min-height:44px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--gold);background:transparent;color:var(--gold);font:650 14px var(--f);cursor:pointer}
.obc-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px 14px;background:#3a2516;color:var(--ink);font:650 13px/1.3 var(--f);border-bottom:1px solid var(--line)}
.obc-ctl[hidden]{display:none}.obc-ctl span{flex:1 1 150px;min-width:0}
.obc-ctl button{min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--ink2);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.obc-tap{outline:3px solid var(--gold) !important;outline-offset:2px;transform:scale(.97)}
@media (prefers-reduced-motion:reduce){ .obc-tap{transform:none} }
.obc-card{align-self:stretch;flex:0 0 auto;background:var(--paper);color:var(--paper-ink);border-radius:14px;overflow:hidden;font-size:14px;line-height:1.45}
.obc-card__hd{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;background:#ecd9bf}
.obc-card__hd b{font-size:15px}
.obc-tag{flex:0 0 auto;font-size:10.5px;line-height:1;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--paper-ink);color:#fff;white-space:nowrap}
.obc-card ul{list-style:none;margin:0;padding:4px 12px}
.obc-card li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #e3d3bd}
.obc-card li span{min-width:0;overflow-wrap:anywhere}
.obc-card__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px}
.obc-card__tot{font-weight:800;font-size:15.5px}
.obc-card b{white-space:nowrap}
.obc-card__fine{margin:0;padding:2px 12px 8px;font-size:12.5px;color:var(--paper-ink2)}
.obc-card dl{margin:0;padding:8px 12px 12px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;border-top:1px solid #e3d3bd}
.obc-card dt{font-weight:700}.obc-card dd{margin:0;overflow-wrap:anywhere}

/* the page band: 3 steps + [Order by chat] [Watch it work] (home and order pages) */
.obcb{padding:clamp(52px,7vw,96px) 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.obcb__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.obcb .lead{margin:0 0 22px}
.obcb__steps{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:ob}
.obcb__steps li{counter-increment:ob;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px}
.obcb__steps li::before{content:counter(ob);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3a1c12;color:var(--gold);font:700 17px/1 var(--fd);margin-bottom:10px}
.obcb__steps b{display:block;color:var(--ink);font-size:16.5px;line-height:1.3;margin-bottom:4px}
.obcb__steps span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.obcb__fine{margin:16px 0 0;font-size:15px;color:var(--ink2)}
.obcb__fine b{color:var(--gold)}
.obcb__ph{margin:0;justify-self:end;width:100%;max-width:420px;background:#1c1714;border:1px solid var(--line2);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden}
.obcb__ph-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#2a1a13;border-bottom:1px solid var(--line);font:650 15px/1.2 var(--f);color:#fff}
.obcb__ph-hd svg{width:28px;height:28px;flex:0 0 auto}
.obcb__ph-bd{display:flex;flex-direction:column;gap:10px;padding:16px}
.obcb__ph-bd .msg{margin:0}
.obcb__ph-bd .obc-tag{background:#3a6b2a}
@media (max-width:960px){ .obcb__in{grid-template-columns:1fr} .obcb__ph{justify-self:start} }
@media (max-width:700px){ .obcb__steps{grid-template-columns:1fr} .obcb__steps li{display:grid;grid-template-columns:34px 1fr;gap:0 12px;padding:14px} .obcb__steps li::before{grid-row:span 2;margin:0} }
@media (max-width:560px){ .obcb .row .tb{flex:1 1 100%} }

/* inside our own frame the chip under the frame already says "demo" */
html[data-embedded] .demostrip{display:none !important}

/* ── 🧲 THE SELLING BAND — 24 Sep 2026 ───────────────────────────────────────────
   Written by tools/demo-sellband.mjs. Read that file before changing anything
   here; it records why the ground is ours and fixed while the accent is derived
   from this folder's own brand token and resolved to a literal.
   ⛔ The ground is deliberately NOT var(--anything): borrowing each site's
      surface made this read as the invented company's own sales copy, and the
      point of the band is that a stranger can see it is not.
   ⛔ The accent paints a pip, a rule and a chevron. It never carries prose. */
.sellband{--sb-accent:#e2553c;--sb-ground:#0f1b2a;--sb-card:#182b40;
  background:var(--sb-ground);color:#eef3f8;
  border-top:3px solid var(--sb-accent);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:clamp(2.2rem,5vw,3.4rem) 0;
  /* ⛔ isolate: several demos paint body gradients and grids that would show
     through, and one composites a fixed background over its sections. */
  position:relative;z-index:1;isolation:isolate}
.sellband *{box-sizing:border-box}
/* 🔴 TYPE IS NORMALISED, AND THIS IS NOT FUSSINESS.
   Each demo styles its h2 and h3 with its own display face — rv-powersports
   puts them in condensed UPPERCASE, tree-service in a serif, garage-door in a
   third face. Inheriting those made our pitch render in the invented company's
   own signature type on all thirteen, which is precisely the illusion the band
   exists to step outside of, and it made one heading read as their headline.
   ⛔ Compound selectors (0,2,0) on purpose: a bare .sellband__h loses to a site
   rule such as .sec h2 (0,1,1), and it loses SILENTLY.
   ⛔ No backticks anywhere in this CSS — it lives in a template literal. */
.sellband .sellband__h,.sellband .sellband__k,.sellband .sellband__sum{
  font-family:inherit;text-transform:none;font-style:normal}
.sellband .sellband__h{letter-spacing:-.015em}
.sellband .sellband__k,.sellband .sellband__sum{letter-spacing:0}
.sellband .sellband__h::after,.sellband .sellband__k::after,
.sellband .sellband__h::before,.sellband .sellband__k::before{content:none}
.sellband__in{padding-inline:20px}
/* ⛔ flex-start, not center: the eyebrow wraps to two lines at phone width and
   a centred pip then floats in the gap between them, pointing at nothing. */
.sellband__eyebrow{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .6rem;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  line-height:1.45;color:#c7d4e0}
.sellband__pip{width:8px;height:8px;border-radius:50%;background:var(--sb-accent);
  flex:0 0 auto;margin-top:.38em}
.sellband__h{margin:0 0 1.5rem;font-size:clamp(1.45rem,3.1vw,2.1rem);line-height:1.18;
  font-weight:800;letter-spacing:-.015em;color:#fff;max-width:32ch}
.sellband__grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);align-items:start}
.sellband__card{background:var(--sb-card);border:1px solid #35506e;border-radius:12px;
  padding:1.1rem 1.15rem 1.2rem;min-width:0}
.sellband__k{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:#fff;line-height:1.3}
.sellband__p{margin:0 0 .6rem;font-size:.9rem;line-height:1.55;color:#dae3ec}
.sellband__fine{margin:.5rem 0 0;font-size:.8rem;line-height:1.5;color:#b2c0ce}
/* ⛔ Each figure is one unwrappable unit. Without this "$349" and "a month"
   land on different lines and the page appears to publish a bare number. */
.sellband__price{margin:0 0 .6rem;font-size:1.05rem;line-height:1.4;color:#fff;
  font-weight:400;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem}
.sellband__fig{white-space:nowrap}
.sellband__price b{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.sellband__dot{color:var(--sb-accent)}

/* the disclosure — it answers "what comes with it" where the question is asked,
   which is the only reason to add one. No JavaScript. */
.sellband__more{margin-top:.7rem;border-top:1px solid #35506e;padding-top:.6rem}
.sellband__sum{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;color:#fff;
  padding:.2rem 0;min-height:32px}
.sellband__sum::-webkit-details-marker{display:none}
.sellband__chev{width:9px;height:9px;border-right:2px solid var(--sb-accent);
  border-bottom:2px solid var(--sb-accent);transform:rotate(45deg);flex:0 0 auto;
  margin-bottom:3px;transition:transform .18s ease}
.sellband__more[open] .sellband__chev{transform:rotate(-135deg);margin-bottom:-3px}
.sellband__list{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.34rem}
.sellband__list li{position:relative;padding-left:1.05rem;font-size:.84rem;
  line-height:1.5;color:#dae3ec}
.sellband__list li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--sb-accent)}
.sellband__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.4rem 0 0}
.sellband__go{display:inline-flex;align-items:center;min-height:44px;
  padding:.6rem 1.25rem;border-radius:8px;background:#fff;color:#0f1b2a;
  font-weight:700;font-size:.92rem;text-decoration:none;border:1px solid #fff}
.sellband__go:hover{background:#dce7f2;border-color:#dce7f2}
.sellband__alt{display:inline-flex;align-items:center;min-height:44px;
  color:#dae3ec;font-size:.9rem;text-decoration:none;
  border-bottom:1px solid #46586c;padding-bottom:1px}
.sellband__alt:hover{color:#fff;border-bottom-color:#fff}
@media (prefers-reduced-motion:no-preference){
  .sellband__card{transition:border-color .18s ease}
  .sellband__card:hover{border-color:#4a6a8f}
}
@media (max-width:900px){
  .sellband__grid{grid-template-columns:1fr}
  .sellband__h{max-width:28ch}
}
@media (max-width:560px){
  .sellband__in{padding-inline:16px}
  .sellband__price b{font-size:1.35rem}
}
/* ⛔ Inside our own iframe the surrounding chrome already sells; the band is a
   second pitch on top of the pitch. Hidden there and ONLY there, exactly as the
   disclosure chip is. */
html[data-embedded] .sellband{display:none !important}