/* Styles for studies used only on /ordering-sites. Scope every rule under .mm.
   Every study is a small HTML picture of the real product. Each stage is a size
   container, so it lays itself out for the space it has (phone layouts included).
   Motion is transform and opacity only, on two curves.
   Two styles live here. Inside the browser frame is the restaurant's own site: its red, its system font,
   its food photos and its "Open" green, so it reads as someone else's brand. Everything around it (the
   frame, the stages, Maple's own screens) is the house paper-diagram style: white cards on the stage
   ground, 1px warm hairlines, Geist Mono capitals for labels and one blue. */
.mm [data-study^="os"]{
  /* the restaurant's brand: only inside its site and its search result */
  --os-r:#B3261E; --os-r-50:#FBEDEC; --os-green:#1E7A3C;
  --os-site:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* house tokens from motion.css; each var() carries the same value as a fallback */
  --os-ink:var(--mm-ink,#14150F); --os-ink2:var(--mm-ink-2,#5C5D56); --os-ink3:var(--mm-ink-3,#8D8E86);
  --os-hair:var(--mm-line,#DEDDD5); --os-soft:var(--mm-soft,#F6F5F2); --os-stage:var(--mm-stage,#EFEEE9);
  --os-blue:var(--mm-blue,#0055FF); --os-tint:var(--mm-tint,#EAF1FF);
  --os-warn:#9A4F1C; --os-warn-bg:#FBF1E8;
  --os-paper:var(--mm-paper-shadow,drop-shadow(0 8px 14px rgba(20,21,15,.08)));
  --os-out:var(--mm-ease,cubic-bezier(.23,1,.32,1)); --os-io:var(--mm-move,cubic-bezier(.77,0,.175,1));
}
/* The wrapper is the size container: a container query cannot style the container itself. */
.mm:has(> [data-study^="os"]){container-type:inline-size}
.mm [data-study^="os"] img{display:block;max-width:none}
/* The brand face turns "(6)" into a circled numeral; keep plain digits. */
.mm [data-study^="os"]{font-feature-settings:"calt" 0,"liga" 0,"dlig" 0,"ss01" 0}
.mm [data-study^="os"] svg{display:block}
/* loop restart: transitions off while the faded-out parts go back to the start */
.mm [data-study^="os"].os-snap,.mm [data-study^="os"].os-snap *{transition:none!important}

/* ---------- shared: browser chrome (Maple's frame around the restaurant's site) ---------- */
.mm .os-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:var(--os-soft);border-bottom:1px solid var(--os-hair);flex:none}
.mm .os-dots{display:flex;gap:6px;width:60px}
.mm .os-dots i{width:10px;height:10px;border-radius:50%;background:var(--os-hair)}
.mm .os-url{flex:1;max-width:420px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;border-radius:6px;background:#fff;border:1px solid var(--os-hair);font:500 12px/1 var(--mono);color:var(--os-ink2);white-space:nowrap;overflow:hidden}
.mm .os-url svg{width:11px;height:11px;color:var(--os-ink3);flex:none}
.mm .os-bar-pad{width:60px}

/* ---------- osHero: the restaurant's own site, one order end to end ---------- */
.mm .os-hero{position:relative;height:640px;padding:40px 56px 0;overflow:hidden;background:var(--os-stage)}
.mm .os-win{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--os-hair);border-bottom:0;border-radius:8px 8px 0 0;overflow:hidden}
.mm .os-site{position:relative;flex:1;min-height:0;overflow:hidden;font-family:var(--os-site);color:var(--os-ink);font-size:13px;line-height:1.4}
.mm .os-head{display:flex;align-items:center;gap:24px;height:56px;padding:0 32px;border-bottom:1px solid var(--os-hair)}
.mm .os-logo{height:28px;width:auto}
.mm .os-head nav{margin-left:auto;display:flex;gap:22px;color:var(--os-ink2);font-size:13px}
.mm .os-cartbtn{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;background:var(--os-soft);color:var(--os-ink);transition:transform 160ms ease-out,background-color .25s ease,color .25s ease}
.mm .os-cartbtn svg{width:15px;height:15px}
.mm .os-cartbtn b{font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.mm .os-cartbtn.full{background:var(--os-r);color:#fff}
.mm .os-cartbtn.press,.mm .os-add.press,.mm .os-pay.press,.mm .os-p-btn.press,.mm .os-p-sw i.press{transform:scale(.94)}
.mm .os-cover{height:150px;margin:16px 32px 0;border-radius:12px;overflow:hidden;background:#3A2A20}
.mm .os-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.mm .os-id{display:flex;align-items:flex-start;gap:14px;margin:-34px 0 0 48px;position:relative}
.mm .os-id > div{padding-top:38px}
.mm .os-badge{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--os-hair);box-shadow:0 4px 10px rgba(0,0,0,.06);display:grid;place-items:center;flex:none}
.mm .os-badge img{width:58px;height:auto}
.mm .os-id strong{display:block;font:650 24px/1.15 var(--os-site);letter-spacing:-.02em}
.mm .os-id span{color:var(--os-ink2);font-size:13px}
.mm .os-id em,.mm .os-side em{font-style:normal;color:var(--os-green);font-weight:500}
.mm .os-body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;padding:22px 32px 0}
.mm .os-side{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--os-ink2)}
.mm .os-side b{color:var(--os-ink);font-size:13px;font-weight:600}
.mm .os-side .os-side-k{margin-top:16px;padding-top:14px;border-top:1px solid var(--os-hair)}
.mm .os-side ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.mm .os-side li{padding:6px 10px;border-radius:8px;font-size:12px}
.mm .os-side li.on{background:var(--os-soft);color:var(--os-ink);font-weight:600}
.mm .os-note{margin:0;padding:9px 12px;border:1px solid var(--os-hair);background:var(--os-soft);border-radius:8px;font-size:12px;color:var(--os-ink)}
.mm .os-main h4{margin:16px 0 10px;font:650 17px/1.2 var(--os-site);letter-spacing:-.01em}
.mm .os-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mm .os-item{display:flex;height:112px;border:1px solid var(--os-hair);border-radius:10px;overflow:hidden;background:#fff}
.mm .os-item-copy{flex:1;min-width:0;display:flex;flex-direction:column;padding:12px 14px}
.mm .os-item-copy b{font-weight:600;font-size:13px}
.mm .os-item-copy span{margin-top:3px;color:var(--os-ink2);font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mm .os-item-copy em{margin-top:auto;font-style:normal;font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}
.mm .os-item-copy small{margin-left:6px;font-weight:400;color:var(--os-ink3);font-size:11px}
.mm .os-item-pic{position:relative;width:112px;flex:none;background:var(--os-soft)}
.mm .os-item-pic img{width:100%;height:100%;object-fit:cover}
.mm .os-add{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--os-ink);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform 160ms ease-out,background-color .2s ease,color .2s ease}
.mm .os-add svg{width:14px;height:14px;grid-area:1/1;transition:opacity .15s ease}
.mm .os-add-n{grid-area:1/1;font:600 12px/1 var(--os-site);opacity:0;transition:opacity .15s ease}
.mm .os-item.in .os-add{background:var(--os-r);color:#fff}
.mm .os-item.in .os-add svg{opacity:0}
.mm .os-item.in .os-add-n{opacity:1}
.mm .os-toast{position:absolute;left:50%;top:14px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04);font-size:13px;white-space:nowrap;
  opacity:0;transform:translate(-50%,-8px);transition:opacity .2s ease-out,transform .35s var(--os-out);z-index:4}
.mm .os-toast i{width:18px;height:18px;border-radius:50%;background:var(--os-green);color:#fff;display:grid;place-items:center}
.mm .os-toast i svg{width:11px;height:11px}
.mm .os-toast i svg path{stroke:#fff}
.mm .os-toast.on{opacity:1;transform:translate(-50%,0)}
.mm .os-scrim{position:absolute;inset:0;background:rgba(23,22,21,.22);opacity:0;transition:opacity .3s ease;z-index:5}
.mm .os-scrim.on{opacity:1}
.mm .os-cart{position:absolute;top:0;right:0;bottom:0;width:340px;background:#fff;box-shadow:-12px 0 32px rgba(0,0,0,.10);z-index:6;
  transform:translateX(104%);transition:transform .5s var(--os-out)}
.mm .os-cart.on{transform:none}
.mm .os-cart-a,.mm .os-cart-b{position:absolute;inset:0;padding:22px 22px;transition:opacity .3s ease-out,transform .45s var(--os-out)}
.mm .os-cart-b{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;opacity:0;transform:translateY(10px)}
.mm .os-cart.done .os-cart-a{opacity:0;transform:translateY(-10px);transition-duration:.18s,.3s}
.mm .os-cart.done .os-cart-b{opacity:1;transform:none;transition-delay:.16s}
.mm .os-cart-h b{display:block;font:650 18px/1.2 var(--os-site)}
.mm .os-cart-h span{display:block;margin-top:2px;color:var(--os-ink2);font-size:12px}
.mm .os-line{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--os-hair)}
.mm .os-cart-h + .os-line{margin-top:10px}
.mm .os-line img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.mm .os-line div{flex:1;min-width:0}
.mm .os-line b{display:block;font-weight:600}
.mm .os-line span{font-size:12px;color:var(--os-ink2)}
.mm .os-line em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.mm .os-sum{margin:12px 0 0;display:grid;gap:4px;font-size:13px;color:var(--os-ink2)}
.mm .os-sum div{display:flex;justify-content:space-between}
.mm .os-sum dd{margin:0;font-variant-numeric:tabular-nums}
.mm .os-sum .tot{margin-top:4px;color:var(--os-ink);font-weight:650;font-size:15px}
.mm .os-pay{display:flex;align-items:center;justify-content:center;height:44px;margin-top:18px;border-radius:22px;background:var(--os-r);color:#fff;font-weight:600;font-size:14px;transition:transform 160ms ease-out}
.mm .os-fine{display:flex;align-items:center;justify-content:center;gap:5px;margin:10px 0 0;font-size:11.5px;color:var(--os-ink3)}
.mm .os-fine svg{width:10px;height:10px}
.mm .os-pick{position:absolute;left:22px;right:22px;bottom:22px;display:grid;gap:1px;padding:12px 14px;border:1px solid var(--os-hair);border-radius:10px;font-size:12.5px}
.mm .os-pick span{font-size:11px;color:var(--os-ink3)}
.mm .os-pick em{font-style:normal;color:var(--os-ink2)}
.mm .os-okmark{width:56px;height:56px;border-radius:50%;background:var(--os-r);color:#fff;display:grid;place-items:center;margin-bottom:8px}
.mm .os-okmark svg{width:28px;height:28px;color:#fff}
.mm .os-okmark svg path{stroke:#fff}
.mm .os-cart-b b{font:650 20px/1.2 var(--os-site)}
.mm .os-cart-b > span{color:var(--os-ink2)}
.mm .os-receipt{margin:16px 0 0;padding:12px 22px;border-radius:10px;background:var(--os-soft);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.mm .os-receipt small{display:block;font-weight:400;font-size:11.5px;color:var(--os-ink2)}
/* Maple's card over the site: a white card with a hairline, no shadow */
.mm .os-float{position:absolute;left:28px;bottom:36px;z-index:8;display:grid;gap:4px;width:250px;padding:14px 16px;border-radius:8px;background:#fff;
  border:1px solid var(--os-hair);font-family:var(--sans);
  opacity:0;transform:translateY(12px);transition:opacity .3s ease-out,transform .5s var(--os-out)}
.mm .os-float.on{opacity:1;transform:none}
.mm .os-float-k{display:flex;align-items:center;gap:7px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-blue)}
.mm .os-float-k i{width:7px;height:7px;border-radius:50%;background:var(--os-blue)}
.mm .os-float b{font-weight:500;font-size:14px;color:var(--os-ink)}
.mm .os-float-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:8px;border-top:1px solid var(--os-hair);font-size:13px;color:var(--os-ink2)}
.mm .os-float-row strong{font-size:20px;font-weight:500;color:var(--os-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mm .os-cursor{position:absolute;left:0;top:0;width:20px;height:22px;z-index:9;pointer-events:none;opacity:0;
  transition:transform .75s var(--os-io),opacity .25s ease}
.mm .os-cursor.on{opacity:1}
.mm .os-cursor svg{width:20px;height:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));transition:transform 120ms ease-out;transform-origin:2px 2px}
.mm .os-cursor.down svg{transform:scale(.86)}

/* phone: the same site in its phone layout, in the same hairline frame at phone width */
@container (max-width:640px){
  .mm .os-hero{height:620px;padding:22px 18px 0}
  .mm .os-win{max-width:360px;margin:0 auto}
  .mm .os-bar{height:38px;padding:0 10px;background:#fff}
  .mm .os-dots,.mm .os-bar-pad{display:none}
  .mm .os-url{font-size:11px;height:24px;background:var(--os-soft);border:0}
  .mm .os-head{height:50px;padding:0 16px}
  .mm .os-head nav{display:none}
  .mm .os-cartbtn{margin-left:auto}
  .mm .os-cover{height:110px;margin:0;border-radius:0}
  .mm .os-id{margin:-26px 0 0 16px;gap:10px}
  .mm .os-id > div{padding-top:30px}
  .mm .os-badge{width:60px;height:60px}
  .mm .os-badge img{width:46px}
  .mm .os-id strong{font-size:18px}
  .mm .os-id span{font-size:12px}
  .mm .os-body{grid-template-columns:1fr;padding:14px 16px 0}
  .mm .os-side{display:none}
  .mm .os-main h4{margin:12px 0 8px}
  .mm .os-grid{grid-template-columns:1fr;gap:10px}
  .mm .os-item{height:92px}
  .mm .os-item-copy{padding:10px 12px}
  .mm .os-item-copy small{display:none}
  .mm .os-item[data-item="margherita"]{order:-2}
  .mm .os-item[data-item="knots"]{order:-1}
  .mm .os-item-pic{width:84px}
  .mm .os-toast{top:60px;font-size:12px}
  .mm .os-cart{top:auto;left:0;width:auto;height:76%;border-radius:18px 18px 0 0;transform:translateY(104%);box-shadow:0 -12px 32px rgba(0,0,0,.14)}
  .mm .os-cart-a,.mm .os-cart-b{padding:18px 16px}
  .mm .os-pick{display:none}
  .mm .os-sum{font-size:12.5px}
  .mm .os-float{left:50%;bottom:auto;top:72px;width:236px;margin-left:-118px;padding:12px 14px}
}

/* ---------- osTicket: the order prints in the kitchen ---------- */
.mm .os-tkstage{display:flex;flex-direction:column;align-items:center;padding:28px 24px 32px;overflow:hidden;background:var(--os-stage)}
.mm .os-order{position:relative;width:100%;max-width:420px;height:72px;flex:none}
.mm .os-order-a,.mm .os-order-b{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;border:1px solid var(--os-hair);border-radius:8px;
  transition:opacity .3s ease-out,transform .5s var(--os-out)}
.mm .os-order-b{opacity:0;transform:translateY(-10px)}
.mm .os-order.b .os-order-a{opacity:0;transform:translateY(10px)}
.mm .os-order.b .os-order-b{opacity:1;transform:none}
.mm .os-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--os-soft);color:var(--os-ink2);font:500 13px/1 var(--sans)}
.mm .os-order div{flex:1;min-width:0}
.mm .os-k{display:block;font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-order b{display:block;margin-top:3px;font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm .os-paid{flex:none;padding:5px 10px;border-radius:999px;background:var(--os-tint);color:var(--os-blue);font-weight:500;font-size:13px;font-variant-numeric:tabular-nums}
.mm .os-wire{position:relative;width:2px;height:34px;flex:none;background:repeating-linear-gradient(var(--os-blue) 0 4px,transparent 4px 9px)}
.mm .os-wire.short{height:22px}
.mm .os-pk{position:absolute;left:-3px;top:-4px;width:8px;height:8px;background:var(--os-blue);opacity:0}
.mm .os-pk.go{animation:os-pk .55s var(--os-io) forwards}
.mm .os-wire.short .os-pk.go{animation-duration:.4s}
@keyframes os-pk{0%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0;transform:translateY(var(--h,34px))}}
.mm .os-wire.short .os-pk{--h:22px}
.mm .os-pos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;padding:6px;border-radius:999px;background:#fff;border:1px solid var(--os-hair);flex:none}
.mm .os-pos-k{padding:0 6px 0 8px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-chip{padding:5px 11px;border-radius:999px;font-size:13px;color:var(--os-ink2);background:var(--os-stage)}
.mm .os-chip.on{background:var(--os-blue);color:#fff}
/* the kitchen printer: hardware drawn flat in ink, no gloss */
.mm .os-printer{position:relative;width:100%;max-width:360px;height:30px;flex:none;border-radius:8px 8px 0 0;background:var(--os-ink);display:flex;align-items:center;justify-content:flex-end;padding:0 12px;z-index:2}
.mm .os-slot{position:absolute;left:30px;right:30px;bottom:5px;height:3px;border-radius:2px;background:#000}
.mm .os-pr-k{display:flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
.mm .os-pr-k i{width:6px;height:6px;border-radius:50%;background:var(--os-blue)}
/* the ticket is printed paper: the one shadow the house style keeps. It sits on the moving parent, as a
   filter on the masked ticket itself would be cut off by the torn-edge mask; the feed is wider than the
   ticket so the shadow is not clipped at the sides. will-change keeps the ticket on its own layer, so
   the shadow is painted once and not again whenever a transition nearby ends (50-60ms frames in WebKit). */
.mm .os-feed{position:relative;width:100%;max-width:332px;height:372px;flex:none;margin-top:-4px;overflow:hidden}
.mm .os-tk{position:absolute;left:16px;right:16px;top:0;transform:translateY(-102%);filter:var(--os-paper);will-change:transform;transition:transform 1.4s var(--os-io),opacity .4s ease}
.mm .os-tk.on{transform:none}
.mm .os-tk.off{transform:translateY(40px);opacity:0;transition:transform .5s var(--os-out),opacity .35s ease-out}
.mm .os-tk-in{position:relative;padding:20px 20px 26px;background:#fff;font:400 12px/1.45 var(--mono);color:var(--os-ink);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 8px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 8px repeat-x}
.mm .os-tk-h{display:grid;gap:2px;text-align:center;padding-bottom:12px;border-bottom:1px dashed var(--os-hair)}
.mm .os-tk-h b{font-weight:500;font-size:13.5px;letter-spacing:.04em}
.mm .os-tk-h span{font-size:11px;color:var(--os-ink2);letter-spacing:.04em}
.mm .os-tk-who{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px dashed var(--os-hair)}
.mm .os-tk-who span,.mm .os-tk-note span,.mm .os-tk-tot span{font-size:10.5px;color:var(--os-ink2);letter-spacing:.06em}
.mm .os-tk-who b{font-weight:500;font-size:14px}
.mm .os-tk-who em{margin-left:auto;font-style:normal;color:var(--os-ink2);font-size:11px}
.mm .os-tk-in ul{list-style:none;margin:0;padding:10px 0;display:grid;gap:2px;border-bottom:1px dashed var(--os-hair)}
.mm .os-tk-in li{display:grid;grid-template-columns:18px 1fr auto;gap:6px}
.mm .os-tk-in li b{font-weight:500}
.mm .os-tk-in li em{font-style:normal}
.mm .os-tk-in li.mod b{font-weight:400;color:var(--os-ink2);padding-left:10px}
.mm .os-tk-note{padding:10px 0 4px;display:flex;gap:10px;align-items:baseline}
.mm .os-tk-tot{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;padding-top:10px}
.mm .os-tk-tot b{font-weight:500;font-size:16px}
.mm .os-tk-stamp{position:absolute;left:18px;bottom:28px;padding:5px 9px;border:2px solid var(--os-blue);border-radius:6px;color:var(--os-blue);font:500 11px/1 var(--mono);letter-spacing:.1em;transform:rotate(-7deg);background:rgba(255,255,255,.9)}
@container (max-width:420px){
  .mm .os-tkstage{padding:20px 12px 24px}
  .mm .os-order-a,.mm .os-order-b{padding:0 12px;gap:10px}
  /* the initials repeat the name beside them; dropping them keeps the label at the 10px minimum without
     running under the paid pill */
  .mm .os-av{display:none}
  .mm .os-k{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mm .os-order b{font-size:13.5px}
  .mm .os-paid{font-size:12px;padding:4px 8px}
  .mm .os-chip:nth-of-type(n+4){display:none}
}

/* ---------- osSync: a POS change reaches the site ---------- */
.mm .os-sync{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;padding:24px 20px;background:var(--os-stage)}
.mm .os-sy-col{background:#fff;border:1px solid var(--os-hair);border-radius:8px;overflow:hidden;align-self:stretch}
.mm .os-sy-h{display:flex;justify-content:space-between;align-items:center;margin:0;padding:11px 14px;border-bottom:1px solid var(--os-hair);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-sy-h span{color:var(--os-ink)}
.mm .os-sy-h em{font-style:normal}
.mm .os-sy-list{list-style:none;margin:0;padding:4px 14px}
.mm .os-sy-list li{display:flex;align-items:center;gap:8px;height:50px;border-bottom:1px solid var(--os-hair);font-size:13.5px}
.mm .os-sy-list li:last-child{border-bottom:0}
.mm .os-sy-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm .os-sy-p{font-variant-numeric:tabular-nums;color:var(--os-ink2);padding:2px 6px;border-radius:6px;transition:background-color .3s ease,color .3s ease}
.mm .os-sy-p.hl{background:var(--os-tint);color:var(--os-blue)}
.mm .os-tog{width:30px;height:18px;border-radius:9px;background:var(--os-blue);position:relative;flex:none;transition:background-color .25s ease}
.mm .os-tog i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transform:translateX(12px);transition:transform .25s var(--os-out)}
.mm .os-tog.off{background:#D5D3CC}
.mm .os-tog.off i{transform:none}
.mm .os-sy-mid{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;align-self:stretch;justify-content:center}
.mm .os-sy-mid::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--os-blue) 0 4px,transparent 4px 9px)}
.mm .os-sy-dot{position:relative;width:12px;height:12px;border-radius:50%;background:var(--os-blue);z-index:1}
.mm .os-sy-dot.go{animation:os-sydot .6s var(--os-io)}
@keyframes os-sydot{0%{transform:translateX(-22px);opacity:.2}100%{transform:none;opacity:1}}
.mm .os-sy-lab{position:absolute;top:calc(50% + 12px);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-blue)}
.mm .os-sy-cards{display:grid;gap:0;padding:4px 10px}
.mm .os-sy-card{display:flex;align-items:center;gap:10px;height:50px;border-bottom:1px solid var(--os-hair);font-family:var(--os-site);transition:opacity .3s ease}
.mm .os-sy-card:last-child{border-bottom:0}
.mm .os-sy-card img{width:38px;height:38px;border-radius:8px;object-fit:cover;transition:filter .3s ease}
.mm .os-sy-card div{min-width:0}
.mm .os-sy-card b{display:block;font-weight:600;font-size:12.5px;color:var(--os-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm .os-sy-card em{display:inline-block;font-style:normal;font-size:12px;font-weight:600;color:var(--os-ink);font-variant-numeric:tabular-nums;padding:1px 5px;margin-left:-5px;border-radius:5px;transition:background-color .3s ease,color .3s ease}
.mm .os-sy-card em.hl{background:var(--os-tint);color:var(--os-blue)}
.mm .os-sy-card.out{opacity:.55}
.mm .os-sy-card.out img{filter:grayscale(1)}
.mm .os-sy-card.out em{color:var(--os-ink2);font-weight:500}
@container (max-width:540px){
  .mm .os-sync{grid-template-columns:1fr;grid-template-rows:auto 44px auto;padding:16px 12px}
  .mm .os-sy-mid::before{left:50%;right:auto;top:4px;bottom:4px;width:2px;height:auto;margin:0 0 0 -1px;background:repeating-linear-gradient(var(--os-blue) 0 4px,transparent 4px 9px)}
  .mm .os-sy-lab{top:auto;left:calc(50% + 14px)}
  @keyframes os-sydot{0%{transform:translateY(-14px);opacity:.2}100%{transform:none;opacity:1}}
}

/* ---------- osSearch: the markup behind the search result ---------- */
.mm .os-search{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:22px 20px;background:var(--os-stage)}
.mm .os-res-k{margin:0 0 8px;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-res-card{display:grid;gap:5px;padding:16px;background:#fff;border:1px solid var(--os-hair);border-radius:8px;font-family:var(--os-site)}
.mm .os-res-top{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--os-ink2)}
.mm .os-res-top img{width:auto;height:18px}
.mm .os-res-card > b{font-size:18px;font-weight:600;color:#1A47B8;letter-spacing:-.01em}
.mm .os-res-meta{font-size:12.5px;color:var(--os-ink2)}
.mm .os-res-meta .ok{color:var(--os-green);font-weight:500}
.mm .os-res-btns{display:flex;gap:8px;margin-top:6px}
.mm .os-res-go{padding:7px 14px;border-radius:999px;background:var(--os-r);color:#fff;font-weight:600;font-size:12.5px}
.mm .os-res-menu{padding:7px 14px;border-radius:999px;border:1px solid var(--os-hair);font-weight:500;font-size:12.5px;color:var(--os-ink)}
.mm .os-f{border-radius:4px;transition:box-shadow .3s ease}
.mm .os-f.hl{box-shadow:0 0 0 2px var(--os-blue)}
/* the markup, as a white card: keys in ink 2, values in blue, the line being read on the tint */
.mm .os-code{margin:0;padding:16px 16px;border:1px solid var(--os-hair);border-radius:8px;background:#fff;color:var(--os-ink);font:400 11.5px/1.75 var(--mono);white-space:pre;overflow:hidden;align-self:stretch}
.mm .os-ld0{color:var(--os-ink3)}
.mm .os-ld{display:block;margin:0 -16px;padding:0 16px;transition:background-color .3s ease}
.mm .os-ld i{font-style:normal;color:var(--os-ink2)}
.mm .os-ld s{text-decoration:none;color:var(--os-blue)}
.mm .os-ld.hl{background:var(--os-tint)}
@container (max-width:560px){
  .mm .os-search{grid-template-columns:1fr;padding:16px 12px}
}

/* ---------- osOwner: the owner's side ---------- */
.mm .os-owner{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;padding:20px;background:var(--os-stage)}
.mm .os-o-feed,.mm .os-o-stat,.mm .os-o-guests{background:#fff;border:1px solid var(--os-hair);border-radius:8px}
.mm .os-o-feed{overflow:hidden;display:flex;flex-direction:column}
.mm .os-o-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px}
.mm .os-o-h b{font-weight:500;font-size:17px;letter-spacing:-.01em}
.mm .os-o-live{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-blue)}
.mm .os-o-live i{width:7px;height:7px;border-radius:50%;background:var(--os-blue);animation:pulse 1.6s ease-out infinite}
.mm .os-o-cols,.mm .os-o-list li{display:grid;grid-template-columns:72px minmax(0,1fr) 84px 90px 72px;gap:12px;align-items:center;padding:0 18px}
.mm .os-o-cols{height:32px;border-top:1px solid var(--os-hair);border-bottom:1px solid var(--os-hair);background:var(--os-soft);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-o-cols span:nth-child(n+4){text-align:right}
/* The feed is as tall as the six orders it starts with (or the side column, if taller) and stays that tall:
   new orders push the oldest out of the bottom instead of growing the card, which moved the page. */
.mm .os-o-list{list-style:none;margin:0;padding:0;flex:1 1 0px;min-height:calc(6 * 66px);overflow:hidden;position:relative}
.mm .os-o-list li{height:66px;border-bottom:1px solid var(--os-hair);font-size:14px;background:#fff;transition:transform .55s var(--os-out),opacity .35s ease-out,background-color 1.2s ease}
.mm .os-o-list li.new{background:var(--os-tint)}
.mm .os-o-list li.enter{opacity:0;transform:translateY(-16px)}
/* timestamps take the house label style */
.mm .os-o-t{font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-o-who{min-width:0}
.mm .os-o-who b{display:block;font-weight:500}
.mm .os-o-who span{display:block;font-size:12.5px;color:var(--os-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm .os-o-src{justify-self:end;padding:3px 8px;border-radius:999px;background:var(--os-tint);color:var(--os-blue);font-size:11.5px;font-weight:500;white-space:nowrap}
.mm .os-o-c{text-align:right;color:var(--os-ink);font-weight:500;font-variant-numeric:tabular-nums}
.mm .os-o-tot{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.mm .os-o-side{display:grid;gap:16px;grid-template-rows:auto auto 1fr}
.mm .os-o-stat{display:grid;gap:2px;padding:16px 18px}
.mm .os-o-stat span,.mm .os-o-gk{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-o-stat b{font-weight:500;font-size:34px;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.mm .os-o-stat em{font-style:normal;font-size:13px;color:var(--os-ink2)}
.mm .os-o-guests{padding:16px 18px;overflow:hidden}
.mm .os-o-guests ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.mm .os-o-guests li{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;font-size:13.5px;transition:transform .5s var(--os-out),opacity .35s ease-out}
.mm .os-o-guests li.enter{opacity:0;transform:translateY(-10px)}
.mm .os-o-guests i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--os-soft);font:500 11.5px/1 var(--sans);font-style:normal;color:var(--os-ink2)}
.mm .os-o-guests b{font-weight:500}
.mm .os-o-guests em{font-style:normal;color:var(--os-ink3);font-size:12.5px}
@container (max-width:780px){
  .mm .os-owner{grid-template-columns:1fr;padding:12px;gap:12px}
  .mm .os-o-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .mm .os-o-guests{grid-column:1/-1}
}
@container (max-width:560px){
  .mm .os-o-cols,.mm .os-o-list li{grid-template-columns:minmax(0,1fr) 80px 64px;padding:0 14px;gap:10px}
  .mm .os-o-t,.mm .os-o-src,.mm .os-o-cols span:nth-child(1),.mm .os-o-cols span:nth-child(3){display:none}
  .mm .os-o-list{flex:none;min-height:0;height:300px}
  .mm .os-o-list li{height:60px}
  .mm .os-o-side{grid-template-columns:1fr}
  .mm .os-o-stat b{font-size:28px}
}

/* ---------- osCompare: your site versus a delivery app ---------- */
.mm .os-cmp{padding:8px 24px 18px;background:var(--os-stage)}
.mm .os-c-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center;min-height:58px;border-bottom:1px solid var(--os-hair);font-size:15px}
.mm .os-c-k{color:var(--os-ink2);font-size:14px}
.mm .os-c-app{color:var(--os-ink3)}
.mm .os-c-own{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--os-ink)}
.mm .os-c-own svg{width:18px;height:18px;flex:none;padding:3px;border-radius:50%;background:var(--os-blue);color:#fff}
.mm .os-c-head{min-height:52px;font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mm .os-c-head .os-c-own{color:var(--os-ink);gap:10px}
.mm .os-c-head img{height:18px;width:auto}
.mm .os-c-foot{margin:14px 0 0;font-size:13px;color:var(--os-ink3)}
@container (max-width:600px){
  .mm .os-cmp{padding:4px 16px 14px}
  .mm .os-c-row{grid-template-columns:1fr 1fr;gap:4px 14px;padding:12px 0;font-size:14px;align-items:start}
  .mm .os-c-k{grid-column:1/-1;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
  .mm .os-c-head{display:none}
  .mm .os-c-app::before{content:"Delivery app";display:block;font-size:11px;color:var(--os-ink3)}
  .mm .os-c-own{display:block}
  .mm .os-c-own svg{display:none}
  .mm .os-c-own::before{content:"Your Maple site";display:block;font-size:11px;font-weight:400;color:var(--os-blue)}
}

/* ---------- osPublish: edit, preview, publish ---------- */
.mm .os-pub{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;padding:20px;background:var(--os-stage)}
.mm .os-p-ed{display:flex;flex-direction:column;gap:16px;padding:18px;background:#fff;border:1px solid var(--os-hair);border-radius:8px}
.mm .os-p-h{display:flex;justify-content:space-between;align-items:center}
.mm .os-p-h b{font-weight:500;font-size:17px}
/* live is blue, like every "on" state; unpublished changes take the attention colour */
.mm .os-p-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--os-tint);color:var(--os-blue);font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease}
.mm .os-p-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mm .os-p-chip.draft{background:var(--os-warn-bg);color:var(--os-warn)}
.mm .os-p-f{display:grid;gap:7px;margin:0}
.mm .os-p-f > span:first-child{font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os-ink3)}
.mm .os-p-in{display:flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid var(--os-hair);border-radius:6px;font-size:14px;line-height:1.35}
.mm .os-p-in.typing{border-color:var(--os-blue);box-shadow:0 0 0 3px var(--os-tint)}
.mm .os-p-in.typing::after{content:"";width:1.5px;height:17px;margin-left:1px;background:var(--os-blue);animation:os-caret 1s steps(1) infinite}
@keyframes os-caret{50%{opacity:0}}
.mm .os-p-sw{display:flex;gap:8px}
.mm .os-p-sw i{width:30px;height:30px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform 160ms ease-out,box-shadow .2s ease}
.mm .os-p-sw i.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.mm .os-p-cover{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--os-ink2)}
.mm .os-p-cover img{width:64px;height:36px;border-radius:6px;object-fit:cover}
.mm .os-p-cover em{font-style:normal}
.mm .os-p-row{grid-template-columns:1fr auto;align-items:center}
.mm .os-p-tog{width:34px;height:20px;border-radius:10px;background:var(--os-blue);position:relative}
.mm .os-p-tog i{position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}
/* quiet while there is nothing to publish, blue once there is */
.mm .os-p-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;height:42px;border-radius:6px;background:var(--os-stage);color:var(--os-ink3);font-weight:500;font-size:14px;transition:transform 160ms ease-out,background-color .25s ease,color .25s ease}
.mm .os-p-btn.ready{background:var(--os-blue);color:#fff}
.mm .os-p-prev{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--os-hair);border-radius:8px;overflow:hidden;font-family:var(--os-site);color:var(--os-ink)}
.mm .os-p-site{padding:0 18px 18px}
.mm .os-p-nav{display:flex;align-items:center;gap:16px;height:50px;font-size:12px;color:var(--os-ink2)}
.mm .os-p-nav img{height:22px;width:auto;margin-right:auto}
.mm .os-p-cta{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--os-r);color:#fff;font-weight:600;font-size:12px;transition:background-color .5s ease}
.mm .os-p-hero{position:relative;height:190px;border-radius:10px;overflow:hidden}
.mm .os-p-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.mm .os-p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.05) 70%)}
.mm .os-p-hero div{position:absolute;left:20px;bottom:18px;right:40%;z-index:1;display:grid;gap:8px;justify-items:start;color:#fff}
.mm .os-p-hero small{font-size:11px;font-weight:600;opacity:.9}
.mm .os-p-hero b{font-size:22px;font-weight:650;line-height:1.1;letter-spacing:-.02em}
.mm .os-p-ann{margin:12px 0 0;padding:8px 12px;border:1px solid var(--os-hair);background:var(--os-soft);border-radius:8px;font-size:12px;min-height:34px;transition:background-color .3s ease}
.mm .os-p-ann.hl{background:var(--os-tint)}
.mm .os-p-pop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.mm .os-p-pop span{display:grid;gap:5px;font-size:11.5px}
.mm .os-p-pop img{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover}
.mm .os-p-pop b{font-weight:600}
.mm .os-p-toast{position:absolute;left:50%;bottom:16px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--os-ink);color:#fff;font:500 12.5px/1 var(--sans);white-space:nowrap;
  opacity:0;transform:translate(-50%,10px);transition:opacity .25s ease-out,transform .45s var(--os-out)}
.mm .os-p-toast svg{width:14px;height:14px;color:#fff}
.mm .os-p-toast.on{opacity:1;transform:translate(-50%,0)}
@container (max-width:720px){
  .mm .os-pub{grid-template-columns:1fr;padding:12px;gap:12px}
  .mm .os-p-prev{order:-1}
  .mm .os-p-site{padding:0 12px 12px}
  .mm .os-p-nav span:not(.os-p-cta){display:none}
  .mm .os-p-hero{height:150px}
  .mm .os-p-hero div{right:20px}
  .mm .os-p-hero b{font-size:18px}
  .mm .os-p-pop{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mm .os-p-pop span:nth-child(4){display:none}
  .mm .os-p-toast{font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){
  .mm [data-study^="os"] *,.mm [data-study^="os"] *::before,.mm [data-study^="os"] *::after{transition:none!important;animation:none!important}
}