/* ---- Takeaway page hero: the restaurant's phone with today's lunch orders, sorted by pickup time, and the money panel
   under it. Same footprint as the reservations hero (.bi). Default (no script, reduced motion): the end state.
   .is-out = an order not in yet; .is-pre = before the first arrival of a loop. ---- */
.oi { --pw: 240px; --ph: 388px; --lap: 46px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: left; }
.oi p, .oi ul, .oi ol { margin: 0; padding: 0; list-style: none; }
.oi b { font-weight: 600; }
.oi em { font-style: normal; }
.oi svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oi-phone {
  position: relative; z-index: 1; width: var(--pw); height: var(--ph); padding: 5px; border-radius: 26px; background: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 28px 48px -22px var(--card-glow, rgba(0,0,0,.5));
}
.oi-phone::before { content: ""; position: absolute; z-index: 2; top: 11px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 99px; background: var(--ink); }
.oi-screen { height: 100%; overflow: hidden; padding: 30px 12px 0; border-radius: 21px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4; }
.oi-shop { display: flex; align-items: center; gap: 6px; color: #b8221c; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 15px; }
.oi-shop .vg-app { width: 20px; height: 20px; border-radius: 6px; }
.oi-shop .vg-app .mark { width: 15px; }
.oi-head { display: flex; align-items: baseline; gap: 8px; margin-top: 1px !important; }
.oi-head b { font-family: var(--font-display); font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.oi-head span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the slots strip: how many orders per pickup time, one mark per order (pickup teal, delivery outlined) */
.oi-slots { margin-top: 8px; padding: 8px 10px 7px; border-radius: 14px; background: var(--teal-soft); color: var(--teal); }
.oi-slots-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; }
.oi-slots-label b { min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--teal); color: #fff; text-align: center; font-size: 12px; line-height: 18px; }
.oi-slots ol { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; margin-top: 4px !important; }
.oi-slots li { display: grid; justify-items: center; gap: 2px; }
.oi-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; height: 22px; width: 100%; }
.oi-stack i { display: block; height: 6px; border-radius: 3px; background: var(--teal); transition: opacity .35s ease-out, transform .5s var(--ease-out); transform-origin: bottom; }
.oi-stack i.oi-pip-delivery { background: transparent; box-shadow: inset 0 0 0 1.5px var(--teal); }
.oi-stack i.is-off { opacity: 0; transform: scaleY(.2); }
.oi-slots small { font-size: 11px; line-height: 1.2; color: var(--ink-2); }

.oi-rows { margin-top: 4px !important; }
.oi-row { display: flex; align-items: center; gap: 8px; height: 48px; overflow: hidden; border-bottom: 1px solid var(--line); transition: height .55s var(--ease-out), opacity .45s ease-out; }
.oi-row.is-out { height: 0; opacity: 0; border-bottom-width: 0; }
.oi-row.is-new { animation: oi-new 1.5s ease-out; }
@keyframes oi-new { from { background: var(--sunny-soft); } to { background: transparent; } }
.oi-src { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; }
.oi-src img { width: 15px; height: 15px; }
.oi-src svg { width: 15px; height: 15px; stroke-width: 1.4; }
.oi-src-google { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.oi-src-site { background: var(--teal-soft); color: var(--teal); }
.oi-src-social { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); color: #fff; }
.oi-src-social circle:last-child { fill: currentColor; }
.oi-who { flex: 1; min-width: 0; display: grid; }
.oi-who b { display: flex; align-items: center; gap: 5px; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.oi-who > span { color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-mode { padding: 0 6px; border-radius: 99px; font-size: 11px; line-height: 16px; font-weight: 600; }
.oi-mode-pickup { background: var(--teal-soft); color: var(--teal); }
.oi-mode-delivery { background: var(--sunny-soft); color: var(--sunny-deep); }
.oi-right { flex: none; display: grid; justify-items: end; }
.oi-right b { font-size: 14px; line-height: 1.3; }
.oi-right span { font-size: 12px; color: var(--ink-2); }

/* the money: what was paid online, straight to the restaurant */
.oi-card {
  position: relative; z-index: 3; width: min(100%, 318px); margin-top: calc(var(--lap) * -1); padding: 13px 16px 14px;
  border-radius: 22px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 -10px 24px -14px rgba(15,42,48,.35), 0 26px 44px -22px var(--card-glow, rgba(0,0,0,.5));
}
.oi-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.oi-added { padding: 2px 8px; border-radius: 99px; background: var(--basil-soft); color: var(--basil); font-weight: 600; white-space: nowrap; transition: opacity .35s ease-out, transform .5s var(--ease-out); }
.oi-added.is-pop { animation: oi-pop .5s var(--ease-out); }
@keyframes oi-pop { from { transform: translateY(6px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.oi-card-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 2px !important; }
.oi-card-n b { font-family: var(--font-display); font-size: 32px; line-height: 1.2; letter-spacing: -.02em; }
.oi-card-n small { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.oi-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px !important; }
.oi-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 5px 9px; border-radius: 99px; background: var(--teal); color: #fff; font-weight: 600; white-space: nowrap; }
.oi-tags .oi-tag-zero { padding-left: 11px; background: var(--sunny); color: var(--ink); }

.oi.is-pre .oi-added { opacity: 0; transform: scale(.8); }
.oi.is-reset .oi-row, .oi.is-reset .oi-added, .oi.is-reset .oi-stack i { transition: none; animation: none; }
@media (min-width: 431px) {
  .oi { --pw: 276px; --ph: 492px; --lap: 58px; }
  .oi-screen { padding: 34px 14px 0; }
  .oi-row { height: 52px; }
  .oi-who b, .oi-right b { font-size: 15px; }
  .oi-who > span, .oi-right span { font-size: 13px; }
  .oi-stack { height: 26px; }
  .oi-stack i { height: 7px; }
  .oi-card { width: min(100%, 372px); padding: 16px 20px 18px; }
  .oi-card-n b { font-size: 40px; }
  .oi-card-top, .oi-card-n small, .oi-tags span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .oi-row, .oi-added, .oi-stack i { transition: none; } .oi-row.is-new, .oi-added.is-pop { animation: none; } }
/* ---- Guest engagement page hero: the restaurant's guest list on OKO, new guests arriving at the top with their source,
   returning guests lighting up, and this month's counts under the phone. Same footprint as .oi / .bi. Default (no
   script, reduced motion): the end state. .is-out = a guest not in yet; .is-before = a returning guest before the visit. ---- */
.lh { --pw: 240px; --ph: 388px; --lap: 46px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: left; }
.lh p, .lh ul { margin: 0; padding: 0; list-style: none; }
.lh b { font-weight: 600; }
.lh em { font-style: normal; }
.lh svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lh-phone {
  position: relative; z-index: 1; width: var(--pw); height: var(--ph); padding: 5px; border-radius: 26px; background: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 28px 48px -22px var(--card-glow, rgba(0,0,0,.5));
}
.lh-phone::before { content: ""; position: absolute; z-index: 2; top: 11px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 99px; background: var(--ink); }
.lh-screen { height: 100%; overflow: hidden; padding: 30px 12px 0; border-radius: 21px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4; }
.lh-shop { display: flex; align-items: center; gap: 6px; color: #1e3a2d; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 15px; }
.lh-shop .vg-app { width: 20px; height: 20px; border-radius: 6px; }
.lh-shop .vg-app .mark { width: 15px; }
.lh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 1px !important; }
.lh-head > b { font-family: var(--font-display); font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.lh-count { display: inline-flex; align-items: baseline; gap: 2px; color: var(--ink-2); white-space: nowrap; }
.lh-count b { display: inline-block; font-family: var(--font-display); font-size: 18px; color: var(--teal); }
.lh-count b.is-bump, .lh-stat b.is-bump { animation: lh-bump .5s var(--ease-out); }
@keyframes lh-bump { 40% { transform: scale(1.14); } }

.lh-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px !important; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lh-src { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: 11px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.lh-src-all { background: var(--ink); color: #fff; }
.lh-src-booking { background: var(--teal-soft); color: var(--teal); }
.lh-src-takeaway { background: var(--sunny-soft); color: var(--sunny-deep); }
.lh-src-qr { background: #eef0ef; color: var(--ink-2); }
.lh-src-wheel { background: #fde8ee; color: #a3123a; }

.lh-row { display: flex; align-items: center; gap: 8px; height: 46px; overflow: hidden; border-bottom: 1px solid var(--line); transition: height .55s var(--ease-out), opacity .45s ease-out, background-color .6s; }
.lh-row.is-out { height: 0; opacity: 0; border-bottom-width: 0; }
.lh-row.is-new { animation: lh-new 1.6s ease-out; }
@keyframes lh-new { from { background: var(--teal-soft); } to { background: transparent; } }
.lh-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: #e9eeed; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.lh-who { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 1px; }
.lh-who b { font-size: 14px; line-height: 1.3; }
.lh-right { flex: none; display: grid; justify-items: end; }
.lh-new { padding: 1px 8px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.lh-swap { display: grid; justify-items: end; }
.lh-swap > * { grid-area: 1 / 1; transition: opacity .35s, transform .45s var(--ease-out); }
.lh-before { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lh-back { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 99px; background: var(--basil-soft); color: var(--basil); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lh-back i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 99px; background: var(--basil); color: #fff; }
.lh-back i svg { width: 10px; height: 10px; stroke-width: 2.2; }
.lh-swap:has(.lh-back) .lh-before { opacity: 0; transform: translateY(-6px); }
.lh-row.is-before .lh-swap .lh-before { opacity: 1; transform: none; }
.lh-row.is-before .lh-back { opacity: 0; transform: translateY(6px) scale(.9); }
.lh-row.is-lit { animation: lh-lit 1.8s ease-out; }
@keyframes lh-lit { from { background: var(--basil-soft); } to { background: transparent; } }

/* this month: new and returning guests */
.lh-card {
  position: relative; z-index: 3; width: min(100%, 318px); margin-top: calc(var(--lap) * -1); padding: 13px 16px 14px;
  border-radius: 22px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 -10px 24px -14px rgba(15,42,48,.35), 0 26px 44px -22px var(--card-glow, rgba(0,0,0,.5));
}
.lh-card-top { font-weight: 600; color: var(--ink-2); }
.lh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.lh-stat { display: grid; }
.lh-stat small { font-size: 13px; color: var(--ink-2); }
.lh-stat b { justify-self: start; font-family: var(--font-display); font-size: 30px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.lh-stat-back b { color: var(--basil); }
.lh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px !important; }
.lh-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 5px 9px; border-radius: 99px; background: var(--teal); color: #fff; font-weight: 600; white-space: nowrap; }
.lh-tags .lh-tag-own { padding-left: 11px; background: var(--sunny); color: var(--ink); }

.lh.is-reset .lh-row, .lh.is-reset .lh-swap > *, .lh.is-reset b { transition: none; animation: none; }
@media (min-width: 431px) {
  .lh { --pw: 276px; --ph: 492px; --lap: 58px; }
  .lh-screen { padding: 34px 14px 0; }
  .lh-row { height: 52px; }
  .lh-who b { font-size: 15px; }
  .lh-av { width: 32px; height: 32px; font-size: 13px; }
  .lh-card { width: min(100%, 372px); padding: 16px 20px 18px; }
  .lh-stat b { font-size: 38px; }
  .lh-card-top, .lh-stat small, .lh-tags span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .lh-row, .lh-swap > * { transition: none; } .lh-row.is-new, .lh-row.is-lit, .lh b.is-bump { animation: none; } }
/* ---- Guest engagement page, key point 1: three places (a booking, a takeaway order, a wheel win) dropping names into the
   restaurant's guest list on OKO; a guest's profile with visits, spend, sources, tags and a note; the list exported.
   Phones: the places as a row of tiles above the phone; wider: a column of cards beside it. Inside the phone everything
   is in em of the screen's width / 100. Default (no script, reduced motion): the end. ---- */
.kp-card:has(> .ll), .kp-visual .kp-card:has(> .ll) { width: 100%; margin: 0 auto; }
.ll { --w: 250px; position: relative; display: grid; justify-items: center; gap: 14px; text-align: left; color: var(--ink); }
.ll p, .ll ul, .ll dl, .ll dd { margin: 0; padding: 0; list-style: none; }
.ll svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the three places */
.ll-feeds { width: 100%; max-width: 390px; padding-top: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ll-feed { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 7px; padding: 9px 9px 9px; border-radius: 16px; background: var(--white);
  font-size: 12px; line-height: 1.3; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 28px -18px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05);
  transition: transform .45s var(--ease-out), box-shadow .45s, opacity .45s; }
.ll-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.ll-ico svg { width: 15px; height: 15px; }
.ll-feed-booking .ll-ico { background: var(--teal-soft); color: var(--teal); }
.ll-feed-takeaway .ll-ico { background: var(--sunny-soft); color: var(--sunny-deep); }
.ll-feed-wheel .ll-ico { background: #fde8ee; color: #a3123a; }
.ll-feed-t { display: grid; min-width: 0; }
.ll-feed-t b { font-size: 13px; font-weight: 600; }
.ll-feed-t small { font-size: 11px; color: var(--ink-3); }
.ll-feed-n { display: none; grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); }
.ll-tick { position: absolute; top: -6px; right: -5px; width: 22px; height: 22px; border-radius: 99px; background: var(--teal); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2.5px var(--ground); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .45s var(--ease-out); }
.ll-tick svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ll-feed.done .ll-tick { opacity: 1; transform: none; }
.ll[data-src] .ll-feed { opacity: .55; }
.ll[data-src="0"] .ll-feed[data-i="0"], .ll[data-src="1"] .ll-feed[data-i="1"], .ll[data-src="2"] .ll-feed[data-i="2"] {
  opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--teal), 0 18px 32px -16px rgba(15,42,48,.55); }

/* the phone */
.ll-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(15,42,48,.55); }
.ll-phone::before { content: ""; position: absolute; z-index: 6; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.ll-screen { position: relative; width: var(--w); aspect-ratio: 25 / 38; overflow: hidden; padding: 11em 5.6em 0; font-size: calc(var(--w) / 100); line-height: 1.35; background: #fff; }
.ll-top { display: flex; align-items: center; justify-content: space-between; gap: 3em; }
.ll-app { display: flex; align-items: center; gap: 2.4em; }
.ll-app .vg-app { width: 8em; height: 8em; border-radius: 2.2em; }
.ll-app .vg-app .mark { width: 6em; }
.ll-app small { font-size: 4.6em; font-weight: 600; color: var(--ink-2); }
.ll-export { display: inline-flex; align-items: center; gap: .3em; padding: .35em .8em .35em .6em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--teal); font-size: 4.4em; font-weight: 600; white-space: nowrap; }
.ll-export svg { width: 1.15em; height: 1.15em; }
.ll-title { display: flex; align-items: baseline; justify-content: space-between; gap: 3em; margin-top: 3.4em !important; }
.ll-title b { font-family: var(--font-display); font-size: 8.4em; line-height: 1.15; font-weight: 600; }
.ll-title span { font-size: 4.8em; color: var(--ink-2); white-space: nowrap; }
.ll-search { display: flex; align-items: center; gap: .5em; margin-top: 3em !important; padding: .55em .8em; border-radius: .7em; background: #f1f3f2; color: var(--ink-3); font-size: 4.4em; }
.ll-search svg { width: 1.1em; height: 1.1em; flex: none; }
.ll-list { margin-top: 2em !important; }
.ll-row { display: flex; align-items: center; gap: 3em; height: 17em; overflow: hidden; border-bottom: 1px solid var(--line); transition: height .55s var(--ease-out), opacity .45s; }
.ll-row.is-out { height: 0; opacity: 0; border-bottom-width: 0; }
.ll-row.is-new { animation: ll-new 1.6s ease-out; }
@keyframes ll-new { from { background: var(--teal-soft); } to { background: transparent; } }
.ll-av { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 99em; background: #e9eeed; color: var(--ink-2); font-size: 4.6em; font-weight: 700; }
.ll-who { flex: 1; min-width: 0; display: grid; justify-items: start; gap: .6em; }
.ll-who b { font-size: 5em; font-weight: 600; line-height: 1.25; }
.ll-row > small { flex: none; font-size: 4.2em; color: var(--ink-3); white-space: nowrap; }
.ll-src { display: inline-block; padding: 0 .65em; border-radius: 99em; font-size: 3.8em; line-height: 1.6; font-weight: 600; white-space: nowrap; }
.ll-src-booking { background: var(--teal-soft); color: var(--teal); }
.ll-src-takeaway { background: var(--sunny-soft); color: var(--sunny-deep); }
.ll-src-wheel { background: #fde8ee; color: #a3123a; }
.ll-src-qr { background: #eef0ef; color: var(--ink-2); }

/* the profile, sliding over the list */
.ll-prof { position: absolute; z-index: 3; inset: 0; padding: 11em 5.6em 0; background: #fff; transition: transform .55s var(--ease-out); }
.ll[data-prof="0"] .ll-prof { transform: translateX(102%); }
.ll-back { display: flex; align-items: center; gap: .2em; color: var(--teal); font-size: 4.6em; font-weight: 600; }
.ll-back svg { width: 1.2em; height: 1.2em; }
.ll-id { display: flex; align-items: center; gap: 3.4em; margin-top: 4em !important; }
.ll .ll-av-big { width: 2.35em; height: 2.35em; font-size: 6.4em; background: var(--teal); color: #fff; }
.ll-id b { font-family: var(--font-display); font-size: 7.2em; line-height: 1.2; font-weight: 600; }
.ll-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; margin: 4.4em 0 0 !important; padding: 3em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ll-stats div { display: grid; }
.ll-stats dt { font-size: 3.8em; color: var(--ink-3); }
.ll-stats dd { font-size: 5.6em; font-weight: 600; }
.ll-label { margin-top: 1.1em !important; font-size: 3.8em; color: var(--ink-3); }
.ll-chips { display: flex; flex-wrap: wrap; gap: 1.6em; margin-top: 1.4em !important; }
.ll-tag { display: inline-block; padding: .25em .75em; border-radius: 99em; background: var(--basil-soft); color: var(--basil); font-size: 4.2em; font-weight: 600; transition: opacity .35s, transform .45s var(--ease-out); }
.ll-tag-add { display: grid; place-items: center; width: 1.6em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3); font-size: 4.2em; line-height: 1.5; }
.ll[data-tags="0"] .ll-tag, .ll[data-tags="1"] .ll-tag[data-t="2"] { opacity: 0; transform: scale(.7); position: absolute; }
.ll-note { margin-top: .35em !important; padding: .55em .75em; border-radius: .6em; background: #fbf7ec; color: var(--ink-2); font-size: 4.3em; line-height: 1.4; transition: opacity .4s, transform .5s var(--ease-out); }
.ll[data-note="0"] .ll-note { opacity: 0; transform: translateY(1.2em); }

.ll-orders { margin-top: .6em !important; }
.ll-orders li { display: flex; justify-content: space-between; gap: 2em; padding: 1.6em 0; border-bottom: 1px solid var(--line); }
.ll-orders span { font-size: 4.2em; color: var(--ink-3); white-space: nowrap; }
.ll-orders b { font-size: 4.4em; font-weight: 600; text-align: right; }
.ll-toast { position: absolute; z-index: 4; left: calc(var(--w) * .056); right: calc(var(--w) * .056); bottom: calc(var(--w) * .06); display: flex; align-items: center; gap: .5em; padding: .85em 1em; border-radius: .9em;
  background: var(--ink); color: #fff; font-size: 4.4em; font-weight: 600; box-shadow: 0 1.4em 3em -1em rgba(0,0,0,.45); transition: opacity .35s, transform .5s var(--ease-out); }
.ll-toast i { flex: none; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 99em; background: var(--basil); }
.ll-toast svg { width: .9em; height: .9em; stroke-width: 2.8; }
.ll[data-toast="0"] .ll-toast { opacity: 0; transform: translateY(1.5em); }
.ll-tap { position: absolute; z-index: 5; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(0,0,0,.12); box-shadow: 0 0 0 1.2em rgba(120,120,120,.18); opacity: 0; pointer-events: none; }
.ll-tap.on { animation: vd-tap .6s ease-out; }

.ll.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 600px) {
  .ll { --w: 272px; grid-template-columns: 196px auto; justify-content: center; align-items: center; gap: 22px; }
  .ll-feeds { grid-template-columns: 1fr; gap: 12px; padding-top: 0; }
  .ll-feed { padding: 11px 12px 12px; }
  .ll-feed-n { display: block; }
}
@media (prefers-reduced-motion: reduce) { .ll * { transition: none !important; animation: none !important; } }
/* ---- Guest engagement, "after dinner, a spin": the guest's phone on Fiamma's wheel, in Fiamma's own look (cream, tomato
   red, brown, the name in Georgia italic), and beside it OKO's note of a new guest. Sized in em of the screen's width / 100.
   The default (no script, reduced motion): the prize code and the chip. data-scene = task | wheel | win | sent | prize;
   data-pick / data-spun / data-chip = "0" and data-mail = characters typed are the earlier moments. ---- */
.kp-card:has(> .vg-lwheel), .kp-visual .kp-card:has(> .vg-lwheel) { width: 100%; margin: 0 auto; }
.vg-lwheel { --w: 236px; --lw-red: #b8221c; --lw-cream: #f7eddc; --lw-brown: #4a1712; --lw-gold: #e9b44c; display: grid; justify-items: center; gap: 12px; }
.lw-phone { position: relative; z-index: 1; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: var(--lw-cream);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.lw-phone::before { content: ""; position: absolute; z-index: 9; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.lw-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left;
  background: radial-gradient(120% 70% at 50% 30%, #fff8ec, var(--lw-cream) 60%); color: var(--lw-brown); }
.lw-screen p { margin: 0; }
.lw-screen ul { list-style: none; margin: 0; padding: 0; }
.lw-screen svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lw-status { position: absolute; z-index: 8; top: 0; left: 0; right: 0; height: 9.5em; padding: 0 8em; display: flex; align-items: center; justify-content: space-between; color: var(--lw-brown); }
.lw-status b { font-size: 3.8em; font-weight: 600; }
.lw-status i { width: 6.4em; height: 2.8em; border-radius: .8em; box-shadow: inset 0 0 0 .35em currentColor; }

/* the wheel page */
.lw-page { position: absolute; inset: 0; padding-top: 12em; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lw-brand { display: flex; align-items: center; gap: 2em; }
.lw-logo { flex: none; font-size: 4.2em; width: 1.9em; height: 1.9em; border-radius: 99em; display: grid; place-items: center; background: var(--lw-red); color: #fff;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; line-height: 1; }
.lw-brand b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 5.6em; font-weight: 700; color: var(--lw-red); line-height: 1; }
.lw-title { margin-top: .5em !important; font-size: 7.2em; font-weight: 800; line-height: 1.1; color: var(--lw-brown); padding: 0 1em; }
.lw-sub { margin-top: .45em !important; font-size: 3.5em; font-weight: 600; opacity: .7; padding: 0 2em; }
.lw-wheelbox { position: relative; width: 68em; height: 68em; margin-top: 7em; flex: none; }
.lw-wheelbox::before { content: ""; position: absolute; inset: -2.4em; border-radius: 99em; background: var(--lw-brown);
  box-shadow: 0 2em 5em -1.5em rgba(74,23,18,.55); }
.lw-wheelbox::after { content: ""; position: absolute; inset: -1.3em; border-radius: 99em;
  background: repeating-conic-gradient(from 7.5deg, var(--lw-gold) 0 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.1em), #000 calc(100% - 1em));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.1em), #000 calc(100% - 1em)); }
.lw-wheel { position: absolute; inset: 0; border-radius: 99em; overflow: hidden;
  background: conic-gradient(var(--lw-red) 0 90deg, #fff7ea 90deg 180deg, var(--lw-red) 180deg 270deg, #fff7ea 270deg 360deg);
  box-shadow: inset 0 0 0 .6em rgba(255,255,255,.35); transform: rotate(0deg); }
.vg-lwheel:not([data-spun="0"]) .lw-wheel { transform: rotate(1755deg); transition: transform 3.1s cubic-bezier(.12, .62, .16, 1); }
.lw-seg { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.lw-seg b { position: absolute; left: -4em; top: -9em; width: 8em; font-size: 3.1em; font-weight: 800; line-height: 1.15; text-align: center; color: #fff; overflow-wrap: anywhere; }
.lw-seg:is([data-i="1"], [data-i="3"]) b { color: var(--lw-brown); }
.lw-pointer { position: absolute; z-index: 2; left: 50%; top: -4.8em; width: 9em; height: 11em; margin-left: -4.5em; background: var(--lw-gold);
  clip-path: polygon(50% 100%, 0 22%, 22% 0, 78% 0, 100% 22%); filter: drop-shadow(0 .6em .6em rgba(0,0,0,.3)); }
.lw-hub { position: absolute; z-index: 1; left: 50%; top: 50%; width: 15em; height: 15em; margin: -7.5em 0 0 -7.5em; border-radius: 99em; background: var(--lw-brown); color: var(--lw-gold);
  display: grid; place-items: center; font-style: italic; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1em; box-shadow: 0 0 0 1em var(--lw-gold); }
.lw-hub { font-size: 7em; width: 2.1em; height: 2.1em; margin: -1.05em 0 0 -1.05em; box-shadow: 0 0 0 .14em var(--lw-gold); }
.lw-spin { margin-top: 1.25em; padding: .6em 2.4em; border-radius: 99em; background: var(--lw-red); color: #fff; font-size: 4.6em; font-weight: 700;
  box-shadow: 0 .3em 0 #7d1611; transition: opacity .3s; }
.vg-lwheel:not([data-spun="0"]) .lw-spin { opacity: .45; }

/* bottom sheets: the task, the win, the mail sent, the prize */
.lw-sheet { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 6em 6em 8em; border-radius: 6em 6em 0 0; background: #fff; color: var(--ink);
  box-shadow: 0 -2em 5em rgba(74,23,18,.22); transition: transform .55s var(--ease-out), opacity .35s; }
.vg-lwheel:not([data-scene="task"]) .lw-task, .vg-lwheel:not([data-scene="win"]) .lw-win, .vg-lwheel:not([data-scene="sent"]) .lw-sent,
.vg-lwheel:not([data-scene="prize"]) .lw-prize { transform: translateY(105%); opacity: 0; pointer-events: none; }
.lw-sheet-t { font-size: 5em; font-weight: 700; }
.lw-opts { display: grid; gap: 2.6em; margin: 4.4em 0 5em !important; }
.lw-opt { display: flex; align-items: center; gap: 2.6em; padding: 3em 3.4em; border-radius: 3.4em; box-shadow: inset 0 0 0 .3em var(--line-strong); transition: box-shadow .3s, background-color .3s; }
.lw-opt-ico { flex: none; width: 9em; height: 9em; border-radius: 2.4em; display: grid; place-items: center; background: #f4f1ec; color: #c13584; }
.lw-opt-ico svg { width: 5.6em; height: 5.6em; }
.lw-opt-ico img { width: 5.2em; height: 5.2em; }
.lw-opt b { flex: 1; min-width: 0; font-size: 3.9em; font-weight: 600; line-height: 1.25; }
.lw-opt em { flex: none; display: flex; align-items: center; gap: .25em; font-style: normal; font-size: 3.4em; font-weight: 700; color: var(--basil); opacity: 0; transition: opacity .3s; }
.lw-opt em svg { width: 1.15em; height: 1.15em; stroke-width: 3; }
.vg-lwheel:not([data-pick="0"]) .lw-opt.pick { background: var(--basil-soft); box-shadow: inset 0 0 0 .4em var(--basil); }
.vg-lwheel:not([data-pick="0"]) .lw-opt.pick em { opacity: 1; }
.lw-btn { display: block; padding: .8em 0; border-radius: 99em; background: var(--lw-red); color: #fff; text-align: center; font-size: 4.4em; font-weight: 700; }
.vg-lwheel[data-pick="0"] .lw-task .lw-btn { opacity: .4; }

.lw-win { text-align: center; }
.lw-win-t { font-size: 4.2em; font-weight: 700; color: var(--lw-red); }
.lw-win-p { margin-top: .4em !important; font-size: 7.4em; font-weight: 800; color: var(--lw-brown); line-height: 1.15; }
.lw-label { margin-top: 1.4em !important; font-size: 3.6em; font-weight: 600; color: var(--ink-2); text-align: left; }
.lw-field { display: flex; align-items: center; margin: 1.8em 0 4.4em !important; padding: 0 3.4em; height: 13em; border-radius: 3em; box-shadow: inset 0 0 0 .35em var(--line-strong); text-align: left; }
.lw-typed { font-size: 4.2em; white-space: nowrap; overflow: hidden; }
.lw-caret { width: .5em; height: 5.4em; margin-left: .4em; background: var(--lw-red); animation: lw-blink 1s steps(1) infinite; }
.vg-lwheel:not([data-scene="win"]) .lw-caret { visibility: hidden; }
@keyframes lw-blink { 50% { opacity: 0; } }

.lw-sent { text-align: center; padding-top: 8em; padding-bottom: 12em; }
.lw-env { display: grid; place-items: center; width: 18em; height: 18em; margin: 0 auto 4em; border-radius: 99em; background: #fdeae6; color: var(--lw-red); }
.lw-env svg { width: 9em; height: 9em; }
.lw-sent-t { font-size: 5.4em; font-weight: 700; }
.lw-sent-h { margin-top: .5em !important; font-size: 3.8em; color: var(--ink-2); }

.lw-prize { top: 19em; padding-top: 4.4em; background: linear-gradient(#fff, #fff8ec); }
.lw-ok { display: flex; align-items: center; justify-content: center; gap: .4em; font-size: 3.8em; font-weight: 700; color: var(--basil); }
.lw-ok svg { width: 1.2em; height: 1.2em; stroke-width: 3; }
.lw-coupon { position: relative; margin-top: 3.4em; padding: 4em 6em 4.6em; border-radius: 4em; background: var(--lw-cream); color: var(--lw-brown); text-align: center;
  box-shadow: inset 0 0 0 .4em rgba(74,23,18,.14); }
.lw-coupon::before, .lw-coupon::after { content: ""; position: absolute; top: 25em; width: 6em; height: 6em; border-radius: 99em; background: #fff; }
.lw-coupon::before { left: -3em; } .lw-coupon::after { right: -3em; }
.lw-coupon-brand { display: flex; align-items: center; justify-content: center; gap: 1.6em; }
.lw-coupon-brand .lw-logo { font-size: 3.4em; }
.lw-coupon-brand b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 4.6em; font-weight: 700; color: var(--lw-red); }
.lw-coupon-p { margin-top: .3em !important; padding-bottom: .5em; border-bottom: .05em dashed rgba(74,23,18,.25); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 6.2em; font-weight: 700; line-height: 1.15; }
.lw-coupon-p.lw-cjk { font-family: inherit; font-style: normal; font-weight: 800; }
.lw-qr { display: block; width: 28em; height: 28em; margin: 3.8em auto 2.6em; padding: 1.6em; background: #fff; border-radius: 2em; }
.lw-qr .f { fill: var(--lw-brown); stroke: none; }
.lw-qr .w { fill: #fff; stroke: none; }
.lw-coupon-when { font-size: 3.8em; font-weight: 700; }
.lw-coupon-hint { margin-top: .8em !important; font-size: 3.4em; opacity: .75; }

.lw-tap { position: absolute; z-index: 9; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(74,23,18,.22); box-shadow: 0 0 0 1.2em rgba(74,23,18,.1); opacity: 0; pointer-events: none; }
.lw-tap.on { animation: vd-tap .6s ease-out; }

/* OKO's note: a new guest in the list */
.lw-chip { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 18px 34px -18px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); transition: opacity .4s, transform .5s var(--ease-out); }
.lw-chip .vg-app { width: 32px; height: 32px; border-radius: 9px; }
.lw-chip .vg-app .mark { width: 24px; }
.lw-chip > span:last-child { display: grid; }
.lw-chip b { font-size: 15px; font-weight: 700; color: var(--teal); }
.lw-chip small { font-size: 12px; color: var(--ink-3); }
.vg-lwheel[data-chip="0"] .lw-chip { opacity: 0; transform: translateY(8px); }

.vg-lwheel.is-reset * { transition: none !important; animation: none !important; }
.kp-photo + .kp-card:has(> .vg-lwheel) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-lwheel { --w: 280px; display: flex; align-items: flex-end; justify-content: center; gap: 0; }
  .lw-chip { margin: 0 0 64px -22px; }
  .kp-photo + .kp-card:has(> .vg-lwheel) { margin-top: -160px; }
  .kp-photo + .kp-card:has(> .vg-lwheel) .vg-lwheel { justify-content: flex-end; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vg-lwheel * { transition: none !important; animation: none !important; } }
/* ---- Guest engagement page, key point 3: every touchpoint invites the guest to join. A strip of the three touchpoints,
   a phone showing each in turn (takeaway confirmation, wheel prize, OKO Manager's join QR at the counter), and beside it
   the guest's wallet where the same hoji card lands each time, with this week's new members. Inside the phone, em of the
   screen's width / 100. data-scene = 1..3; data-joined = "0" before the tap; .no-card = wallet empty (start of a loop).
   Default (no script, reduced motion): the end. ---- */
.kp-card:has(> .lj), .kp-visual .kp-card:has(> .lj) { width: 100%; margin: 0 auto; }
.lj { --w: 214px; --hj-green: #5d6c2c; --hj-cream: #f6efe3; --hj-ink: #2e321f; --hj-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  position: relative; display: grid; justify-items: center; gap: 16px; text-align: left; color: var(--ink); }
.lj p, .lj ul, .lj ol { margin: 0; padding: 0; list-style: none; }
.lj svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the three touchpoints */
.lj-steps { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 6px; }
.lj-steps li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 6px; border-radius: 99px; background: var(--white); color: var(--ink-2);
  font-size: 13px; line-height: 1.3; font-weight: 600; box-shadow: 0 0 0 1px var(--line); transition: background-color .35s, color .35s, box-shadow .35s; }
.lj-steps i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; background: #e9eeed; color: transparent; transition: background-color .35s, color .35s; }
.lj-steps i svg { width: 12px; height: 12px; stroke-width: 3; }
.lj-steps li.now { color: var(--ink); box-shadow: 0 0 0 2px var(--teal); }
.lj-steps li.done i { background: var(--teal); color: #fff; }

.lj-stage { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 14px; }

/* the phone */
.lj-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 32px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(15,42,48,.55); }
.lj-phone::before { content: ""; position: absolute; z-index: 6; top: 8px; left: 50%; width: 28%; height: 10px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.lj-screen { position: relative; width: var(--w); aspect-ratio: 25 / 42; overflow: hidden; font-size: calc(var(--w) / 100); line-height: 1.35; background: #fff; }
.lj-s { position: absolute; inset: 0; padding: 13em 7em 0; display: flex; flex-direction: column; transition: opacity .45s, transform .55s var(--ease-out); }
.lj:not([data-scene="1"]) .lj-s[data-s="1"], .lj:not([data-scene="2"]) .lj-s[data-s="2"], .lj:not([data-scene="3"]) .lj-s[data-s="3"] { opacity: 0; transform: translateX(8%); pointer-events: none; }
.lj-s-order, .lj-s-wheel { background: var(--hj-cream); color: var(--hj-ink); }
.lj-brand { display: flex; align-items: center; gap: .3em; font-family: var(--hj-serif); font-size: 8em; line-height: 1; font-weight: 500; color: var(--hj-green); }
.lj-logo, .lj-qr-logo { display: grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 99em; background: var(--hj-green); color: var(--hj-cream); font-family: var(--hj-serif); font-style: italic; font-size: .8em; }
.lj-ok { display: flex; align-items: center; gap: .45em; margin-top: 1.4em !important; font-size: 6em; }
.lj-ok i { display: grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 99em; background: var(--basil); color: #fff; }
.lj-ok svg { width: .8em; height: .8em; stroke-width: 3; }
.lj-ok b { font-weight: 600; }
.lj-meta { margin-top: 1.5em !important; font-size: 4.4em; color: #6d705d; }
.lj-lines { margin-top: 4em !important; padding: 2.4em 0; border-top: 1px solid rgba(46,50,31,.14); border-bottom: 1px solid rgba(46,50,31,.14); }
.lj-lines li { font-size: 4.6em; line-height: 1.6; }
.lj-join { margin-top: auto; margin-bottom: 7em; padding: 4em; border-radius: 4em; background: #fff; box-shadow: 0 0 0 1px rgba(46,50,31,.1), 0 2em 5em -2em rgba(46,50,31,.3); display: grid; gap: 3em; }
.lj-join p { display: grid; gap: .3em; }
.lj-join b { font-size: 5.2em; font-weight: 600; }
.lj-join small { font-size: 4.2em; color: #6d705d; }
.lj-btn { position: relative; display: grid; padding: .7em 0; border-radius: 99em; background: var(--hj-green); color: var(--hj-cream); text-align: center; font-size: 4.8em; font-weight: 600; transition: background-color .3s, color .3s, box-shadow .3s; }
.lj-btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .3em; transition: opacity .3s; }
.lj-btn svg { width: 1em; height: 1em; stroke-width: 3; }
.lj-btn > span:last-child { opacity: 0; }
.lj:not([data-joined="0"]) .lj-btn { background: transparent; color: var(--hj-green); box-shadow: inset 0 0 0 1.5px var(--hj-green); }
.lj:not([data-joined="0"]) .lj-btn > span:first-child { opacity: 0; }
.lj:not([data-joined="0"]) .lj-btn > span:last-child { opacity: 1; }

/* the wheel's prize page */
.lj-prize { margin-top: 4em; padding: 5em 4em 5em; border-radius: 4em; background: #fff; border: 1.5px dashed rgba(93,108,44,.45); display: grid; justify-items: center; text-align: center; gap: .8em; }
.lj-wheel { width: 16em; height: 16em; border-radius: 99em; margin-bottom: 1.6em; box-shadow: 0 0 0 1.2em #fff, 0 0 0 1.6em rgba(93,108,44,.25);
  background: conic-gradient(var(--hj-green) 0 25%, #c9d3a1 0 50%, var(--hj-green) 0 75%, #efe3c9 0); }
.lj-prize small { font-size: 4.2em; color: #6d705d; }
.lj-prize b { font-family: var(--hj-serif); font-size: 8em; line-height: 1.1; font-weight: 600; color: var(--hj-green); }
.lj-prize .lj-meta { margin-top: .4em !important; font-size: 4em; }

/* the counter: OKO Manager's join QR */
.lj-s-counter { background: #fff; color: var(--ink); align-items: stretch; }
.lj-oko { display: flex; align-items: center; gap: 2.4em; }
.lj-oko .vg-app { width: 8em; height: 8em; border-radius: 2.2em; }
.lj-oko .vg-app .mark { width: 6em; }
.lj-oko small { font-size: 4.4em; font-weight: 600; color: var(--ink-2); }
.lj-qr-title { display: flex; align-items: baseline; justify-content: space-between; gap: 2em; margin-top: 4em !important; }
.lj-qr-title b { font-family: var(--font-display); font-size: 7.4em; font-weight: 600; }
.lj-brand-sm { font-family: var(--hj-serif); font-size: 6em; color: var(--hj-green); }
.lj-qr { position: relative; align-self: center; width: 62em; margin-top: 5em; padding: 4em; border-radius: 4em; background: #fff; box-shadow: 0 0 0 1px var(--line-strong); }
.lj-qr svg { display: block; width: 100%; height: auto; fill: var(--ink); stroke: none; }
.lj-qr svg .f { fill: none; stroke: var(--ink); stroke-width: 1; }
.lj-qr-logo { position: absolute; left: 50%; top: 50%; width: 1.4em; height: 1.4em; margin: -.7em 0 0 -.7em; font-size: 9em; box-shadow: 0 0 0 .25em #fff; }
.lj-center { text-align: center; color: var(--ink-2); }
.lj-btn-oko { margin: auto 0 7em; background: var(--teal); color: #fff; }
.lj:not([data-joined="0"]) .lj-btn-oko { color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }

.lj-tap { position: absolute; z-index: 5; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(0,0,0,.14); box-shadow: 0 0 0 1.2em rgba(120,120,120,.18); opacity: 0; pointer-events: none; }
.lj-tap.on { animation: vd-tap .6s ease-out; }

/* the guest's wallet */
.lj-wallet { width: 200px; padding: 12px 12px 14px; border-radius: 22px; background: #1d1f1e; color: #fff; display: grid; gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 26px 46px -24px rgba(15,42,48,.6); }
.lj-wallet-label { font-size: 15px; font-weight: 700; }
.lj-slot { border-radius: 12px; transition: box-shadow .4s; }
.lj.no-card .lj-slot { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.lj-card { position: relative; padding: 11px 12px 10px; border-radius: 12px; background: var(--hj-green); color: var(--hj-cream); display: grid; gap: 9px;
  box-shadow: 0 -6px 0 -2px #7a5b3a, 0 -11px 0 -4px #2b4d7a, 0 10px 18px -8px rgba(0,0,0,.6); transition: opacity .4s, transform .6s var(--ease-out); }
.lj-card.is-in { animation: lj-drop .7s var(--ease-out); }
@keyframes lj-drop { from { transform: translateY(-46px) scale(.96); opacity: 0; } }
.lj.no-card .lj-card { opacity: 0; transform: translateY(-46px); }
.lj-card-top { display: flex; align-items: baseline; justify-content: space-between; }
.lj-card-brand { font-family: var(--hj-serif); font-style: italic; font-size: 24px; line-height: 1; }
.lj-card-top small { font-size: 12px; opacity: .85; }
.lj-stamps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.lj-stamps i { aspect-ratio: 1; border-radius: 99px; box-shadow: inset 0 0 0 1.2px rgba(246,239,227,.6); }
.lj-stamps i.on { background: var(--hj-cream); box-shadow: none; }
.lj-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lj-card-foot b { font-size: 14px; font-weight: 600; }
.lj-card-foot small { font-size: 12px; opacity: .85; white-space: nowrap; }
.lj-added { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #cfe3d6; transition: opacity .4s; }
.lj-added i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 99px; background: var(--basil); color: #fff; }
.lj-added svg { width: 11px; height: 11px; stroke-width: 3; }
.lj.no-card .lj-added { opacity: 0; }
.lj-week { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); }
.lj-week small { font-size: 13px; color: rgba(255,255,255,.75); }
.lj-week b { display: inline-block; font-family: var(--font-display); font-size: 22px; line-height: 1; white-space: nowrap; }
.lj-week b.is-bump { animation: lj-bump .5s var(--ease-out); }
@keyframes lj-bump { 40% { transform: scale(1.18); } }

.lj.is-reset * { transition: none !important; animation: none !important; }
@media (max-width: 430px) {
  .lj { --w: 196px; }
  .lj-steps li { padding: 4px 8px 4px 5px; font-size: 12px; }
  .lj-stage { gap: 10px; }
  .lj-wallet { width: 132px; padding: 10px 9px 11px; gap: 8px; }
  .lj-wallet-label { font-size: 13px; }
  .lj-card { padding: 9px 9px 8px; gap: 7px; }
  .lj-card-brand { font-size: 20px; }
  .lj-card-top small, .lj-card-foot small { font-size: 11px; }
  .lj-stamps { grid-template-columns: repeat(4, 1fr); }
  .lj-card-foot { display: grid; gap: 2px; }
  .lj-added { font-size: 12px; align-items: flex-start; }
  .lj-week { display: grid; gap: 2px; }
  .lj-week small { font-size: 12px; }
}
@media (min-width: 600px) { .lj { --w: 236px; } .lj-stage { gap: 22px; } .lj-wallet { width: 232px; } }
@media (prefers-reduced-motion: reduce) { .lj * { transition: none !important; animation: none !important; } }
/* ---- Guest engagement, "the prize is for next time": a two-day strip over the guest's phone (Tuesday's reminder on the
   lock screen, then Friday's prize code) and the staff phone at Fiamma's counter (OKO Manager: scan, redeemed, a second
   scan refused). Each screen is sized in em of its own width / 100. The default (no script, reduced motion): Friday, the
   coupon marked used, the refused scan. data-scene = remind | show | ok | again; data-notif / data-block = "0" are the
   earlier moments. ---- */
.kp-card:has(> .vg-lprize), .kp-visual .kp-card:has(> .vg-lprize) { width: 100%; margin: 0 auto; }
.vg-lprize { --gw: 168px; --sw: 152px; --lp-red: #b8221c; --lp-cream: #f7eddc; --lp-brown: #4a1712; display: grid; justify-items: center; gap: 14px; }
.vg-lprize p { margin: 0; }

/* the two days */
.lp-steps { list-style: none; margin: 0; padding: 8px 14px; display: flex; gap: 6px; border-radius: 99px; background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 26px -16px rgba(15,42,48,.4); }
.lp-steps li { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: 13px; color: var(--ink-3); transition: background-color .4s, color .4s; }
.lp-steps b { font-size: 14px; font-weight: 700; }
.vg-lprize[data-scene="remind"] .lp-steps [data-step="0"], .vg-lprize:not([data-scene="remind"]) .lp-steps [data-step="1"] { background: var(--teal); color: #fff; }

.lp-phones { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.lp-phone { position: relative; flex: none; border: 6px solid #14181a; border-radius: 30px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.lp-phone::before { content: ""; position: absolute; z-index: 9; top: 7px; left: 50%; width: 30%; height: 10px; margin-left: -15%; border-radius: 99px; background: #14181a; }
.lp-guest { width: calc(var(--gw) + 12px); transition: transform .6s var(--ease-out); }
.vg-lprize[data-scene="remind"] .lp-guest { transform: translateX(calc((var(--sw) - 18px) / 2)); }
.lp-staff { width: calc(var(--sw) + 12px); margin-left: -30px; margin-bottom: -10px; z-index: 2; transition: opacity .45s, transform .55s var(--ease-out); }
.vg-lprize[data-scene="remind"] .lp-staff { opacity: 0; transform: translate(24px, 10px); }
.lp-screen, .lp-sscreen { position: relative; aspect-ratio: 10 / 19; overflow: hidden; font-family: var(--font-text); line-height: 1.3; text-align: left; }
.lp-screen { width: var(--gw); font-size: calc(var(--gw) / 100); }
.lp-sscreen { width: var(--sw); font-size: calc(var(--sw) / 100); background: #f4f6f6; color: var(--ink); }
.vg-lprize svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the guest: Tuesday's lock screen */
.lp-lock { position: absolute; inset: 0; padding: 22em 6em 0; color: #fff; text-align: center;
  background: radial-gradient(90% 60% at 30% 20%, #c86b3c, transparent 70%), linear-gradient(170deg, #5b2a1d, #22161a 70%); transition: opacity .5s; }
.lp-time { font-size: 24em; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.lp-date { margin-top: .4em !important; font-size: 4.6em; font-weight: 500; opacity: .85; }
.lp-stack { margin-top: 14em; text-align: left; }
.lp-notice { padding: 4.2em 4.6em 4.6em; border-radius: 6em; background: rgba(255,255,255,.9); color: #14181a; box-shadow: 0 2em 5em rgba(0,0,0,.3);
  transition: opacity .45s, transform .6s var(--ease-out); }
.vg-lprize[data-notif="0"] .lp-notice, .vg-lprize[data-notif="0"] .lp-older { opacity: 0; transform: translateY(-8em); }
.lp-n-head { display: flex; align-items: center; gap: 2em; font-size: 3.6em; color: #5d6467; }
.lp-n-head i { flex: none; width: 1.7em; height: 1.7em; border-radius: .45em; background: linear-gradient(#4aa8ff, #1a73e8); color: #fff; display: grid; place-items: center; }
.lp-n-head i svg { width: 1.15em; height: 1.15em; }
.lp-n-head span { flex: 1; }
.lp-n-from { margin-top: .5em !important; font-size: 4.4em; font-weight: 700; }
.lp-n-title { margin-top: .4em !important; font-size: 4.6em; font-weight: 700; color: var(--lp-red); }
.lp-n-body { margin-top: .5em !important; font-size: 4em; color: #3a4043; }
.lp-older { margin: 3em 4em 0 !important; padding: 2.4em 3.6em; border-radius: 4em; background: rgba(255,255,255,.22); font-size: 3.6em; color: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .45s .15s, transform .6s .15s var(--ease-out); }
.lp-older { font-size: 3.4em; padding: .7em 1.1em; border-radius: 1.2em; margin: .9em 1.2em 0 !important; }

/* the guest: Friday's prize code */
.lp-coupon { position: absolute; inset: 0; padding: 22em 7em 0; background: linear-gradient(#fff, var(--lp-cream)); color: var(--lp-brown); text-align: center; transition: opacity .5s; }
.vg-lprize:not([data-scene="remind"]) .lp-lock, .vg-lprize[data-scene="remind"] .lp-coupon { opacity: 0; }
.lp-c-brand { display: flex; align-items: center; justify-content: center; gap: 2em; }
.lp-logo { flex: none; font-size: 4.4em; width: 1.9em; height: 1.9em; border-radius: 99em; display: grid; place-items: center; background: var(--lp-red); color: #fff;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; line-height: 1; }
.lp-c-brand b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 6em; font-weight: 700; color: var(--lp-red); }
.lp-c-prize { margin-top: .8em !important; font-size: 7.6em; font-weight: 800; line-height: 1.15; }
.lp-c-qr { position: relative; width: 62em; margin: 9em auto 6em; padding: 4em; border-radius: 4em; background: #fff; box-shadow: inset 0 0 0 .5em rgba(74,23,18,.12); }
.lp-qr { display: block; width: 100%; height: auto; }
.lp-qr .f { fill: var(--lp-brown); stroke: none; }
.lp-qr .w { fill: #fff; stroke: none; }
.lp-used { position: absolute; left: 50%; top: 50%; padding: .25em .9em; border: .2em solid var(--lp-red); border-radius: .5em; color: var(--lp-red); background: rgba(255,255,255,.88);
  font-size: 7em; font-weight: 800; letter-spacing: .08em; white-space: nowrap; transform: translate(-50%, -50%) rotate(-12deg); transition: opacity .35s, transform .45s var(--ease-out); }
.vg-lprize:is([data-scene="remind"], [data-scene="show"]) .lp-used { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.5); }
.lp-c-when { font-size: 4.2em; font-weight: 600; opacity: .8; }

/* the staff phone: OKO Manager scanning */
.lp-s-head { display: flex; align-items: center; gap: 3em; padding: 16em 7em 0; }
.lp-s-head .vg-app { width: 13em; height: 13em; border-radius: 3.6em; }
.lp-s-head .vg-app .mark { width: 9.6em; }
.lp-s-head b { font-size: 6.4em; font-weight: 700; }
.lp-cam { position: relative; height: 84em; margin: 7em 7em 0; border-radius: 6em; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, #3c4447, #15191b); }
.lp-frame { position: absolute; left: 50%; top: 50%; width: 46em; height: 46em; margin: -23em 0 0 -23em; }
.lp-frame::before, .lp-frame::after, .lp-frame i::before, .lp-frame i::after { content: ""; position: absolute; width: 11em; height: 11em; border: 0 solid #fff; }
.lp-frame::before { top: 0; left: 0; border-width: 1.4em 0 0 1.4em; border-top-left-radius: 4em; }
.lp-frame::after { top: 0; right: 0; border-width: 1.4em 1.4em 0 0; border-top-right-radius: 4em; }
.lp-frame i::before { bottom: 0; left: 0; border-width: 0 0 1.4em 1.4em; border-bottom-left-radius: 4em; }
.lp-frame i::after { bottom: 0; right: 0; border-width: 0 1.4em 1.4em 0; border-bottom-right-radius: 4em; }
.lp-line { position: absolute; left: 18em; right: 18em; top: 30%; height: .9em; border-radius: 99em; background: #5ce0c6; box-shadow: 0 0 3em #5ce0c6; opacity: 0; }
.vg-lprize[data-scene="show"] .lp-line, .vg-lprize[data-scene="again"][data-block="0"] .lp-line { opacity: 1; animation: lp-scan 1.2s ease-in-out infinite alternate; }
@keyframes lp-scan { from { top: 30%; } to { top: 68%; } }
.lp-s-hint { margin: 1em 1.5em 0 !important; font-size: 5em; color: var(--ink-3); text-align: center; }
.lp-res { position: absolute; left: 4em; right: 4em; bottom: 6em; padding: 5em 5em 6em; border-radius: 6em; background: #fff;
  box-shadow: 0 2em 6em rgba(15,42,48,.25); transition: opacity .35s, transform .5s var(--ease-out); }
.vg-lprize:not([data-scene="ok"]) .lp-ok, .vg-lprize:not([data-scene="again"]) .lp-no, .vg-lprize[data-block="0"] .lp-no { opacity: 0; transform: translateY(10em); }
.lp-r-t { display: flex; align-items: center; gap: .5em; font-size: 6.6em; font-weight: 800; line-height: 1.2; }
.lp-r-t i { flex: none; width: 1.4em; height: 1.4em; border-radius: 99em; display: grid; place-items: center; color: #fff; }
.lp-r-t i svg { width: .95em; height: .95em; stroke-width: 3.2; }
.lp-ok .lp-r-t { color: var(--basil); }
.lp-ok .lp-r-t i { background: var(--basil); }
.lp-no .lp-r-t { color: var(--berry); }
.lp-no .lp-r-t i { background: var(--berry); }
.lp-r-p { margin-top: .4em !important; font-size: 6.8em; font-weight: 700; }
.lp-r-m { margin-top: .4em !important; font-size: 5.2em; color: var(--ink-2); }
.lp-r-who { margin-top: .6em !important; padding-top: .6em; border-top: .07em solid var(--line); font-size: 5.2em; font-weight: 600; color: var(--ink-2); }

.vg-lprize.is-reset * { transition: none !important; animation: none !important; }
.kp-photo + .kp-card:has(> .vg-lprize) { margin-top: -96px; }
@media (min-width: 431px) {
  .vg-lprize { --gw: 210px; --sw: 168px; }
  .lp-staff { margin-left: -30px; }
  .kp-photo + .kp-card:has(> .vg-lprize) { margin-top: -150px; }
  .kp-photo + .kp-card:has(> .vg-lprize) .vg-lprize { justify-items: end; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vg-lprize * { transition: none !important; animation: none !important; } }
/* ---- Guest engagement, "a stamp every visit": hoji's member card as a full wallet pass in the guest's phone (matcha green,
   cream, a light serif), 8 → 9 of 10 stamps after the counter scan, then the lock-screen nudge; beside the phone OKO's
   note of the stamp. Sized in em of the screen's width / 100. The default (no script, reduced motion): 9 of 10 and the
   nudge. data-n = 8 | 9; data-scan / data-chip / data-notif = "0" are the earlier moments. ---- */
.kp-card:has(> .vg-lstamp), .kp-visual .kp-card:has(> .vg-lstamp) { width: 100%; margin: 0 auto; }
.vg-lstamp { --w: 236px; --ls-green: #5d6c2c; --ls-deep: #3f4a1c; --ls-cream: #f6efe3; --ls-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; display: grid; justify-items: center; gap: 12px; }
.vg-lstamp p { margin: 0; }
.ls-phone { position: relative; z-index: 1; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #0d0f10;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.ls-phone::before { content: ""; position: absolute; z-index: 9; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.ls-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left;
  background: linear-gradient(#17191a, #0b0c0d); color: var(--ls-cream); }
.ls-screen svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ls-status { position: absolute; z-index: 8; top: 0; left: 0; right: 0; height: 9.5em; padding: 0 8em; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.ls-status b { font-size: 3.8em; font-weight: 600; }
.ls-status i { width: 6.4em; height: 2.8em; border-radius: .8em; box-shadow: inset 0 0 0 .35em currentColor; }

/* the pass */
.ls-pass { position: absolute; left: 5em; right: 5em; top: 13em; padding: 5.4em 6em 6em; border-radius: 5em;
  background: radial-gradient(120% 60% at 15% 0%, #74843a, var(--ls-green) 55%, var(--ls-deep)); box-shadow: 0 2em 6em rgba(0,0,0,.5); transition: filter .5s; }
.vg-lstamp:not([data-notif="0"]) .ls-pass { filter: brightness(.8); }
.ls-top { display: flex; align-items: center; gap: 2em; }
.ls-mark { flex: none; width: 8.4em; height: 8.4em; border-radius: 99em; background: var(--ls-cream); color: var(--ls-green); display: grid; place-items: center; }
.ls-mark svg { width: 5.4em; height: 5.4em; }
.ls-top b { flex: 1; font-family: var(--ls-serif); font-style: italic; font-size: 8.4em; font-weight: 500; line-height: 1; }
.ls-top small { font-size: 3.4em; letter-spacing: .08em; opacity: .8; }
.ls-slots { list-style: none; margin: 5.4em 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.6em 2.2em; }
.ls-slot { aspect-ratio: 1; border-radius: 99em; display: grid; place-items: center; box-shadow: inset 0 0 0 .45em rgba(246,239,227,.5); color: transparent; transition: background-color .3s, color .3s, box-shadow .3s; }
.ls-slot svg { width: 60%; height: 60%; }
.ls-slot.on { background: var(--ls-cream); color: var(--ls-green); box-shadow: none; }
.ls-slot.last { box-shadow: inset 0 0 0 .45em rgba(246,239,227,.5), 0 0 0 .7em rgba(233,190,92,.0); background: rgba(246,239,227,.08); }
.ls-slot.last::after { content: "★"; position: absolute; }
.ls-slot.last { position: relative; color: transparent; }
.ls-slot.last::after { font-size: 4.6em; color: #e9c46a; }
.vg-lstamp[data-n="9"] .ls-slot.next { background: var(--ls-cream); color: var(--ls-green); box-shadow: none; animation: ls-pop .6s var(--ease-out); }
@keyframes ls-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ls-fields { display: flex; justify-content: space-between; gap: 4em; margin-top: 5em; }
.ls-fields p { display: grid; }
.ls-fields small { font-size: 3.1em; letter-spacing: .06em; opacity: .75; }
.ls-fields b { font-size: 5.4em; font-weight: 700; }
.ls-right { text-align: right; }
.ls-count { display: grid; }
.ls-count > span { grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--ease-out); }
.vg-lstamp[data-n="8"] .ls-count > span:last-child, .vg-lstamp[data-n="9"] .ls-count > span:first-child { opacity: 0; transform: translateY(-.4em); }
.ls-reward { margin-top: .7em !important; font-size: 3.6em; opacity: .9; }
.ls-code { position: relative; display: grid; justify-items: center; gap: 1.6em; margin: 5em auto 0; width: 42em; padding: 4em 4em 3em; border-radius: 3em; background: #fff; color: #2e321f; overflow: hidden; }
.ls-qr { display: block; width: 30em; height: 30em; }
.ls-qr .f { fill: #2e321f; stroke: none; }
.ls-qr .w { fill: #fff; stroke: none; }
.ls-code small { font-size: 3.2em; color: #5f6550; }
.ls-line { position: absolute; left: 3em; right: 3em; top: 4em; height: .9em; border-radius: 99em; background: #2fbf8f; box-shadow: 0 0 3em #2fbf8f; opacity: 0; }
.vg-lstamp[data-scan="1"] .ls-line { opacity: 1; animation: ls-scan .7s ease-in-out infinite alternate; }
@keyframes ls-scan { from { top: 4em; } to { top: 32em; } }

/* the lock-screen nudge */
.ls-notice { position: absolute; z-index: 6; left: 4em; right: 4em; top: 12em; padding: 4em 4.6em 4.4em; border-radius: 6em; background: rgba(48,50,52,.86); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2em 6em rgba(0,0,0,.45); transition: opacity .4s, transform .6s var(--ease-out); }
.vg-lstamp[data-notif="0"] .ls-notice { opacity: 0; transform: translateY(-14em); }
.ls-n-head { display: flex; align-items: center; gap: 2em; font-size: 3.5em; color: rgba(255,255,255,.7); }
.ls-n-ico { flex: none; width: 1.7em; height: 1.7em; border-radius: .45em; background: #111; color: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 .08em rgba(255,255,255,.3); }
.ls-n-ico svg { width: 1.15em; height: 1.15em; }
.ls-n-head > span:nth-child(2) { flex: 1; }
.ls-n-from { margin-top: .4em !important; font-family: var(--ls-serif); font-style: italic; font-size: 5.4em; font-weight: 600; line-height: 1; }
.ls-n-text { margin-top: .3em !important; font-size: 4.4em; line-height: 1.35; }

/* OKO's note: the stamp given at the counter */
.vg-lstamp .ls-chip { margin: 0; }
.ls-chip { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 18px 34px -18px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); transition: opacity .4s, transform .5s var(--ease-out); }
.ls-chip .vg-app { width: 32px; height: 32px; border-radius: 9px; }
.ls-chip .vg-app .mark { width: 24px; }
.ls-chip > span:last-child { display: grid; }
.ls-chip b { font-size: 15px; font-weight: 700; color: var(--teal); }
.ls-chip small { font-size: 12px; color: var(--ink-3); }
.vg-lstamp[data-chip="0"] .ls-chip { opacity: 0; transform: translateY(8px); }

.vg-lstamp.is-reset * { transition: none !important; animation: none !important; }
.kp-photo + .kp-card:has(> .vg-lstamp) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-lstamp { --w: 280px; display: flex; align-items: flex-end; justify-content: center; gap: 0; }
  .vg-lstamp .ls-chip { order: -1; margin: 0 -22px 120px 0; }
  .kp-photo + .kp-card:has(> .vg-lstamp) { margin-top: -160px; }
  .kp-photo + .kp-card:has(> .vg-lstamp) .vg-lstamp { justify-content: flex-end; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vg-lstamp * { transition: none !important; animation: none !important; } }
/* ---- Guest engagement, "new dishes and events, we tell your members": a chat between Le Jardin's owner and OKO's team
   (the email preview the team wrote, the owner's yes, sent to the opted-in members), and a guest's phone receiving it.
   The chat card is in px like the team-chat card; the phone is sized in em of the screen's width / 100. data-step 0..7;
   the default (no script, reduced motion) is 7: everything shown, the email open on the phone. ---- */
.kp-card:has(> .vg-lnews), .kp-visual .kp-card:has(> .vg-lnews) { width: 100%; margin: 0 auto; }
.vg-lnews { --lj-green: #1e3a2d; --lj-brass: #c99b52; --lj-cream: #f3ead8; --lj-serif: Georgia, "Times New Roman", serif; --w: 196px;
  position: relative; display: grid; justify-items: center; text-align: left; }
.vg-lnews p { margin: 0; }
.vg-lnews svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the chat */
.ln-desk { width: min(100%, 330px); padding: 14px 14px 16px; display: grid; gap: 8px; border-radius: 22px; background: var(--white); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px -18px rgba(0,0,0,.45); font-size: 15px; line-height: 1.35; }
.ln-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ln-head > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.ln-head b { font-size: 15px; line-height: 1.3; }
.ln-head small { font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.ln-time { margin-top: 2px; text-align: center; font-size: 13px; color: var(--ink-3); }
.ln-msg { display: flex; }
.ln-msg span { max-width: 86%; padding: 8px 13px; border-radius: 18px; font-size: 14.5px; line-height: 1.38; }
.ln-owner { justify-content: flex-end; }
.ln-owner span { background: var(--vg-accent); color: #fff; border-bottom-right-radius: 6px; }
.ln-team span { background: var(--ground); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.ln-slot { display: grid; }
.ln-slot > * { grid-area: 1 / 1; transition: opacity .3s; }
.ln-typing { opacity: 0; }
.ln-typing span { display: flex; align-items: center; gap: 4px; height: 36px; }
.ln-typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-3); animation: ln-dot 1s infinite ease-in-out; }
.ln-typing i:nth-child(2) { animation-delay: .15s; }
.ln-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ln-dot { 30% { transform: translateY(-3px); opacity: .5; } }
.vg-lnews.is-typing .ln-typing { opacity: 1; }
.vg-lnews.is-typing .ln-ack { opacity: 0; }
.ln-preview { padding-left: 2px; }
.ln-draft { width: 88%; display: flex; gap: 10px; padding: 8px; border-radius: 14px 14px 14px 6px; background: var(--lj-cream); color: var(--lj-green);
  box-shadow: inset 0 0 0 1px rgba(30,58,45,.14); }
.ln-draft-photo { flex: none; width: 58px; height: 58px; border-radius: 9px; background: url(/photos/dish-bistro.webp) center / cover; }
.ln-draft p { min-width: 0; display: grid; align-content: center; }
.ln-draft small { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--lj-brass); }
.ln-draft b { font-family: var(--lj-serif); font-weight: 400; font-size: 16.5px; line-height: 1.25; }
.ln-draft span { font-size: 12.5px; line-height: 1.35; color: rgba(30,58,45,.75); }
.ln-sent { justify-self: end; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 99px; background: var(--basil-soft); color: var(--basil);
  font-size: 13.5px; font-weight: 600; }
.ln-sent i { flex: none; width: 20px; height: 20px; border-radius: 99px; background: var(--basil); color: #fff; display: grid; place-items: center; }
.ln-sent svg { width: 13px; height: 13px; stroke-width: 3; }

/* the email itself, in the chat (small) and on the phone (full) */
.ln-mail { overflow: hidden; background: var(--lj-cream); color: var(--lj-green); }
.ln-mail-full { font-size: calc(var(--w) / 100); }
.ln-mail-brand { padding: 2.6em 0 2.3em; background: var(--lj-green); text-align: center; }
.ln-mail-brand b { font-family: var(--lj-serif); font-style: italic; font-weight: 400; font-size: 8.4em; line-height: 1; color: var(--lj-cream); letter-spacing: .01em; }
.ln-mail-photo { display: block; height: 30em; background: url(/photos/dish-bistro.webp) center 55% / cover; border-bottom: .6em solid var(--lj-brass); }
.ln-mail-body { padding: 4em 5.4em 5em; }
.ln-mail-title { font-family: var(--lj-serif); font-size: 7.6em; line-height: 1.15; }
.ln-mail-intro { margin-top: .5em; font-size: 4.6em; line-height: 1.4; color: rgba(30,58,45,.78); }
.ln-mail ul { list-style: none; margin: 3.2em 0 0; padding: 0; display: grid; gap: 2.2em; }
.ln-mail li { display: grid; padding-left: 3.4em; position: relative; }
.ln-mail li::before { content: ""; position: absolute; left: 0; top: .9em; width: 1.6em; height: 1.6em; border-radius: 99em; background: var(--lj-brass); }
.ln-mail li b { font-size: 4.9em; font-weight: 700; line-height: 1.3; }
.ln-mail li span { font-size: 4.1em; line-height: 1.35; color: rgba(30,58,45,.72); }
.ln-mail-btn { display: block; width: fit-content; margin: 4.4em auto 0; padding: 1em 3.2em; border-radius: 99em; background: var(--lj-green); color: var(--lj-cream);
  font-family: var(--lj-serif); font-size: 4.6em; }

/* the guest's phone */
.ln-phone { position: relative; z-index: 2; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 30px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.ln-phone::before { content: ""; position: absolute; z-index: 6; top: 7px; left: 50%; width: 28%; height: 10px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.ln-screen { position: relative; width: var(--w); aspect-ratio: 9 / 16; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; background: #fff; color: var(--ink); }
.ln-status { padding: 3.2em 2.1em 0; font-size: calc(var(--w) / 100 * 4.2); font-weight: 600; }
.ln-inbox-title { padding: .6em .58em .25em; font-family: var(--font-display); font-size: calc(var(--w) / 100 * 8.6); font-weight: 700; letter-spacing: -.01em; }
.ln-inbox { list-style: none; margin: 0; padding: 0 5em; }
.ln-inbox li { display: flex; gap: 3.6em; padding: 4em 0; border-top: 1px solid var(--line); }
.ln-inbox li p { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.ln-inbox b { font-size: 4.8em; font-weight: 700; }
.ln-inbox small { font-size: 3.8em; color: var(--ink-3); }
.ln-inbox span { grid-column: 1 / -1; margin-top: .25em; font-size: 4.4em; font-weight: 600; }
.ln-inbox em { grid-column: 1 / -1; margin-top: .3em; font-style: normal; font-size: 4em; color: var(--ink-3); line-height: 1.35; }
.ln-av { flex: none; width: 2.2em; height: 2.2em; border-radius: 99em; display: grid; place-items: center; background: var(--lj-green); color: var(--lj-cream);
  font-family: var(--lj-serif); font-style: italic; font-size: calc(var(--w) / 100 * 5); }
.ln-av-plain { background: #e9ecea; color: var(--ink-2); font-family: var(--font-text); font-style: normal; font-weight: 700; }
.ln-new { position: relative; background: linear-gradient(90deg, rgba(201,155,82,.12), rgba(201,155,82,0)); margin: 0 -5em; padding-left: 5em !important; padding-right: 5em !important; }
.ln-new::before { content: ""; position: absolute; left: 1.8em; top: 50%; width: 1.8em; height: 1.8em; margin-top: -.9em; border-radius: 99em; background: #2f7cf6; }
.ln-new { transition: max-height .55s var(--ease-out), opacity .4s, padding .55s var(--ease-out); max-height: 60em; }
.vg-lnews:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .ln-new { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.ln-new + li { border-top-color: var(--line); }

/* the email opened on the phone */
.ln-open { position: absolute; z-index: 3; inset: 0; background: #fff; overflow: hidden; transition: transform .55s var(--ease-out); }
.vg-lnews:not([data-step="7"]) .ln-open { transform: translateX(102%); }
.ln-open-bar { display: flex; align-items: center; gap: 1.6em; padding: 13em 5em 3em; color: #2f7cf6; }
.ln-open-bar svg { width: 6em; height: 6em; stroke-width: 2.4; }
.ln-open-bar span { font-size: 4.4em; font-weight: 600; }
.ln-open .ln-mail-full { margin: 0 4em; border-radius: 3em; box-shadow: inset 0 0 0 1px rgba(30,58,45,.12); }
.ln-open .ln-mail-photo { height: 26em; }
.ln-open .ln-mail-body { padding: 3.6em 5em 4.4em; }
.ln-open .ln-mail ul { margin-top: 2.6em; gap: 1.6em; }
.ln-open .ln-mail-btn { margin-top: 1.6em; }
.ln-foot { margin: 3.6em 5em 0; font-size: 3.6em; line-height: 1.4; color: var(--ink-3); text-align: center; }
.ln-foot u { color: var(--ink-2); text-underline-offset: .15em; }
.ln-tap { position: absolute; z-index: 6; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.ln-tap.on { animation: vd-tap .6s ease-out; }

/* steps: what is not there yet */
.ln-desk [data-at] { transition: opacity .4s, transform .5s var(--ease-out); }
.vg-lnews[data-step="0"] .ln-desk [data-at],
.vg-lnews[data-step="1"] .ln-desk :is([data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"]),
.vg-lnews[data-step="2"] .ln-desk :is([data-at="3"], [data-at="4"], [data-at="5"]),
.vg-lnews[data-step="3"] .ln-desk :is([data-at="4"], [data-at="5"]),
.vg-lnews[data-step="4"] .ln-desk [data-at="5"] { opacity: 0; transform: translateY(8px); }
.vg-lnews.is-reset * { transition: none !important; animation: none !important; }

/* phones: the guest's phone under the chat, overlapping only its bottom edge; wide screens: side by side */
.ln-phone { margin-top: -18px; }
@media (min-width: 431px) {
  .vg-lnews { --w: 226px; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 18px; }
  .ln-desk { width: 320px; }
  .ln-phone { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .vg-lnews * { transition: none !important; animation: none !important; } }
/* ---- Guest engagement, "ask for a review": BULMAT's invitation email on the guest's phone (black banner, red, cream, a
   condensed display face for the name; the owner's own line; two equal buttons, Google and TripAdvisor, no routing by
   rating), then Google's review sheet: stars, a typed line, posted. OKO's chip beside: the invitation went out after last
   night's booking. Sized in em of the screen's width / 100. The default (no script, reduced motion): the review posted with
   five stars. data-sheet / data-posted = "0" and data-stars = 0..4 are the earlier moments. ---- */
.kp-card:has(> .vg-lrev), .kp-visual .kp-card:has(> .vg-lrev) { width: 100%; margin: 0 auto; }
.vg-lrev { --w: 272px; --bm-black: #0b0908; --bm-red: #d20f17; --bm-cream: #f7efe1;
  --bm-display: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Roboto Condensed", "Arial Narrow", var(--font-display);
  position: relative; display: grid; justify-items: center; gap: 10px; text-align: left; }
.vg-lrev p { margin: 0; }
.vg-lrev svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* OKO's note */
.lr-chip { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; background: var(--white); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 16px 32px -18px rgba(15,42,48,.5); }
.lr-chip > span:last-child { display: grid; }
.lr-chip b { font-size: 14.5px; line-height: 1.3; }
.lr-chip small { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }

/* the phone */
.lr-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.lr-phone::before { content: ""; position: absolute; z-index: 6; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.lr-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; background: #fff; color: var(--ink); }
.lr-status { padding: .95em 2.2em 0; font-size: 3.6em; font-weight: 600; }
.lr-bar { padding: 1.6em 4.6em .6em; color: #2f7cf6; }
.lr-bar svg { width: 6.4em; height: 6.4em; stroke-width: 2.4; }
.lr-from { display: flex; align-items: center; gap: 3em; padding: 1.6em 5.4em 3.2em; }
.lr-from i { flex: none; width: 1.9em; height: 1.9em; border-radius: 99em; display: grid; place-items: center; background: var(--bm-black); color: var(--bm-red);
  font-style: normal; font-family: var(--bm-display); font-size: calc(var(--w) / 100 * 5.6); }
.lr-from span { display: grid; }
.lr-from b { font-size: 4.6em; font-weight: 700; }
.lr-from small { font-size: 3.5em; color: var(--ink-3); }

/* the email */
.lr-mail { margin: 0 4.4em; border-radius: 3.4em; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(11,9,8,.1); background: var(--bm-cream); color: var(--bm-black); }
.lr-banner { position: relative; padding: 3.6em 0 3.2em; background: var(--bm-black); text-align: center; border-bottom: .9em solid var(--bm-red); }
.lr-banner b { font-family: var(--bm-display); font-weight: 800; font-size: 10.5em; line-height: 1; letter-spacing: .04em; color: var(--bm-cream);
  text-shadow: 0 0 .25em rgba(210,15,23,.55); }
.lr-body { padding: 4em 5em 4.6em; display: grid; }
.lr-title { font-size: 5.6em; font-weight: 800; line-height: 1.25; }
.lr-note { margin: 3em 0 0; padding: 2.6em 3.4em; border-left: .9em solid var(--bm-red); border-radius: 0 2em 2em 0; background: rgba(11,9,8,.05); display: grid; gap: .6em; }
.lr-note span { font-size: 4.3em; line-height: 1.45; }
.lr-note small { font-size: 3.6em; font-weight: 700; color: var(--bm-red); }
.lr-ask { margin-top: 3.4em; font-size: 3.8em; color: rgba(11,9,8,.62); }
.lr-btn { margin-top: .55em; display: flex; align-items: center; justify-content: center; gap: .55em; height: 2.9em; border-radius: 99em; background: #fff;
  box-shadow: inset 0 0 0 .09em rgba(11,9,8,.85); font-size: calc(var(--w) / 100 * 4.1); font-weight: 700; }
.lr-btn img { width: 1.15em; height: 1.15em; }
.lr-btn-google { position: relative; }
.lr-btn-google::after { content: ""; position: absolute; right: .55em; top: 50%; width: 1.25em; height: 1.25em; margin-top: -.625em; border-radius: 99em;
  background: #188038 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s var(--ease-out); }
.vg-lrev[data-sheet="0"][data-posted="1"] .lr-btn-google::after { opacity: 1; transform: none; }
.vg-lrev[data-sheet="0"][data-posted="1"] .lr-btn-google { box-shadow: inset 0 0 0 .09em #188038; color: #188038; }
.lr-btn-ta i { flex: none; width: 1.25em; height: 1.25em; border-radius: 99em; display: grid; place-items: center; background: #00aa6c; color: #fff; }
.lr-btn-ta svg { width: .78em; height: .78em; fill: currentColor; stroke: none; }

/* Google's review sheet */
.lr-sheet { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 2.6em 6em 6em; border-radius: 6em 6em 0 0; background: #fff;
  box-shadow: 0 -2em 6em rgba(0,0,0,.18); display: grid; transition: transform .55s var(--ease-out); }
.vg-lrev[data-sheet="0"] .lr-sheet { transform: translateY(104%); }
.lr-sheet::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 100%; height: 200em; background: rgba(0,0,0,.28); opacity: 1; transition: opacity .45s; pointer-events: none; }
.vg-lrev[data-sheet="0"] .lr-sheet::before { opacity: 0; }
.lr-grip { justify-self: center; width: 11em; height: 1.2em; border-radius: 99em; background: #dadce0; }
.lr-sheet-head { margin-top: 3.6em; display: flex; align-items: center; gap: 3em; }
.lr-sheet-head img { width: 8em; height: 8em; }
.lr-sheet-head span { display: grid; }
.lr-sheet-head b { font-size: 4.8em; font-weight: 700; }
.lr-sheet-head small { font-size: 3.5em; color: #5f6368; }
.lr-stars { margin-top: 4.4em; display: flex; justify-content: center; gap: 3em; }
.lr-stars svg { width: 11em; height: 11em; stroke: #9aa0a6; stroke-width: 1.4; fill: none; transition: fill .2s, stroke .2s, transform .25s var(--ease-out); }
.vg-lrev:is([data-stars="1"], [data-stars="2"], [data-stars="3"], [data-stars="4"], [data-stars="5"]) .lr-stars [data-n="1"],
.vg-lrev:is([data-stars="2"], [data-stars="3"], [data-stars="4"], [data-stars="5"]) .lr-stars [data-n="2"],
.vg-lrev:is([data-stars="3"], [data-stars="4"], [data-stars="5"]) .lr-stars [data-n="3"],
.vg-lrev:is([data-stars="4"], [data-stars="5"]) .lr-stars [data-n="4"],
.vg-lrev[data-stars="5"] .lr-stars [data-n="5"] { fill: #fbbc04; stroke: #fbbc04; }
.lr-text { position: relative; margin-top: 4.4em; min-height: 21em; padding: 2.8em 3.4em; border-radius: 2.4em; box-shadow: inset 0 0 0 .3em #dadce0; }
.lr-typed, .lr-ph { font-size: 4.2em; line-height: 1.45; }
.lr-ph { display: none; color: #80868b; }
.vg-lrev.is-empty .lr-ph { display: inline; }
.lr-caret { display: none; width: .5em; height: 5.4em; margin-left: .3em; vertical-align: -1.1em; background: #1a73e8; animation: lr-blink .9s steps(1) infinite; }
.vg-lrev.is-typing .lr-caret { display: inline-block; }
@keyframes lr-blink { 50% { opacity: 0; } }
.vg-lrev.is-typing .lr-text { box-shadow: inset 0 0 0 .45em #1a73e8; }
.lr-post { justify-self: end; margin-top: 4.4em; display: grid; border-radius: 99em; background: #1a73e8; color: #fff; transition: background-color .35s; }
.lr-post > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .35em; padding: .6em 1.4em; font-size: calc(var(--w) / 100 * 4.2); font-weight: 600; transition: opacity .3s; }
.lr-post svg { width: 1.1em; height: 1.1em; stroke-width: 3; }
.lr-post > span:first-child { opacity: 0; }
.vg-lrev[data-posted="0"] .lr-post > span:first-child { opacity: 1; }
.vg-lrev[data-posted="0"] .lr-post > span:last-child { opacity: 0; }
.vg-lrev:not([data-posted="0"]) .lr-post { background: #188038; }
.lr-tap { position: absolute; z-index: 6; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.lr-tap.on { animation: vd-tap .6s ease-out; }
.vg-lrev.is-reset * { transition: none !important; animation: none !important; }

/* over the photo: phones, the card overlaps the photo's lower part and the chip sits on the photo; wide screens, on the
   right with the chip to its left */
.kp-photo + .kp-card:has(> .vg-lrev) { margin-top: -150px; }
@media (min-width: 431px) {
  .vg-lrev { --w: 290px; }
  .kp-photo + .kp-card:has(> .vg-lrev) { margin-top: -200px; }
  .kp-photo + .kp-card:has(> .vg-lrev) .vg-lrev { justify-items: end; padding-right: 28px; }
  .lr-chip { position: absolute; z-index: 2; top: 46%; right: calc(28px + var(--w) - 14px); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .vg-lrev * { transition: none !important; animation: none !important; } }
/* ---- Dine-in page hero: the staff phone with tonight's room (tables by number: seated with party and time, free, booked),
   a "new order" bar, and under the phone the kitchen strip with the last tickets and tonight's count. Same footprint as the
   takeaway hero (.oi). Default (no script, reduced motion): the end. .is-out = a ticket not printed yet; .is-quiet = before
   the first order of a loop; .is-ping = a table that just sent an order. ---- */
.df { --pw: 240px; --ph: 388px; --lap: 46px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: left; }
.df p, .df ol { margin: 0; padding: 0; list-style: none; }
.df b { font-weight: 600; }
.df svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.df-phone {
  position: relative; z-index: 1; width: var(--pw); height: var(--ph); padding: 5px; border-radius: 26px; background: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 28px 48px -22px var(--card-glow, rgba(0,0,0,.5));
}
.df-phone::before { content: ""; position: absolute; z-index: 3; top: 11px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 99px; background: var(--ink); }
.df-screen { position: relative; height: 100%; overflow: hidden; padding: 30px 11px 0; border-radius: 21px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.35; }
.df-shop { display: flex; align-items: center; gap: 6px; color: #1e3a2d; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 15px; }
.df-shop .vg-app { width: 20px; height: 20px; border-radius: 6px; }
.df-shop .vg-app .mark { width: 15px; }
.df-head { display: flex; align-items: baseline; gap: 8px; margin-top: 1px !important; }
.df-head b { font-family: var(--font-display); font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.df-head span { color: var(--ink-2); white-space: nowrap; }

/* the three counts */
.df-counts { display: flex; gap: 5px; margin-top: 7px !important; }
.df-c { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 3px 4px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.df-c b { font-size: 15px; }
.df-c-seated { background: var(--teal); color: #fff; }
.df-c-free { background: #fff; color: var(--basil); box-shadow: inset 0 0 0 1.5px var(--basil); }
.df-c-booked { background: var(--sunny-soft); color: var(--sunny-deep); }

/* the room: one tile per table */
.df-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px !important; }
.df-t { position: relative; height: 43px; padding: 5px 5px 4px; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between;
  transition: background-color .45s, color .45s, box-shadow .45s; }
.df-t p { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.df-t p b { font-size: 14px; line-height: 1; }
.df-t p small { font-size: 9px; font-weight: 600; white-space: nowrap; }
.df-t > span { display: none; align-items: center; gap: 2px; font-size: 9.5px; line-height: 1.15; white-space: nowrap; }
.df-t svg { width: 9px; height: 9px; stroke-width: 1.4; }
.df-t[data-s="seated"] .df-seated, .df-t[data-s="free"] .df-free, .df-t[data-s="booked"] .df-booked { display: flex; }
.df-t[data-s="free"] p small { visibility: hidden; }
.df-t[data-s="seated"] { background: var(--teal-soft); color: var(--teal); }
.df-t[data-s="free"] { background: #fff; color: var(--basil); box-shadow: inset 0 0 0 1.5px var(--basil); }
.df-t[data-s="booked"] { background: var(--sunny-soft); color: var(--sunny-deep); }
.df-t.is-ping { animation: df-ping 1.3s var(--ease-out); }
@keyframes df-ping {
  0% { box-shadow: 0 0 0 0 rgba(4, 75, 83, .55); background: var(--teal); color: #fff; }
  45% { background: var(--teal); color: #fff; }
  100% { box-shadow: 0 0 0 10px rgba(4, 75, 83, 0); }
}

/* the new-order bar */
.df-live { position: absolute; z-index: 2; left: 8px; right: 8px; top: 26px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px;
  background: var(--ink); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); transition: opacity .3s, transform .45s var(--ease-out); }
.df-live.is-in { animation: df-in .55s var(--ease-out); }
@keyframes df-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.df.is-quiet .df-live { opacity: 0; transform: translateY(-16px); }
.df-from { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.df-from svg { grid-area: 1 / 1; width: 16px; height: 16px; stroke-width: 1.5; }
.df-from-qr { background: var(--sunny); color: var(--ink); }
.df-from-qr .df-ico-staff, .df-from-staff .df-ico-qr { display: none; }
.df-from-staff { background: var(--teal); color: #fff; }
.df-live p { min-width: 0; display: grid; }
.df-live small { font-size: 10px; color: rgba(255,255,255,.62); line-height: 1.2; }
.df-live b { font-size: 13.5px; line-height: 1.3; }
.df-live p > span { font-size: 11.5px; color: rgba(255,255,255,.78); line-height: 1.3; }

/* the kitchen strip */
.df-card {
  position: relative; z-index: 3; width: min(100%, 318px); margin-top: calc(var(--lap) * -1); padding: 12px 14px 14px;
  border-radius: 22px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 -10px 24px -14px rgba(15,42,48,.35), 0 26px 44px -22px var(--card-glow, rgba(0,0,0,.5));
}
.df-card-top { display: flex; align-items: center; gap: 8px; }
.df-printer { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); }
.df-printer svg { width: 17px; height: 17px; stroke-width: 1.8; }
.df-card-top > b { font-size: 14px; }
.df-total { margin-left: auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.df-total small { font-size: 12px; color: var(--ink-2); }
.df-total b { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.df-n.is-bump { animation: df-bump .5s var(--ease-out); }
@keyframes df-bump { 0% { transform: translateY(6px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.df-tickets { display: flex; gap: 7px; margin-top: 10px !important; overflow: hidden; }
.df-tk { flex: none; width: 88px; padding: 7px 8px 9px; background: #fffdf7; color: #151515; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 6px 10px -6px rgba(0,0,0,.35);
  border-radius: 3px 3px 0 0; display: grid; gap: 1px; overflow: hidden;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%;
  transition: width .55s var(--ease-out), padding .55s var(--ease-out), margin .55s var(--ease-out), opacity .4s, transform .55s var(--ease-out); }
.df-tk b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.df-tk span { font-size: 11px; font-weight: 600; white-space: nowrap; }
.df-tk small { margin-top: 3px; font-size: 10px; font-weight: 700; justify-self: start; padding: 0 5px; border-radius: 99px; white-space: nowrap; }
.df-tk-qr { background: var(--sunny); color: var(--ink); }
.df-tk-staff { background: var(--teal); color: #fff; }
.df-tk.is-out { width: 0; padding-left: 0; padding-right: 0; margin-right: -7px; opacity: 0; transform: translateY(-10px); }

.df.is-reset *, .df.is-reset .df-live { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .df { --pw: 276px; --ph: 492px; --lap: 58px; }
  .df-screen { padding: 34px 13px 0; }
  .df-grid { gap: 6px; margin-top: 10px !important; }
  .df-t { height: 58px; padding: 7px 7px 6px; }
  .df-t p b { font-size: 17px; }
  .df-t p small { font-size: 11px; }
  .df-t > span { font-size: 10.5px; gap: 1px; }
  .df-counts { margin-top: 9px !important; }
  .df-c { font-size: 12px; padding: 4px; }
  .df-c b { font-size: 16px; }
  .df-live { left: 10px; right: 10px; top: 30px; padding: 10px 12px; }
  .df-live b { font-size: 14.5px; }
  .df-live p > span { font-size: 12.5px; }
  .df-card { width: min(100%, 372px); padding: 15px 18px 17px; }
  .df-card-top > b { font-size: 15px; }
  .df-total b { font-size: 30px; }
  .df-total small { font-size: 13px; }
  .df-tk { width: 104px; padding: 8px 9px 10px; }
  .df-tk b { font-size: 14px; }
  .df-tk span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .df *, .df-live { transition: none !important; animation: none !important; } }
/* ---- Dine-in, "sit down, scan, order when ready": a guest's phone at Fiamma's table 7 and, beside it, the ticket printing
   at the pizza oven. The phone is sized in em of the screen's width / 100. The default (no script, reduced motion): the
   round sent, its confirmation, the ticket out. data-scene = cam | party | menu | done; data-lock / data-pick / data-m /
   data-sheet / data-d / data-print = "0" and data-note = characters typed are the earlier moments. ---- */
.kp-card:has(> .vg-dscan), .kp-visual .kp-card:has(> .vg-dscan) { width: 100%; margin: 0 auto; }
.vg-dscan { --w: 236px; --ds-red: #b8221c; display: flex; justify-content: center; align-items: flex-start; }
.ds-phone { position: relative; z-index: 1; flex: none; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.ds-phone::before { content: ""; position: absolute; z-index: 8; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.ds-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #fff; color: var(--ink); }
.ds-screen p { margin: 0; }
.ds-screen ul { list-style: none; margin: 0; padding: 0; }
.ds-screen svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-status { position: absolute; z-index: 7; top: 0; left: 0; right: 0; height: 9.5em; padding: 0 8em; display: flex; align-items: center; justify-content: space-between; color: #fff; transition: color .3s; }
.ds-status b { font-size: 3.8em; font-weight: 600; }
.ds-status i { width: 6.4em; height: 2.8em; border-radius: .8em; box-shadow: inset 0 0 0 .35em currentColor; }

/* scenes */
.ds-cam, .ds-page { position: absolute; inset: 0; transition: opacity .45s, transform .55s var(--ease-out); }
.ds-cam { z-index: 3; background: #000 url(/photos/scene-pizza-qr.webp) 13% 0 / 450% auto; }
.vg-dscan:not([data-scene="cam"]) .ds-cam { opacity: 0; transform: scale(1.08); pointer-events: none; }
.vg-dscan[data-scene="cam"] .ds-page { opacity: 0; transform: translateY(6em); }

/* the camera: a frame that finds the code, and the link to open */
.ds-frame { position: absolute; left: 50%; top: 50%; width: 52em; height: 52em; margin: -34em 0 0 -26em; transition: width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out); }
.ds-frame::before, .ds-frame::after, .ds-frame i::before, .ds-frame i::after { content: ""; position: absolute; width: 9em; height: 9em; border: 0 solid #fff; transition: border-color .3s; }
.ds-frame::before { top: 0; left: 0; border-width: 1.1em 0 0 1.1em; border-top-left-radius: 3em; }
.ds-frame::after { top: 0; right: 0; border-width: 1.1em 1.1em 0 0; border-top-right-radius: 3em; }
.ds-frame i::before { bottom: 0; left: 0; border-width: 0 0 1.1em 1.1em; border-bottom-left-radius: 3em; }
.ds-frame i::after { bottom: 0; right: 0; border-width: 0 1.1em 1.1em 0; border-bottom-right-radius: 3em; }
.vg-dscan:not([data-lock="0"]) .ds-frame { width: 30em; height: 30em; margin: -24em 0 0 -15em; }
.vg-dscan:not([data-lock="0"]) .ds-frame::before, .vg-dscan:not([data-lock="0"]) .ds-frame::after,
.vg-dscan:not([data-lock="0"]) .ds-frame i::before, .vg-dscan:not([data-lock="0"]) .ds-frame i::after { border-color: #ffd43b; }
.ds-found { position: absolute; left: 7em; right: 7em; bottom: 16em; display: flex; align-items: center; gap: 2.4em; padding: 2.6em 3.4em; border-radius: 99em;
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 1.5em 4em rgba(0,0,0,.35); transition: opacity .35s, transform .5s var(--ease-out); }
.vg-dscan[data-lock="0"] .ds-found { opacity: 0; transform: translateY(4em) scale(.96); }
.ds-found-ico { flex: none; width: 7em; height: 7em; border-radius: 99em; background: var(--teal); color: #fff; display: grid; place-items: center; }
.ds-found-ico svg { width: 4.4em; height: 4.4em; }
.ds-found b { flex: 1; min-width: 0; font-size: 4em; font-weight: 600; }
.ds-found em { font-style: normal; font-size: 3.8em; font-weight: 600; color: var(--teal); white-space: nowrap; }

/* the table page: cover, logo, name, table number */
.ds-cover { height: 30em; background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0) 50%), url(/photos/dish-pizza.webp) center 55% / cover; transition: height .5s var(--ease-out); }
.vg-dscan:is([data-scene="menu"], [data-scene="done"]) .ds-cover { height: 20em; }
.ds-shop { position: relative; display: flex; align-items: flex-end; gap: 2.6em; margin-top: -6.5em; padding: 0 5em; }
.ds-logo { flex: none; font-size: 5.4em; width: 2.6em; height: 2.6em; border-radius: 99em; display: grid; place-items: center; background: var(--ds-red); color: #fff;
  box-shadow: 0 0 0 .2em #fff; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; line-height: 1; }
.ds-shop p { flex: 1; min-width: 0; padding-bottom: .6em; }
.ds-shop b { font-size: 6em; font-weight: 700; line-height: 1; }
.ds-table { flex: none; margin-bottom: 1em; padding: .5em 1.3em; border-radius: 99em; background: var(--ink); color: #fff; font-size: 3.4em; font-weight: 600; white-space: nowrap; }

/* how many */
.ds-party { position: absolute; left: 0; right: 0; bottom: 0; padding: 6em 6em 8em; transition: opacity .35s, transform .5s var(--ease-out); }
.vg-dscan:not([data-scene="party"]) .ds-party { opacity: 0; transform: translateY(5em); pointer-events: none; }
.ds-party-t { font-size: 5.4em; font-weight: 700; }
.ds-party-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.2em; margin: 5em 0 6em; }
.ds-party-opts span { height: 14em; border-radius: 3.4em; display: grid; place-items: center; font-size: 5em; font-weight: 600; box-shadow: inset 0 0 0 .1em var(--line-strong); transition: background-color .3s, color .3s, box-shadow .3s; }
.ds-party-opts span { font-size: 4.8em; height: 2.9em; border-radius: .7em; box-shadow: inset 0 0 0 .06em var(--line-strong); }
.vg-dscan:not([data-pick="0"]) .ds-party-opts .pick { background: var(--teal); color: #fff; box-shadow: none; }
.ds-btn { display: block; padding: 3.6em 0; border-radius: 99em; background: var(--teal); color: #fff; text-align: center; font-size: 4.2em; font-weight: 600; padding: .85em 0; }

/* the menu */
.ds-menu { position: absolute; left: 0; right: 0; top: 31em; bottom: 0; transition: opacity .35s, transform .5s var(--ease-out); }
.vg-dscan:not([data-scene="menu"]) .ds-menu { opacity: 0; transform: translateY(5em); pointer-events: none; }
.ds-tabs { display: flex; gap: 1.6em; padding: 0 5em; overflow: hidden; }
.ds-tabs li { flex: none; padding: .35em .9em; border-radius: 99em; background: #f2f3f1; font-size: 3.4em; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ds-tabs li.on { background: var(--ink); color: #fff; }
.ds-list { margin-top: 2em !important; padding: 0 5em !important; }
.ds-row { display: flex; align-items: center; gap: 3em; padding: 2.6em 0; border-bottom: 1px solid var(--line); }
.ds-row > div { flex: 1; min-width: 0; display: grid; }
.ds-thumb { flex: none; width: 15em; height: 15em; border-radius: 3em; background: url(/photos/dish-pizza.webp) 50% 50% / 260% auto; }
.ds-row-2 .ds-thumb { filter: saturate(.8) hue-rotate(-8deg); }
.ds-row b { font-size: 4.3em; font-weight: 600; line-height: 1.2; }
.ds-row small { margin-top: .25em; font-size: 3.2em; color: var(--ink-3); }
.ds-row p { margin-top: 1em !important; display: flex; align-items: center; gap: 1.3em; flex-wrap: wrap; }
.ds-row p > span { font-size: 3.7em; font-weight: 600; }
.ds-row em { font-style: normal; font-size: 2.8em; font-weight: 600; padding: .15em .7em; border-radius: 99em; background: #f6efe0; color: #8a6420; white-space: nowrap; }
.ds-row-1 em:first-of-type { background: #fbe4e0; color: var(--ds-red); }
.ds-row-2 em { background: var(--basil-soft); color: var(--basil); }
.ds-add { flex: none; position: relative; width: 8.5em; height: 8.5em; border-radius: 99em; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); transition: background-color .3s, color .3s; }
.ds-add svg { grid-area: 1 / 1; width: 4.6em; height: 4.6em; transition: opacity .25s; }
.ds-add b { grid-area: 1 / 1; font-size: 4em; font-weight: 700; opacity: 0; transition: opacity .25s; }
.vg-dscan:not([data-m="0"]) .ds-row-0 .ds-add, .vg-dscan:not([data-d="0"]) .ds-row-1 .ds-add { background: var(--teal); color: #fff; }
.vg-dscan:not([data-m="0"]) .ds-row-0 .ds-add svg, .vg-dscan:not([data-d="0"]) .ds-row-1 .ds-add svg { opacity: 0; }
.vg-dscan:not([data-m="0"]) .ds-row-0 .ds-add b, .vg-dscan:not([data-d="0"]) .ds-row-1 .ds-add b { opacity: 1; }
.ds-cart { position: absolute; left: 4em; right: 4em; bottom: 5em; height: 14em; padding: 0 2.4em 0 5em; border-radius: 99em; background: var(--teal); color: #fff;
  display: flex; align-items: center; gap: 2em; box-shadow: 0 2em 5em -1.5em rgba(4,75,83,.6); transition: opacity .35s, transform .45s var(--ease-out); }
.vg-dscan[data-m="0"] .ds-cart { opacity: 0; transform: translateY(5em); }
.ds-cart-n { flex: 1; display: grid; font-size: 3.8em; font-weight: 600; }
.ds-cart-n > span { grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--ease-out); }
.ds-cart-n > span:first-child { opacity: 0; }
.vg-dscan[data-d="0"] .ds-cart-n > span:first-child { opacity: 1; }
.vg-dscan[data-d="0"] .ds-cart-n > span:last-child { opacity: 0; transform: translateY(.6em); }
.ds-cart b { padding: .55em 1.1em; border-radius: 99em; background: #fff; color: var(--teal); font-size: 3.6em; font-weight: 700; white-space: nowrap; }

/* the dish sheet with the note */
.ds-sheet { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 6em 5em 6em; border-radius: 6em 6em 0 0; background: #fff;
  box-shadow: 0 -2em 6em rgba(0,0,0,.18); transition: transform .5s var(--ease-out); }
.vg-dscan:not([data-sheet="1"]) .ds-sheet { transform: translateY(105%); }
.ds-sheet-t { display: flex; justify-content: space-between; align-items: baseline; }
.ds-sheet-t b { font-size: 5.4em; font-weight: 700; }
.ds-sheet-t span { font-size: 4.4em; font-weight: 600; }
.ds-glabel { margin-top: 4em !important; font-size: 3.6em; font-weight: 600; }
.ds-note { position: relative; display: flex; align-items: center; margin: 2em 0 4.4em !important; height: 12em; padding: 0 3.4em; border-radius: 2.6em; background: #f5f5f2;
  box-shadow: inset 0 0 0 .3em var(--teal); }
.ds-note > span { font-size: 4em; }
.ds-ph { position: absolute; left: .85em; color: var(--ink-3); transition: opacity .2s; }
.vg-dscan:not([data-note="0"]) .ds-ph { opacity: 0; }
.vg-dscan[data-note="0"] .ds-typed { opacity: 0; }
.ds-caret { width: .5em; height: 5em; margin-left: .3em; background: var(--teal); animation: ds-blink 1s steps(1) infinite; }
@keyframes ds-blink { 50% { opacity: 0; } }

/* sent */
.ds-done { position: absolute; left: 0; right: 0; top: 31em; bottom: 0; padding: 4em 6em 0; transition: opacity .4s, transform .5s var(--ease-out); }
.vg-dscan:not([data-scene="done"]) .ds-done { opacity: 0; transform: translateY(5em); }
.ds-check { width: 13em; height: 13em; border-radius: 99em; display: grid; place-items: center; background: var(--basil); color: #fff; }
.ds-check svg { width: 7.4em; height: 7.4em; stroke-width: 2.8; }
.ds-done-t { margin-top: 3.4em !important; display: grid; }
.ds-done-t b { font-size: 6em; font-weight: 700; line-height: 1.15; }
.ds-done-t span { margin-top: .4em; font-size: 3.8em; font-weight: 600; color: var(--teal); }
.ds-done-list { margin-top: 3.6em !important; padding: 2.6em 3.6em !important; border-radius: 3em; background: #f5f5f2; display: grid; gap: 1.6em; }
.ds-done-list li { display: grid; font-size: 3.9em; font-weight: 600; }
.ds-done-list small { justify-self: start; margin-top: .35em; padding: .1em .6em; border-radius: .4em; background: var(--ink); color: #fff; font-size: .8em; }
.ds-done-more { margin-top: 3.6em !important; font-size: 3.6em; color: var(--ink-2); }
.ds-done-pay { margin-top: 1.4em !important; display: flex; align-items: center; gap: .5em; font-size: 3.6em; color: var(--ink-2); }
.ds-done-pay svg { width: 1.2em; height: 1.2em; }

.ds-tap { position: absolute; z-index: 9; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(4,75,83,.25); box-shadow: 0 0 0 1.2em rgba(4,75,83,.12); opacity: 0; pointer-events: none; }
.ds-tap.on { animation: vd-tap .6s ease-out; }

/* the pizza oven's printer, beside the phone */
.ds-printer { flex: none; position: relative; z-index: 2; width: 114px; margin: 64px 0 0 -16px; padding-top: 5px; }
.ds-printer::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 11px; border-radius: 6px; background: linear-gradient(#41494c, #1c2123);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 12px -4px rgba(0,0,0,.45); }
.ds-paper { position: relative; margin: 0 7px; overflow: hidden; filter: drop-shadow(0 10px 12px rgba(0,0,0,.28)); }
.ds-ticket { --z: 5px; padding: 12px 9px 15px; background: #fffdf7; color: #151515; font-family: var(--font-text); line-height: 1.3; text-align: left;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  transition: transform 1.6s cubic-bezier(.45, .05, .55, .95); }
.vg-dscan[data-print="0"] .ds-ticket { transform: translateY(-101%); }
.ds-ticket p { margin: 0; }
.ds-ticket ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ds-station { padding-bottom: 5px; border-bottom: 2px solid #151515; text-align: center; font-size: 16px; font-weight: 800; letter-spacing: .06em; }
.ds-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin-top: 5px !important; font-size: 11px; }
.ds-meta b { font-size: 13px; font-weight: 800; }
.ds-meta2 { padding-bottom: 5px; border-bottom: 1px dashed #9a9a9a; font-size: 11px; font-weight: 700; }
.ds-ticket li { display: grid; justify-items: start; }
.ds-ticket li > b { font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.ds-ticket li small { margin: 2px 0 0 1.4em; padding: 1px 5px; background: #151515; color: #fffdf7; font-size: 11px; font-weight: 700; }
.ds-foot { margin-top: 8px !important; padding-top: 5px; border-top: 1px dashed #9a9a9a; text-align: center; font-size: 10px; color: #444; }

.vg-dscan.is-reset * { transition: none !important; animation: none !important; }
.kp-photo + .kp-card:has(> .vg-dscan) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-dscan { --w: 280px; }
  .ds-printer { width: 150px; margin: 84px 0 0 -20px; }
  .ds-ticket { padding: 14px 12px 17px; }
  .ds-station { font-size: 18px; }
  .ds-meta { font-size: 12px; }
  .ds-meta b { font-size: 14px; }
  .ds-meta2 { font-size: 12px; }
  .ds-ticket li > b { font-size: 15px; }
  .ds-ticket li small { font-size: 12px; }
  .ds-foot { font-size: 11px; }
  .kp-photo + .kp-card:has(> .vg-dscan) { margin-top: -160px; }
  .kp-photo + .kp-card:has(> .vg-dscan) .vg-dscan { justify-content: flex-end; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vg-dscan * { transition: none !important; animation: none !important; } }
/* ---- Dine-in, "want one more? scan again": two guests' phones at Le Jardin's table 12, overlapping (the one in use in
   front), and the table in OKO with its rounds. Phones sized in em of the screen's width / 100 (text kept large: these are
   small phones). The default (no script, reduced motion): the second phone in front with its round sent, all rounds on
   the table. data-front = "0" | "1"; data-a / data-b = dishes added; data-sa / data-sb = "0" before sending; data-r = rounds
   shown on the table. ---- */
.kp-card:has(> .vg-dmore), .kp-visual .kp-card:has(> .vg-dmore) { width: 100%; margin: 0 auto; }
.vg-dmore { --w: 172px; --dm-green: #1e3a2d; --dm-brass: #c99b52; display: grid; justify-items: center; }
.dm-phones { position: relative; display: flex; justify-content: center; }
.dm-phone { position: relative; flex: none; width: calc(var(--w) + 10px); border: 5px solid #14181a; border-radius: 28px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 26px 50px -24px rgba(0,0,0,.55); transition: transform .6s var(--ease-out), filter .6s, z-index 0s .3s; }
.dm-phone::before { content: ""; position: absolute; z-index: 6; top: 6px; left: 50%; width: 30%; height: 9px; margin-left: -15%; border-radius: 99px; background: #14181a; }
.dm-phone-0 { z-index: 1; transform: translate(14px, 22px) scale(.92); filter: brightness(.96) saturate(.9); }
.dm-phone-1 { z-index: 2; margin-left: -54px; }
.vg-dmore[data-front="0"] .dm-phone-0 { z-index: 2; transform: none; filter: none; }
.vg-dmore[data-front="0"] .dm-phone-1 { z-index: 1; transform: translate(-14px, 22px) scale(.92); filter: brightness(.96) saturate(.9); }
.dm-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #fff; color: var(--ink); }
.dm-screen p { margin: 0; }
.dm-screen ul { list-style: none; margin: 0; padding: 0; }
.dm-screen svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-status { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 11em; padding: 0 9em; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.dm-status b { font-size: 5em; font-weight: 600; }
.dm-status i { width: 8em; height: 3.6em; border-radius: 1em; box-shadow: inset 0 0 0 .45em rgba(255,255,255,.9); }
.dm-top { height: 34em; padding: 0 6em 4em; display: flex; align-items: flex-end;
  background: linear-gradient(rgba(14,30,22,.25), rgba(14,30,22,.8)), url(/photos/detail-dining-room.webp) center / cover; color: #f3ead8; }
.dm-top p { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.dm-top b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 9.6em; line-height: 1; white-space: nowrap; }
.dm-top span { flex: none; padding: .35em .9em; border-radius: 99em; background: #fff; color: var(--ink); font-size: 5em; font-weight: 700; white-space: nowrap; }
.dm-tab { padding: 5em 6em 0; }
.dm-tab span { display: inline-block; padding: .3em .9em; border-radius: 99em; background: var(--ink); color: #fff; font-size: 5.4em; font-weight: 600; }
.dm-list { padding: 2em 6em 0 !important; }
.dm-row { display: flex; align-items: center; gap: 4em; padding: 4em 0; border-bottom: 1px solid var(--line); }
.dm-thumb { flex: none; width: 20em; height: 20em; border-radius: 4em; background-repeat: no-repeat; }
.dm-thumb-lava { background-image: url(/photos/scene-dessert-qr.webp); background-size: 520% auto; background-position: 47% 12%; }
.dm-thumb-flan { background-image: url(/photos/detail-dessert-coffee.webp); background-size: 300% auto; background-position: 20% 40%; }
.dm-thumb-wine { background-image: url(/photos/detail-evening-table.webp); background-size: 420% auto; background-position: 52% 52%; }
.dm-thumb-coffee { background-image: url(/photos/detail-dessert-coffee.webp); background-size: 300% auto; background-position: 85% 45%; }
.dm-row > div { flex: 1; min-width: 0; display: grid; }
.dm-row b { font-size: 6.4em; font-weight: 600; line-height: 1.2; }
.dm-row div > span { margin-top: .3em; font-size: 5.6em; color: var(--ink-2); }
.dm-add { flex: none; width: 12em; height: 12em; border-radius: 99em; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); transition: background-color .3s, color .3s; }
.dm-add svg { grid-area: 1 / 1; width: 6.4em; height: 6.4em; transition: opacity .25s; }
.dm-add b { grid-area: 1 / 1; font-size: 5.6em; font-weight: 700; opacity: 0; transition: opacity .25s; }
.dm-add.is-on, .vg-dmore:not([data-a="0"]) .dm-phone-0 .dm-row-0 .dm-add, .vg-dmore:not([data-a="0"]):not([data-a="1"]) .dm-phone-0 .dm-row-1 .dm-add,
.vg-dmore:not([data-b="0"]) .dm-phone-1 .dm-row-0 .dm-add { background: var(--teal); color: #fff; }
.vg-dmore:not([data-a="0"]) .dm-phone-0 .dm-row-0 .dm-add svg, .vg-dmore:not([data-a="0"]):not([data-a="1"]) .dm-phone-0 .dm-row-1 .dm-add svg,
.vg-dmore:not([data-b="0"]) .dm-phone-1 .dm-row-0 .dm-add svg { opacity: 0; }
.vg-dmore:not([data-a="0"]) .dm-phone-0 .dm-row-0 .dm-add b, .vg-dmore:not([data-a="0"]):not([data-a="1"]) .dm-phone-0 .dm-row-1 .dm-add b,
.vg-dmore:not([data-b="0"]) .dm-phone-1 .dm-row-0 .dm-add b { opacity: 1; }

/* the basket, then the sent note */
.dm-cart, .dm-sent { position: absolute; left: 5em; right: 5em; bottom: 6em; height: 19em; border-radius: 99em; display: flex; align-items: center; transition: opacity .35s, transform .45s var(--ease-out); }
.dm-cart { padding: 0 2.6em 0 6em; gap: 2em; background: var(--teal); color: #fff; box-shadow: 0 2em 5em -1.5em rgba(4,75,83,.6); }
.dm-cart > span { flex: 1; font-size: 5.4em; font-weight: 600; white-space: nowrap; }
.dm-cart b { padding: .5em .9em; border-radius: 99em; background: #fff; color: var(--teal); font-size: 5em; font-weight: 700; white-space: nowrap; }
.dm-sent { gap: 3em; padding: 0 5em; background: var(--basil-soft); color: var(--basil); }
.dm-sent i { flex: none; width: 11em; height: 11em; border-radius: 99em; background: var(--basil); color: #fff; display: grid; place-items: center; }
.dm-sent i svg { width: 6.6em; height: 6.6em; stroke-width: 3; }
.dm-sent b { font-size: 5.8em; font-weight: 700; }
/* phone 0: basket once both desserts are in, gone once sent; phone 1 the same with the wine */
.vg-dmore[data-a="0"] .dm-phone-0 .dm-cart, .vg-dmore[data-a="1"] .dm-phone-0 .dm-cart, .vg-dmore:not([data-sa="0"]) .dm-phone-0 .dm-cart,
.vg-dmore[data-b="0"] .dm-phone-1 .dm-cart, .vg-dmore:not([data-sb="0"]) .dm-phone-1 .dm-cart { opacity: 0; transform: translateY(5em); }
.vg-dmore[data-sa="0"] .dm-phone-0 .dm-sent, .vg-dmore[data-sb="0"] .dm-phone-1 .dm-sent { opacity: 0; transform: translateY(5em) scale(.96); }
.dm-tap { position: absolute; z-index: 9; width: 14em; height: 14em; margin: -7em 0 0 -7em; border-radius: 99em; background: rgba(4,75,83,.25); box-shadow: 0 0 0 1.6em rgba(4,75,83,.12); opacity: 0; pointer-events: none; }
.dm-tap.on { animation: vd-tap .6s ease-out; }

/* the table in OKO: one list, every round */
.dm-shop { position: relative; z-index: 3; width: min(100%, 330px); margin-top: -10px; padding: 13px 15px 13px; border-radius: 20px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); }
.dm-shop p, .dm-shop ol { margin: 0; padding: 0; list-style: none; }
.dm-shop-head { display: flex; align-items: center; gap: 10px; }
.dm-shop-head .vg-app { width: 30px; height: 30px; border-radius: 8px; }
.dm-shop-head .vg-app .mark { width: 22px; }
.dm-shop-head > span:last-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-shop-head b { font-size: 16px; font-weight: 700; }
.dm-shop-head small { font-size: 12px; color: var(--ink-3); }
.dm-rounds { margin-top: 8px !important; display: grid; }
.dm-round { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35;
  overflow: hidden; max-height: 64px; transition: max-height .55s var(--ease-out), opacity .45s, padding .55s var(--ease-out), background-color 1.4s; }
.dm-round-n { display: grid; font-weight: 700; white-space: nowrap; }
.dm-round-n small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.dm-what { min-width: 0; color: var(--ink-2); }
.dm-round em { font-style: normal; padding: 2px 8px; border-radius: 99px; background: var(--sunny-soft); color: var(--sunny-deep); font-size: 11px; font-weight: 700; white-space: nowrap; }
.dm-round em.dm-tag-done { background: #eef0ef; color: var(--ink-3); }
.vg-dmore[data-r="1"] .dm-round-1, .vg-dmore[data-r="1"] .dm-round-2, .vg-dmore[data-r="2"] .dm-round-2 { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-top-width: 0; }
.vg-dmore[data-r="2"] .dm-round-1 { animation: dm-new 1.6s ease-out; }
.vg-dmore:not([data-r]) .dm-round-2 { animation: dm-new 1.6s ease-out; }
@keyframes dm-new { from { background: var(--sunny-soft); } to { background: transparent; } }
.dm-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px !important; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-size: 12px; color: var(--ink-3); }
.dm-foot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.vg-dmore.is-reset *, .vg-dmore.is-reset .dm-phone { transition: none !important; animation: none !important; }
.kp-photo + .kp-card:has(> .vg-dmore) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-dmore { --w: 196px; }
  .dm-phone-1 { margin-left: -64px; }
  .dm-shop { width: 360px; margin-top: -14px; padding: 15px 18px; }
  .dm-round { font-size: 14px; }
  .kp-photo + .kp-card:has(> .vg-dmore) { margin-top: -160px; }
}
@media (prefers-reduced-motion: reduce) { .vg-dmore *, .vg-dmore .dm-phone { transition: none !important; animation: none !important; } }
/* ---- Dine-in, the waiter's phone (dine-waiter): OKO Manager (teal) over the lower part of the photo, ordering for hoji's
   table 5. Sized in em of the screen's width / 100 (the screen is 150em tall). The markup's data-* values are the end. ---- */
.kp-card:has(> .vg-dwait), .kp-visual .kp-card:has(> .vg-dwait) { width: 100%; margin: 0 auto; }
.kp-photo + .kp-card:has(> .vg-dwait) { margin-top: -110px; }
.vg-dwait { --w: 280px; display: grid; justify-items: center; }
.dw-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.dw-phone::before { content: ""; position: absolute; z-index: 8; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.dw-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3;
  text-align: left; background: #f6f5f1; color: var(--ink); }
.dw-screen p { margin: 0; }
.dw-screen svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dw-status { height: 9em; padding: 0 8em; display: flex; align-items: center; justify-content: space-between; }
.dw-status b { font-size: 3.6em; font-weight: 600; }
.dw-status i { width: 6em; height: 2.6em; border-radius: .8em; box-shadow: inset 0 0 0 .35em var(--ink); }

/* the table and the waiter */
.dw-head { display: flex; align-items: center; gap: 2.4em; padding: 2em 5em 0; }
.dw-back { flex: none; width: 8em; height: 8em; border-radius: 99em; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07); }
.dw-back svg { width: 4.4em; height: 4.4em; }
.dw-head p { flex: 1; min-width: 0; display: grid; }
.dw-head b { font-family: var(--font-display); font-size: 6.2em; font-weight: 700; line-height: 1.1; }
.dw-head small { font-size: 3.5em; color: var(--ink-3); white-space: nowrap; }
.dw-staff { flex: none; display: flex; align-items: center; gap: .5em; padding: .3em .8em .3em .3em; border-radius: 99em; background: var(--teal-soft); color: var(--teal);
  font-size: 3.3em; font-weight: 600; white-space: nowrap; }
.dw-staff i { width: 1.7em; height: 1.7em; border-radius: 99em; display: grid; place-items: center; background: var(--teal); color: #fff; font-style: normal; font-size: .9em; }

/* the search */
.dw-search { margin: 3.4em 5em 0 !important; height: 10em; padding: 0 3em; border-radius: 99em; background: #fff; display: flex; align-items: center; gap: 2em;
  box-shadow: 0 0 0 1px rgba(15,42,48,.08); transition: box-shadow .3s; }
.dw-search svg { flex: none; width: 4.6em; height: 4.6em; color: var(--ink-3); }
.dw-ph { font-size: 3.7em; color: #9aa6a8; white-space: nowrap; }
.dw-q { font-size: 4em; font-weight: 600; }
.vg-dwait:not([data-q="0"]) .dw-ph { display: none; }
.vg-dwait:not([data-q="0"]) .dw-search { box-shadow: 0 0 0 .45em var(--teal); }
.dw-caret { display: none; width: .5em; height: 5em; margin-left: -1.4em; background: var(--teal); animation: dw-blink 1s steps(1) infinite; }
.vg-dwait:not([data-q="0"])[data-sheet="0"][data-items="0"] .dw-search .dw-caret { display: block; }
@keyframes dw-blink { 50% { opacity: 0; } }

.dw-tabs { list-style: none; margin: 3.4em 0 0; padding: 0 5em; display: flex; gap: 1.6em; }
.dw-tabs li { padding: .4em .9em; border-radius: 99em; background: #fff; font-size: 3.3em; font-weight: 600; color: var(--ink-2); white-space: nowrap; box-shadow: 0 0 0 1px rgba(15,42,48,.06); }
.dw-tabs li.on { background: var(--ink); color: #fff; box-shadow: none; }
.vg-dwait:not([data-q="0"]) .dw-tabs { visibility: hidden; }

/* the menu: three rows; the search keeps the one that matches */
.dw-menu { list-style: none; margin: 2.6em 5em 0; padding: 0; display: grid; gap: 2em; }
.vg-dwait:not([data-q="0"]) .dw-menu { margin-top: -6.4em; }
.dw-row { display: flex; align-items: center; gap: 2.6em; padding: 2em; border-radius: 3em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.06); }
.vg-dwait:not([data-q="0"]) .dw-row:not(.dw-match) { display: none; }
.dw-thumb { flex: none; width: 12em; height: 12em; border-radius: 2.2em; background: url(/photos/hoji-grid.webp) 0 0 / 300% 200%; }
.dw-row > div { flex: 1; min-width: 0; display: grid; }
.dw-row b { font-size: 4em; font-weight: 600; line-height: 1.25; }
.dw-row small { font-size: 3.2em; color: var(--ink-3); }
.dw-row > span { font-size: 3.6em; font-weight: 600; white-space: nowrap; }
.dw-plus { flex: none; width: 7.6em; height: 7.6em; border-radius: 99em; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); }
.dw-plus svg { width: 4.4em; height: 4.4em; stroke-width: 2.6; }

/* the round being built */
.dw-round { position: absolute; left: 4em; right: 4em; bottom: 20em; padding: 2.8em 3.4em; border-radius: 3.4em; background: #fff;
  box-shadow: 0 0 0 1px rgba(15,42,48,.07), 0 2em 5em -2em rgba(15,42,48,.25); transition: opacity .4s, transform .5s var(--ease-out); }
.vg-dwait[data-items="0"] .dw-round { opacity: 0; transform: translateY(4em); }
.dw-round-label { font-size: 3.2em; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.dw-round ul { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; gap: 1.6em; }
.dw-round li { display: grid; transition: opacity .35s, transform .45s var(--ease-out); }
.dw-round li b { font-size: 3.9em; font-weight: 600; }
.dw-round li small { font-size: 3.2em; color: var(--teal); font-weight: 600; }
.vg-dwait[data-items="1"] .dw-round li[data-n="2"], .vg-dwait[data-items="0"] .dw-round li { opacity: 0; transform: translateY(2em); }
.vg-dwait[data-items="1"] .dw-round li[data-n="2"] { display: none; }

/* send, then sent */
.dw-send { position: absolute; left: 4em; right: 4em; bottom: 5em; height: 12em; border-radius: 99em; background: var(--teal); color: #fff; display: grid;
  box-shadow: 0 2em 5em -1.5em rgba(4,75,83,.6); transition: background-color .35s, opacity .4s, transform .5s var(--ease-out); }
.vg-dwait[data-items="0"] .dw-send { opacity: 0; transform: translateY(4em); }
.dw-send > span { grid-area: 1 / 1; display: flex; align-items: center; transition: opacity .3s; }
.dw-send-go { justify-content: space-between; padding: 0 5em; }
.dw-send-go b { font-size: 4.4em; font-weight: 600; }
.dw-metas { display: inline-grid; font-size: 3.6em; font-weight: 600; opacity: .9; }
.dw-metas > span { grid-area: 1 / 1; transition: opacity .3s; }
.vg-dwait:not([data-items="1"]) .dw-metas > span:first-child, .vg-dwait[data-items="1"] .dw-metas > span:last-child { opacity: 0; }
.dw-send-done { justify-content: center; gap: .5em; font-size: 4.2em; font-weight: 600; opacity: 0; }
.dw-send-done svg { width: 1.1em; height: 1.1em; stroke-width: 2.8; }
.vg-dwait[data-sent="1"] .dw-send { background: var(--basil); }
.vg-dwait[data-sent="1"] .dw-send-go { opacity: 0; }
.vg-dwait[data-sent="1"] .dw-send-done { opacity: 1; }

.dw-toast { position: absolute; z-index: 6; left: 3.4em; right: 3.4em; top: 10em; padding: 3em 3.4em; border-radius: 4.4em; background: #fff; display: flex; align-items: center; gap: 3em;
  box-shadow: 0 2em 6em rgba(15,42,48,.28); transition: opacity .4s, transform .55s var(--ease-out); }
.vg-dwait:not([data-sent="1"]) .dw-toast { opacity: 0; transform: translateY(-14em); }
.dw-toast i { flex: none; width: 10em; height: 10em; border-radius: 99em; display: grid; place-items: center; background: var(--basil); color: #fff; }
.dw-toast i svg { width: 6em; height: 6em; stroke-width: 2.8; }
.dw-toast p { display: grid; min-width: 0; }
.dw-toast b { font-size: 4.2em; font-weight: 600; }
.dw-toast small { font-size: 3.5em; color: var(--ink-2); }

/* the dish sheet */
.dw-screen::after { content: ""; position: absolute; z-index: 3; inset: 0; background: rgba(15,42,48,.38); transition: opacity .45s; pointer-events: none; }
.vg-dwait[data-sheet="0"] .dw-screen::after { opacity: 0; }
.dw-sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 5em 5em 5em; border-radius: 6em 6em 0 0; background: #fff;
  box-shadow: 0 -2em 6em rgba(15,42,48,.28); transition: transform .55s var(--ease-out); }
.vg-dwait[data-sheet="0"] .dw-sheet { transform: translateY(105%); }
.dw-sheet-head { display: flex; align-items: center; gap: 3em; }
.dw-sheet-head p { flex: 1; min-width: 0; display: grid; }
.dw-sheet-head b { font-family: var(--font-display); font-size: 5.4em; font-weight: 700; line-height: 1.15; }
.dw-sheet-head > span { font-size: 4em; font-weight: 600; }
.dw-allergen { margin-top: .4em; font-size: 3.2em; color: #8a6420; }
.dw-glabel { display: flex; align-items: center; gap: 1.6em; margin-top: 3.4em !important; }
.dw-glabel b { font-size: 3.7em; font-weight: 700; }
.dw-glabel em { font-style: normal; font-size: 2.9em; font-weight: 600; padding: .1em .7em; border-radius: 99em; background: #fdecea; color: #b42318; }
.dw-opts { margin-top: 1.8em; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2em; }
.dw-opt { font-size: 3.6em; height: 2.8em; padding: 0 .7em; border-radius: .72em; display: flex; align-items: center; gap: .55em; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 .1em var(--line); transition: box-shadow .3s, background-color .3s; }
.dw-opt small { margin-left: auto; font-size: .82em; font-weight: 500; color: var(--ink-3); }
.dw-opt i { flex: none; width: 1.05em; height: 1.05em; border-radius: 99em; box-shadow: inset 0 0 0 .1em var(--line-strong); transition: box-shadow .3s; }
.dw-opt.pick { background: var(--teal-soft); box-shadow: inset 0 0 0 .14em var(--teal); }
.dw-opt.pick i { box-shadow: inset 0 0 0 .32em var(--teal); }
.vg-dwait[data-size="0"] .dw-size .dw-opt.pick, .vg-dwait[data-milk="0"] .dw-milk .dw-opt.pick { background: none; box-shadow: inset 0 0 0 .1em var(--line); }
.vg-dwait[data-size="0"] .dw-size .dw-opt.pick i, .vg-dwait[data-milk="0"] .dw-milk .dw-opt.pick i { box-shadow: inset 0 0 0 .1em var(--line-strong); }
.dw-note { margin-top: 1.8em !important; height: 10em; padding: 0 2.8em; border-radius: 2.6em; display: flex; align-items: center; box-shadow: inset 0 0 0 .35em var(--line); background: #fafaf8; }
.dw-nph { display: none; font-size: 3.5em; color: #9aa6a8; white-space: nowrap; }
.dw-typed { font-size: 3.8em; font-weight: 600; }
.vg-dwait[data-note="0"] .dw-nph { display: inline; }
.vg-dwait[data-note="0"] .dw-typed { display: none; }
.vg-dwait[data-sheet="1"][data-milk="1"] .dw-note .dw-caret { display: block; margin-left: .5em; }
.dw-add { display: flex; align-items: center; justify-content: space-between; margin-top: 4em; height: 12em; padding: 0 5em; border-radius: 99em; background: var(--teal); color: #fff; }
.dw-add > * { font-size: 4.2em; font-weight: 600; }
.dw-price { display: inline-grid; }
.dw-price > span { grid-area: 1 / 1; transition: opacity .3s; }
.vg-dwait:not([data-milk="0"]) .dw-price > span:first-child, .vg-dwait[data-milk="0"] .dw-price > span:last-child { opacity: 0; }

.dw-tap { position: absolute; z-index: 7; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.dw-tap.on { animation: vd-tap .6s ease-out; }
.vg-dwait.is-reset *, .vg-dwait.is-reset .dw-screen::after { transition: none !important; animation: none !important; }

@media (min-width: 431px) {
  .vg-dwait { --w: 300px; }
  .kp-photo + .kp-card:has(> .vg-dwait) { margin-top: -160px; }
  .kp-photo + .kp-card:has(> .vg-dwait) .vg-dwait { justify-items: end; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) { .vg-dwait *, .vg-dwait .dw-screen::after { transition: none !important; animation: none !important; } }
/* ---- Dine-in, the kitchen (dine-kitchen): two station printers over the lower part of the photo, tickets coming out
   of them and pushing the earlier ones down. data-step (0..3) is the moment; a slot whose data-at is later stays shut.
   The markup's value is the end. ---- */
.kp-card:has(> .vg-dkit), .kp-visual .kp-card:has(> .vg-dkit) { width: 100%; margin: 0 auto; }
.kp-photo + .kp-card:has(> .vg-dkit) { margin-top: -110px; }
.vg-dkit { --col: 152px; display: grid; justify-items: center; gap: 14px; }
.dk-cols { display: flex; align-items: flex-start; gap: 12px; min-height: 344px; }
.dk-col { width: var(--col); }

/* the printer: a dark body with the station's name and the paper slot */
.dk-printer { position: relative; z-index: 2; margin: 0; height: 34px; padding: 0 12px; border-radius: 10px 10px 6px 6px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(#41494c, #1c2123); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 18px -8px rgba(0,0,0,.55); }
.dk-printer span { font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.dk-printer i { width: 7px; height: 7px; border-radius: 99px; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.dk-printer::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 3px; background: #0b0e0f; }
.dk-stack { margin: -3px 8px 0; display: grid; }

/* a ticket: its slot grows while the paper slides out */
.dk-slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 1.5s cubic-bezier(.45, .05, .55, .95); }
.dk-paper { min-height: 0; overflow: hidden; }
.dk-paper > .dk-ticket { transition: transform 1.5s cubic-bezier(.45, .05, .55, .95); }
.vg-dkit[data-step="0"] .dk-slot, .vg-dkit[data-step="1"] .dk-slot:is([data-at="2"], [data-at="3"]), .vg-dkit[data-step="2"] .dk-slot[data-at="3"] { grid-template-rows: 0fr; }
.vg-dkit[data-step="0"] .dk-ticket, .vg-dkit[data-step="1"] :is([data-at="2"], [data-at="3"]) .dk-ticket, .vg-dkit[data-step="2"] [data-at="3"] .dk-ticket { transform: translateY(-100%); }
.dk-slot + .dk-slot .dk-ticket { margin-top: 8px; }
.dk-ticket { --z: 5px; padding: 11px 10px 15px; background: #fffdf7; color: #151515; font-family: var(--font-text); line-height: 1.3; text-align: left;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; }
.dk-ticket p { margin: 0; }
.dk-band { margin: -2px -2px 7px !important; padding: 3px 0; background: #151515; color: #fffdf7; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.dk-table { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding-bottom: 4px; border-bottom: 2px solid #151515; }
.dk-table b { font-size: 16px; font-weight: 800; }
.dk-table span { font-size: 12px; font-weight: 700; }
.dk-meta { margin-top: 4px !important; padding-bottom: 5px; border-bottom: 1px dashed #9a9a9a; font-size: 11px; color: #333; }
.dk-ticket ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.dk-ticket li { display: grid; justify-items: start; }
.dk-ticket li > b { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.dk-ticket li small { margin: 3px 0 0 1.4em; padding: 1px 5px; background: #151515; color: #fffdf7; font-size: 11px; font-weight: 700; }
.dk-foot { margin-top: 7px !important; padding-top: 5px; border-top: 1px dashed #9a9a9a; font-size: 11px; font-weight: 700; }
.dk-cancel li > b { text-decoration: line-through; text-decoration-thickness: 2px; }
.dk-cancel .dk-band { letter-spacing: .3em; }

/* the newest ticket glows a moment as it lands */
.vg-dkit[data-step="2"] [data-at="2"] .dk-ticket, .vg-dkit[data-step="3"] [data-at="3"] .dk-ticket { animation: dk-land 1.4s 1.2s ease-out both; }
@keyframes dk-land { 0% { box-shadow: inset 0 0 0 0 transparent; } 30% { box-shadow: inset 0 0 0 3px #f5b400; } 100% { box-shadow: inset 0 0 0 0 transparent; } }

.dk-status { margin: 0; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 99px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 14px 28px -16px rgba(15,42,48,.45); }
.dk-status i { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--basil); color: #fff; }
.dk-status svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.vg-dkit.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-dkit { --col: 176px; gap: 18px; }
  .dk-cols { gap: 18px; min-height: 356px; }
  .dk-ticket { padding: 12px 12px 16px; }
  .dk-table b { font-size: 17px; }
  .dk-ticket li > b { font-size: 15px; }
  .kp-photo + .kp-card:has(> .vg-dkit) { margin-top: -170px; }
  .kp-photo + .kp-card:has(> .vg-dkit) .vg-dkit { justify-items: end; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vg-dkit * { transition: none !important; animation: none !important; } }
/* ---- Dine-in, the tables (dine-tables): the staff phone (OKO Manager, teal) with every table's state, and a guest's
   phone at the table being opened, overlapping its lower right. Each phone is sized in em of its own screen's width / 100.
   data-bar (off|open|opened|confirm|done) and data-g (lock|open|sent|ok) are the moments; the markup's values are the
   end. ---- */
.kp-card:has(> .vg-dtab), .kp-visual .kp-card:has(> .vg-dtab) { width: 100%; margin: 0 auto; }
.kp-photo + .kp-card:has(> .vg-dtab) { margin-top: -110px; }
.vg-dtab { --w: 224px; --gw: 118px; display: flex; justify-content: center; align-items: flex-end; }

/* the staff phone */
.dt-phone { flex: none; position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 32px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.dt-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 10px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.dt-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; padding: 13em 5em 0; font-size: calc(var(--w) / 100); font-family: var(--font-text);
  line-height: 1.3; text-align: left; background: #f6f5f1; color: var(--ink); }
.dt-screen p { margin: 0; }
.dt-screen svg, .dg-screen svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dt-head { display: flex; align-items: center; gap: 3em; }
.dt-head .vg-app { width: 10em; height: 10em; border-radius: 2.6em; flex: none; }
.dt-head .vg-app .mark { width: 7em; }
.dt-head > span:last-child { display: grid; }
.dt-head b { font-family: var(--font-display); font-size: 6em; font-weight: 700; line-height: 1.15; }
.dt-head small { font-size: 4.2em; color: var(--ink-3); }
.dt-counts { margin-top: 3.6em !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
.dt-c { display: flex; align-items: baseline; justify-content: center; gap: .4em; padding: .45em .3em .5em; border-radius: .7em; background: #fff; font-size: 4.2em; color: var(--ink-2);
  box-shadow: 0 0 0 1px rgba(15,42,48,.07); white-space: nowrap; }
.dt-c b { font-family: var(--font-display); font-size: 1.45em; font-weight: 700; line-height: 1.1; }
.dt-c-free b { color: var(--basil); }
.dt-c-booked b { color: var(--sunny-deep); }
.dt-c-seated b { color: var(--teal); }
.dt-area { margin-top: 3.4em !important; font-size: 4.2em; font-weight: 600; color: var(--ink-3); }
.dt-grid { list-style: none; margin: 1.8em 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; }
.dt-t { position: relative; height: 17.5em; padding: 2.2em 2.2em; border-radius: 2.6em; display: flex; flex-direction: column; justify-content: space-between; background: #fff;
  box-shadow: inset 0 0 0 .45em var(--basil); transition: background-color .45s, box-shadow .45s, color .45s, opacity .3s; }
.dt-t b { font-family: var(--font-display); font-size: 5.8em; font-weight: 700; line-height: 1; }
.dt-t span { font-size: 4.2em; font-weight: 600; color: var(--basil); white-space: nowrap; transition: color .45s; }
.dt-t[data-s="booked"] { background: var(--sunny-soft); box-shadow: none; }
.dt-t[data-s="booked"] span { color: var(--sunny-deep); }
.dt-t[data-s="seated"] { background: var(--teal); box-shadow: none; color: #fff; }
.dt-t[data-s="seated"] span { color: rgba(255,255,255,.85); }
.dt-t.pick { box-shadow: inset 0 0 0 .45em var(--basil), 0 0 0 1.2em color-mix(in srgb, var(--basil) 28%, transparent); }
.dt-t.hit { animation: dt-hit .7s var(--ease-out); }
@keyframes dt-hit { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* the bar at the bottom: one message at a time */
.dt-bar { position: absolute; left: 4em; right: 4em; bottom: 5.5em; height: 20em; border-radius: 4.4em; background: #fff;
  box-shadow: 0 0 0 1px rgba(15,42,48,.06), 0 2em 5em -2em rgba(15,42,48,.35); transition: opacity .35s, transform .5s var(--ease-out); }
.vg-dtab[data-bar="off"] .dt-bar { opacity: 0; transform: translateY(5em); }
.dt-say { position: absolute; inset: 0; padding: 0 3.2em; display: flex; align-items: center; gap: 2.6em; opacity: 0; transition: opacity .3s; }
.vg-dtab[data-bar="open"] .dt-say-open, .vg-dtab[data-bar="opened"] .dt-say-opened, .vg-dtab[data-bar="confirm"] .dt-say-confirm, .vg-dtab[data-bar="done"] .dt-say-done { opacity: 1; }
.dt-say p { flex: 1; min-width: 0; display: grid; }
.dt-say b { font-size: 4.6em; font-weight: 600; line-height: 1.25; }
.dt-say small { font-size: 4.1em; color: var(--ink-3); line-height: 1.3; }
.dt-ico { flex: none; width: 10em; height: 10em; border-radius: 99em; display: grid; place-items: center; background: var(--basil); color: #fff; }
.dt-ico svg { width: 5.8em; height: 5.8em; stroke-width: 2.6; }
.dt-say-open .dt-ico { background: var(--teal-soft); color: var(--teal); }
.dt-say-confirm .dt-ico { background: var(--berry, #c8264b); }
.vg-dtab[data-bar="confirm"] .dt-say-confirm .dt-ico svg { animation: dt-ring .9s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes dt-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.dt-btn { flex: none; padding: .55em 1.2em; border-radius: 99em; background: var(--teal); color: #fff; font-size: 4.2em; font-weight: 600; white-space: nowrap; }
.dt-tap, .dg-tap { position: absolute; z-index: 6; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3);
  box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.dt-tap.on, .dg-tap.on { animation: vd-tap .6s ease-out; }

/* the guest's phone at the table */
.dt-guest { flex: none; position: relative; z-index: 2; width: calc(var(--gw) + 10px); margin: 0 0 22px -8px; border: 5px solid #14181a; border-radius: 22px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 26px 50px -20px rgba(0,0,0,.6); }
.dt-guest::before { content: ""; position: absolute; z-index: 5; top: 5px; left: 50%; width: 30%; height: 7px; margin-left: -15%; border-radius: 99px; background: #14181a; }
.dg-screen { position: relative; width: var(--gw); aspect-ratio: 9 / 17; overflow: hidden; font-size: calc(var(--gw) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; color: var(--ink); background: #fff; }
.dg-screen p { margin: 0; }
.dg-cover { display: block; height: 30em; background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,0) 50%), url(/photos/retouch-after.webp) center / cover; }
.dg-shop { display: flex; align-items: center; gap: 3.4em; margin-top: 4em !important; padding: 0 6em; }
.dg-shop i { flex: none; font-size: 10em; width: 1.7em; height: 1.7em; border-radius: 99em; display: grid; place-items: center; background: #0b0908; color: #d20f17;
  font-family: Impact, "Avenir Next Condensed", "Arial Narrow", sans-serif; font-style: normal; line-height: 1; }
.dg-shop b { padding-bottom: .1em; font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Arial Narrow", var(--font-display); font-weight: 800; font-size: 10.5em; letter-spacing: .02em; line-height: 1; }
.dg-table { display: inline-block; margin: .35em 0 0 .73em !important; padding: .25em .8em; border-radius: 99em; background: #f2f3f1; font-size: 8.2em; font-weight: 600; }
.dg-body { padding: 4em 6em 0; }
.dg-banner { padding: .5em .55em; gap: .3em; }
.dg-banner { display: flex; align-items: center; gap: .4em; padding: .55em .7em; border-radius: .8em; background: var(--basil-soft); color: var(--basil); font-size: 7.4em; font-weight: 600; line-height: 1.25; }
.dg-banner svg { flex: none; width: 1.2em; height: 1.2em; stroke-width: 3; }
.dg-menu { list-style: none; margin: 4em 0 0; padding: 0; display: grid; gap: 3.4em; }
.dg-menu li { display: flex; align-items: center; gap: 4em; }
.dg-menu li > i { flex: none; width: 18em; height: 18em; border-radius: 4em; background: url(/photos/retouch-after.webp) 30% 40% / 240%; }
.dg-menu li:nth-child(2) > i { background-position: 85% 75%; }
.dg-menu b { flex: 1; min-width: 0; font-size: 8.4em; font-weight: 600; line-height: 1.25; }
.dg-menu em { flex: none; font-style: normal; font-size: 7.8em; font-weight: 700; width: 1.8em; height: 1.8em; border-radius: 99em; display: grid; place-items: center; background: var(--teal); color: #fff; }
.dg-foot { position: absolute; left: 6em; right: 6em; bottom: 7em; display: grid; }
.dg-foot > * { grid-area: 1 / 1; align-self: end; transition: opacity .35s, transform .45s var(--ease-out); }
.dg-send { display: grid; place-items: center; height: 3.3em; padding: 0 .4em; border-radius: 99em; background: var(--teal); color: #fff; font-size: 8em; font-weight: 600; text-align: center; line-height: 1.2; }
.dg-state { display: grid; gap: .2em; padding: 3.6em 4em; border-radius: 5em; text-align: center; }
.dg-state b { font-size: 8.4em; font-weight: 600; line-height: 1.25; }
.dg-state small { font-size: 7.8em; }
.dg-sent { background: var(--sunny-soft); color: var(--sunny-deep); }
.dg-ok { background: var(--basil-soft); color: var(--basil); justify-items: center; }
.dg-ok svg { width: 11em; height: 11em; stroke-width: 3; }
.vg-dtab:not([data-g="open"]) .dg-send, .vg-dtab:not([data-g="sent"]) .dg-sent, .vg-dtab:not([data-g="ok"]) .dg-ok { opacity: 0; transform: translateY(3em); }
.dg-lock { position: absolute; z-index: 3; left: 0; right: 0; top: 72em; bottom: 0; padding: 6em 7em 0; background: #fff; display: grid; justify-items: center; align-content: start; gap: 3em; text-align: center;
  transition: opacity .45s, transform .55s var(--ease-out); }
.dg-lock i { width: 26em; height: 26em; border-radius: 99em; display: grid; place-items: center; background: #f2f3f1; color: var(--ink-2); }
.dg-lock i svg { width: 14em; height: 14em; stroke-width: 2.2; }
.dg-lock b { font-size: 9em; font-weight: 600; line-height: 1.3; }
.dg-lock small { font-size: 8em; color: var(--ink-3); }
.vg-dtab:not([data-g="lock"]) .dg-lock { opacity: 0; transform: translateY(6em); pointer-events: none; }

.vg-dtab.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-dtab { --w: 272px; --gw: 150px; }
  .dt-guest { margin-left: 16px; margin-bottom: 30px; }
  .kp-photo + .kp-card:has(> .vg-dtab) { margin-top: -170px; }
  .kp-photo + .kp-card:has(> .vg-dtab) .vg-dtab { justify-content: flex-end; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vg-dtab * { transition: none !important; animation: none !important; } }
/* ---- Dine-in, all-you-can-eat by rounds (dine-buffet): the guests' QR page in a phone over the lower part of the
   photo, and beside it the kitchen ticket for the round and the staff card that releases the next round early. Phone
   sized in em of the screen's width / 100. data-step picks the shown count and quantities (stacked spans, one visible);
   data-sent / data-drink (0..2) / data-staff (0..2) / data-open / data-ticket = "0" are the earlier moments. The markup's
   values are the end. ---- */
.kp-card:has(> .vg-dbuf), .kp-visual .kp-card:has(> .vg-dbuf) { width: 100%; margin: 0 auto; }
.kp-photo + .kp-card:has(> .vg-dbuf) { margin-top: -110px; }
.vg-dbuf { --w: 236px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.db-stack { display: grid; }
.db-stack > span { grid-area: 1 / 1; opacity: 0; transition: opacity .25s, transform .35s var(--ease-out); transform: translateY(.3em); }
.vg-dbuf[data-step="0"] .db-stack > span:nth-child(1),
.vg-dbuf[data-step="1"] .db-stack > span:nth-child(2),
.vg-dbuf[data-step="2"] .db-stack > span:nth-child(3),
.vg-dbuf[data-step="3"] .db-stack > span:nth-child(4),
.vg-dbuf[data-step="4"] .db-stack > span:nth-child(5),
.vg-dbuf[data-step="5"] .db-stack > span:nth-child(6),
.vg-dbuf[data-step="6"] .db-stack > span:nth-child(7) { opacity: 1; transform: none; }

/* the phone */
.db-phone { flex: none; position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.db-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.db-screen { position: relative; width: var(--w); aspect-ratio: 9 / 16; overflow: hidden; padding: 11.5em 4.6em 0; font-size: calc(var(--w) / 100); font-family: var(--font-text);
  line-height: 1.3; text-align: left; background: #f6f5f1; color: var(--ink); }
.db-screen p { margin: 0; }
.db-screen svg, .db-side svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the restaurant on OKO's QR page: logo, name, table */
.db-head { display: flex; align-items: center; gap: 2.8em; }
.db-logo { flex: none; width: 10.5em; height: 10.5em; border-radius: 99em; background: #0b0908; color: #d20f17; display: grid; place-items: center; font-style: normal;
  font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 6.4em; line-height: 1; }
.db-logo { width: 1.64em; height: 1.64em; }
.db-head > span { display: grid; min-width: 0; }
.db-head b { font-size: 5.4em; font-weight: 700; line-height: 1.15; letter-spacing: .02em; }
.db-head small { font-size: 3.6em; color: var(--ink-3); }
.db-head em { margin-left: auto; flex: none; padding: .45em 1.1em; border-radius: 99em; background: #0b0908; color: #f7efe1; font-style: normal; font-size: 3.3em; font-weight: 600; white-space: nowrap; }

/* the round: count against the limit */
.db-count { margin-top: 3.4em; padding: 3em 4em 3.4em; border-radius: 3.4em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07); }
.db-count-top { display: flex; align-items: baseline; justify-content: space-between; gap: 2em; }
.db-swap { display: grid; }
.db-swap > b { grid-area: 1 / 1; font-size: 4.4em; font-weight: 700; transition: opacity .35s; }
.db-sentlabel { display: inline-flex; align-items: center; gap: .3em; color: var(--basil); opacity: 0; }
.db-sentlabel svg { width: 1em; height: 1em; }
.vg-dbuf:not([data-sent="0"]) .db-swap > b:first-child { opacity: 0; }
.vg-dbuf:not([data-sent="0"]) .db-sentlabel { opacity: 1; }
.db-count-top small { font-size: 3.5em; color: var(--ink-3); white-space: nowrap; }
.db-big { display: flex; align-items: baseline; gap: 1.6em; margin-top: 1.4em !important; }
.db-big > b { font-family: var(--font-display); font-size: 12em; font-weight: 700; line-height: .95; color: var(--teal); }
.db-big > span { font-size: 5em; font-weight: 600; color: var(--ink-2); }
.db-bar { position: relative; height: 2.4em; margin-top: 2.6em !important; border-radius: 99em; background: #e9ecea; overflow: hidden; }
.db-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w4); border-radius: 99em; background: var(--teal); transition: width .45s var(--ease-out), background-color .4s; }
.vg-dbuf[data-step="0"] .db-bar i { width: var(--w0); }
.vg-dbuf[data-step="1"] .db-bar i { width: var(--w1); }
.vg-dbuf[data-step="2"] .db-bar i { width: var(--w2); }
.vg-dbuf[data-step="3"] .db-bar i { width: var(--w3); }
.vg-dbuf[data-step="4"] .db-bar i { width: var(--w4); }
.vg-dbuf:not([data-sent="0"]) .db-bar i { background: var(--basil); }
.db-count.hit .db-big > b { animation: db-pop .45s var(--ease-out); }
@keyframes db-pop { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* the buffet dishes */
.db-label { margin: 4em .4em 2em !important; font-size: 3.6em; font-weight: 600; color: var(--ink-3); }
.db-label { margin: 1.1em .1em .55em !important; }
.db-dishes { list-style: none; margin: 0; padding: 0 3.4em; border-radius: 3.4em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07); transition: opacity .4s; }
.db-dishes li { display: flex; align-items: center; gap: 3em; padding: 1.8em 0; border-top: 1px solid var(--line); }
.db-dishes li:first-child { border-top: 0; }
.db-thumb { flex: none; width: 7.6em; height: 7.6em; border-radius: 2em; background: var(--photo) calc(var(--i) * 33.333%) 0 / 400% 100%; }
.db-dishes li > b { flex: 1; min-width: 0; font-size: 4.2em; font-weight: 600; line-height: 1.2; }
.db-step { flex: none; display: flex; align-items: center; gap: 2em; }
.db-step i { flex: none; width: 6.6em; height: 6.6em; border-radius: 99em; display: grid; place-items: center; }
.db-step i svg { width: 4.2em; height: 4.2em; }
.db-minus { color: var(--teal); box-shadow: inset 0 0 0 .4em var(--line-strong); }
.db-plus { background: var(--teal); color: #fff; }
.db-step > b { font-size: 4.6em; font-weight: 700; min-width: 1em; text-align: center; }
.vg-dbuf:not([data-sent="0"]) .db-dishes { opacity: .5; }

/* drinks: priced, any time */
.db-label-drinks span { padding: .15em .7em; border-radius: 99em; background: var(--sunny-soft); color: var(--sunny-deep); }
.db-drink { display: flex; align-items: center; gap: 3em; padding: 1.8em 3.4em; border-radius: 3.4em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07); transition: box-shadow .35s; }
.db-bottle { flex: none; width: 7.6em; height: 7.6em; border-radius: 2em; background: #e4efe2; color: #2f7a46; display: grid; place-items: center; }
.db-bottle svg { width: 5.4em; height: 5.4em; }
.db-drink > b { flex: 1; min-width: 0; font-size: 4.2em; font-weight: 600; }
.db-price { font-size: 4em; color: var(--ink-2); }
.db-drink-btn { flex: none; display: grid; justify-items: end; align-items: center; }
.db-drink-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .3em; transition: opacity .3s, transform .35s var(--ease-out); opacity: 0; transform: scale(.9); white-space: nowrap; }
.db-d0 { width: 6.6em; height: 6.6em; border-radius: 99em; justify-content: center; background: var(--teal); color: #fff; }
.db-d0 svg { width: 4.2em; height: 4.2em; }
.db-d1 { padding: .5em 1em; border-radius: 99em; background: var(--teal); color: #fff; font-size: 3.6em; font-weight: 600; }
.db-d2 { padding: .5em 1em; border-radius: 99em; background: var(--basil-soft); color: var(--basil); font-size: 3.6em; font-weight: 700; }
.db-d2 svg { width: 1em; height: 1em; }
.vg-dbuf[data-drink="0"] .db-d0, .vg-dbuf[data-drink="1"] .db-d1, .vg-dbuf[data-drink="2"] .db-d2 { opacity: 1; transform: none; }
.vg-dbuf[data-drink="1"] .db-drink { box-shadow: 0 0 0 .5em var(--teal-pale); }

/* the foot: send the round, then the countdown, then the next round open */
.db-foot { position: absolute; left: 4.6em; right: 4.6em; bottom: 4.4em; display: grid; }
.db-foot > * { grid-area: 1 / 1; align-self: end; transition: opacity .35s, transform .45s var(--ease-out); }
.db-send { display: grid; place-items: center; padding: 3.6em 0; border-radius: 99em; background: var(--teal); color: #fff; font-size: 4.6em; font-weight: 700; }
.db-send { padding: .78em 0; }
.db-cool, .db-open { display: flex; align-items: center; gap: 2.8em; padding: 2.4em 3.6em; border-radius: 3.4em; }
.db-cool > svg, .db-open > svg { flex: none; width: 6.4em; height: 6.4em; }
.db-cool > span, .db-open > span { display: grid; min-width: 0; }
.db-cool b, .db-open b { font-size: 4.5em; font-weight: 700; line-height: 1.25; }
.db-cool small, .db-open small { font-size: 3.5em; font-weight: 600; }
.db-cool { background: var(--sunny-soft); color: var(--sunny-deep); box-shadow: 0 0 0 1px rgba(107,74,0,.12); }
.db-time { font-variant-numeric: tabular-nums; }
.db-open { background: var(--basil-soft); color: var(--basil); box-shadow: 0 0 0 1px rgba(31,122,62,.16); }
.vg-dbuf:not([data-sent="0"]) .db-send,
.vg-dbuf[data-sent="0"] .db-cool, .vg-dbuf:not([data-open="0"]) .db-cool,
.vg-dbuf[data-open="0"] .db-open { opacity: 0; transform: translateY(2.5em); pointer-events: none; }

/* beside: the kitchen ticket and the staff card */
.db-side { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center; gap: 12px; width: min(100%, 340px); }
.db-printer { flex: none; position: relative; width: 128px; padding-top: 5px; }
.db-printer::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 11px; border-radius: 6px; background: linear-gradient(#41494c, #1c2123);
  box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.db-paper { position: relative; margin: 0 7px; overflow: hidden; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.db-ticket { --z: 5px; padding: 12px 10px 15px; background: #fffdf7; color: #151515; font-family: var(--font-text); line-height: 1.3; text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--z)), 90% 100%, 80% calc(100% - var(--z)), 70% 100%, 60% calc(100% - var(--z)), 50% 100%, 40% calc(100% - var(--z)), 30% 100%, 20% calc(100% - var(--z)), 10% 100%, 0 calc(100% - var(--z)));
  transition: transform 1.1s cubic-bezier(.3, .7, .3, 1); }
.vg-dbuf[data-ticket="0"] .db-ticket { transform: translateY(-101%); }
.db-ticket p { margin: 0; }
.db-station { font-size: 16px; font-weight: 800; text-align: center; letter-spacing: .08em; padding-bottom: 5px; border-bottom: 2px solid #151515; }
.db-tt { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 6px !important; padding-bottom: 5px; border-bottom: 1px dashed #9a9a92; }
.db-tt b { font-size: 14px; font-weight: 800; }
.db-tt span { padding: 0 5px; background: #151515; color: #fffdf7; font-size: 12px; font-weight: 800; }
.db-ticket ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.db-ticket li { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.db-tfoot { margin-top: 7px !important; padding-top: 5px; border-top: 1px dashed #9a9a92; font-size: 11px; text-align: center; color: #3a3a36; }
.db-staff { flex: 1; min-width: 0; max-width: 200px; display: grid; gap: 9px; padding: 13px 14px 14px; border-radius: 20px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); transition: opacity .4s, transform .5s var(--ease-out); }
.vg-dbuf[data-staff="0"] .db-staff { opacity: 0; transform: translateY(10px); }
.db-staff p { margin: 0; }
.db-staff-head { display: flex; align-items: center; gap: 9px; }
.db-staff-head .vg-app { flex: none; width: 30px; height: 30px; border-radius: 8px; }
.db-staff-head .vg-app .mark { width: 22px; }
.db-staff-head > span:last-child { display: grid; min-width: 0; }
.db-staff-head b { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.db-staff-head small { font-size: 12px; color: var(--ink-3); }
.db-staff-next { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--sunny-soft); color: var(--sunny-deep); font-size: 12.5px; font-weight: 600; transition: opacity .35s; }
.db-staff-next b { font-size: 15px; font-weight: 700; }
.vg-dbuf[data-staff="2"] .db-staff-next { opacity: .45; }
.vg-dbuf[data-staff="2"] .db-staff-next b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.db-staff-btn { display: grid; }
.db-staff-btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 0; border-radius: 99px; font-size: 13.5px; font-weight: 700; transition: opacity .3s; }
.db-staff-btn > span:first-child { background: var(--teal); color: #fff; }
.db-staff-btn > span:last-child { background: var(--basil-soft); color: var(--basil); opacity: 0; }
.db-staff-btn svg { width: 15px; height: 15px; }
.vg-dbuf[data-staff="2"] .db-staff-btn > span:first-child { opacity: 0; }
.vg-dbuf[data-staff="2"] .db-staff-btn > span:last-child { opacity: 1; }

.db-tap { position: absolute; z-index: 6; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 99px; background: rgba(120,120,120,.3); box-shadow: 0 0 0 3px rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.db-tap.on { animation: vd-tap .6s ease-out; }

.vg-dbuf.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-dbuf { --w: 258px; flex-direction: row; justify-content: center; align-items: flex-end; gap: 0; }
  .db-side { flex-direction: column; align-items: flex-start; width: auto; gap: 18px; margin: 0 0 18px -14px; }
  .db-printer { width: 150px; }
  .db-staff { width: 196px; flex: none; }
  .kp-photo + .kp-card:has(> .vg-dbuf) { margin-top: -170px; }
}
@media (prefers-reduced-motion: reduce) { .vg-dbuf * { transition: none !important; animation: none !important; } }
/* ---- Dine-in, the guest who comes back (dine-return): a two-step strip (today / three weeks later) over the guest's
   phone with the QR pages, and beside it hoji's stamp card and the guest in the restaurant's list. Phone sized in em of
   the screen's width / 100. data-scene picks the phone's page; data-join / data-sent = "0" are the earlier moments. The
   markup's values are the end. ---- */
.kp-card:has(> .vg-dret), .kp-visual .kp-card:has(> .vg-dret) { width: 100%; margin: 0 auto; }
.vg-dret { --w: 236px; --dr-green: #5d6c2c; --dr-cream: #f6efe3; --dr-ink: #2e321f; --dr-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dr-stack { display: grid; }
.dr-stack > span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s, transform .4s var(--ease-out); transform: translateY(.3em); }

/* the strip */
.dr-steps { list-style: none; margin: 0; padding: 0; width: min(100%, 300px); display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.dr-steps li { position: relative; padding-top: 18px; display: grid; font-size: 13px; line-height: 1.4; color: var(--ink-2); transition: opacity .4s; }
.dr-steps b { font-size: 15px; font-weight: 600; color: var(--ink); }
.dr-steps li::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 99px; background: var(--vg-accent, var(--teal)); transition: box-shadow .4s; }
.dr-steps li + li::after { content: ""; position: absolute; top: 4px; right: calc(50% + 9px); width: calc(100% - 18px); height: 2px; border-radius: 2px; background: var(--vg-accent, var(--teal)); transition: opacity .4s; }
.vg-dret[data-scene="1"] .dr-steps li:nth-child(1)::before, .vg-dret[data-scene="2"] .dr-steps li:nth-child(2)::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vg-accent, var(--teal)) 22%, transparent); }
.vg-dret[data-scene="1"] .dr-steps li:nth-child(2) { opacity: .4; }

.dr-row { display: flex; flex-direction: column; align-items: center; }

/* the phone */
.dr-phone { flex: none; position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.dr-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.dr-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text);
  line-height: 1.3; text-align: left; background: #f7f6f2; color: var(--ink); }
.dr-screen p { margin: 0; }
.dr-screen svg, .dr-side svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dr-scene { position: absolute; inset: 0; padding: 12.5em 5em 0; display: flex; flex-direction: column; transition: opacity .45s, transform .55s var(--ease-out); }
.vg-dret[data-scene="1"] .dr-two, .vg-dret[data-scene="2"] .dr-one { opacity: 0; transform: translateX(6em); pointer-events: none; }
.vg-dret[data-scene="2"] .dr-one { transform: translateX(-6em); }

/* OKO's QR page with hoji's logo, name and the table */
.dr-head { display: flex; align-items: center; gap: 2.6em; padding-bottom: 3.4em; border-bottom: 1px solid var(--line); }
.dr-logo { flex: none; width: 9.6em; height: 9.6em; border-radius: 99em; background: var(--dr-green); color: var(--dr-cream); display: grid; place-items: center; font-style: italic;
  font-family: var(--dr-serif); font-size: 6em; line-height: 1; }
.dr-logo { width: 1.6em; height: 1.6em; }
.dr-head b { font-family: var(--dr-serif); font-size: 6.6em; font-weight: 500; line-height: 1; color: var(--dr-ink); }
.dr-head small { margin-left: auto; padding: .35em 1em; border-radius: 99em; background: #ecebe5; font-size: 3.6em; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* today: the round sent, and the loyalty card offered */
.dr-ok { display: grid; justify-items: center; gap: 1.2em; padding: 4.6em 0 3.6em; text-align: center; }
.dr-ok i { width: 12em; height: 12em; border-radius: 99em; background: var(--basil); color: #fff; display: grid; place-items: center; }
.dr-ok i svg { width: 7em; height: 7em; }
.dr-ok b { font-size: 6em; font-weight: 700; line-height: 1.2; }
.dr-ok span { font-size: 3.8em; color: var(--ink-3); }
.dr-lines { list-style: none; margin: 0; padding: 0 3.6em; border-radius: 3.2em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07); }
.dr-lines li { display: flex; align-items: baseline; gap: .5em; padding: .85em 0; border-top: 1px solid var(--line); font-size: 4.4em; }
.dr-lines li:first-child { border-top: 0; }
.dr-lines b { font-size: .9em; font-weight: 700; color: var(--ink-3); }
.dr-lines span { flex: 1; min-width: 0; font-weight: 600; }
.dr-lines em { font-style: normal; color: var(--ink-2); }
.dr-invite { margin-top: auto; margin-bottom: 7em; display: flex; align-items: center; gap: 3em; padding: 3.4em 3.6em; border-radius: 3.2em; background: var(--dr-cream); color: var(--dr-ink); box-shadow: inset 0 0 0 1px rgba(93,108,44,.25); }
.dr-mini { flex: none; width: 10em; height: 10em; border-radius: 2.2em; background: var(--dr-green); display: grid; grid-template-columns: repeat(2, 2.6em); gap: .9em; place-content: center; }
.dr-mini span { width: 2.6em; height: 2.6em; border-radius: 99em; box-shadow: inset 0 0 0 .35em var(--dr-cream); }
.dr-mini span:first-child { background: var(--dr-cream); }
.dr-invite p { flex: 1; min-width: 0; display: grid; gap: .4em; }
.dr-invite b { font-size: 4.6em; font-weight: 700; line-height: 1.2; }
.dr-invite small { font-size: 3.8em; color: #5c5f4c; }
.dr-join { flex: none; display: grid; }
.dr-join > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .3em; padding: .55em 1.1em; border-radius: 99em; font-size: 3.8em; font-weight: 700; white-space: nowrap; transition: opacity .3s; }
.dr-join > span:first-child { background: var(--dr-green); color: var(--dr-cream); }
.dr-join > span:last-child { color: var(--dr-green); box-shadow: inset 0 0 0 .1em var(--dr-green); opacity: 0; }
.dr-join svg { width: 1em; height: 1em; }
.vg-dret:not([data-join="0"]) .dr-join > span:first-child { opacity: 0; }
.vg-dret:not([data-join="0"]) .dr-join > span:last-child { opacity: 1; }

/* three weeks later: signed in, the round sent */
.dr-member { display: inline-flex; align-self: flex-start; align-items: center; gap: .6em; margin-top: 4em !important; padding: .5em 1.1em; border-radius: 99em; background: #ecefe0; color: var(--dr-green); font-size: 3.8em; font-weight: 600; }
.dr-member i { width: .6em; height: .6em; border-radius: 99em; background: var(--dr-green); }
.dr-round { margin: 4.4em 0 .5em !important; font-size: 3.8em; font-weight: 700; color: var(--ink-3); }
.dr-foot { position: absolute; left: 5em; right: 5em; bottom: 6em; display: grid; }
.dr-foot > * { grid-area: 1 / 1; align-self: end; transition: opacity .35s, transform .45s var(--ease-out); }
.dr-send { display: grid; place-items: center; padding: .8em 0; border-radius: 99em; background: var(--teal); color: #fff; font-size: 4.6em; font-weight: 700; }
.dr-sent { display: flex; align-items: center; gap: 2.6em; padding: 3.2em 3.8em; border-radius: 3.2em; background: var(--basil-soft); color: var(--basil); }
.dr-sent i { flex: none; width: 8em; height: 8em; border-radius: 99em; background: var(--basil); color: #fff; display: grid; place-items: center; }
.dr-sent i svg { width: 5em; height: 5em; }
.dr-sent b { flex: 1; font-size: 4.6em; font-weight: 700; }
.dr-sent em { flex: none; padding: .3em .9em; border-radius: 99em; background: var(--dr-green); color: var(--dr-cream); font-style: normal; font-size: 3.6em; font-weight: 700; white-space: nowrap; }
.vg-dret:not([data-sent="0"]) .dr-send, .vg-dret[data-sent="0"] .dr-sent { opacity: 0; transform: translateY(2.5em); }
.dr-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.28); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.dr-tap.on { animation: vd-tap .6s ease-out; }

/* beside: hoji's stamp card and the guest list */
.dr-side { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; margin-top: 14px; width: min(100%, 262px); }
.dr-card { width: 100%; max-width: 290px; padding: 16px 18px 15px; border-radius: 18px; background: var(--dr-green); color: var(--dr-cream); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 24px 40px -20px rgba(46,50,31,.6); background-image: radial-gradient(120% 90% at 100% 0, rgba(255,255,255,.12), transparent 60%); }
.dr-card p { margin: 0; }
.dr-card-top { display: flex; align-items: baseline; justify-content: space-between; }
.dr-card-top b { font-family: var(--dr-serif); font-size: 30px; font-weight: 500; line-height: 1; font-style: italic; }
.dr-card-top small { font-size: 12px; letter-spacing: .08em; opacity: .8; }
.dr-stamps { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 12px; }
.dr-stamps li { aspect-ratio: 1; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(246,239,227,.45); display: grid; place-items: center; color: var(--dr-green); transition: background-color .35s, box-shadow .35s; }
.dr-stamps svg { width: 62%; height: 62%; opacity: 0; transition: opacity .3s; stroke-width: 2.4; }
.vg-dret:not([data-join="0"]) .dr-stamps li:nth-child(1), .vg-dret:not([data-sent="0"]) .dr-stamps li:nth-child(2) { background: var(--dr-cream); box-shadow: none; }
.vg-dret:not([data-join="0"]) .dr-stamps li:nth-child(1) svg, .vg-dret:not([data-sent="0"]) .dr-stamps li:nth-child(2) svg { opacity: 1; }
.vg-dret:not([data-join="0"]) .dr-stamps li:nth-child(1), .vg-dret:not([data-sent="0"]) .dr-stamps li:nth-child(2) { animation: dr-stamp .55s var(--ease-out); }
@keyframes dr-stamp { 0% { transform: scale(1.5) rotate(-12deg); } 100% { transform: none; } }
.dr-card-bottom { display: grid; gap: 4px; }
.dr-card-bottom b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.dr-card-bottom small { font-size: 12px; opacity: .85; }
.vg-dret[data-join="0"] .dr-card-bottom .dr-stack > span:nth-child(1),
.vg-dret:not([data-join="0"])[data-sent="0"] .dr-card-bottom .dr-stack > span:nth-child(2),
.vg-dret:not([data-sent="0"]) .dr-card-bottom .dr-stack > span:nth-child(3) { opacity: 1; transform: none; }
.dr-shop { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 290px; padding: 12px 14px; border-radius: 20px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); }
.dr-shop .vg-app { flex: none; width: 40px; height: 40px; border-radius: 11px; }
.dr-shop .vg-app .mark { width: 28px; }
.dr-shop p { margin: 0; display: grid; min-width: 0; }
.dr-shop small { font-size: 12px; color: var(--ink-3); }
.dr-shop b { font-size: 16px; font-weight: 700; }
.dr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dr-tags em { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--basil-soft); color: var(--basil); white-space: nowrap; transition: opacity .35s, transform .4s var(--ease-out); }
.dr-tags em.dr-stack { padding: 0; background: none; }
.dr-tags em.dr-stack > span { padding: 2px 9px; border-radius: 99px; background: var(--basil-soft); }
.vg-dret[data-sent="0"] .dr-tags .dr-stack > span:nth-child(1), .vg-dret:not([data-sent="0"]) .dr-tags .dr-stack > span:nth-child(2) { opacity: 1; transform: none; }
.vg-dret[data-join="0"] .dr-tag-member { opacity: 0; transform: translateY(4px); }

.vg-dret.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-dret { --w: 252px; }
  .dr-steps { width: 420px; }
  .dr-row { flex-direction: row; align-items: center; }
  .dr-side { width: 236px; margin: 30px 0 0 18px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vg-dret * { transition: none !important; animation: none !important; } }
/* ---- Takeaway page, key point 1: three places guests meet the restaurant (Google Maps, Instagram, the website) and
   the one ordering page they all open, on a phone. Phones: the three places as a row of tiles above the phone; wider: a
   column of cards beside it. Inside the phone everything is in em of the screen's width / 100.
   data-src = the place being visited; .done = ticked; data-from = which chip the page shows; data-added / data-pick =
   the dish in the cart. Default (no script, reduced motion): the end. ---- */
.kp-card:has(> .oe), .kp-visual .kp-card:has(> .oe) { width: 100%; margin: 0 auto; }
.oe { --w: 238px; --google: #1a73e8; --ig: #0095f6; --bm-red: #d20f17; --bm-black: #0b0908;
  position: relative; display: grid; justify-items: center; gap: 14px; text-align: left; color: var(--ink); }
.oe p { margin: 0; }
.oe svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the three places */
.oe-sources { width: 100%; max-width: 380px; padding-top: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oe-s { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 9px; border-radius: 16px; background: var(--white);
  font-size: 13px; line-height: 1.35; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 28px -18px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05);
  transition: transform .45s var(--ease-out), box-shadow .45s, opacity .45s; }
.oe-s-top { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.oe-s-top > span { overflow: hidden; text-overflow: ellipsis; }
.oe-s-top > img { width: 16px; height: 16px; flex: none; }
.oe-s-top small { display: none; margin-left: auto; color: var(--ink-3); font-weight: 400; }
.oe-ig, .oe-globe { flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; }
.oe-ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); color: #fff; }
.oe-ig svg, .oe-globe svg { width: 13px; height: 13px; stroke-width: 1.5; }
.oe-ig circle:last-child { fill: currentColor; }
.oe-globe { background: var(--teal-soft); color: var(--teal); }
.oe-tick { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 99px; background: var(--teal); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2.5px var(--ground); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .45s var(--ease-out); }
.oe-tick svg { width: 14px; height: 14px; stroke-width: 2.6; }
.oe-s.done .oe-tick { opacity: 1; transform: none; }
.oe:is([data-src="0"], [data-src="1"], [data-src="2"]) .oe-s { opacity: .55; }
.oe[data-src="0"] .oe-s[data-i="0"], .oe[data-src="1"] .oe-s[data-i="1"], .oe[data-src="2"] .oe-s[data-i="2"] {
  opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--teal), 0 18px 32px -16px rgba(15,42,48,.55); }

/* in the tiles, only the order button: the rest shows on wider screens */
.oe-s-body, .oe-acts > :not(.oe-go) { display: none; }
.oe-acts { display: flex; gap: 6px; margin-top: auto !important; }
.oe-acts .oe-go { flex: 1; }
.oe-go { display: block; padding: 5px 8px; border-radius: 99px; text-align: center; font-weight: 600; white-space: nowrap; }
.oe-g-act { border-radius: 99px; box-shadow: inset 0 0 0 1px #dadce0; color: var(--google); }
.oe-g-act.oe-go { background: var(--google); color: #fff; box-shadow: none; }
.oe-ig-act { border-radius: 8px; background: #efefef; color: #0b0b0b; }
.oe-ig-act:first-child { background: var(--ig); color: #fff; }
.oe-site { position: relative; display: none; height: 74px; border-radius: 10px; overflow: hidden; background: var(--bm-black); }
.oe-site img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.oe-site-btn { position: absolute; left: 8px; bottom: 8px; padding: 4px 12px; border-radius: 4px; background: var(--bm-red); color: #fff; letter-spacing: .04em; text-transform: uppercase;
  font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Roboto Condensed", "Arial Narrow", var(--font-display); font-weight: 800; font-size: 13px; }
/* the website tile keeps its own red button on phones too */
.oe-s-site > .oe-site { display: block; height: auto; background: none; overflow: visible; margin-top: auto; }
.oe-s-site > .oe-site img { display: none; }
.oe-s-site > .oe-site .oe-site-btn { position: static; display: block; border-radius: 99px; text-transform: none; letter-spacing: .02em; }

/* the phone: the restaurant's ordering page (OKO's, with the restaurant's cover, name and dishes) */
.oe-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.5); }
.oe-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.oe-screen { position: relative; width: var(--w); aspect-ratio: 25 / 39; overflow: hidden; font-size: calc(var(--w) / 100); line-height: 1.3; background: var(--white); color: var(--ink); font-family: var(--font-text); }
.oe-screen p { margin: 0; }
.oe-page.is-open { animation: oe-open .6s var(--ease-out); }
@keyframes oe-open { from { transform: translateY(14em); opacity: 0; } to { transform: none; opacity: 1; } }
.oe-cover { position: relative; height: 34em; background: var(--photo) 50% 55% / cover; }
.oe-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,0) 45%); }
.oe-from { position: absolute; z-index: 1; left: 4em; top: 10em; display: grid; }
.oe-from > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .45em; padding: .4em .9em .4em .5em; border-radius: 99em; background: rgba(255,255,255,.95);
  font-size: 4.4em; font-weight: 600; white-space: nowrap; box-shadow: 0 .6em 1.6em rgba(0,0,0,.25); opacity: 0; transform: translateY(-.6em); transition: opacity .35s, transform .5s var(--ease-out); }
.oe-from > span > * { font-size: 1em; }
.oe-from img { width: 1.25em; height: 1.25em; }
.oe-from .oe-ig, .oe-from .oe-globe { width: 1.35em; height: 1.35em; border-radius: .35em; }
.oe-from .oe-ig svg, .oe-from .oe-globe svg { width: 1em; height: 1em; }
.oe[data-from="0"] .oe-from [data-i="0"], .oe[data-from="1"] .oe-from [data-i="1"], .oe[data-from="2"] .oe-from [data-i="2"] { opacity: 1; transform: none; }
.oe-brand { display: flex; align-items: flex-start; gap: 3em; padding: 0 5em; margin-top: -7.5em; position: relative; }
.oe-logo { flex: none; width: 15em; height: 15em; border-radius: 99em; background: var(--bm-black); color: var(--bm-red); display: grid; place-items: center; font-style: normal;
  box-shadow: 0 0 0 1em var(--white); }
.oe-logo::before { content: none; }
.oe-logo { font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Arial Narrow", sans-serif; font-weight: 800; line-height: 1; }
.oe-brand p { display: grid; min-width: 0; padding-top: 8em; }
.oe-brand b { font-family: var(--font-display); font-size: 6.4em; font-weight: 700; line-height: 1.15; letter-spacing: .01em; }
.oe-brand small { font-size: 4.2em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-modes { display: grid; grid-template-columns: 1fr 1fr; margin: 3.4em 5em 0 !important; padding: .8em; border-radius: 99em; background: #f1f3f2; }
.oe-modes span { padding: 1em 0; border-radius: 99em; text-align: center; font-size: 4.4em; font-weight: 600; color: var(--ink-3); }
.oe-modes span.on { background: var(--white); color: var(--ink); box-shadow: 0 .2em .6em rgba(0,0,0,.12); }
.oe-tabs { display: flex; gap: 4.4em; margin: 3em 5em 0 !important; border-bottom: 1px solid var(--line); white-space: nowrap; }
.oe-tabs span { padding: 0 0 1.6em; font-size: 4.4em; color: var(--ink-3); }
.oe-tabs span.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -.18em 0 var(--teal); }
.oe-dishes { list-style: none; margin: 0; padding: 0 5em; }
.oe-dishes li { display: flex; align-items: center; gap: 3.2em; padding: 3em 0; border-bottom: 1px solid var(--line); transition: background-color .4s; }
.oe-thumb { flex: none; width: 16em; height: 16em; border-radius: 2.6em; background: var(--photo) var(--pos) / 260% auto; }
.oe-dishes li > p { flex: 1; min-width: 0; display: grid; }
.oe-dishes b { font-size: 4.8em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-dishes small { font-size: 4em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-dishes li > p > span { margin-top: .4em; font-size: 4.4em; font-weight: 600; }
.oe-add { position: relative; flex: none; width: 9em; height: 9em; border-radius: 99em; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; transition: background-color .3s, color .3s; }
.oe-add svg { width: 5em; height: 5em; stroke-width: 2.4; transition: opacity .2s; }
.oe-add b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.6em; opacity: 0; transition: opacity .2s; }
.oe[data-pick="0"] [data-d="0"] .oe-add, .oe[data-pick="1"] [data-d="1"] .oe-add, .oe[data-pick="2"] [data-d="2"] .oe-add { background: var(--teal); color: #fff; }
.oe[data-pick="0"] [data-d="0"] .oe-add svg, .oe[data-pick="1"] [data-d="1"] .oe-add svg, .oe[data-pick="2"] [data-d="2"] .oe-add svg { opacity: 0; }
.oe[data-pick="0"] [data-d="0"] .oe-add b, .oe[data-pick="1"] [data-d="1"] .oe-add b, .oe[data-pick="2"] [data-d="2"] .oe-add b { opacity: 1; }
.oe-cart { position: absolute; left: 4em; right: 4em; bottom: 4.4em; display: flex; align-items: center; gap: 3em; padding: 2.8em 4.4em 2.8em 2.8em; border-radius: 99em;
  background: var(--teal); color: #fff; box-shadow: 0 1.6em 4em -1em rgba(4,75,83,.6); transition: opacity .35s, transform .5s var(--ease-out); }
.oe-cart > * { font-size: 4.4em; white-space: nowrap; }
.oe-cart-n { padding: .15em .7em; border-radius: 99em; background: rgba(255,255,255,.2); font-weight: 600; }
.oe-cart b { flex: 1; font-weight: 600; }
.oe-cart-sum { font-weight: 600; }
.oe[data-added="0"] .oe-cart { opacity: 0; transform: translateY(10em); }

/* the dot on its way from the place to the phone, and the tap */
.oe-fly { position: absolute; z-index: 6; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 99px; background: var(--teal); pointer-events: none;
  box-shadow: 0 0 0 5px rgba(4,75,83,.18), 0 0 18px 4px rgba(4,75,83,.35); opacity: 0; transition: transform .62s cubic-bezier(.55, 0, .25, 1), opacity .2s; }
.oe-fly.on { opacity: 1; }
.oe-tap { position: absolute; z-index: 7; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 99px; background: rgba(255,255,255,.5); box-shadow: 0 0 0 4px rgba(120,120,120,.25); opacity: 0; pointer-events: none; }
.oe-tap.on { animation: vd-tap .6s ease-out; }
.oe.is-reset *, .oe.is-reset .oe-page { transition: none !important; animation: none !important; }

/* wider: the three places as a column of cards beside the phone, with their details */
@media (min-width: 600px) {
  .oe { --w: 256px; grid-template-columns: 236px auto; justify-content: center; align-items: center; gap: 30px; }
  .oe-sources { grid-template-columns: 1fr; gap: 12px; }
  .oe-s { padding: 12px 14px 13px; }
  .oe-s-top { gap: 6px; font-size: 13px; color: var(--ink-3); }
  .oe-s-top small { display: block; }
  .oe-s-body { display: block; }
  .oe-acts > :not(.oe-go) { display: block; }
  .oe-acts .oe-go { flex: none; }
  .oe-acts > * { padding: 4px 12px; }
  .oe-g-name { font-size: 17px; }
  .oe-g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; color: var(--ink-2); }
  .oe-stars { color: #fbbc04; letter-spacing: -.5px; font-size: 12px; }
  .oe-g-open { color: #188038; font-weight: 600; }
  .oe-ig-body { display: flex; align-items: center; gap: 10px; }
  .oe-avatar { flex: none; width: 42px; height: 42px; border-radius: 99px; background: var(--photo) 50% 20% / 150% auto; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ee2a7b; margin: 4px; }
  .oe-ig-body p { display: grid; min-width: 0; }
  .oe-ig-body b { font-size: 14px; }
  .oe-ig-body span { color: var(--ink-2); font-size: 12px; }
  .oe-ig-act { flex: 1; text-align: center; }
  .oe-s-site > .oe-site { height: 74px; background: var(--bm-black); overflow: hidden; }
  .oe-s-site > .oe-site img { display: block; }
  .oe-s-site > .oe-site .oe-site-btn { position: absolute; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) { .oe *, .oe-page { transition: none !important; animation: none !important; } }
.oe-logo span { font-size: 8.4em; }
/* ---- Takeaway, "dishes seen clearly": hoji's ordering page on a guest's phone (OKO's page: the restaurant's cover, logo
   and name, the product's teal). Sized in em of the screen's width / 100. The default (no script, reduced motion): the
   dish sheet open, size and oat milk picked, the note written. data-lang / data-sheet / data-size / data-milk / data-added
   / data-done = "0" and data-note = "0" are the earlier moments. ---- */
.kp-card:has(> .vg-odish), .kp-visual .kp-card:has(> .vg-odish) { width: 100%; margin: 0 auto; }
.vg-odish { --w: 280px; --od-hoji: #5d6c2c; --od-cream: #f6efe3; display: grid; justify-items: center; }
.od-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.od-phone::before { content: ""; position: absolute; z-index: 6; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.od-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #fff; color: var(--ink); }
.od-screen p { margin: 0; }
.od-screen svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.od-swap { display: inline-grid; }
.od-swap > span { grid-area: 1 / 1; transition: opacity .35s; }
.od-swap > span:first-child { opacity: 0; }
.vg-odish[data-lang="0"] .od-swap > span:first-child { opacity: 1; }
.vg-odish[data-lang="0"] .od-swap > span:last-child { opacity: 0; }

.od-status { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 9em; padding: 0 8em; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.od-status b { font-size: 3.6em; font-weight: 600; }
.od-status i { width: 6em; height: 2.6em; border-radius: .8em; box-shadow: inset 0 0 0 .35em rgba(255,255,255,.9); }
.od-cover { height: 31em; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,0) 45%), url(/photos/hoji-reel.webp) center 58% / cover; }
.od-lang { position: absolute; z-index: 2; top: 11em; right: 4em; display: flex; align-items: center; gap: 1em; padding: 1.2em 2.4em 1.2em 1.8em; border-radius: 99em;
  background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 .6em 2em rgba(0,0,0,.18); }
.od-lang svg { width: 3.8em; height: 3.8em; }
.od-lang .od-swap { font-size: 3.4em; font-weight: 600; }
.od-shop { display: flex; align-items: flex-end; gap: 3em; margin-top: -7em; padding: 0 5em; position: relative; }
.od-logo { flex: none; font-size: 5.6em; width: 2.68em; height: 2.68em; border-radius: 99em; display: grid; place-items: center; background: var(--od-hoji); color: var(--od-cream);
  box-shadow: 0 0 0 .18em #fff; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: normal; line-height: 1; padding-bottom: .1em; }
.od-shop p { display: grid; padding-bottom: .4em; min-width: 0; }
.od-shop b { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 400; font-size: 7.4em; line-height: 1; }
.od-shop small { margin-top: .5em; font-size: 3.3em; color: var(--ink-3); white-space: nowrap; }
.od-tabs { list-style: none; margin: 4.4em 0 0; padding: 0 5em; display: flex; gap: 1.6em; overflow: hidden; }
.od-tabs li { flex: none; padding: .4em .8em; border-radius: 99em; background: #f2f3f1; font-size: 3.3em; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.od-tabs li.on { background: var(--ink); color: #fff; }
.od-menu { list-style: none; margin: 2.4em 0 0; padding: 0 5em; }
.od-row { display: flex; align-items: center; gap: 3em; padding: 3em 0; border-bottom: 1px solid var(--line); }
.od-row > div { flex: 1; min-width: 0; display: grid; }
.od-row b { font-size: 4.4em; font-weight: 600; line-height: 1.25; }
.od-row small { margin-top: .2em; font-size: 3.3em; color: var(--ink-3); white-space: nowrap; }
.od-row p { margin-top: 1.4em !important; display: flex; align-items: center; gap: 1.4em; flex-wrap: wrap; }
.od-row p > span { font-size: 3.8em; font-weight: 600; }
.od-row em.od-swap { display: inline-grid; }
.od-row em { font-style: normal; font-size: 2.8em; font-weight: 600; padding: .15em .7em; border-radius: 99em; background: var(--basil-soft); color: var(--basil); white-space: nowrap; }
.od-row:last-child em { background: #f6efe0; color: #8a6420; }
.od-thumb { position: relative; flex: none; width: 19em; height: 19em; border-radius: 3em; background: url(/photos/hoji-grid.webp) 0 0 / 300% 200%; }
.od-count { position: absolute; top: -.5em; right: -.5em; font-size: 3.2em; width: 1.9em; height: 1.9em; border-radius: 99em; display: grid; place-items: center; background: var(--teal); color: #fff;
  box-shadow: 0 0 0 .22em #fff; font-weight: 700; font-style: normal; transition: transform .4s var(--ease-out), opacity .3s; }
.vg-odish[data-done="0"] .od-count { opacity: 0; transform: scale(.4); }

.od-cart { position: absolute; z-index: 2; left: 4em; right: 4em; bottom: 5em; height: 14em; padding: 0 2.4em 0 2.4em; border-radius: 99em; background: var(--teal); color: #fff;
  display: flex; align-items: center; gap: 2.4em; box-shadow: 0 2em 5em -1.5em rgba(4,75,83,.6); }
.od-bag { width: 9em; height: 9em; border-radius: 99em; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.od-bag svg { width: 5em; height: 5em; }
.od-cart-swap { flex: 1; display: grid; font-size: 3.8em; font-weight: 600; }
.od-cart-swap > span { grid-area: 1 / 1; transition: opacity .3s, transform .45s var(--ease-out); }
.od-cart-swap > span:first-child { opacity: 0; transform: translateY(-.6em); }
.vg-odish[data-done="0"] .od-cart-swap > span:first-child { opacity: 1; transform: none; }
.vg-odish[data-done="0"] .od-cart-swap > span:last-child { opacity: 0; transform: translateY(.6em); }
.od-cart b { font-size: 3.6em; font-weight: 600; padding-right: 1em; }
.od-cart { transition: opacity .4s, transform .5s var(--ease-out); }
.vg-odish[data-lang="0"] .od-cart { opacity: 0; transform: translateY(4em); }
.vg-odish[data-done="1"] .od-cart { animation: od-bump .6s var(--ease-out); }
@keyframes od-bump { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* the dish sheet */
.od-sheet { position: absolute; z-index: 3; left: 0; right: 0; top: 17em; bottom: 0; border-radius: 6em 6em 0 0; background: #fff; overflow: hidden;
  box-shadow: 0 -2em 6em rgba(15,42,48,.28); transition: transform .55s var(--ease-out); }
.vg-odish[data-sheet="0"] .od-sheet { transform: translateY(105%); }
.od-screen::after { content: ""; position: absolute; z-index: 2; inset: 0; background: rgba(15,42,48,.38); transition: opacity .45s; pointer-events: none; }
.vg-odish[data-sheet="0"] .od-screen::after { opacity: 0; }
.od-photo { display: block; height: 27em; background: url(/photos/dish-matcha-latte.webp) center 55% / cover; }
.od-photo::after { content: ""; position: absolute; top: 2.4em; left: 50%; width: 12em; margin-left: -6em; height: 1.2em; border-radius: 99em; background: rgba(255,255,255,.85); }
.od-body { padding: 3.6em 5em 0; }
.od-title { display: flex; align-items: baseline; justify-content: space-between; gap: 2em; }
.od-title b { font-family: var(--font-display); font-size: 6em; font-weight: 700; line-height: 1.15; }
.od-title span { font-size: 4.2em; font-weight: 600; }
.od-desc { margin-top: .6em !important; font-size: 3.4em; color: var(--ink-2); }
.od-allergen { margin-top: 1.4em !important; display: flex; align-items: center; gap: .5em; font-size: 3.2em; color: #8a6420; }
.od-allergen svg { width: 1.2em; height: 1.2em; flex: none; }
.od-group { margin-top: 3.4em; }
.od-glabel { display: flex; align-items: center; gap: 1.6em; margin-top: 3.4em !important; }
.od-group .od-glabel { margin-top: 0 !important; }
.od-glabel b { font-size: 3.8em; font-weight: 700; }
.od-glabel em { font-style: normal; font-size: 2.8em; font-weight: 600; padding: .1em .7em; border-radius: 99em; background: #f2f3f1; color: var(--ink-3); }
.od-size .od-glabel em { background: #fdecea; color: #b42318; }
.od-opts { margin-top: 1.8em; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2em; }
.od-opt { position: relative; font-size: 3.6em; height: 2.9em; padding: 0 .7em; border-radius: .72em; display: flex; align-items: center; gap: .55em; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 .1em var(--line); transition: box-shadow .3s, background-color .3s; }
.od-opt small { margin-left: auto; font-size: .82em; font-weight: 500; color: var(--ink-3); }
.od-opt i { flex: none; width: 1.05em; height: 1.05em; border-radius: 99em; box-shadow: inset 0 0 0 .1em var(--line-strong); transition: box-shadow .3s; }
.od-opt.pick { background: var(--teal-soft); box-shadow: inset 0 0 0 .14em var(--teal); }
.od-opt.pick i { box-shadow: inset 0 0 0 .32em var(--teal); }
.vg-odish[data-size="0"] .od-size .od-opt.pick, .vg-odish[data-milk="0"] .od-milk .od-opt.pick { background: none; box-shadow: inset 0 0 0 .1em var(--line); }
.vg-odish[data-size="0"] .od-size .od-opt.pick i, .vg-odish[data-milk="0"] .od-milk .od-opt.pick i { box-shadow: inset 0 0 0 .1em var(--line-strong); }
.od-note { position: relative; margin-top: 1.8em !important; height: 10.5em; padding: 0 2.8em; border-radius: 2.6em; display: flex; align-items: center; box-shadow: inset 0 0 0 .35em var(--line); background: #fafaf8; }
.od-ph { display: none; font-size: 3.5em; color: #9aa6a8; white-space: nowrap; }
.od-typed { font-size: 3.8em; font-weight: 600; }
.vg-odish[data-note="0"] .od-ph { display: inline; }
.vg-odish[data-note="0"] .od-typed { display: none; }
.od-caret { display: none; width: .5em; height: 5em; margin-left: .5em; background: var(--teal); animation: od-blink 1s steps(1) infinite; }
.vg-odish[data-added="0"][data-sheet="1"]:not([data-note="0"]) .od-caret { display: block; }
@keyframes od-blink { 50% { opacity: 0; } }
.od-add { position: relative; display: grid; margin-top: 4em; height: 12em; border-radius: 99em; background: var(--teal); color: #fff; }
.od-add > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .6em; font-size: 4.2em; font-weight: 600; transition: opacity .3s; white-space: nowrap; }
.od-add > span:first-child { justify-content: space-between; padding: 0 1.4em; }
.od-add > span:last-child { opacity: 0; }
.od-add svg { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.od-price { display: inline-grid; }
.od-price > span { grid-area: 1 / 1; transition: opacity .3s; }
.od-price > span:first-child { opacity: 0; }
.vg-odish[data-milk="0"] .od-price > span:first-child { opacity: 1; }
.vg-odish[data-milk="0"] .od-price > span:last-child { opacity: 0; }
.vg-odish[data-added="1"] .od-add { background: var(--basil); }
.vg-odish[data-added="1"] .od-add > span:first-child { opacity: 0; }
.vg-odish[data-added="1"] .od-add > span:last-child { opacity: 1; }
.od-tap { position: absolute; z-index: 5; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.od-tap.on { animation: vd-tap .6s ease-out; }
.vg-odish.is-reset * , .vg-odish.is-reset .od-screen::after { transition: none !important; animation: none !important; }

.kp-photo + .kp-card:has(> .vg-odish) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-odish { --w: 300px; }
  .kp-photo + .kp-card:has(> .vg-odish) { margin-top: -160px; }
  .kp-photo + .kp-card:has(> .vg-odish) .vg-odish { justify-items: end; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) { .vg-odish *, .vg-odish .od-screen::after { transition: none !important; animation: none !important; } }
/* ---- Takeaway, "every order's money into your own account": a guest's phone paying Fiamma's delivery order on OKO's
   ordering page (the product's teal; Fiamma only in its logo and name), and beside it the restaurant's takings in OKO.
   The phone is sized in em of the screen's width / 100. The default (no script, reduced motion): paid, the takings card
   complete. data-pay / data-paid / data-in / data-cut / data-stripe = "0" and data-paying = "1" are earlier moments. ---- */
.kp-card:has(> .vg-opay), .kp-visual .kp-card:has(> .vg-opay) { width: 100%; margin: 0 auto; }
.vg-opay { --w: 280px; --op-red: #b8221c; display: grid; justify-items: center; }
.op-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.op-phone::before { content: ""; position: absolute; z-index: 6; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.op-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #f6f5f1; color: var(--ink); }
.op-screen p { margin: 0; }
.op-screen svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.op-status { height: 9em; padding: 0 8em; display: flex; align-items: center; justify-content: space-between; }
.op-status b { font-size: 3.6em; font-weight: 600; }
.op-status i { width: 6em; height: 2.6em; border-radius: .8em; box-shadow: inset 0 0 0 .35em var(--ink); }
.op-head { display: grid; grid-template-columns: 8em 1fr 8em; align-items: center; height: 10em; padding: 0 3em; }
.op-head svg { width: 5.4em; height: 5.4em; }
.op-head b { text-align: center; font-size: 4.4em; font-weight: 700; }
.op-store { display: flex; align-items: center; gap: 2em; padding: 0 5em; }
.op-store i { flex: none; width: 1.7em; height: 1.7em; border-radius: 99em; display: grid; place-items: center; background: var(--op-red); color: #fbf1e2;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 4em; line-height: 1; }
.op-store b { flex: 1; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 4.8em; color: var(--op-red); }
.op-store em { font-style: normal; font-size: 3em; font-weight: 600; padding: .2em .8em; border-radius: 99em; background: var(--teal-soft); color: var(--teal); }
.op-addr { margin: 3em 4em 0; padding: 3em 3.4em; border-radius: 3.6em; background: #fff; display: flex; gap: 2.6em; align-items: flex-start; box-shadow: 0 0 0 1px rgba(15,42,48,.06); }
.op-addr svg { flex: none; width: 5.6em; height: 5.6em; color: var(--teal); }
.op-addr p { display: grid; min-width: 0; }
.op-addr small { font-size: 3em; color: var(--ink-3); }
.op-addr b { font-size: 3.8em; font-weight: 600; white-space: nowrap; }
.op-addr span { font-size: 3.2em; color: var(--ink-2); white-space: nowrap; }
.op-items { list-style: none; margin: 2.6em 4em 0; padding: 1em 3.4em; border-radius: 3.6em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.06); }
.op-items li { display: flex; align-items: baseline; gap: 2em; padding: 2em 0; border-bottom: 1px solid var(--line); }
.op-items li:last-child { border-bottom: 0; }
.op-qty { flex: none; width: 2.2em; font-size: 3.4em; font-weight: 600; color: var(--ink-3); }
.op-items p { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 1.6em; font-size: 1em; }
.op-items p b { font-size: 3.8em; font-weight: 600; }
.op-items p small { font-size: 3em; color: #8a6420; white-space: nowrap; }
.op-items li > span:last-child { font-size: 3.6em; font-weight: 500; }
.op-fee p { font-size: 3.4em; color: var(--ink-2); }
.op-fee .op-qty { font-size: 3.4em; }
.op-screen .op-total { margin: 2.6em 7.4em 0; display: flex; justify-content: space-between; align-items: baseline; }
.op-total b { font-size: 4.6em; font-weight: 700; }
.op-screen .op-label { margin: 1.1em 2.2em 0; font-size: 3.4em; font-weight: 600; color: var(--ink-3); }
.op-pays { margin: 1.6em 4em 0; display: grid; gap: 2em; }
.op-pay { height: 12em; padding: 0 3.4em; border-radius: 3.2em; display: flex; align-items: center; gap: 2.6em; background: #fff; box-shadow: inset 0 0 0 .35em transparent, 0 0 0 1px rgba(15,42,48,.08);
  transition: box-shadow .3s, background-color .3s; }
.op-pay > i { flex: none; width: 4em; height: 4em; border-radius: 99em; box-shadow: inset 0 0 0 .4em var(--line-strong); transition: box-shadow .3s; }
.op-card { flex: none; width: 6em; height: 6em; color: var(--ink-2); }
.op-pay > span { display: grid; }
.op-pay b { font-size: 3.7em; font-weight: 600; }
.op-pay small { font-size: 3em; color: var(--ink-3); }
.op-pay.pick { background: var(--teal-soft); box-shadow: inset 0 0 0 .5em var(--teal), 0 0 0 0 transparent; }
.op-pay.pick > i { box-shadow: inset 0 0 0 1.2em var(--teal); }
.vg-opay[data-pay="0"] .op-pay.pick { background: #fff; box-shadow: inset 0 0 0 .35em transparent, 0 0 0 1px rgba(15,42,48,.08); }
.vg-opay[data-pay="0"] .op-pay.pick > i { box-shadow: inset 0 0 0 .4em var(--line-strong); }
.op-btn { position: absolute; left: 4em; right: 4em; bottom: 5em; height: 13em; border-radius: 99em; display: grid; background: var(--teal); color: #fff;
  box-shadow: 0 2em 5em -1.5em rgba(4,75,83,.6); transition: background-color .35s; }
.op-btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .5em; font-size: 4.4em; font-weight: 600; white-space: nowrap; transition: opacity .3s; }
.op-btn > span:nth-child(n+2) { opacity: 0; }
.op-btn svg { width: 1.15em; height: 1.15em; stroke-width: 2.8; }
.op-spin { width: 1.1em; height: 1.1em; border-radius: 99em; border: .16em solid rgba(255,255,255,.35); border-top-color: #fff; animation: op-spin .8s linear infinite; }
@keyframes op-spin { to { transform: rotate(360deg); } }
.vg-opay[data-pay="0"] .op-btn { background: #9fb6b9; box-shadow: none; }
.vg-opay[data-paying="1"] .op-btn > span:first-child, .vg-opay:not([data-paid="0"]) .op-btn > span:first-child { opacity: 0; }
.vg-opay[data-paying="1"] .op-btn > span:nth-child(2) { opacity: 1; }
.vg-opay:not([data-paid="0"]) .op-btn { background: var(--basil); }
.vg-opay:not([data-paid="0"]) .op-btn > span:last-child { opacity: 1; }
.op-tap { position: absolute; z-index: 5; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.op-tap.on { animation: vd-tap .6s ease-out; }

/* the restaurant's takings in OKO */
.op-shop { position: relative; z-index: 1; display: grid; gap: 12px; width: min(100%, 300px); margin-top: -6px; padding: 16px 18px 16px; border-radius: 22px; background: var(--white, #fff); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); }
.op-shop p { margin: 0; }
.op-shop-head { display: flex; align-items: center; gap: 10px; }
.op-shop-head .vg-app { width: 30px; height: 30px; border-radius: 8px; }
.op-shop-head .vg-app .mark { width: 22px; }
.op-shop-head > span:last-child { display: grid; line-height: 1.3; }
.op-shop-head b { font-size: 15px; font-weight: 600; }
.op-shop-head small { font-size: 13px; color: var(--ink-3); }
.op-order { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f6f5f1; transition: opacity .45s, transform .55s var(--ease-out); }
.op-line { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.op-line b { font-weight: 600; white-space: nowrap; }
.op-line b:last-child { font-size: 17px; font-weight: 700; }
.op-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); transition: opacity .4s, transform .5s var(--ease-out); }
.op-row span { white-space: nowrap; }
.op-cut em { font-style: normal; font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 99px; background: var(--basil-soft); color: var(--basil); }
.op-stripe i { flex: none; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; background: var(--basil); color: #fff; }
.op-stripe svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.op-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 2px; font-size: 13px; color: var(--ink-3); }
.op-sum span { white-space: nowrap; }
.op-sum b { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); white-space: nowrap; transition: color .3s; }
.vg-opay.is-counting .op-sum b { color: var(--basil); }
.vg-opay[data-in="0"] .op-order { opacity: 0; transform: translateY(-8px) scale(.97); }
.vg-opay[data-cut="0"] .op-cut, .vg-opay[data-stripe="0"] .op-stripe { opacity: 0; transform: translateY(6px); }
.vg-opay.is-reset * { transition: none !important; animation: none !important; }
.vg-opay.is-reset .op-spin { animation: op-spin .8s linear infinite !important; }

.kp-photo + .kp-card:has(> .vg-opay) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-opay { --w: 300px; grid-template-columns: auto auto; justify-content: end; align-items: end; padding-right: 28px; }
  .op-shop { order: -1; width: 264px; margin: 0 -14px 34px 0; }
  .kp-photo + .kp-card:has(> .vg-opay) { margin-top: -160px; }
}
@media (prefers-reduced-motion: reduce) { .vg-opay * { transition: none !important; animation: none !important; } }
/* ---- Takeaway, "lunch booked in the morning": Le Jardin's ordering page on a guest's phone at 10:12 (OKO's page: the
   restaurant's cover and name, the product's teal), the 15-minute pick-up grid, the confirmation with the pick-up code,
   then 12:30 and the "ready" message. Sized in em of the screen's width / 100. The default (no script, reduced motion):
   confirmed, 12:30, the message shown. data-slot / data-confirm / data-notif = "0" are the earlier moments. ---- */
.kp-card:has(> .vg-oslot), .kp-visual .kp-card:has(> .vg-oslot) { width: 100%; margin: 0 auto; }
.vg-oslot { --w: 280px; display: grid; justify-items: center; }
.os-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.os-phone::before { content: ""; position: absolute; z-index: 6; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.os-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #fff; color: var(--ink); }
.os-screen p { margin: 0; }
.os-screen svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.os-status { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 9em; padding: 0 8em; display: flex; align-items: center; justify-content: space-between; color: #fff; transition: color .4s; }
.os-time { display: inline-grid; font-size: 3.6em; font-weight: 600; }
.os-time > span { grid-area: 1 / 1; transition: opacity .4s; }
.os-time > span:first-child { opacity: 0; }
.vg-oslot[data-notif="0"] .os-time > span:first-child { opacity: 1; }
.vg-oslot[data-notif="0"] .os-time > span:last-child { opacity: 0; }
.os-status i { width: 6em; height: 2.6em; border-radius: .8em; box-shadow: inset 0 0 0 .35em currentColor; opacity: .9; }
.vg-oslot:not([data-confirm="0"]) .os-status { color: var(--ink); }
.os-cover { position: relative; height: 32em; display: flex; align-items: flex-end; padding: 0 5em 3.4em;
  background: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,0) 30%, rgba(14,30,22,.72)), url(/photos/detail-storefront.webp) center 40% / cover; color: #fff; }
.os-cover p { display: grid; }
.os-cover b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 8em; line-height: 1; letter-spacing: -.01em; }
.os-cover small { margin-top: .6em; font-size: 3.3em; opacity: .9; }
.os-body { padding: 4em 5em 0; }
.os-modes { display: grid; grid-template-columns: 1fr 1fr; padding: .9em; border-radius: 99em; background: #eef0ef; }
.os-modes span { padding: .55em 0; border-radius: 99em; text-align: center; font-size: 3.6em; font-weight: 600; color: var(--ink-3); }
.os-modes span.on { background: #fff; color: var(--ink); box-shadow: 0 .1em .4em rgba(15,42,48,.14); }
.os-screen .os-closed { margin-top: 3em; display: flex; align-items: center; gap: .5em; padding: .6em .9em; border-radius: .8em; background: #fbf3e2; color: #8a6420; font-size: 3.2em; white-space: nowrap; }
.os-closed svg { flex: none; width: 1.2em; height: 1.2em; }
.os-screen .os-label { margin-top: 3.6em; font-size: 3.8em; font-weight: 700; }
.os-screen .os-days { margin-top: 2em; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2em; }
.os-days span { display: flex; align-items: baseline; justify-content: center; gap: 1.6em; height: 10em; align-items: center; border-radius: 2.6em; box-shadow: inset 0 0 0 .35em var(--line); }
.os-days b { font-size: 3.7em; font-weight: 600; }
.os-days small { font-size: 3.1em; color: var(--ink-3); }
.os-days span.on { background: var(--ink); box-shadow: none; color: #fff; }
.os-days span.on small { color: rgba(255,255,255,.75); }
.os-slots { list-style: none; margin: 2.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2em; }
.os-slots li { height: 11em; border-radius: 2.6em; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 .35em var(--line); transition: background-color .35s, box-shadow .35s, color .35s; }
.os-slots b { font-size: 4em; font-weight: 600; }
.os-slots .os-asap { background: #f4f5f4; box-shadow: none; color: #a3adaf; }
.os-asap b { font-size: 3.5em; text-decoration: line-through; text-decoration-thickness: 1px; }
.os-asap small { font-size: 2.6em; }
.os-slots li.pick { background: var(--teal); box-shadow: none; color: #fff; }
.vg-oslot[data-slot="0"] .os-slots li.pick { background: none; box-shadow: inset 0 0 0 .35em var(--line); color: var(--ink); }
.vg-oslot[data-slot="1"] .os-slots li.pick { animation: os-hit .55s var(--ease-out); }
@keyframes os-hit { 35% { transform: scale(1.08); } }
.os-btn { position: absolute; left: 4em; right: 4em; bottom: 5em; height: 13em; border-radius: 99em; display: grid; background: var(--teal); color: #fff;
  box-shadow: 0 2em 5em -1.5em rgba(4,75,83,.6); transition: background-color .35s, box-shadow .35s; }
.os-btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 4.2em; font-weight: 600; white-space: nowrap; transition: opacity .3s; }
.os-btn > span:first-child { opacity: 0; }
.vg-oslot[data-slot="0"] .os-btn { background: #e7ebea; box-shadow: none; color: #7d8c8f; }
.vg-oslot[data-slot="0"] .os-btn > span:first-child { opacity: 1; }
.vg-oslot[data-slot="0"] .os-btn > span:last-child { opacity: 0; }

/* the confirmation */
.os-done { position: absolute; z-index: 3; inset: 0; padding: 29em 7em 0; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: opacity .45s, transform .6s var(--ease-out); }
.vg-oslot[data-confirm="0"] .os-done { opacity: 0; transform: translateY(8em); pointer-events: none; }
.os-check { width: 17em; height: 17em; border-radius: 99em; display: grid; place-items: center; background: var(--basil); color: #fff; }
.os-check svg { width: 10em; height: 10em; stroke-width: 2.8; }
.vg-oslot[data-confirm="1"] .os-check { animation: os-pop .6s var(--ease-out); }
@keyframes os-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.os-screen .os-title { margin-top: 3.4em; font-family: var(--font-display); font-size: 7em; font-weight: 700; line-height: 1.1; }
.os-screen .os-when { margin-top: .5em; font-size: 4.4em; font-weight: 600; color: var(--teal); }
.os-code { margin-top: 4.4em; width: 100%; padding: 3em 0 3.4em; border-radius: 3.4em; background: #f6f5f1; display: grid; justify-items: center; box-shadow: inset 0 0 0 .3em rgba(15,42,48,.08); }
.os-code small { font-size: 3.2em; color: var(--ink-3); }
.os-code b { font-family: var(--font-display); font-size: 13em; font-weight: 700; line-height: 1; letter-spacing: .04em; }
.os-screen .os-addr { margin-top: 4em; width: 100%; display: flex; align-items: center; gap: 2.4em; text-align: left; }
.os-addr svg { flex: none; width: 6em; height: 6em; color: var(--teal); }
.os-addr > span { flex: 1; min-width: 0; display: grid; }
.os-addr b { font-size: 3.7em; font-weight: 600; }
.os-addr small { font-size: 3.1em; color: var(--ink-3); white-space: nowrap; }
.os-addr em { flex: none; font-style: normal; font-size: 3.3em; font-weight: 600; padding: .5em 1em; border-radius: 99em; box-shadow: inset 0 0 0 .1em var(--teal); color: var(--teal); }
.os-screen .os-mail { margin-top: 5em; display: flex; align-items: center; gap: .5em; font-size: 3.1em; color: var(--ink-3); white-space: nowrap; }
.os-mail svg { width: 1.3em; height: 1.3em; }

/* 12:30: the "ready" message */
.os-notif { position: absolute; z-index: 5; left: 3.4em; right: 3.4em; top: 9.5em; padding: 3.4em 3.6em 3.6em 3.4em; border-radius: 5em; background: rgba(250,250,248,.97); display: flex; align-items: flex-start; gap: 3em;
  box-shadow: 0 2em 6em rgba(15,42,48,.32), 0 0 0 1px rgba(15,42,48,.06); transition: opacity .4s ease-out, transform .6s var(--ease-out); }
.vg-oslot[data-notif="0"] .os-notif { opacity: 0; transform: translateY(-16em); }
.os-notif i { flex: none; width: 10.5em; height: 10.5em; border-radius: 2.6em; display: grid; place-items: center; background: #1e3a2d; color: #f3ead8; }
.os-notif i svg { width: 6em; height: 6em; }
.os-notif p { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.os-notif b { font-size: 4em; font-weight: 600; }
.os-notif small { font-size: 3.3em; color: var(--ink-3); }
.os-notif p > span { grid-column: 1 / -1; margin-top: .2em; font-size: 3.7em; line-height: 1.35; }
.os-tap { position: absolute; z-index: 6; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.os-tap.on { animation: vd-tap .6s ease-out; }
.vg-oslot.is-reset * { transition: none !important; animation: none !important; }

.kp-photo + .kp-card:has(> .vg-oslot) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-oslot { --w: 300px; }
  .kp-photo + .kp-card:has(> .vg-oslot) { margin-top: -160px; }
  .kp-photo + .kp-card:has(> .vg-oslot) .vg-oslot { justify-items: end; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) { .vg-oslot * { transition: none !important; animation: none !important; } }
/* ---- Takeaway, the order reaching the kitchen (order-kitchen): the staff phone (OKO Manager, teal) over the lower part of
   the photo, the station printers beside it. Phone sized in em of the screen's width / 100. data-ring / data-accepted /
   data-print (0..2) / data-ready / data-sent are the moments; the markup's values are the end. ---- */
.kp-card:has(> .vg-kit), .kp-visual .kp-card:has(> .vg-kit) { width: 100%; margin: 0 auto; }
.kp-photo + .kp-card:has(> .vg-kit) { margin-top: -110px; }
.vg-kit { --w: 236px; display: flex; justify-content: center; align-items: flex-start; }

.ok-phone { flex: none; position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.ok-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.ok-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; padding: 13em 5em 0; font-size: calc(var(--w) / 100); font-family: var(--font-text);
  line-height: 1.3; text-align: left; background: #f6f5f1; color: var(--ink); }
.ok-screen p { margin: 0; }
.ok-screen svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ok-head { display: flex; align-items: center; gap: 3em; }
.ok-head .vg-app { width: 10em; height: 10em; border-radius: 2.6em; flex: none; }
.ok-head .vg-app .mark { width: 7em; }
.ok-head > span:last-child { display: grid; }
.ok-head b { font-family: var(--font-display); font-size: 6.2em; font-weight: 700; line-height: 1.15; }
.ok-head small { font-size: 3.8em; color: var(--ink-3); }
.ok-label { margin-top: 4.6em !important; font-size: 3.6em; font-weight: 600; color: var(--ink-3); }

/* the orders in progress; the new one joins at the top once accepted */
.ok-list { list-style: none; margin: 2.2em 0 0; padding: 0; display: grid; gap: 2.2em; }
.ok-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 2.6em; padding: 3em 3.2em; border-radius: 3em; background: #fff;
  box-shadow: 0 0 0 1px rgba(15,42,48,.07); overflow: hidden; }
.ok-row > b { font-family: var(--font-display); font-size: 4.8em; font-weight: 700; }
.ok-row > span { font-size: 4em; color: var(--ink-2); white-space: nowrap; }
.ok-row em { display: grid; font-style: normal; font-size: 3.4em; font-weight: 600; white-space: nowrap; }
.ok-row em, .ok-row em > span { padding: .25em .85em; border-radius: 99em; background: var(--sunny-soft); color: var(--sunny-deep); }
.ok-out em { background: var(--teal-soft); color: var(--teal); }
.ok-done { background: none; box-shadow: 0 0 0 1px rgba(15,42,48,.06); }
.ok-done > b, .ok-done > span { color: var(--ink-3); }
.ok-done em { background: #eceeed; color: var(--ink-3); }
.ok-new em { padding: 0; background: none; }
.ok-new em > span { grid-area: 1 / 1; text-align: center; transition: opacity .35s; }
.ok-new em > span:last-child { background: var(--basil-soft); color: var(--basil); }
.vg-kit[data-sent="0"] .ok-new em > span:last-child, .vg-kit:not([data-sent="0"]) .ok-new em > span:first-child { opacity: 0; }
.ok-new { max-height: 16em; transition: max-height .5s var(--ease-out), padding .5s var(--ease-out), margin .5s var(--ease-out), opacity .4s; }
.vg-kit[data-accepted="0"] .ok-new { max-height: 0; padding-block: 0; margin-bottom: -2.2em; opacity: 0; }
.vg-kit:not([data-accepted="0"]) .ok-new { animation: ok-flash 1.6s ease-out; }
@keyframes ok-flash { 0%, 30% { background: var(--teal-soft); } 100% { background: #fff; } }

/* the new order, ringing until it is taken */
.ok-sheet { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 5em 5em 6em; border-radius: 6em 6em 0 0; background: #fff;
  box-shadow: 0 -1em 6em rgba(15,42,48,.25); transition: transform .55s var(--ease-out); }
.vg-kit[data-ring="0"] .ok-sheet { transform: translateY(105%); }
.ok-alert { display: flex; align-items: center; gap: 2.6em; }
.ok-bell { flex: none; width: 9.5em; height: 9.5em; border-radius: 99em; background: var(--teal); color: #fff; display: grid; place-items: center; }
.ok-bell svg { width: 5.8em; height: 5.8em; }
.vg-kit[data-ring="1"] .ok-bell svg { animation: ok-ring .9s ease-in-out infinite; transform-origin: 50% 15%; }
@keyframes ok-ring { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-16deg); } }
.ok-alert > b { font-family: var(--font-display); font-size: 5.4em; font-weight: 700; }
.ok-alert small { margin-left: auto; display: flex; align-items: center; gap: .5em; font-size: 3.6em; font-weight: 600; color: var(--berry); white-space: nowrap; }
.ok-waves { display: flex; align-items: center; gap: .18em; height: 1em; }
.ok-waves span { width: .2em; height: 100%; border-radius: 1em; background: currentColor; transform: scaleY(.4); }
.vg-kit[data-ring="1"] .ok-waves span { animation: ok-wave .8s ease-in-out infinite; }
.ok-waves span:nth-child(2) { animation-delay: .15s !important; }
.ok-waves span:nth-child(3) { animation-delay: .3s !important; }
@keyframes ok-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.ok-title { margin-top: 4em !important; display: flex; align-items: center; gap: 2.4em; }
.ok-title b { font-family: var(--font-display); font-size: 8em; font-weight: 700; line-height: 1; }
.ok-title em { font-style: normal; font-size: 3.6em; font-weight: 600; padding: .25em .85em; border-radius: 99em; background: var(--teal-soft); color: var(--teal); }
.ok-title > span { margin-left: auto; font-size: 5em; font-weight: 600; }
.ok-lines { list-style: none; margin: 3.4em 0 0; padding: 0; border-top: 1px dashed var(--line-strong); }
.ok-lines li { display: flex; align-items: baseline; gap: 2.6em; padding: 2.2em 0 0; }
.ok-lines li > b { flex: none; width: 1.9em; font-size: 4.6em; font-weight: 700; color: var(--teal); }
.ok-lines li > span { font-size: 4.6em; font-weight: 600; display: grid; }
.ok-lines small { font-size: .82em; font-weight: 600; color: var(--berry-deep); }
.ok-total { margin-top: 3.4em !important; padding-top: 2.6em; border-top: 1px dashed var(--line-strong); display: flex; align-items: center; justify-content: space-between; }
.ok-total span { display: flex; align-items: center; gap: .5em; font-size: 3.8em; font-weight: 600; color: var(--basil); }
.ok-total span::before { content: ""; width: .5em; height: .5em; border-radius: 99em; background: currentColor; }
.ok-total b { font-family: var(--font-display); font-size: 5.4em; font-weight: 700; }
.ok-btns { margin-top: 4em !important; display: grid; grid-template-columns: 1fr 1.6fr; gap: 3em; }
.ok-btns span { padding: .7em 0; border-radius: 99em; text-align: center; font-size: 4.6em; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.ok-btns .ok-accept { background: var(--teal); box-shadow: none; color: #fff; }

/* ready: one tap emails the guest */
.ok-bar { position: absolute; z-index: 1; left: 4em; right: 4em; bottom: 6em; min-height: 19em; padding: 3em 3.4em; border-radius: 4.4em; background: #fff; display: grid; align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3em 7em -2em rgba(15,42,48,.35); transition: opacity .35s ease-out, transform .5s var(--ease-out); }
.vg-kit[data-ready="0"] .ok-bar { opacity: 0; transform: translateY(6em); }
.ok-ask, .ok-sent { grid-area: 1 / 1; display: flex; align-items: center; gap: 3em; transition: opacity .35s; }
.ok-ask p { flex: 1; min-width: 0; display: grid; }
.ok-ask b { font-size: 4.8em; font-weight: 600; white-space: nowrap; }
.ok-ask small { font-size: 3.6em; color: var(--ink-3); white-space: nowrap; }
.ok-btn { flex: none; padding: .55em 1.2em; border-radius: 99em; background: var(--teal); color: #fff; font-size: 4.4em; font-weight: 600; white-space: nowrap; }
.ok-sent i { flex: none; width: 10em; height: 10em; border-radius: 99em; display: grid; place-items: center; background: var(--basil); color: #fff; }
.ok-sent i svg { width: 6em; height: 6em; stroke-width: 2.8; }
.ok-sent b { font-size: 4.6em; font-weight: 600; }
.vg-kit[data-sent="0"] .ok-sent, .vg-kit:not([data-sent="0"]) .ok-ask { opacity: 0; }
.ok-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.28); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.ok-tap.on { animation: vd-tap .6s ease-out; }

/* the station printers: a slot, and the ticket coming out of it */
.ok-printers { flex: none; position: relative; z-index: 2; width: 128px; margin: 34px 0 0 -18px; display: grid; gap: 16px; align-content: start; }
.ok-printer { position: relative; padding-top: 5px; }
.ok-printer::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 11px; border-radius: 6px; background: linear-gradient(#41494c, #1c2123);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 12px -4px rgba(0,0,0,.45); }
.ok-paper { position: relative; margin: 0 7px; overflow: hidden; filter: drop-shadow(0 10px 12px rgba(0,0,0,.28)); }
.ok-ticket { --z: 5px; padding: 12px 9px 15px; background: #fffdf7; color: #151515; font-family: var(--font-text); line-height: 1.3; text-align: left;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  transition: transform 1.6s cubic-bezier(.45, .05, .55, .95); }
.vg-kit[data-print="0"] .ok-ticket, .vg-kit[data-print="1"] [data-n="2"] .ok-ticket { transform: translateY(-101%); }
.ok-ticket p { margin: 0; }
.ok-station { display: block; padding-bottom: 5px; border-bottom: 2px solid #151515; text-align: center; font-size: 17px; font-weight: 800; letter-spacing: .08em; }
.ok-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin-top: 5px !important; padding-bottom: 5px; border-bottom: 1px dashed #9a9a9a; font-size: 11px; }
.ok-meta b { font-size: 13px; font-weight: 800; }
.ok-ticket ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ok-ticket li { display: grid; justify-items: start; }
.ok-ticket li > b { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.ok-ticket li small { margin: 2px 0 0 1.5em; padding: 1px 5px; background: #151515; color: #fffdf7; font-size: 11px; font-weight: 700; }
.ok-foot { margin-top: 8px !important; padding-top: 5px; border-top: 1px dashed #9a9a9a; text-align: center; font-size: 10px; color: #444; }

.vg-kit.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-kit { --w: 268px; }
  .ok-printers { width: 164px; margin: 46px 0 0 -22px; gap: 20px; }
  .ok-ticket { padding: 14px 12px 17px; }
  .ok-station { font-size: 19px; }
  .ok-meta { font-size: 12px; }
  .ok-meta b { font-size: 14px; }
  .ok-ticket li > b { font-size: 16px; }
  .ok-ticket li small { font-size: 12px; }
  .ok-foot { font-size: 11px; }
  .kp-photo + .kp-card:has(> .vg-kit) { margin-top: -170px; }
  .kp-photo + .kp-card:has(> .vg-kit) .vg-kit { justify-content: flex-end; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vg-kit * { transition: none !important; animation: none !important; } }
/* ---- Takeaway, the lunch rush (order-rush): the staff phone (OKO Manager, order settings) and, beside it, the guest's
   ordering page. Phone sized in em of the screen's width / 100. data-count / data-step pick the shown count and prep time
   (stacked spans, one visible); data-sold = "0" before the dish shows sold out. The markup's values are the end. ---- */
.kp-card:has(> .vg-rush), .kp-visual .kp-card:has(> .vg-rush) { width: 100%; margin: 0 auto; }
.kp-photo + .kp-card:has(> .vg-rush) { margin-top: -110px; }
.vg-rush { --w: 236px; display: flex; flex-direction: column; align-items: center; }
.or-stack { display: grid; }
.or-stack > span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s, transform .4s var(--ease-out); transform: translateY(.35em); }
.vg-rush[data-count="0"] .or-busy .or-stack > span:nth-child(1),
.vg-rush[data-count="1"] .or-busy .or-stack > span:nth-child(2),
.vg-rush[data-count="2"] .or-busy .or-stack > span:nth-child(3),
.vg-rush[data-count="3"] .or-busy .or-stack > span:nth-child(4),
.vg-rush[data-count="4"] .or-busy .or-stack > span:nth-child(5),
.vg-rush[data-count="5"] .or-busy .or-stack > span:nth-child(6),
.vg-rush[data-count="6"] .or-busy .or-stack > span:nth-child(7),
.vg-rush[data-count="7"] .or-busy .or-stack > span:nth-child(8),
.vg-rush[data-step="0"] :is(.or-stepper, .or-wait) .or-stack > span:nth-child(1),
.vg-rush[data-step="1"] :is(.or-stepper, .or-wait) .or-stack > span:nth-child(2),
.vg-rush[data-step="2"] :is(.or-stepper, .or-wait) .or-stack > span:nth-child(3),
.vg-rush[data-step="3"] :is(.or-stepper, .or-wait) .or-stack > span:nth-child(4),
.vg-rush[data-step="4"] :is(.or-stepper, .or-wait) .or-stack > span:nth-child(5),
.vg-rush[data-step="5"] :is(.or-stepper, .or-wait) .or-stack > span:nth-child(6) { opacity: 1; transform: none; }

.or-phone { flex: none; align-self: flex-start; position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.or-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.or-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; padding: 13em 5em 0; font-size: calc(var(--w) / 100); font-family: var(--font-text);
  line-height: 1.3; text-align: left; background: #f6f5f1; color: var(--ink); }
.or-screen p { margin: 0; }
.or-screen svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.or-head { display: flex; align-items: center; gap: 3em; }
.or-head .vg-app { width: 10em; height: 10em; border-radius: 2.6em; flex: none; }
.or-head .vg-app .mark { width: 7em; }
.or-head > span:last-child { display: grid; }
.or-head b { font-family: var(--font-display); font-size: 6.2em; font-weight: 700; line-height: 1.15; }
.or-head small { font-size: 3.8em; color: var(--ink-3); }

/* the orders in progress, climbing */
.or-busy { margin-top: 5em; padding: 3.6em 4em; border-radius: 3.4em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07); display: flex; align-items: center; gap: 3em; }
.or-pulse { flex: none; position: relative; width: 3.2em; height: 3.2em; border-radius: 99em; background: var(--berry); }
.or-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 99em; background: var(--berry); animation: or-pulse 1.4s ease-out infinite; }
@keyframes or-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3); opacity: 0; } }
.or-busy p { display: flex; align-items: baseline; gap: 1.4em; }
.or-busy p small { font-size: 4.2em; font-weight: 600; color: var(--ink-2); }
.or-busy p > b { font-family: var(--font-display); font-size: 11em; font-weight: 700; line-height: 1; color: var(--berry); }
.or-unit { font-size: 4.2em; font-weight: 600; color: var(--ink-2); }
.or-busy-meta { margin-left: auto; font-size: 3.6em; color: var(--ink-3); white-space: nowrap; }
.or-busy.hit p > b { animation: or-pop .5s var(--ease-out); }
@keyframes or-pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* the order settings: the prep time, stepped up */
.or-group { margin-top: 4em; border-radius: 3.4em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07); overflow: hidden; }
.or-row { display: flex; align-items: center; justify-content: space-between; gap: 2em; min-height: 13em; padding: 0 4em; border-top: 1px solid var(--line); }
.or-row:first-child { border-top: 0; }
.or-row > span:first-child { font-size: 4.2em; font-weight: 500; white-space: nowrap; }
.or-prep { min-height: 16em; background: var(--teal-soft); }
.or-prep > span:first-child { font-weight: 600; color: var(--teal); }
.or-value { font-size: 4em; color: var(--ink-3); white-space: nowrap; }
.or-stepper { display: flex; align-items: center; gap: 1.6em; }
.or-stepper i { flex: none; width: 8em; height: 8em; border-radius: 99em; display: grid; place-items: center; background: #fff; color: var(--teal); box-shadow: inset 0 0 0 .45em var(--teal); }
.or-stepper i svg { width: 5em; height: 5em; }
.or-stepper .or-plus { background: var(--teal); color: #fff; box-shadow: none; }
.or-stepper b { font-family: var(--font-display); font-size: 6.4em; font-weight: 700; min-width: 1.3em; text-align: right; }
.or-stepper small { margin-left: -.35em; font-size: 3.6em; font-weight: 600; color: var(--teal); }
.or-toggle { flex: none; position: relative; width: 11em; height: 6.6em; border-radius: 99em; background: var(--teal); }
.or-toggle::after { content: ""; position: absolute; top: .8em; right: .8em; width: 5em; height: 5em; border-radius: 99em; background: #fff; box-shadow: 0 .3em .8em rgba(0,0,0,.2); }
/* the orders coming in, newest on top */
/* on phones the guest's page covers the lower part of the screen: the incoming list shows on wide screens only */
.or-in-label, .or-in { display: none !important; }
.or-in-label { margin-top: 4.4em !important; font-size: 3.6em; font-weight: 600; color: var(--ink-3); }
.or-in { list-style: none; margin: 2em 0 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 1.8em; }
.or-in li { display: flex; align-items: center; gap: 2.2em; padding: 2.2em 3em; border-radius: 99em; background: #fff; box-shadow: 0 0 0 1px rgba(15,42,48,.07);
  max-height: 12em; transition: opacity .35s, transform .45s var(--ease-out), max-height .45s var(--ease-out), padding .45s var(--ease-out), margin .45s var(--ease-out); }
.or-in li i { flex: none; width: 2.2em; height: 2.2em; border-radius: 99em; background: var(--berry); }
.or-in li b { font-size: 3.8em; font-weight: 700; }
.or-in li span { font-size: 3.6em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-rush[data-count="0"] .or-in li:nth-child(n+1),
.vg-rush[data-count="1"] .or-in li:nth-child(n+2),
.vg-rush[data-count="2"] .or-in li:nth-child(n+3),
.vg-rush[data-count="3"] .or-in li:nth-child(n+4),
.vg-rush[data-count="4"] .or-in li:nth-child(n+5) { opacity: 0; transform: translateY(-3em); max-height: 0; padding-block: 0; margin-top: -1.8em; }
.or-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.28); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.or-tap.on { animation: vd-tap .6s ease-out; }

/* the guest's ordering page, following */
.or-guest { position: relative; z-index: 2; align-self: flex-end; width: 232px; margin-top: -104px; }
.or-guest-app { position: absolute; z-index: 1; top: 9px; left: 10px; margin: 0; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.92); font-size: 11.5px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.or-page { position: relative; border-radius: 22px; overflow: hidden; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.5), 0 0 0 1px rgba(15,42,48,.05); }
.or-page p { margin: 0; }
.or-cover { display: block; height: 66px; background: var(--photo) center 42% / cover; }
.or-store { display: flex; align-items: center; gap: 9px; margin: 8px 14px 0 !important; }
.or-store i { flex: none; width: 40px; height: 40px; border-radius: 99px; border: 3px solid #fff; background: #b8221c; color: #f7eddc; display: grid; place-items: center;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.18); margin-top: -26px; align-self: flex-start; }
.or-store span { display: grid; min-width: 0; }
.or-store b { font-size: 16px; font-weight: 700; line-height: 1.2; }
.or-store small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.or-modes { display: grid; grid-template-columns: 1fr 1fr; margin: 11px 14px 0 !important; padding: 3px; border-radius: 99px; background: #f0f1f0; }
.or-modes span { padding: 3px 0; border-radius: 99px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.or-modes span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.or-wait { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0 !important; padding: 7px 10px; border-radius: 12px; background: var(--sunny-soft); color: var(--sunny-deep); }
.or-wait > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.or-wait .or-stack > span { display: grid; }
.or-wait b { font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.or-wait small { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.or-wait.hit { animation: or-flash 1.1s ease-out; }
@keyframes or-flash { 0% { box-shadow: 0 0 0 0 rgba(255,196,58,.9); } 100% { box-shadow: 0 0 0 10px rgba(255,196,58,0); } }
.or-dishes { list-style: none; margin: 8px 0 0; padding: 0 14px 10px; }
.or-dishes li { display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); transition: opacity .4s; }
.or-dishes li:first-child { border-top: 0; }
.or-dishes i { grid-row: span 2; width: 32px; height: 32px; border-radius: 8px; background: var(--photo) var(--x) 50% / 260% auto; }
.or-dishes b { font-size: 13px; font-weight: 600; }
.or-dishes li > span { font-size: 12px; color: var(--ink-2); grid-row: span 2; }
.or-dishes em { grid-column: 2; justify-self: start; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: #eceeed; color: var(--ink-2); transition: opacity .4s; }
.or-dishes li.or-out { opacity: .5; }
.or-dishes li.or-out i { filter: grayscale(1); }
.vg-rush[data-sold="0"] .or-dishes li.or-out { opacity: 1; }
.vg-rush[data-sold="0"] .or-dishes li.or-out i { filter: none; }
.vg-rush[data-sold="0"] .or-dishes em { opacity: 0; }

.vg-rush.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-rush { --w: 262px; flex-direction: row; justify-content: center; align-items: flex-end; }
  .or-phone { align-self: auto; }
  .or-guest { align-self: auto; width: 248px; margin: 0 0 -6px -10px; }
  .or-in-label { display: block !important; }
  .or-in { display: flex !important; }
  .or-cover { height: 74px; }
  .kp-photo + .kp-card:has(> .vg-rush) { margin-top: -170px; }
}
@media (prefers-reduced-motion: reduce) { .vg-rush * { transition: none !important; animation: none !important; } }
/* ---- Takeaway, the guest who comes back (order-return): the guest's phone in hoji's look (cream, matcha green, a light
   serif), two moments marked above it, and the guest in the restaurant's list beside it. Phone sized in em of the
   screen's width / 100. data-scene (1 success page, 2 checkout two weeks later); data-joined / data-member / data-reward /
   data-orders = "0" are the earlier moments. The markup's values are the end. ---- */
.kp-card:has(> .vg-again), .kp-visual .kp-card:has(> .vg-again) { width: 100%; margin: 0 auto; }
.vg-again { --w: 270px; --rt-green: #5d6c2c; --rt-cream: #f6efe3; --rt-ink: #2e321f; --rt-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  display: grid; justify-items: center; gap: 14px; }
.rt-stack { display: grid; }
.rt-stack > span { grid-area: 1 / 1; transition: opacity .35s; }
.vg-again[data-reward="0"] .rt-sum .rt-stack > span:nth-child(2), .vg-again:not([data-reward="0"]) .rt-sum .rt-stack > span:nth-child(1),
.vg-again[data-orders="0"] .rt-orders > span:nth-child(2), .vg-again:not([data-orders="0"]) .rt-orders > span:nth-child(1) { opacity: 0; }
.rt-col { width: calc(var(--w) + 12px); }

/* the two moments */
.rt-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.rt-steps li { position: relative; padding-top: 18px; display: grid; font-size: 13px; line-height: 1.4; color: var(--ink-2); transition: opacity .4s; }
.rt-steps b { font-size: 15px; font-weight: 600; color: var(--ink); }
.rt-steps li::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 99px; background: var(--vg-accent); transition: background-color .4s, box-shadow .4s; }
.rt-steps li + li::after { content: ""; position: absolute; top: 4px; right: calc(50% + 9px); width: calc(100% - 18px); height: 2px; border-radius: 2px; background: var(--vg-accent); transition: background-color .4s; }
.vg-again[data-scene="1"] .rt-steps li:first-child::before, .vg-again[data-scene="2"] .rt-steps li:last-child::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vg-accent) 22%, transparent); }
.vg-again[data-scene="1"] .rt-steps li:last-child { opacity: .45; }
.vg-again[data-scene="1"] .rt-steps li:last-child::before, .vg-again[data-scene="1"] .rt-steps li:last-child::after { background: var(--line-strong); }

.rt-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.rt-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.rt-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #fff; color: #14181a; }
.rt-screen p { margin: 0; }
.rt-screen svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rt-scene { position: absolute; inset: 0; transition: opacity .55s ease; }
.vg-again[data-scene="2"] .rt-done, .vg-again[data-scene="1"] .rt-pay { opacity: 0; }

/* 1. the order confirmed, and the loyalty card offered on the same page */
.rt-done { padding: 12em 6em 0; background: var(--rt-cream); color: var(--rt-ink); text-align: center; }
.rt-brand { font-family: var(--rt-serif); font-style: italic; font-weight: 500; font-size: 8.4em; line-height: 1.1; color: var(--rt-green); }
.rt-tick { display: grid; place-items: center; width: 12em; height: 12em; margin: 4.4em auto 0; border-radius: 99em; background: var(--rt-green); color: var(--rt-cream); }
.rt-tick svg { width: 7em; height: 7em; stroke-width: 2.8; }
.rt-title { display: block; margin-top: .55em; font-family: var(--font-display); font-size: 6.2em; font-weight: 700; }
.rt-code { margin-top: 2.6em !important; display: flex; align-items: baseline; justify-content: center; gap: 2.4em; }
.rt-code small { font-size: 3.8em; color: #6b6f5c; }
.rt-code b { font-family: var(--rt-serif); font-weight: 600; font-size: 12em; line-height: 1; color: var(--rt-green); }
.rt-detail { margin-top: 1.4em !important; font-size: 3.8em; color: #5c604c; }
.rt-card { margin-top: 6.4em; padding: 5em 5.4em 5.4em; border-radius: 4em; background: var(--rt-green); color: var(--rt-cream); text-align: left; box-shadow: 0 2em 6em -2em rgba(40,50,20,.5); }
.rt-card-title { display: block; font-family: var(--rt-serif); font-style: italic; font-weight: 500; font-size: 7.6em; line-height: 1.05; }
.rt-card-text { margin-top: 1.2em !important; font-size: 3.8em; opacity: .9; }
.rt-stamps { list-style: none; margin: 4em 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.2em; justify-items: center; }
.rt-stamps li { width: 9em; height: 9em; border-radius: 99em; box-shadow: inset 0 0 0 .45em rgba(246,239,227,.5); }
.rt-stamps li.first { background: var(--rt-cream); box-shadow: none; }
.vg-again[data-joined="0"] .rt-stamps li.first { background: none; box-shadow: inset 0 0 0 .45em rgba(246,239,227,.5); }
.vg-again[data-joined="1"] .rt-stamps li.first { animation: rt-stamp .6s var(--ease-out); }
@keyframes rt-stamp { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.rt-join { display: grid; margin-top: 4.4em; padding: 2.4em 0; border-radius: 99em; text-align: center; color: var(--rt-cream); box-shadow: inset 0 0 0 1.5px rgba(246,239,227,.6); transition: background-color .3s, box-shadow .3s, color .3s; }
.rt-join > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .35em; font-size: 4.4em; font-weight: 600; transition: opacity .3s; white-space: nowrap; }
.rt-join svg { width: 1.1em; height: 1.1em; }
.rt-join > span:first-child { opacity: 0; }
.vg-again[data-joined="0"] .rt-join { background: var(--rt-cream); box-shadow: none; color: var(--rt-green); }
.vg-again[data-joined="0"] .rt-join > span:first-child { opacity: 1; }
.vg-again[data-joined="0"] .rt-join > span:last-child { opacity: 0; }

/* 2. two weeks later: signed in at checkout, the free drink taken off */
.rt-pay { padding: 13em 6em 0; background: #fff; }
.rt-bar { font-size: 4.4em; font-weight: 600; color: var(--rt-green); }
.rt-signed { margin-top: 1.3em !important; display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border-radius: 99em; background: #eef0e3; color: var(--rt-green); font-size: 3.8em; font-weight: 600; }
.rt-signed i { width: .55em; height: .55em; border-radius: 99em; background: currentColor; }
.rt-lines { list-style: none; margin: 3.6em 0 0; padding: 0; }
.rt-lines li { display: flex; justify-content: space-between; align-items: baseline; padding: 2.4em 0; border-bottom: 1px solid var(--line); }
.rt-lines span { font-size: 4.4em; }
.rt-lines b { font-size: 4.4em; font-weight: 600; }
.rt-label { margin-top: 1.4em !important; font-size: 3.6em; font-weight: 600; color: #6b7275; }
.rt-reward { margin-top: 2em; display: flex; align-items: center; gap: 3em; padding: 3em 3.4em; border-radius: 3.4em; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .35s, box-shadow .35s; }
.rt-cup { flex: none; width: 9.5em; height: 9.5em; border-radius: 99em; display: grid; place-items: center; background: var(--rt-cream); color: var(--rt-green); }
.rt-cup svg { width: 6em; height: 6em; stroke-width: 2; }
.rt-reward b { flex: 1; font-size: 4.4em; font-weight: 600; }
.rt-check { flex: none; width: 7.4em; height: 7.4em; border-radius: 99em; display: grid; place-items: center; background: var(--rt-green); color: #fff; transition: background-color .3s, box-shadow .3s, color .3s; }
.rt-check svg { width: 4.6em; height: 4.6em; stroke-width: 3; }
.vg-again:not([data-reward="0"]) .rt-reward { background: #f4f1e6; box-shadow: inset 0 0 0 1.5px var(--rt-green); }
.vg-again[data-reward="0"] .rt-check { background: #fff; box-shadow: inset 0 0 0 .45em var(--line-strong); color: transparent; }
.rt-sum { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.6em 6em 6em; border-top: 1px solid var(--line); background: #fff; }
.rt-off { display: flex; justify-content: space-between; align-items: baseline; color: var(--rt-green); max-height: 8em; overflow: hidden; transition: max-height .45s var(--ease-out), opacity .35s, margin .45s; margin-bottom: 1.6em !important; }
.rt-off span, .rt-off b { font-size: 4em; font-weight: 600; }
.vg-again[data-reward="0"] .rt-off { max-height: 0; opacity: 0; margin-bottom: 0 !important; }
.rt-total { display: flex; justify-content: space-between; align-items: center; }
.rt-total > span { font-size: 4.6em; font-weight: 600; }
.rt-total b { font-family: var(--font-display); font-size: 7em; font-weight: 700; line-height: 1.1; }
.rt-total b > span { justify-self: end; }
.rt-paybtn { margin-top: 3.4em; display: flex; align-items: center; justify-content: center; gap: .3em; padding: .7em 0; border-radius: 99em; background: var(--rt-green); color: #fff; font-size: 4.6em; font-weight: 600; }
.rt-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.3); box-shadow: 0 0 0 1.2em rgba(120,120,120,.18); opacity: 0; pointer-events: none; }
.rt-tap.on { animation: vd-tap .6s ease-out; }

/* the restaurant's side: the guest in its list */
.rt-shop { display: flex; align-items: center; gap: 12px; width: min(100%, 300px); padding: 12px 16px 13px 12px; border-radius: 22px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); }
.rt-shop .vg-app { width: 38px; height: 38px; border-radius: 10px; align-self: flex-start; margin-top: 3px; }
.rt-shop .vg-app .mark { width: 27px; }
.rt-shop p { margin: 0; display: grid; font-size: 15px; line-height: 1.4; min-width: 0; }
.rt-shop small { font-size: 13px; color: var(--ink-3); }
.rt-shop b { font-weight: 600; white-space: nowrap; }
.rt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rt-tags em { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 99px; font-style: normal; font-size: 13px; font-weight: 600; background: var(--basil-soft); color: var(--basil); white-space: nowrap; transition: background-color .4s, color .4s; }
.rt-tags em::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.rt-tags em.rt-orders { display: inline-grid; padding: 0; }
.rt-tags em.rt-orders::before { display: none; }
.rt-tags em.rt-orders > span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; }
.rt-tags em.rt-orders > span::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.vg-again[data-orders="1"] .rt-orders { animation: rt-flash 1.2s ease-out; }
@keyframes rt-flash { 0% { box-shadow: 0 0 0 0 rgba(31,122,62,.45); } 100% { box-shadow: 0 0 0 8px rgba(31,122,62,0); } }
.vg-again[data-member="0"] .rt-member { background: #eef0ef; color: var(--ink-3); }

.vg-again.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-again { --w: 290px; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0; }
  .rt-shop { width: auto; max-width: 280px; margin-left: -12px; position: relative; z-index: 1; align-self: end; margin-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { .vg-again * { transition: none !important; animation: none !important; } }
/* ---- The product, redrawn: small interface cards on the module pages (components/module/vignettes/Vignette.astro) ----
   Same grammar as the notifications: white, 22px corners, the one shadow of objects resting on a picture.
   --vg-accent is OKO's teal on every page: the product's own colour. The module colours belong to the page hero only. */
.vg {
  width: 100%; background: var(--white); color: var(--ink); border-radius: 22px; padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px -18px rgba(0,0,0,.45);
  font-size: 15px; line-height: 1.35; text-align: left;
}
.vg b { font-weight: 600; }
.vg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vg-head b { font-size: 15px; }
.vg-app { flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--teal); color: var(--cream); display: grid; place-items: center; }
.vg-app .mark { width: 20px; }
.vg-meta { font-size: 13px; color: var(--ink-3); }
.vg-label { font-size: 13px; color: var(--ink-3); margin: 12px 0 6px; }
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vg-chip {
  min-width: 40px; height: 34px; padding: 0 10px; border-radius: 99px; display: grid; place-items: center;
  background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-display); font-size: 15px; font-weight: 600;
}
.vg-chip.on, .vg-day.on { background: var(--vg-accent); color: #fff; box-shadow: none; }
.vg-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vg-day {
  border-radius: 12px; padding: 7px 0 8px; text-align: center; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2;
}
.vg-day small { display: block; font-family: var(--font-text); font-size: 13px; font-weight: 400; color: var(--ink-3); }
.vg-day.on small { color: rgba(255,255,255,.82); }
.vg-button {
  margin-top: 14px; min-height: 44px; border-radius: 99px; background: var(--vg-accent); color: #fff;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; text-align: center;
}

/* a place on the map, with its booking button, and what lands in OKO */
.vg-place { padding: 0; overflow: hidden; }
.vg-map { height: 104px; background: #e6ede7; }
.vg-map svg { display: block; width: 100%; height: 100%; }
.vg-map path { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.vg-map circle { fill: #d3ddd5; }
.vg-map .pin { fill: var(--vg-accent); stroke: #fff; stroke-width: 2.5; }
.vg-place-body { padding: 12px 16px 16px; display: grid; gap: 2px; }
.vg-place-body b { font-size: 17px; }
.vg-place-body .vg-button { margin-top: 12px; }
.vg-result { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--ground); }
.vg-result > span:last-child { display: grid; }
.vg-result b { font-size: 15px; }
.vg-result span span { font-size: 13px; color: var(--ink-2); }

/* the email a guest receives */
.vg-from { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.vg-subject { display: block; margin: 12px 0 8px; font-family: var(--font-display); font-size: 17px; letter-spacing: -.005em; }
.vg-email ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--ink-2); }
.vg-outline {
  display: inline-flex; align-items: center; margin-top: 14px; min-height: 36px; padding: 0 14px; border-radius: 99px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); font-family: var(--font-display); font-size: 15px; font-weight: 600;
}

/* tonight's bookings, as the team sees them */
.vg-list .vg-head { justify-content: space-between; margin-bottom: 6px; }
.vg-list ul { list-style: none; margin: 0; padding: 0; }
.vg-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.vg-time { font-family: var(--font-display); font-weight: 600; }
.vg-name { font-weight: 600; min-width: 0; }
.vg-name small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.vg-status { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.vg-status.seated { background: var(--teal-soft); color: var(--teal); }
.vg-status.table { background: var(--sunny-soft); color: var(--sunny-deep); }
.vg-status.expected { background: var(--ground); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.vg-status.noshow { background: #f0f1ef; color: var(--ink-3); }

/* choosing a table when guests arrive: free, booked, seated, and the number OKO offers when a table is still taken */
.vg-tables .vg-head { justify-content: space-between; }
.vg-party { margin: 8px 0 12px; font-size: 13px; color: var(--ink-2); }
.vg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vg-table {
  height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.vg-table.free { background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vg-table.booked { background: var(--sunny-soft); color: var(--sunny-deep); }
.vg-table.seated { background: var(--teal-soft); color: var(--teal); }
.vg-table.offered { background: var(--vg-accent); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vg-accent) 25%, transparent); }
.vg-legend { display: flex; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.vg-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.vg-legend .free::before { box-shadow: inset 0 0 0 1px var(--line-strong); }
.vg-legend .booked::before { background: var(--sunny-soft); }
.vg-legend .seated::before { background: var(--teal-soft); }
.vg-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }

.vg-spread { justify-content: space-between; }
.vg-chip-text { padding: 0 12px; font-family: var(--font-text); font-weight: 600; font-size: 13px; height: 32px; }
.vg-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }

/* a ticket as it prints: narrow, monospaced numbers, the note under its dish */
.vg-ticket { padding: 16px 18px 14px; border-radius: 6px 6px 18px 18px; font-family: var(--font-text); }
.vg-ticket-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); padding-bottom: 8px; border-bottom: 1.5px dashed var(--line-strong); }
.vg-ticket-top b { color: var(--ink); letter-spacing: .04em; }
.vg-ticket-title { margin: 10px 0 6px; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.vg-ticket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vg-ticket li { display: grid; grid-template-columns: 30px 1fr; gap: 6px; }
.vg-qty { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.vg-ticket li b { display: block; font-size: 17px; }
.vg-ticket li small { display: block; font-size: 15px; color: var(--ink-2); }
.vg-ticket li em { display: block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: 15px; }
.vg-ticket li em::before { content: "→ "; }
.vg-ticket-foot { margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed var(--line-strong); font-size: 13px; color: var(--ink-3); }

/* a dish with its options and the guest's note */
.vg-note-box { padding: 10px 12px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }

/* checkout: when, and how to pay */
.vg-options { display: grid; gap: 6px; }
.vg-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.vg-option i { width: 16px; height: 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; }
.vg-option.on { box-shadow: inset 0 0 0 1.5px var(--vg-accent); }
.vg-option.on i { box-shadow: inset 0 0 0 5px var(--vg-accent); }

/* delivery areas */
.vg-zones table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.vg-zones th { text-align: left; font-size: 13px; font-weight: 400; color: var(--ink-3); padding: 0 0 6px; }
.vg-zones td { padding: 9px 0; border-top: 1px solid var(--line); font-weight: 600; }
.vg-zones td + td, .vg-zones th + th { text-align: right; }

/* the menu on a guest's phone */
.vg-tabs { display: flex; gap: 6px; margin: 10px 0 6px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); } /* a tab row that scrolls: it fades out on the right */
.vg-tabs span { padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.vg-tabs span.on { background: var(--ink); color: #fff; box-shadow: none; }
.vg-menu ul { list-style: none; margin: 0; padding: 0; }
.vg-menu li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.vg-menu li b { display: block; }
.vg-menu li small { display: block; font-size: 13px; color: var(--ink-3); }
.vg-plus, .vg-qtybox { flex: none; width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; font-weight: 600; }
.vg-plus { box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-2); }
.vg-qtybox { background: var(--vg-accent); color: #fff; }

/* all-you-can-eat rounds */
.vg-simple { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; color: var(--ink-2); }
.vg-dots { display: flex; gap: 6px; }
.vg-dots span { width: 22px; height: 22px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.vg-dots span.on { background: var(--vg-accent); box-shadow: none; }

/* a loyalty card in the wallet */
.vg-wallet { background: var(--teal); color: #fff; }
.vg-wallet .vg-app { background: var(--cream); color: var(--teal); }
.vg-wallet-top { display: flex; align-items: center; gap: 10px; }
.vg-wallet-top .vg-meta { margin-left: auto; color: var(--teal-pale); }
.vg-stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 12px; }
.vg-stamps span { aspect-ratio: 1; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.vg-stamps span.on { background: var(--cream); box-shadow: none; }
.vg-wallet-reward { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.vg-wallet-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.vg-wallet-foot .vg-meta { color: var(--teal-pale); }
.vg-qr { width: 46px; height: 46px; padding: 4px; border-radius: 6px; background: #fff; fill: var(--ink); }

/* spin-to-win */
.vg-wheel-art { width: 190px; margin: 8px auto 4px; }
.vg-wheel-art svg { display: block; width: 100%; overflow: visible; }
.vg-wheel-art .seg { stroke: #fff; stroke-width: 2; }
.vg-wheel-art .seg-0 { fill: var(--vg-accent); }
.vg-wheel-art .seg-1 { fill: var(--sunny); }
.vg-wheel-art .seg-2 { fill: var(--berry); }
.vg-wheel-art .seg-3 { fill: var(--teal-pale); }
.vg-wheel-art text { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: #fff; }
.vg-wheel-art .t-1, .vg-wheel-art .t-3 { fill: var(--ink); }
.vg-wheel-art .hub { fill: #fff; stroke: var(--line-strong); }
.vg-wheel-art .pointer { fill: var(--ink); }
.vg-result-flat { margin: 10px -16px -16px; border-radius: 0 0 22px 22px; }

/* the staff app after a scan */
.vg-scan-body { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.vg-scan-body > span:last-child { display: grid; }
.vg-scan-body b { font-size: 17px; }
.vg-check { flex: none; width: 40px; height: 40px; border-radius: 99px; background: var(--teal); display: grid; place-items: center; }
.vg-check svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-scan-status { display: inline-block; }

/* a review and its reply */
.vg-review .stars { margin: 6px 0 8px; }
.vg-review .stars svg.off { fill: var(--line); stroke: var(--line-strong); }
.vg-review-text { font-size: 15px; color: var(--ink); }
.vg-reply { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.vg-reply b { font-size: 13px; }
.vg-reply p { font-size: 15px; color: var(--ink-2); margin-top: 2px; }

/* a profile on a map listing */
.vg-profile { display: grid; gap: 2px; }
.vg-profile-name { font-size: 17px; }
.vg-open { font-size: 13px; font-weight: 600; color: var(--basil); margin-top: 2px; }
.vg-actions, .vg-site-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vg-action { padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.vg-action.on { background: var(--vg-accent); color: #fff; box-shadow: none; }

/* a restaurant website on a phone */
.vg-site { padding: 10px; }
.vg-url { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 99px; background: var(--ground); font-size: 13px; color: var(--ink-2); }
.vg-url .icon { width: 13px; height: 13px; }
.vg-site-hero {
  margin-top: 10px; height: 150px; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.12) 75%), var(--photo, none) center / cover, #6b4a2b; color: #fff;
}
.vg-site-hero b { font-family: var(--font-display); font-size: 17px; letter-spacing: -.01em; }
.vg-site-hero span { font-size: 13px; opacity: .9; }
.vg-site-actions { padding: 0 4px; }
.vg-site-sections { display: flex; gap: 14px; padding: 12px 4px 4px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); margin-top: 12px; }

/* the reviews inbox */
.vg-rating { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 8px 0 12px; }
.vg-avg { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -.015em; }
.vg-bars { display: grid; gap: 3px; }
.vg-bar { display: grid; grid-template-columns: 10px 1fr; gap: 6px; align-items: center; }
.vg-bar small { font-size: 13px; color: var(--ink-3); line-height: 1; }
.vg-bar i { display: block; height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--sunny) var(--w), var(--line) var(--w)); }
.vg-review-row { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.vg-review-row .stars { margin: 4px 0 6px; }
.vg-review-row .stars svg.off { fill: var(--line); stroke: var(--line-strong); }

/* joining after an order */
.vg-bonus { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.vg-check-line { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.vg-check-line i { width: 18px; height: 18px; border-radius: 5px; background: var(--vg-accent); flex: none; position: relative; }
.vg-check-line i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* numbers from the dashboard */
.vg-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.vg-stat-grid div { padding: 12px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 2px; }
.vg-stat-grid b { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.vg-stat-grid span { font-size: 13px; color: var(--ink-3); }

/* a new order ringing in the staff app */
.vg-alert .vg-head { gap: 10px; }
.vg-alert .vg-head b { margin-right: auto; }
.vg-ring { width: 30px; height: 30px; border-radius: 99px; background: var(--vg-accent); display: grid; place-items: center; flex: none; }
.vg-ring svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vg-total { display: flex; justify-content: flex-end; margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.vg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.vg-two .vg-outline, .vg-two .vg-button { margin: 0; min-height: 44px; justify-content: center; display: flex; align-items: center; }
.vg-dots { display: grid; grid-template-columns: repeat(6, 22px); gap: 6px; }

/* a restaurant website on a phone, with its quick-action bar */
.vg-bar-site { padding: 10px; }
.vg-bar-site .vg-site-hero { margin-top: 0; height: 170px; }
.vg-lines { display: grid; gap: 7px; padding: 14px 6px; }
.vg-lines i { display: block; height: 8px; border-radius: 99px; background: var(--line); }
.vg-lines i:nth-child(2) { width: 80%; } .vg-lines i:nth-child(3) { width: 55%; }
/* a few dishes with their prices in place of the grey lines (vg-menu is the phone-menu card above) */
.vg-bar-menu { list-style: none; margin: 10px 0 12px; padding: 0 6px; display: grid; }
.vg-bar-menu li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.vg-bar-menu li:first-child { border-top: 0; }
.vg-quick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; padding: 8px 4px 2px; border-top: 1px solid var(--line); }
/* labels take their own width (German and French labels are longer than English) */
.vg-quick span { text-align: center; font-size: 13px; font-weight: 600; padding: 8px 2px; border-radius: 12px; color: var(--ink-2); white-space: nowrap; }
.vg-quick span.on { background: var(--vg-accent); color: #fff; padding-inline: 10px; }

/* the site in the visitor's language */
.vg-langs .vg-chips { margin-top: 10px; }
.vg-search { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.vg-search .icon { width: 16px; height: 16px; color: var(--ink-3); }

/* a message to the manager, then the announcement on the site */
.vg-touch { display: grid; gap: 8px; }
.vg-touch-item { padding: 10px 12px 12px; border-radius: 18px; }
.vg-touch-item:nth-child(2) { transform: translateX(-14px); }
.vg-touch-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.vg-touch-head img, .vg-touch-head svg { width: 16px; height: 16px; flex: none; }
.vg-touch-head svg { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vg-touch-head svg .dot { fill: var(--ink-2); stroke: none; }
.vg-touch-head em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--vg-accent); }
.vg-touch-body { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.vg-touch-body i { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--photo) center / cover; }
.vg-touch-body b { display: block; font-size: 15px; line-height: 1.25; }
.vg-touch-body small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.3; }
/* one message and everything is updated: the conversation with the customer success team, as a card on the photo. The
   owner's bubble is teal on the right, the team's on a light surface on the left; between the team's two messages, the
   places it updates, ticked one by one. Parts appear with .on, ticks with .done (both set in the HTML: the end state). */
.vg-chat { padding: 14px 14px 16px; display: grid; gap: 8px; }
.cs-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cs-head > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.cs-head b { font-size: 15px; line-height: 1.3; }
.cs-head small { font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.cs-head em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 13px; color: var(--basil); }
.cs-head em i { width: 7px; height: 7px; border-radius: 99px; background: var(--basil); }
.cs-time { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.cs-msg { display: flex; }
.cs-msg span { max-width: 84%; padding: 8px 13px; border-radius: 18px; font-size: 15px; line-height: 1.35; }
.cs-owner { justify-content: flex-end; }
.cs-owner span { background: var(--vg-accent); color: #fff; border-bottom-right-radius: 6px; }
.cs-team span { background: var(--ground); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.cs-slot { display: grid; }
.cs-slot > * { grid-area: 1 / 1; }
.cs-typing { opacity: 0; }
.cs-typing span { display: flex; align-items: center; gap: 4px; height: 36px; }
.cs-typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-3); }
.cs-updates { list-style: none; margin: 0; padding: 2px 12px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.cs-updates li { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.cs-updates li + li { border-top: 1px solid var(--line); }
.cs-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--ground); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.cs-icon img, .cs-icon svg { width: 16px; height: 16px; }
.cs-icon svg { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-icon svg .dot { fill: var(--ink-2); stroke: none; }
.cs-what { flex: 1; min-width: 0; display: grid; }
.cs-what b { font-size: 15px; line-height: 1.3; }
.cs-what small { font-size: 13px; line-height: 1.3; color: var(--ink-3); transition: color .3s; }
.cs-check { flex: none; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color .25s, box-shadow .25s; }
.cs-check svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.cs-updates .done .cs-check { background: var(--vg-accent); box-shadow: none; }
.cs-updates .done .cs-check svg { opacity: 1; }
.cs-updates .done .cs-what small { color: var(--ink-2); }
.vg-chat.is-live [data-at] { transition: opacity .4s, transform .5s var(--ease-out); }
.vg-chat [data-at]:not(.on) { opacity: 0; transform: translateY(8px); }
.vg-chat.is-typing .cs-typing { opacity: 1; }
.vg-chat.is-reset [data-at] { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vg-chat.is-live .cs-updates .done .cs-check { animation: vr-tick .45s var(--ease-out); }
  .vg-chat.is-typing .cs-typing i { animation: cs-dot 1s ease-in-out infinite; }
  .vg-chat.is-typing .cs-typing i:nth-child(2) { animation-delay: .15s; }
  .vg-chat.is-typing .cs-typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes cs-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* every review handled: one phone with the reviews of the Korean grill of the sections above (BULMAT), in Google's
   conventions, drawn in HTML and sized in em of the screen's width / 100. Each review has a state (data-s): 0 not there
   yet, 1 arrived, 2 the team is looking at it, 3 handled. OKO's status line is teal (the product's colour); a review
   whose removal has been requested is muted but stays: Google decides. */
.kp-card:has(> .vg-flow), .kp-visual .kp-card:has(> .vg-flow) { width: 100%; margin: 0 auto; }
.vg-flow { --w: 264px; }
.vg-flow-phone { width: calc(var(--w) + 12px); margin: 0 auto; border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.vg-flow-phone::before { content: ""; position: absolute; z-index: 3; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.rf-screen { position: relative; width: var(--w); aspect-ratio: 15 / 26; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); color: #202124; line-height: 1.32; text-align: left; background: #fff; }
.rf-screen p { margin: 0; }
.rf-screen i { font-style: normal; }
.rf-head { padding: 12em 5em 0; box-shadow: inset 0 -1px 0 #e3e6e8; }
.rf-title { display: flex; align-items: center; gap: 2.4em; }
.rf-title img { width: 6.6em; height: 6.6em; }
.rf-title b { font-size: 6.2em; font-weight: 600; letter-spacing: -.01em; }
.rf-rating { display: flex; align-items: center; gap: 1.4em; margin-top: 1.2em; color: #5f6368; }
.rf-rating > span { font-size: 4.1em; }
.rf-stars { color: #fbbc04; letter-spacing: -.04em; }
.rf-stars em { font-style: normal; color: #dadce0; }
.rf-tabs { display: flex; gap: 6em; margin-top: 2.4em; }
.rf-tabs span { font-size: 4.1em; font-weight: 600; padding-bottom: .55em; color: #5f6368; }
.rf-tabs .on { color: #1a73e8; box-shadow: inset 0 -.55em 0 -.28em #1a73e8; }
.rf-list { padding: 0 5em; transition: opacity .35s; }
.vg-flow.is-reset .rf-list { opacity: 0; }
.vg-flow.is-reset .rf-list * { transition: none !important; }
.rf-review { padding: 2.6em 0 2.8em; box-shadow: inset 0 -1px 0 #eceff1; transition: opacity .5s, transform .6s var(--ease-out); }
.rf-review:last-child { box-shadow: none; }
.rf-review[data-s="0"] { opacity: 0; transform: translateY(5em); }
.rf-who { display: flex; align-items: center; gap: 2.4em; }
.rf-who > i { flex: none; width: 2em; height: 2em; border-radius: 99em; display: grid; place-items: center; background: #1a73e8; color: #fff; font-size: 4.3em; font-weight: 600; }
.rf-review:nth-child(2) .rf-who > i { background: #188038; }
.rf-review:nth-child(3) .rf-who > i { background: #9aa0a6; }
.rf-who > span { display: grid; gap: .3em; }
.rf-who b { font-size: 4.2em; font-weight: 600; }
.rf-who small { font-size: 3.6em; color: #70757a; }
.rf-text { margin-top: .5em !important; font-size: 4.1em; transition: opacity .5s; }
.rf-status { display: grid; margin-top: 1.8em; justify-items: start; }
.rf-chip { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .45em; padding: .32em .8em .32em .6em; border-radius: 99em; font-size: 3.7em; font-weight: 600; line-height: 1.3; white-space: nowrap;
  background: var(--teal-soft); color: var(--teal); transition: opacity .35s, transform .45s var(--ease-out); }
.rf-chip svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rf-chip-wait { background: var(--sunny-soft); color: var(--sunny-deep); }
.rf-chip-wait i { width: .62em; height: .62em; margin: 0 .2em 0 .25em; border-radius: 99em; background: currentColor; }
.rf-flag .rf-chip-done { background: var(--berry-pale); color: var(--berry-deep); }
.rf-review:not([data-s="2"]) .rf-chip-wait, .rf-review:not([data-s="3"]) .rf-chip-done { opacity: 0; transform: translateY(40%) scale(.96); }
.rf-reply { margin-top: .5em !important; padding-left: .7em; border-left: .18em solid #dadce0; font-size: 3.9em; color: #3c4043; transition: opacity .5s, transform .6s var(--ease-out); }
.rf-reply b { display: block; font-weight: 600; color: #202124; }
.rf-review:not([data-s="3"]) .rf-reply { opacity: 0; transform: translateY(18%); }
.rf-flag[data-s="3"] .rf-who, .rf-flag[data-s="3"] .rf-text { opacity: .45; }
.rf-flag .rf-who { transition: opacity .5s; }
@media (min-width: 431px) { .vg-flow { --w: 280px; } }
@media (prefers-reduced-motion: no-preference) { .vg-flow.is-live .rf-chip-wait i { animation: rf-wait 1s ease-in-out infinite alternate; } }
@keyframes rf-wait { from { opacity: .3; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rf-review, .rf-chip, .rf-reply, .rf-text, .rf-list { transition: none; } }

/* from a scroll to an order: one phone, three screens of the matcha bar of the first section (hoji). The video (a still
   with a slow zoom, the usual icons at the right, a progress line), the profile sliding in from the right, the ordering
   page rising from the bottom. Sized in em of the screen's width / 100. The app chrome follows the conventions of short
   video apps without anyone's logo; the ordering page has hoji's own look (cream, matcha green, light serif).
   data-view picks the screen, data-added marks the item added, data-tap shows a touch. */
.kp-card:has(> .vg-path), .kp-visual .kp-card:has(> .vg-path) { width: 100%; margin: 0 auto; }
.vg-path { --w: 264px; }
.vg-path-phone { width: calc(var(--w) + 12px); margin: 0 auto; border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #111; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.vg-path-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.sp-screen { position: relative; width: var(--w); aspect-ratio: 15 / 26; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; color: #111; transition: opacity .35s; }
.sp-screen i { display: block; font-style: normal; }
.vg-path.is-reset .sp-screen { opacity: 0; }
.vg-path.is-reset .sp-profile, .vg-path.is-reset .sp-order, .vg-path.is-reset .sp-cart { transition: none; }
/* 1. the video */
.sp-reel { position: absolute; inset: 0; color: #fff; background: #2b2a26; overflow: hidden; isolation: isolate; }
.sp-reel-photo { position: absolute; inset: 0; background: var(--photo) center / cover; }
.sp-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 34%), linear-gradient(to bottom, rgba(0,0,0,.28), transparent 16%); }
.sp-side { position: absolute; z-index: 1; right: 4em; bottom: 34em; display: grid; gap: 6em; justify-items: center; }
.sp-side span { display: grid; justify-items: center; gap: .8em; }
.sp-side svg { width: 9em; height: 9em; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 .3em 1em rgba(0,0,0,.45)); }
.sp-side em { font-style: normal; font-size: 3.8em; font-weight: 600; text-shadow: 0 .2em .8em rgba(0,0,0,.5); }
.sp-reel-foot { position: absolute; z-index: 1; left: 5em; right: 20em; bottom: 9em; display: grid; gap: 2.4em; }
.sp-who { display: flex; align-items: center; gap: 2.6em; }
.sp-who > b { font-size: 4.8em; font-weight: 600; text-shadow: 0 .2em .8em rgba(0,0,0,.5); }
.sp-caption { font-size: 4.3em; text-shadow: 0 .2em .8em rgba(0,0,0,.5); }
.sp-avatar { flex: none; width: 10em; height: 10em; border-radius: 99em; background: #f6f2e7; display: grid !important; place-items: center; box-shadow: 0 0 0 .6em #fff; }
.sp-avatar b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 3.8em; color: #4f6d30; text-transform: lowercase; }
.sp-progress { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1.1em; background: rgba(255,255,255,.3); }
.sp-progress i { height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(.4); }
/* 2. the profile */
.sp-profile { position: absolute; inset: 0; background: #fff; padding: 13em 5em 0; transform: translateX(102%); transition: transform .6s var(--ease-out); }
.vg-path[data-view="1"] .sp-profile, .vg-path[data-view="2"] .sp-profile { transform: none; }
.sp-bar { display: flex; align-items: center; gap: 2em; }
.sp-bar svg { width: 6.5em; height: 6.5em; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: -1.5em; }
.sp-bar b { flex: 1; font-size: 5.4em; font-weight: 600; }
.sp-bar i { width: 5.5em; height: 3.4em; border-top: .7em solid #111; border-bottom: .7em solid #111; }
.sp-top { display: flex; align-items: center; justify-content: space-between; margin-top: 5em; }
.sp-avatar-lg { width: 21em; height: 21em; margin: 1.6em; box-shadow: 0 0 0 .8em #fff, 0 0 0 1.5em #c13584; }
.sp-avatar-lg b { font-size: 7.4em; }
.sp-stat { display: grid; justify-items: center; font-size: 3.9em; color: #555; }
.sp-stat b { font-size: 1.25em; font-weight: 600; color: #111; }
.sp-bio { margin: 3.4em 0 0; display: grid; gap: .5em; }
.sp-bio b { font-size: 4.6em; font-weight: 600; }
.sp-bio span { font-size: 4.3em; color: #262626; }
.sp-bio em { font-size: 4.3em; font-style: normal; font-weight: 600; color: #1558b0; }
.sp-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.8em; margin: 4em 0; }
.sp-actions span { padding: 2.3em 3em; border-radius: 2.6em; background: #efefef; text-align: center; white-space: nowrap; transition: transform .2s; }
.sp-actions span > b { font-size: 4.6em; font-weight: 600; }
.sp-actions .on { background: #1a73e8; color: #fff; }
.vg-path[data-tap="2"] .sp-actions span:nth-child(2) { transform: scale(.94); }
.sp-grid { display: block; width: calc(100% + 10em); max-width: none; margin: 0 -5em; height: auto; }
/* 3. the ordering page */
.sp-order { position: absolute; inset: 0; background: #f6f2e7; color: #3c4630; padding: 13em 5.5em 0; transform: translateY(102%); transition: transform .65s var(--ease-out); font-family: Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", serif; }
.vg-path[data-view="2"] .sp-order { transform: none; }
.sp-order-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 3.4em; border-bottom: 1px solid rgba(79,109,48,.25); }
.sp-order-head b { font-size: 10em; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -.02em; text-transform: lowercase; color: #4f6d30; }
.sp-order-head span { font-size: 4.4em; color: #6e7860; }
.sp-order ul { list-style: none; margin: 0; padding: 0; }
.sp-order li { display: flex; align-items: center; gap: 3.4em; padding: 3.6em 0; border-bottom: 1px solid rgba(79,109,48,.18); }
.sp-thumb { flex: none; width: 19em; height: 19em; border-radius: 3.4em; background: var(--photo) var(--cx) var(--cy) / 300% 200%; }
.sp-order li > span { flex: 1; min-width: 0; display: grid; gap: .7em; }
.sp-order li b { font-size: 5em; font-weight: 400; color: #2f3b22; }
.sp-order li small { font-size: 3.8em; color: #7b846d; font-family: var(--font-text); }
.sp-order li em { font-size: 4.4em; font-style: normal; color: #4f6d30; }
.sp-add { flex: none; width: 10em; height: 10em; border-radius: 99em; display: grid !important; place-items: center; box-shadow: inset 0 0 0 1.5px #5f7f3a; transition: background-color .25s, transform .35s var(--ease-out); }
.sp-add svg { width: 5.6em; height: 5.6em; fill: none; stroke: #5f7f3a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-add .tick { opacity: 0; }
.vg-path[data-added="1"] .sp-add-pick { background: #5f7f3a; transform: scale(1.08); }
.vg-path[data-added="1"] .sp-add-pick svg { stroke: #fbf8ef; }
.vg-path[data-added="1"] .sp-add-pick .plus { opacity: 0; }
.vg-path[data-added="1"] .sp-add-pick .tick { opacity: 1; }
.sp-cart { position: absolute; left: 5.5em; right: 5.5em; bottom: 6em; padding: 3.6em 6em; border-radius: 99em; background: #5f7f3a; color: #fbf8ef; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-text);
  transform: translateY(260%); transition: transform .55s var(--ease-out) .15s; box-shadow: 0 2em 5em -1em rgba(60,80,30,.55); }
.sp-cart span, .sp-cart b { font-size: 4.6em; font-weight: 600; }
.vg-path[data-added="1"] .sp-cart { transform: none; }
/* a touch: the name, the ordering button, the plus */
.sp-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(20,24,26,.3); box-shadow: 0 0 0 1.2em rgba(20,24,26,.1); opacity: 0; pointer-events: none; }
.vg-path[data-tap="1"] .sp-tap { left: 30%; top: 86.5%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 1.2em rgba(255,255,255,.18); animation: vd-tap .6s ease-out; }
.vg-path[data-tap="2"] .sp-tap { left: 58%; top: 53%; animation: vd-tap .6s ease-out; }
.vg-path[data-tap="3"] .sp-tap { left: 89.5%; top: 23.5%; animation: vd-tap .6s ease-out; }
@media (min-width: 431px) { .vg-path { --w: 280px; } }
@media (prefers-reduced-motion: no-preference) {
  .vg-path.is-live .sp-reel-photo { animation: sp-zoom 9s ease-in-out infinite alternate; }
  .vg-path.is-live .sp-progress i { animation: sp-progress 6s linear infinite; }
  .vg-path.is-live:not(.is-on) .sp-reel-photo, .vg-path.is-live:not(.is-on) .sp-progress i { animation-play-state: paused; }
}
@keyframes sp-zoom { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } }
@keyframes sp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sp-profile, .sp-order, .sp-cart, .sp-add, .sp-screen { transition: none; } }

/* local search: a phone with map results in Google's conventions (drawn in HTML, sized in em of the screen's width / 100)
   and OKO's optimisation list beside it. data-step counts the items ticked; the restaurant's row moves by --i (its slot),
   its pin grows with --g. The line of the restaurant fills in with the items: the category at 1, the photo at 5, the
   opening hours at 6 (the order of `items` in the copy). */
.kp-card:has(> .vg-rank), .kp-visual .kp-card:has(> .vg-rank) { width: 100%; margin: 0 auto; }
.vg-rank { --w: 264px; display: grid; justify-items: center; gap: 20px; }
.vg-rank-phone { width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.vg-rank-phone::before { content: ""; position: absolute; z-index: 3; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.vr-screen { position: relative; width: var(--w); aspect-ratio: 15 / 26; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); color: #202124; line-height: 1.25; text-align: left; background: #fff; }
.vr-map { position: absolute; inset: 0 0 auto; height: 66em; background: #eef0ec; }
.vr-map svg { display: block; width: 100%; height: 100%; }
.vr-map path { fill: none; stroke: #fff; stroke-width: 2.2; }
.vr-map .wide { stroke-width: 4; stroke: #fff7d6; }
.vr-map .park { fill: #cfe8d2; stroke: none; }
.vr-map .water { fill: #b5dcf5; stroke: none; }
.vr-dot { position: absolute; width: 3.6em; height: 3.6em; margin: -1.8em 0 0 -1.8em; border-radius: 99em; background: #ea4335; box-shadow: 0 0 0 .7em #fff, 0 .6em 1.6em rgba(0,0,0,.3); }
.vr-pin { position: absolute; width: 9em; margin: -12em 0 0 -4.5em; transform-origin: 50% 100%; transform: scale(calc(.5 + .75 * var(--g))); transition: transform .6s var(--ease-out) .25s; filter: drop-shadow(0 .8em 1.2em rgba(0,0,0,.35)); }
.vr-pin svg { display: block; width: 100%; }
.vr-pin path { fill: #ea4335; stroke: #b3261e; stroke-width: 1; }
.vr-pin circle { fill: #7a130c; }
.vr-pin b { position: absolute; left: 100%; top: 18%; margin-left: 1em; font-size: 4.2em; font-weight: 600; color: #c5221f; text-shadow: 0 0 .15em #fff, 0 0 .15em #fff, 0 0 .3em #fff; opacity: 0; transition: opacity .4s; }
.vr-search { position: absolute; top: 10.5em; left: 4em; right: 4em; height: 13em; padding: 0 4.5em; border-radius: 99em; background: #fff; display: flex; align-items: center; gap: 3em; box-shadow: 0 .4em 1.6em rgba(0,0,0,.22); }
.vr-search img { width: 6.4em; height: 6.4em; flex: none; }
.vr-search span { flex: 1; font-size: 4.8em; white-space: nowrap; overflow: hidden; }
.vr-search i { width: 7em; height: 7em; border-radius: 99em; background: #e8f0fe; flex: none; }
.vr-sheet { position: absolute; inset: 58em 0 0; border-radius: 6em 6em 0 0; background: #fff; box-shadow: 0 -1em 3em rgba(0,0,0,.14); }
.vr-grab { display: block; width: 10em; height: 1.2em; margin: 2.2em auto 0; border-radius: 99em; background: #dadce0; }
.vr-rows { position: absolute; inset: 6.4em 0 0; transition: opacity .35s; }
.vr-nums { position: absolute; inset: 0 auto 0 0; width: 10em; display: grid; grid-auto-rows: 15.4em; justify-items: center; align-items: center; z-index: 3; pointer-events: none; }
.vr-nums span { font-size: 4em; color: #80868b; }
.vr-row { position: absolute; left: 0; right: 0; top: 0; height: 15.4em; padding: 0 4em 0 10em; display: flex; align-items: center; gap: 2em; transform: translateY(calc(var(--i) * 15.4em)); transition: transform .65s var(--ease-out) .25s; box-shadow: inset 0 -1px 0 #eceff1; }
.vr-text { flex: 1; min-width: 0; display: grid; gap: .6em; }
.vr-text b { font-size: 4.7em; font-weight: 600; white-space: nowrap; }
.vr-text small { font-size: 3.7em; color: #70757a; white-space: nowrap; overflow: hidden; }
.vr-stars { color: #fbbc04; letter-spacing: -.05em; }
.vr-ours { z-index: 2; background: #e8f0fe; box-shadow: none; }
.vr-ours .vr-text b { color: #174ea6; }
.vr-open i { font-style: normal; color: #188038; }
.vr-thumb { flex: none; width: 11.5em; height: 11.5em; border-radius: 2.4em; background: var(--photo) 62% 60% / 430% auto; }
.vr-up { display: inline-block; margin-left: .5em; font-style: normal; font-size: .82em; color: #188038; opacity: 0; }
.vr-meta { position: relative; }
.vr-meta > span { transition: opacity .3s; }
.vr-meta-before { position: absolute; left: 0; top: 0; }
.vr-meta-before, .vr-open, .vr-thumb { transition: opacity .4s, transform .5s var(--ease-out); }
.vr-meta-before { opacity: 0; }
/* before its item is ticked: the bare line */
.vg-rank[data-step="0"] .vr-meta-after { opacity: 0; }
.vg-rank[data-step="0"] .vr-meta-before { opacity: 1; }
.vg-rank:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .vr-thumb { opacity: 0; transform: scale(.7); }
.vg-rank:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .vr-open { opacity: 0; }
.vg-rank:is([data-step="0"], [data-step="1"], [data-step="2"]) .vr-ours { background: #fff; box-shadow: inset 0 -1px 0 #eceff1; }
.vg-rank:is([data-step="0"], [data-step="1"], [data-step="2"]) .vr-ours .vr-text b { color: inherit; }
.vr-ours { transition: transform .65s var(--ease-out) .25s, background-color .5s; }
.vg-rank:not(:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"])) .vr-pin b { opacity: 1; }
.vg-rank[data-bump="a"] .vr-up { animation: vr-up-a 1s ease-out .3s; }
.vg-rank[data-bump="b"] .vr-up { animation: vr-up-b 1s ease-out .3s; }
@keyframes vr-up-a { 0% { opacity: 0; transform: translateY(60%); } 25% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40%); } }
@keyframes vr-up-b { 0% { opacity: 0; transform: translateY(60%); } 25% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40%); } }
.vg-rank.is-reset .vr-rows, .vg-rank.is-reset .vr-list ul, .vg-rank.is-reset .vr-pin { opacity: 0; }
.vg-rank.is-reset .vr-row, .vg-rank.is-reset .vr-pin, .vg-rank.is-reset .vr-list i { transition: none; }
.vr-pin { transition: transform .6s var(--ease-out) .25s, opacity .35s; }
/* the list of what we optimise */
.vr-list { width: min(100%, 340px); padding: 16px 18px; }
.vr-list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; transition: opacity .35s; }
.vr-list li { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.3; color: var(--ink-3); transition: color .3s; min-width: 0; overflow-wrap: anywhere; }
.vr-list li i { flex: none; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color .25s, box-shadow .25s, transform .35s var(--ease-out); }
.vr-list li svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.vr-list li.on { color: var(--ink); }
.vr-list li.on i { background: var(--vg-accent); box-shadow: none; }
.vr-list li.on svg { opacity: 1; }
.vg-rank.is-live .vr-list li.on i { animation: vr-tick .45s var(--ease-out); }
@keyframes vr-tick { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@media (min-width: 431px) {
  .vg-rank { --w: 280px; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0; }
  .vr-list { width: 208px; margin-left: -8px; position: relative; z-index: 1; }
  .vr-list ul { grid-template-columns: 1fr; gap: 11px; }
}
@media (prefers-reduced-motion: reduce) { .vr-row, .vr-pin, .vr-list li i, .vr-rows { transition: none; } .vg-rank .vr-list li.on i { animation: none; } }

/* the website as the front desk that never goes home: one phone with the Fiamma site of the section above. The picture
   has empty cream areas; the parts that change are HTML on top of it, in the site's own look (cream, tomato red, italic
   serif), placed in % of the screen and sized in em of --u (1/100 of the screen's width), so it holds at any phone size.
   data-lang picks the language, data-sheet opens the booking sheet, data-pick marks the time, data-tap shows a touch. */
.kp-card:has(> .vg-desk), .kp-visual .kp-card:has(> .vg-desk) { width: 100%; margin: 0 auto; }
.vg-desk { --w: 280px; }
.vg-desk-phone { position: relative; width: calc(var(--w) + 12px); aspect-ratio: auto; margin: 0 auto; border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fcf5e9;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.vg-desk-phone::before { content: ""; position: absolute; z-index: 3; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.vg-desk-site { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); color: #b6101a; font-family: Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", serif; line-height: 1.2; text-align: left; }
.vg-desk-site > img { display: block; width: 100%; height: 100%; }
/* one line per language in the same place; only the current one shows */
.vd-swap { display: grid; }
.vd-swap > span { grid-area: 1 / 1; opacity: 0; transform: translateY(45%); transition: opacity .4s ease, transform .5s var(--ease-out); white-space: nowrap; }
.vg-desk[data-lang="0"] [data-l="0"], .vg-desk[data-lang="1"] [data-l="1"], .vg-desk[data-lang="2"] [data-l="2"], .vg-desk[data-lang="3"] [data-l="3"] { opacity: 1; transform: none; }
.vg-desk .vd-cjk { font-style: normal; font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", STSong, Georgia, serif; }
.vd-lang { position: absolute; top: 5.4%; right: 5%; display: flex; align-items: center; gap: 1.4em; padding: 1.5em 3em 1.5em 2.4em; border-radius: 99em; box-shadow: inset 0 0 0 1px currentColor; }
.vd-lang svg { width: 4.2em; height: 4.2em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vd-lang .vd-swap { font-size: 4.2em; font-weight: 700; justify-items: center; font-family: var(--font-text); }
.vd-head { position: absolute; left: 4.5%; top: 12.5%; font-size: 7.2em; font-style: italic; font-weight: 700; letter-spacing: -.01em; }
.vd-info { position: absolute; left: 4.8%; top: 17.7%; font-size: 4.2em; font-style: italic; }
.vd-cta { position: absolute; left: 4.5%; top: 85.2%; width: 44%; height: 7%; border-radius: 99em; background: #b6101a; color: #fcf5e9; justify-items: center; align-items: center; font-size: 1em; transition: transform .2s; }
.vd-cta > span { font-size: 5em; font-style: italic; font-weight: 700; }
.vd-cta-2 { left: 51.5%; background: none; color: #b6101a; box-shadow: inset 0 0 0 1.5px currentColor; }
.vg-desk[data-tap="1"] .vd-cta:not(.vd-cta-2) { transform: scale(.95); }
/* the booking sheet */
.vd-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 47%; padding: 0 5em; border-radius: 7em 7em 0 0; background: #fffaf1; box-shadow: 0 -8em 20em rgba(60,10,10,.28);
  transform: translateY(104%); transition: transform .65s var(--ease-out); display: flex; flex-direction: column; }
.vg-desk[data-sheet="1"] .vd-sheet { transform: none; }
.vd-grab { display: block; width: 12em; height: 1.3em; margin: 2.6em auto 3em; border-radius: 99em; background: rgba(182,16,26,.25); }
.vd-sheet b { font-size: 6.2em; font-style: italic; font-weight: 700; }
.vd-chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2em; margin-top: 3.4em; }
.vd-chips span { font-size: 4.2em; font-family: var(--font-text); padding: .55em 0; border-radius: 99em; text-align: center; box-shadow: inset 0 0 0 1px rgba(182,16,26,.4); white-space: nowrap; transition: background-color .25s, color .25s; }
.vd-chips .on, .vg-desk[data-pick="1"] .vd-chips .pick { background: #b6101a; color: #fffaf1; box-shadow: none; }
.vd-confirm { margin-top: auto; margin-bottom: 1em; padding: .52em 0; border-radius: 99em; background: #b6101a; color: #fffaf1; font-size: 5em; font-style: italic; font-weight: 700; text-align: center; opacity: .35; transition: opacity .3s; }
.vg-desk[data-pick="1"] .vd-confirm { opacity: 1; }
/* a touch: on the booking button, then on the time */
.vd-tap { position: absolute; z-index: 2; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(20,24,26,.28); box-shadow: 0 0 0 1.2em rgba(20,24,26,.1); opacity: 0; pointer-events: none; }
.vg-desk[data-tap="1"] .vd-tap { left: 27%; top: 89%; animation: vd-tap .6s ease-out; }
.vg-desk[data-tap="2"] .vd-tap { left: 62%; top: 80.5%; animation: vd-tap .6s ease-out; }
@keyframes vd-tap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
.vg-desk .vg-styles-note { margin-top: 20px; }
@media (min-width: 431px) { .vg-desk { --w: 300px; } }
@media (prefers-reduced-motion: reduce) { .vd-swap > span, .vd-sheet, .vd-chips span, .vd-confirm { transition: none; } }
/* the same dish before and after retouching: the after picture underneath, the before picture clipped to the left of the
   divider (--p), a range input over the whole frame so it can be dragged, tapped or moved with the arrow keys */
.kp-card:has(> .vg-retouch), .kp-visual .kp-card:has(> .vg-retouch) { width: 100%; margin: 0 auto; }
.vg-retouch-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 24px 48px -22px rgba(0,0,0,.5); }
.vg-retouch-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vg-retouch-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.vg-retouch-tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.vg-retouch-tag-after { left: auto; right: 14px; background: var(--vg-accent); color: #fff; }
.vg-retouch-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); pointer-events: none; }
.vg-retouch-handle svg { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 9px; border-radius: 99px; background: #fff; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 16px -4px rgba(0,0,0,.4); }
.vg-retouch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.vg-retouch.is-live .vg-retouch-frame { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vg-retouch-frame img { -webkit-user-drag: none; }
.vg-retouch:not(.is-live) input { display: none; } /* without the script the divider cannot move: no dead control */
.vg-retouch:not(.is-live) .vg-retouch-handle svg { display: none; }
.vg-retouch-frame:has(input:focus-visible) .vg-retouch-handle svg { outline: 2px solid var(--teal); outline-offset: 3px; }
.vg-retouch .vg-styles-note { margin-top: 16px; }
/* three restaurant websites on phones: the designs are images (mobile first, Bo 2026-11-14) */
.kp-card:has(> .vg-phones), .kp-visual .kp-card:has(> .vg-phones) { width: 100%; margin: 0 auto; padding: 24px 0 8px; }
.vg-phones-row { display: flex; justify-content: center; align-items: center; }
.vg-phone { position: relative; flex: 0 0 40%; aspect-ratio: 2 / 3; border-radius: 26px; overflow: hidden; background: #111; border: 5px solid #14181a;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 24px 48px -20px rgba(0,0,0,.55); }
.vg-phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 30%; height: 9px; border-radius: 99px; background: #14181a; transform: translateX(-50%); z-index: 1; }
.vg-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vg-phone:nth-child(1) { transform: translateX(34px) rotate(-5deg) scale(.9); z-index: 0; }
.vg-phone:nth-child(2) { z-index: 2; transform: translateY(-10px); }
.vg-phone:nth-child(3) { transform: translateX(-34px) rotate(5deg) scale(.9); z-index: 0; }
.vg-phones .vg-styles-note { margin-top: 20px; }
/* The little sites come to life (Bo, 2026-11-14: a small surprise once the site has opened, no scrolling, no video).
   Everything is CSS over the picture, placed in % of the screen so it lines up at every phone size. Three small cut-outs
   of the pictures do the turning (the pizza, the flame, the stamp: 43 KB together, lazy, only fetched when armed).
   Nothing below applies without the inline script (.is-armed) or with reduced motion: the picture stands as it is.
   .vg-site is the picture's own 2:3 box: the phone's 5px border makes its inside a little narrower than 2:3. */
.vg-site { position: absolute; inset: 0 -1.667px; }
.fx { display: none; position: absolute; inset: 0; overflow: hidden; }
.fx i { position: absolute; display: block; }
.vg-phone .fx img { position: absolute; height: auto; object-fit: fill; }
.vg-phone-matcha, .vg-phone-pizza { background: #f8f0e4; } /* the blank page before the site opens */
.fx-neon { left: 43%; top: -2%; width: 40%; height: 24%; background: radial-gradient(closest-side, rgba(255,70,55,.8), rgba(255,40,30,.28) 55%, transparent); mix-blend-mode: screen; }
.fx-neon-off { left: 49%; top: 2.5%; width: 28%; height: 15%; background: radial-gradient(closest-side, rgba(8,4,4,.85) 55%, transparent); opacity: 0; }
.fx-embers { left: 36%; top: 55.5%; width: 52%; height: 10%; background: radial-gradient(closest-side, rgba(255,130,40,.85), rgba(255,80,10,.3) 60%, transparent); mix-blend-mode: screen; opacity: 0; }
.fx-smoke { left: 68%; top: 44%; width: 13%; height: 13%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,.14) 55%, transparent); opacity: 0; }
.fx-smoke-2 { left: 78%; top: 46%; }
.fx-arch { left: 16.2%; top: 27.67%; width: 67%; height: 45.1%; border-radius: 50% 50% 0 0 / 49.5% 49.5% 0 0; overflow: hidden; }
.fx-sun { inset: -30%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(30% 20% at 30% 64%, rgba(255,238,196,.5), transparent), radial-gradient(20% 28% at 60% 40%, rgba(255,246,214,.4), transparent), radial-gradient(18% 13% at 74% 70%, rgba(255,238,196,.42), transparent); }
.fx-glass { left: 37%; top: 42.8%; width: 26%; height: 22.3%; border-radius: 8%; overflow: hidden; }
.fx-glint { top: -20%; left: 0; width: 34%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-170%) skewX(-16deg); }
.vg-phone .fx .fx-stamp { left: 71%; top: 27.865%; width: 16.99%; }
.vg-phone .fx .fx-pizza { left: 13.67%; top: 35.48%; width: 69.53%; }
.vg-phone .fx .fx-flame { left: 3.91%; top: 33.53%; width: 17.77%; transform-origin: 45% 92%; }
.fx-check { left: 0; right: 0; top: 95.44%; bottom: 0; overflow: hidden; }
.fx-check i { top: 0; bottom: 0; left: 0; width: 200%; background: repeating-conic-gradient(#f7ebd7 0 25%, #ba0a0a 0 50%) 0 0 / 2.8075% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .is-armed .fx { display: block; }
  /* the page opens: the centre phone first, then the two beside it */
  .is-armed .vg-site { animation: fx-open .9s var(--ease-out) both; }
  .is-armed .vg-phone:nth-child(1) .vg-site { animation-delay: .22s; }
  .is-armed .vg-phone:nth-child(3) .vg-site { animation-delay: .44s; }
  /* grill: the sign flickers on, then holds with a rare flicker; embers breathe; two wisps of smoke rise */
  .is-armed .fx-neon { animation: fx-neon 9s linear .7s infinite both; }
  .is-armed .fx-neon-off { animation: fx-neon-off 9s linear .7s infinite both; }
  .is-armed .fx-embers { animation: fx-embers 2.8s ease-in-out 1s infinite alternate both; }
  .is-armed .fx-smoke { animation: fx-smoke 7.5s linear 1.4s infinite; }
  .is-armed .fx-smoke-2 { animation: fx-smoke-2 9s linear 4.6s infinite; }
  /* matcha: light drifts in the arch, a glint crosses the glass now and then, the stamp turns into place and rocks */
  .is-armed .fx-sun { animation: fx-sun 11s ease-in-out 1s infinite alternate both; }
  .is-armed .fx-glint { animation: fx-glint 7s ease-in-out 1.8s infinite; }
  .is-armed .fx-stamp { animation: fx-stamp-in 1.4s var(--ease-out) .5s both, fx-stamp 9s ease-in-out 1.9s infinite; }
  /* pizza: it turns into place, then keeps turning very slowly; the flame flickers; the checkerboard slides */
  .is-armed .fx-pizza { animation: fx-pizza-in 2.2s var(--ease-out) .5s both, fx-turn 80s linear 2.7s infinite; }
  .is-armed .fx-flame { animation: fx-flame 1.6s ease-in-out 1.2s infinite; }
  .is-armed .fx-check i { animation: fx-check 4s linear 1.2s infinite; }
  /* off screen everything rests where it is (and waits at its first frame until first seen) */
  .vg-phones.is-armed:not(.is-on) .vg-site, .vg-phones.is-armed:not(.is-on) .fx * { animation-play-state: paused !important; }
}
@keyframes fx-open { from { opacity: 0; transform: translateY(3%) scale(1.03); } }
@keyframes fx-neon { 0% { opacity: .15; } 2% { opacity: .95; } 3.5% { opacity: .2; } 5.5% { opacity: 1; } 7% { opacity: .35; } 9% { opacity: 1; } 55% { opacity: .65; } 96% { opacity: .95; } 100% { opacity: .15; } }
@keyframes fx-neon-off { 0% { opacity: .9; } 2% { opacity: 0; } 3.5% { opacity: .8; } 5.5% { opacity: 0; } 7% { opacity: .55; } 9%, 96% { opacity: 0; } 100% { opacity: .9; } }
@keyframes fx-embers { from { opacity: .08; transform: scale(.96); } to { opacity: .6; transform: scale(1.05); } }
@keyframes fx-smoke { 0% { opacity: 0; transform: scale(.5, .7); } 25% { opacity: .34; } 100% { opacity: 0; transform: translate(-35%, -120%) scale(1.5, 2.1); } }
@keyframes fx-smoke-2 { 0% { opacity: 0; transform: scale(.5, .7); } 30% { opacity: .28; } 100% { opacity: 0; transform: translate(25%, -105%) scale(1.4, 2); } }
@keyframes fx-sun { from { opacity: .55; transform: translate(-7%, -4%); } to { opacity: 1; transform: translate(8%, 6%); } }
@keyframes fx-glint { 0% { transform: translateX(-170%) skewX(-16deg); } 16%, 100% { transform: translateX(430%) skewX(-16deg); } }
@keyframes fx-stamp-in { from { transform: rotate(-150deg) scale(1.14); } }
@keyframes fx-stamp { 0%, 100% { transform: none; } 30% { transform: rotate(6deg); } 70% { transform: rotate(-4deg); } }
@keyframes fx-pizza-in { from { transform: rotate(-70deg); } }
@keyframes fx-turn { to { transform: rotate(360deg); } }
@keyframes fx-flame { 0%, 100% { transform: none; } 25% { transform: skewX(-3deg) scaleY(1.05); } 50% { transform: skewX(2deg) scaleY(.98); } 75% { transform: skewX(-1.5deg) scale(.98, 1.07); } }
@keyframes fx-check { to { transform: translateX(-2.8075%); } }
.vg-social-top { display: flex; align-items: center; gap: 12px; }
.vg-social-avatar { flex: none; width: 52px; height: 52px; border-radius: 99px; background: var(--photo) center / cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-accent); }
.vg-social-top b { display: block; font-size: 15px; }
.vg-social-top small { display: block; font-size: 13px; color: var(--ink-3); }
.vg-social-bio { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.vg-social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 14px -16px -16px; }
.vg-social-grid i { aspect-ratio: 1; background: var(--photo) center / cover; }
.vg-social-grid i:first-child { border-bottom-left-radius: 22px; }
.vg-social-grid i:last-child { border-bottom-right-radius: 22px; }
.vg-steps-meta { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.vg-steps ol { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 10px; }
.vg-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.vg-steps li b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.vg-steps li small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.vg-steps-dot { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line); }
.vg-steps li.done .vg-steps-dot { background: var(--vg-accent); box-shadow: none; }
.vg-steps-dot svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vg-steps li.now .vg-steps-dot { color: var(--vg-accent); box-shadow: inset 0 0 0 2px var(--vg-accent); }
.vg-notice { display: flex; flex-direction: column; gap: 8px; }
.vg-notice .msg { max-width: 86%; display: grid; }
.vg-notice .msg-bubble { padding: 9px 12px; border-radius: 16px; font-size: 15px; line-height: 1.35; }
.vg-notice .owner { align-self: flex-end; }
.vg-notice .owner .msg-bubble { background: var(--teal); color: #fff; border-bottom-right-radius: 6px; }
.vg-notice .manager { align-self: flex-start; }
.vg-notice .manager .msg-bubble { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 6px; }
.vg-banner { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--sunny-soft); display: grid; gap: 2px; }
.vg-banner b { font-size: 15px; }
.vg-banner span { font-size: 13px; color: var(--ink-2); }

/* three restaurant websites, three designs: each in a browser window (dots, address bar, the page), so it reads as a
   website before any word is read. The three differ in layout, not only colour: the bistro is a full photo with its serif
   name low on the left (the Le Jardin of the page hero); the ramen bar is split, photo left, type right, square red
   button; the pizzeria is a centred poster with the pizza rising from the bottom. System faces only (no extra web font).
   The windows overlap down the panel like open tabs on a desk. */
.vg-styles { width: 100%; --ww: 252px; --wh: 212px; --step: 194px; }
.vg-styles-row { position: relative; height: calc(var(--wh) + var(--step) * 2); }
.wb {
  position: absolute; left: 0; top: 0; width: var(--ww); height: var(--wh); border-radius: 12px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 44px -20px rgba(0,0,0,.5);
}
.wb:nth-child(2) { left: auto; right: 0; top: var(--step); }
.wb:nth-child(3) { left: 4%; top: calc(var(--step) * 2); }
.wb-bar { flex: none; height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 9px; background: #eceeed; }
.wb-bar i { width: 7px; height: 7px; border-radius: 99px; background: #c5cbc9; }
.wb-bar span { flex: 1; margin: 0 22px 0 8px; height: 18px; border-radius: 99px; background: #fff; font-size: 13px; line-height: 18px; text-align: center; color: var(--ink-2); }
.wb-page { position: relative; flex: 1; min-height: 0; font-size: 13px; line-height: 1.3; }
.wb-photo { position: absolute; background: var(--photo) center / cover, #6b4a2b; }
.wb-body { position: absolute; inset: 0; display: flex; flex-direction: column; }
.wb-nav { letter-spacing: .06em; }
.wb-nav-bars { display: flex; gap: 6px; }
.wb-nav-bars i { width: 22px; height: 5px; border-radius: 99px; background: currentColor; opacity: .5; }
.wb-cta { padding: 6px 16px; font-weight: 600; }
.wb-cta-empty { width: 64px; height: 28px; }

.wb-bistro .wb-page { background: #1c1a16; color: #f3ecdf; }
.wb-bistro .wb-photo { inset: 0; }
.wb-bistro .wb-body { padding: 12px 16px 14px; align-items: flex-start; background: linear-gradient(to top, #1c1a16 4%, rgba(28,26,22,.25) 60%, rgba(28,26,22,.55)); }
.wb-bistro .wb-nav { align-self: center; margin-bottom: auto; opacity: .9; }
.wb-bistro b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.wb-bistro .wb-tag { margin: 3px 0 9px; opacity: .85; }
.wb-bistro .wb-cta { border-radius: 99px; background: #f3ecdf; color: #1c1a16; }

.wb-ramen .wb-page { background: #f4efe6; color: #16130f; }
.wb-ramen .wb-photo { inset: 0 54% 0 0; }
.wb-ramen .wb-body { left: 46%; padding: 12px 14px 14px; align-items: flex-start; }
.wb-ramen .wb-nav { align-self: flex-end; margin-bottom: auto; }
.wb-ramen b { font-family: var(--font-display); font-size: 17px; line-height: 1.15; text-transform: uppercase; letter-spacing: .16em; max-width: 5.5em; }
.wb-ramen .wb-tag { margin: 7px 0 10px; padding-top: 6px; border-top: 2px solid #d8412f; }
.wb-ramen .wb-cta { background: #d8412f; color: #fff; }

.wb-pizzeria .wb-page { background: #c8342a; color: #fff6e6; }
.wb-pizzeria .wb-photo { left: 50%; bottom: -62%; width: 66%; aspect-ratio: 1; margin-left: -33%; border-radius: 99px; background-size: 250% auto; background-position: 50% 80%; box-shadow: 0 0 0 5px rgba(255,246,230,.25); }
.wb-pizzeria .wb-body { padding: 10px 14px; align-items: center; text-align: center; }
.wb-pizzeria .wb-nav { margin-bottom: 4px; opacity: .9; }
.wb-pizzeria b { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: -.03em; }
.wb-pizzeria .wb-tag { margin: 2px 0 7px; }
.wb-pizzeria .wb-cta { border-radius: 99px; background: #fff6e6; color: #c8342a; padding: 4px 16px; }

/* the three current looks (Bo, 2026-11-14: formats owners aspire to; each drawn as a studio would present it, with one
   detail to remember). Korean grill: black and signal red, the grill edge to edge fading into black on the left, heavy
   capitals low on the left, the current page underlined in the nav. Its detail: the name in Hangul as a neon sign. */
.wb-nav span + span::before { content: "·"; margin: 0 .4em; }
.wb-kicker { font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.wb-korean .wb-page { background: #0b0b0c; color: #fff; }
.wb-korean .wb-photo { inset: 0; background-size: 128% auto; background-position: 72% 46%; }
.wb-korean .wb-body { padding: 13px 16px 16px; align-items: flex-start; background: linear-gradient(90deg, #0b0b0c 2%, rgba(11,11,12,.9) 30%, rgba(11,11,12,.25) 68%, rgba(11,11,12,.05)), linear-gradient(to top, rgba(11,11,12,.8), transparent 50%); }
.wb-korean .wb-nav, .wb-matcha .wb-nav, .wb-pizza .wb-nav { display: flex; gap: 12px; letter-spacing: .04em; }
.wb-korean .wb-nav span::before, .wb-matcha .wb-nav span::before, .wb-pizza .wb-nav span::before { content: none; }
.wb-korean .wb-nav { margin-bottom: auto; }
.wb-korean .wb-nav span:first-child { padding-bottom: 3px; box-shadow: 0 2px 0 #ff2d2d; }
.wb-korean .wb-kicker { color: #ff4a40; }
.wb-korean b { margin-top: 5px; font-family: "Arial Black", "Helvetica Neue", var(--font-display); font-weight: 900; font-size: 34px; line-height: .92; letter-spacing: -.03em; text-transform: uppercase; }
.wb-korean .wb-tag { margin: 7px 0 11px; opacity: .82; }
.wb-korean .wb-cta { padding: 7px 20px; background: #ff2d2d; color: #fff; box-shadow: 0 0 18px rgba(255,45,45,.6); }
.wb-korean .wb-deco {
  position: absolute; z-index: 1; top: 12px; right: 14px; padding: 9px 5px 7px; border-radius: 8px; writing-mode: vertical-rl;
  font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: .1em; color: #ffd9d4; background: rgba(11,11,12,.45);
  text-shadow: 0 0 5px #ff2d2d, 0 0 14px #ff2d2d, 0 0 26px rgba(255,45,45,.9);
  box-shadow: inset 0 0 0 1.5px #ff6258, inset 0 0 10px rgba(255,45,45,.55), 0 0 14px rgba(255,45,45,.7);
}
/* matcha café: cream and matcha green, a lot of air, the drink in an arch, a light serif name in lower case. Its detail:
   a round stamp pressed on the corner of the arch. */
.wb-matcha .wb-page { background: #f6f2e7; color: #6e7860; }
.wb-matcha .wb-photo { left: 18px; top: 20px; bottom: 18px; width: 37%; border-radius: 99px 99px 12px 12px; background-position: 52% 50%; background-size: auto 125%; }
.wb-matcha .wb-body { left: calc(37% + 18px); padding: 13px 16px 14px 20px; align-items: flex-start; }
.wb-matcha .wb-nav { align-self: flex-end; margin-bottom: auto; gap: 10px; }
.wb-matcha .wb-kicker { color: #8a9a6c; }
.wb-matcha b { margin-top: 4px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.02em; text-transform: lowercase; color: #4f6d30; }
.wb-matcha .wb-tag { margin: 8px 0 12px; }
.wb-matcha .wb-cta { margin-bottom: auto; padding: 6px 18px; border-radius: 99px; background: #5f7f3a; color: #fbf8ef; }
.wb-matcha .wb-deco {
  position: absolute; z-index: 1; left: calc(37% - 6px); top: 12px; width: 46px; height: 46px; border-radius: 99px; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; line-height: 1; color: #4f6d30; background: #f6f2e7; transform: rotate(-12deg);
  box-shadow: inset 0 0 0 1.5px #4f6d30, inset 0 0 0 4px #f6f2e7, inset 0 0 0 5px #4f6d30;
}
/* new-wave Neapolitan: a centred poster in tomato red, the name in a fat italic with a hard shadow and a hand-drawn
   line under it, the pizza rising from the bottom. Its detail: the checkerboard band. */
.wb-pizza .wb-page { background: #d2372b; color: #fff3dc; }
.wb-pizza .wb-page::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: repeating-conic-gradient(#fff3dc 0 25%, #d2372b 0 50%) 0 0 / 24px 24px; }
.wb-pizza .wb-photo { left: 50%; bottom: -64%; width: 66%; aspect-ratio: 1; margin-left: -33%; border-radius: 99px; background-size: 250% auto; background-position: 50% 80%; box-shadow: 0 0 0 5px #fff3dc, 0 0 0 7px #d2372b; }
.wb-pizza .wb-body { padding: 12px 14px; align-items: center; text-align: center; }
.wb-pizza .wb-nav { margin-bottom: 7px; opacity: .92; }
.wb-pizza b {
  padding-bottom: 9px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.02em;
  text-shadow: 2px 2px 0 #8f1d14; transform: rotate(-3deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'%3E%3Cpath d='M2 5 Q10 0 18 4 T34 4 T50 4 T66 4 T78 3' fill='none' stroke='%23fff3dc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 50% 100% / 80px 8px no-repeat;
}
.wb-pizza .wb-tag { margin: 5px 0 8px; letter-spacing: .08em; }
.wb-pizza .wb-cta { border-radius: 99px; background: #fff3dc; color: #d2372b; padding: 4px 18px; box-shadow: 2px 2px 0 #8f1d14; }

.vg-styles-note { margin-top: 16px; font-size: 13px; color: var(--ink-3); text-align: center; }
/* the windows are the panel's subject, not a small card on it: let them fill the panel */
.kp-card:has(> .vg-styles) { width: min(500px, 100%); }
@media (max-width: 430px) {
  .wb-pizza .wb-photo { bottom: -63%; }
  .wb-matcha .wb-deco { left: calc(37% - 16px); top: 10px; }
  .wb-matcha .wb-photo { left: 14px; }
  .wb-matcha .wb-body { left: calc(37% + 14px); padding: 12px 12px 12px 16px; }
  .wb-matcha .wb-nav { gap: 7px; }
}
@media (min-width: 431px) { .vg-styles { --ww: 312px; --wh: 236px; --step: 170px; } }
.vg-bar-langs { margin: 10px 0 2px; }
.vg-review-g { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 400 15px/1.4 Arial, sans-serif; color: #3c4043; }
.vg-review-g img { width: 18px; height: 18px; object-fit: contain; }
.vg-review-g .vg-meta { margin-left: auto; font-family: var(--font-text); }

/* one site, everything guests look for */
.vg-hub { padding: 10px; }
.vg-hub .vg-site-hero { margin-top: 0; height: 120px; }
.vg-hub-rows { list-style: none; margin: 8px 0 0; padding: 0 4px; }
.vg-hub-rows li { display: grid; grid-template-columns: 28px auto 1fr; align-items: center; gap: 0 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.vg-hub-rows li .vg-meta { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-hub-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--teal-soft); display: grid; place-items: center; }
.vg-hub-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vg-hub .vg-site-actions { margin-top: 10px; }

/* the owner's dashboard: a few settings, each with its switch or its pencil */
.vg-dash-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.vg-dash-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.vg-dash-rows li > div { display: grid; gap: 1px; min-width: 0; }
.vg-dash-rows li b { font-size: 15px; }
.vg-dash-rows li > div > span { font-size: 13px; color: var(--ink-3); }
.vg-switch { flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--line); position: relative; }
.vg-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.vg-switch.on { background: var(--vg-accent); }
.vg-switch.on::after { left: 18px; }
.vg-chip-icon { flex: none; width: 34px; min-width: 34px; padding: 0; color: var(--ink-2); }
.vg-chip-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Google is recognisable as its own platform, while the incoming booking belongs to OKO. */
.vg-google-brand { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: #3c4043; font: 400 15px/1.4 Arial, sans-serif; background: #fff; }
.vg-google-brand img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.vg-place .vg-map { background: #e8f0e5; }
.vg-place .vg-map path { stroke: #fff; }
.vg-place .vg-map .pin { fill: #ea4335; stroke: #fff; }
.vg-place .vg-place-body { font-family: Arial, sans-serif; }
.vg-place .vg-place-body .vg-button { background: #1a73e8; color: #fff; font-family: Arial, sans-serif; }
.vg-place .vg-meta { color: #5f6368; }

/* ---- Online presence, page hero: one restaurant on three phone screens (its website, its Google profile, its social media
   profile). The checked radio decides which phone is in front; the next one waits behind on the left, the one after on the right. Google's and the
   social app's own conventions (stars, blue actions, the ring round the avatar) are used so each is recognised at a glance;
   the website has the restaurant's own look, not OKO's. ---- */
.pz { --pw: 208px; --off: 43%; position: relative; }
.pz-stage { position: relative; height: calc(var(--pw) * 2.04); }
.pz-phone {
  --x: 0%; --s: 1; --dim: 0;
  position: absolute; top: 0; left: 50%; width: var(--pw); height: 100%; margin-left: calc(var(--pw) / -2); z-index: 3;
  padding: 5px; border-radius: 22px; background: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 28px 48px -22px var(--card-glow, rgba(0,0,0,.5));
  transform: translateX(var(--x)) scale(var(--s)); transform-origin: 50% 54%;
  transition: transform .8s var(--ease-out);
}
.pz-phone::before { content: ""; position: absolute; z-index: 2; top: 11px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 99px; background: var(--ink); }
.pz-phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: var(--dim); transition: opacity .8s var(--ease-out); pointer-events: none; }
#pz-0:checked ~ .pz-stage .pz-phone:nth-child(2), #pz-1:checked ~ .pz-stage .pz-phone:nth-child(3), #pz-2:checked ~ .pz-stage .pz-phone:nth-child(1) { --x: calc(var(--off) * -1); --s: .84; --dim: .14; z-index: 1; cursor: pointer; }
#pz-0:checked ~ .pz-stage .pz-phone:nth-child(3), #pz-1:checked ~ .pz-stage .pz-phone:nth-child(1), #pz-2:checked ~ .pz-stage .pz-phone:nth-child(2) { --x: var(--off); --s: .84; --dim: .14; z-index: 1; cursor: pointer; }
.pz-screen { position: relative; height: 100%; overflow: hidden; border-radius: 18px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4; text-align: left; }
.pz-screen b { font-weight: 600; }
.pz-screen p { margin: 0; }
.pz-screen i { display: block; background: var(--photo) center / cover, var(--line); }
.pz-stars { color: #f5a400; letter-spacing: .5px; }

/* the restaurant's own website: dark, a serif name, its own cream */
.pz-site { background: #1c1a16; color: #f3ecdf; }
.pz-site-hero {
  height: 62%; padding: 0 16px 16px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, #1c1a16, rgba(28,26,22,.2) 55%, rgba(28,26,22,.5)), var(--photo) center / cover, #6b4a2b;
}
.pz-site-nav { margin-bottom: auto; padding-top: 32px; text-align: center; letter-spacing: .08em; opacity: .9; }
.pz-site-hero b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }
.pz-site-hero > span { margin-top: 6px; opacity: .85; }
.pz-site-actions { display: flex; gap: 8px; padding: 0 16px; }
.pz-site-actions span { flex: 1; padding: 9px 0; border-radius: 99px; text-align: center; font-weight: 600; box-shadow: inset 0 0 0 1.5px rgba(243,236,223,.5); }
.pz-site-actions .on { background: #f3ecdf; color: #1c1a16; box-shadow: none; }
.pz-site-hours { padding: 12px 16px; opacity: .75; }
.pz-site-photos { display: flex; gap: 6px; padding: 0 16px; }
.pz-site-photos i { flex: 1; aspect-ratio: 1; border-radius: 12px; }

/* its Google profile: found on the map, the facts, a review and the restaurant's reply */
.pz-search { display: flex; align-items: center; gap: 8px; margin: 32px 10px 8px; padding: 7px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; }
.pz-search img { width: 16px; height: 16px; flex: none; }
.pz-map { height: 76px; background: #e6ede7; }
.pz-map svg { display: block; width: 100%; height: 100%; }
.pz-map path { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.pz-map circle { fill: #d3ddd5; }
.pz-map .pin { fill: #ea4335; stroke: #fff; stroke-width: 2; }
.pz-g-body { padding: 10px 12px; }
.pz-g-name { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.25; }
.pz-g-rating { display: flex; align-items: center; gap: 5px; color: var(--ink-2); }
.pz-g-meta { color: var(--ink-2); }
.pz-g-meta em { font-style: normal; color: var(--basil); }
.pz-g-actions { display: flex; gap: 5px; margin: 8px 0; overflow: hidden; }
.pz-g-actions span { flex: none; padding: 5px 11px; border-radius: 99px; font-weight: 600; color: #1a5fc4; box-shadow: inset 0 0 0 1px var(--line-strong); }
.pz-g-actions .on { background: #1a5fc4; color: #fff; box-shadow: none; }
.pz-g-photos { display: grid; grid-template-columns: 3fr 2fr; gap: 4px; }
.pz-g-photos i { height: 58px; border-radius: 12px; }
.pz-g-review { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.pz-g-reply { margin-top: 6px !important; padding-left: 8px; border-left: 2px solid var(--line-strong); color: var(--ink-2); }
.pz-g-reply b { display: block; color: var(--ink); }

/* its social media profile: the facts in the bio, the buttons that convert, the photos */
.pz-social { padding: 32px 12px 0; }
.pz-s-handle { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.pz-s-handle i { width: 16px; height: 10px; background: none; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.pz-s-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.pz-s-avatar { flex: none; width: 54px; height: 54px; border-radius: 99px; background: var(--photo) center / cover; border: 2px solid #fff; box-shadow: 0 0 0 2px #d6249f; margin: 2px 4px 2px 2px; }
.pz-s-stat { display: grid; text-align: center; color: var(--ink-2); line-height: 1.25; }
.pz-s-stat b { font-size: 15px; color: var(--ink); }
.pz-s-bio { margin-top: 8px !important; color: var(--ink-2); }
.pz-s-bio b { color: var(--ink); }
.pz-s-bio em { font-style: normal; font-weight: 600; color: #1a5fc4; }
.pz-s-actions { display: flex; gap: 5px; margin: 10px 0; }
.pz-s-actions span { flex: 1; padding: 6px 0; border-radius: 12px; text-align: center; font-weight: 600; background: #eef0f1; }
.pz-s-actions .on { background: #1a73e8; color: #fff; }
.pz-s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -12px; }
.pz-s-grid i { aspect-ratio: 1; }

/* which screen is in front: three pills under the phones, the checked one filled */
.pz-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.pz-tabs label { padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 600; line-height: 1.4; color: inherit; cursor: pointer; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 28%, transparent); transition: background-color .3s, color .3s; }
#pz-0:checked ~ .pz-tabs label:nth-child(1), #pz-1:checked ~ .pz-tabs label:nth-child(2), #pz-2:checked ~ .pz-tabs label:nth-child(3) { background: var(--ink); color: #fff; box-shadow: none; }
#pz-0:focus-visible ~ .pz-tabs label:nth-child(1), #pz-1:focus-visible ~ .pz-tabs label:nth-child(2), #pz-2:focus-visible ~ .pz-tabs label:nth-child(3) { outline: 2px solid var(--ink); outline-offset: 3px; }
/* the phone column: a smaller phone, so the Google screen drops what does not fit and keeps the review and its reply */
@media (max-width: 430px) {
  .pz-stage { height: calc(var(--pw) * 2.12); }
  .pz-map { height: 50px; }
  .pz-g-photos i { height: 44px; }
  .pz-g-actions span:nth-child(n+4) { display: none; }
  .pz-s-avatar { width: 46px; height: 46px; }
}
@media (min-width: 431px) { .pz { --pw: 244px; --off: 66%; } }
@media (prefers-reduced-motion: reduce) { .pz-phone, .pz-phone::after, .pz-tabs label { transition: none; } }

/* ---- Reservations, page hero: the staff phone with tonight's list. Bookings arrive from Google Maps, the website and
   Instagram until the service is full; then they land in the guest list card under the phone. The default (no script,
   reduced motion) is the end state; the inline script in Vignette.astro replays it while in view. ---- */
.bi { --pw: 240px; --ph: 388px; --lap: 46px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: left; }
.bi-phone {
  position: relative; z-index: 1; width: var(--pw); height: var(--ph); padding: 5px; border-radius: 26px; background: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 28px 48px -22px var(--card-glow, rgba(0,0,0,.5));
}
.bi-phone::before { content: ""; position: absolute; z-index: 2; top: 11px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 99px; background: var(--ink); }
.bi-screen { height: 100%; overflow: hidden; padding: 32px 12px 0; border-radius: 21px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4; }
.bi p, .bi ul { margin: 0; padding: 0; list-style: none; }
.bi b { font-weight: 600; }
.bi em { font-style: normal; }
.bi-shop { color: var(--ink-3); font-weight: 600; }
.bi-head { display: flex; align-items: baseline; gap: 8px; margin-top: 2px !important; }
.bi-head b { font-family: var(--font-display); font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.bi-head span { color: var(--ink-2); }
.bi-count { margin-top: 10px; padding: 10px 10px 11px; border-radius: 14px; background: var(--teal-soft); }
.bi-count p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; }
.bi-count p > b { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--teal); }
.bi-count p > span { color: var(--teal); font-weight: 600; }
.bi-full {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 8px 2px 6px; border-radius: 99px;
  background: var(--teal); color: #fff; font-weight: 600; white-space: nowrap;
  transition: opacity .35s ease-out, transform .5s var(--ease-out);
}
.bi svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bi-pips { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; margin-top: 8px; }
.bi-pips i { height: 8px; border-radius: 3px; background: rgba(4,75,83,.16); transition: background-color .4s ease-out; }
.bi-pips i.on { background: var(--teal); }
.bi-rows { margin-top: 6px !important; }
.bi-row { display: flex; align-items: center; gap: 9px; height: 50px; overflow: hidden; border-bottom: 1px solid var(--line); transition: height .55s var(--ease-out), opacity .45s ease-out; }
.bi-row.is-out { height: 0; opacity: 0; border-bottom-width: 0; }
.bi-row.is-new { animation: bi-new 1.4s ease-out; }
.bi-src { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; }
.bi-src img { width: 16px; height: 16px; }
.bi-src svg { width: 16px; height: 16px; stroke-width: 1.4; }
.bi-src-google { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.bi-src-site { background: var(--teal-soft); color: var(--teal); }
.bi-src-social { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); color: #fff; }
.bi-src-social circle:last-child { fill: currentColor; }
.bi-who { flex: 1; min-width: 0; display: grid; }
.bi-who b { font-size: 15px; line-height: 1.3; }
.bi-who span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 430px) { .bi-who span { font-size: 12px; letter-spacing: -.01em; } }
.bi-time { flex: none; font-size: 15px; }
@keyframes bi-new { from { background: var(--sunny-soft); } to { background: transparent; } }

/* the guests on their way from the list into the guest list card: only during the replay */
.bi-drops { position: absolute; z-index: 2; left: 50%; top: calc(var(--ph) - var(--lap) - 84px); width: 0; height: 0; }
.bi-drops span {
  position: absolute; left: 0; top: 0; padding: 4px 10px; border-radius: 99px; background: var(--sunny); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; opacity: 0; transform: translate(-50%, 0);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.4);
}
.bi-drops span:nth-child(2) { margin-left: -44px; }
.bi-drops span:nth-child(3) { margin-left: 46px; }
.bi.is-drop .bi-drops span { animation: bi-drop 1s cubic-bezier(.5, 0, .75, .4) both; }
.bi.is-drop .bi-drops span:nth-child(2) { animation-delay: .32s; }
.bi.is-drop .bi-drops span:nth-child(3) { animation-delay: .64s; }
@keyframes bi-drop {
  0% { opacity: 0; transform: translate(-50%, -18px) scale(.9); }
  25% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 84px) scale(.86); }
}

/* the guest list: what stays with the restaurant */
.bi-card {
  position: relative; z-index: 3; width: min(100%, 318px); margin-top: calc(var(--lap) * -1); padding: 13px 16px 14px;
  border-radius: 22px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 -10px 24px -14px rgba(15,42,48,.35), 0 26px 44px -22px var(--card-glow, rgba(0,0,0,.5));
}
.bi-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.bi-added { padding: 2px 8px; border-radius: 99px; background: var(--basil-soft); color: var(--basil); white-space: nowrap; transition: opacity .35s ease-out, transform .5s var(--ease-out); }
.bi-card-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 2px !important; }
.bi-card-n b { font-family: var(--font-display); font-size: 32px; line-height: 1.2; letter-spacing: -.02em; }
.bi-card-n span { font-size: 15px; font-weight: 600; }
.bi-card-n small { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.bi-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px !important; }
.bi-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 5px 9px; border-radius: 99px; background: var(--teal); color: #fff; font-weight: 600; white-space: nowrap; }
.bi-tags .bi-tag-zero { padding-left: 11px; background: var(--sunny); color: var(--ink); }

.bi.is-filling .bi-full, .bi.is-pre .bi-added { opacity: 0; transform: scale(.8); }
.bi.is-reset .bi-row, .bi.is-reset .bi-full, .bi.is-reset .bi-added, .bi.is-reset .bi-pips i { transition: none; }
@media (min-width: 431px) {
  .bi { --pw: 276px; --ph: 492px; --lap: 58px; }
  .bi-screen { padding: 36px 14px 0; }
  .bi-card { width: min(100%, 372px); padding: 16px 20px 18px; }
  .bi-card-n b { font-size: 40px; }
  .bi-card-top, .bi-card-n small, .bi-tags span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .bi-row, .bi-full, .bi-added, .bi-pips i { transition: none; } .bi-row.is-new, .bi.is-drop .bi-drops span { animation: none; } }

/* ---- Reservations, Reserve with Google: one phone in Google Maps' conventions (drawn in HTML, sized in em of the screen's
   width / 100, like local search above) and, beside it, the booking arriving at the restaurant. The default (no script,
   reduced motion) is the end: confirmed, the new booking shown. data-sheet="0" closes the sheet, data-done="0" shows the
   form instead of the confirmation, data-notif="0" hides the restaurant's card; the chosen chips carry .on. ---- */
.kp-card:has(> .vg-gres), .kp-visual .kp-card:has(> .vg-gres) { width: 100%; margin: 0 auto; }
.vg-gres { --w: 264px; display: grid; justify-items: center; gap: 14px; }
.vg-gres-phone { width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.vg-gres-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.gr-screen { position: relative; width: var(--w); aspect-ratio: 15 / 26; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); color: #202124; line-height: 1.3; text-align: left; background: #fff; }
.gr-screen p { margin: 0; }
.gr-screen b { font-weight: 600; }
.gr-screen em { font-style: normal; color: #188038; }
.gr-map { position: absolute; inset: 0 0 auto; height: 62em; background: #eef0ec; }
.gr-map svg { display: block; width: 100%; height: 100%; }
.gr-map path { fill: none; stroke: #fff; stroke-width: 2.2; }
.gr-map .wide { stroke-width: 4; stroke: #fff7d6; }
.gr-map .park { fill: #cfe8d2; stroke: none; }
.gr-map .water { fill: #b5dcf5; stroke: none; }
.gr-pin { position: absolute; left: 50%; top: 64%; width: 10em; margin: -13.3em 0 0 -5em; filter: drop-shadow(0 .8em 1.2em rgba(0,0,0,.35)); }
.gr-pin svg { width: 100%; }
.gr-pin path { fill: #ea4335; stroke: #b3261e; stroke-width: 1; }
.gr-pin circle { fill: #7a130c; }
.gr-search { position: absolute; top: 10.5em; left: 4em; right: 4em; height: 13em; padding: 0 4.5em; border-radius: 99em; background: #fff; display: flex; align-items: center; gap: 3em; box-shadow: 0 .4em 1.6em rgba(0,0,0,.22); }
.gr-search img { width: 6.4em; height: 6.4em; flex: none; }
.gr-search span { flex: 1; font-size: 4.8em; white-space: nowrap; overflow: hidden; }
.gr-search i { width: 7em; height: 7em; border-radius: 99em; background: #e8f0fe; flex: none; }
.gr-grab { display: block; width: 10em; height: 1.2em; margin: 0 auto 3em; border-radius: 99em; background: #dadce0; }
.gr-place { position: absolute; inset: 52em 0 0; padding: 2.2em 5em 0; border-radius: 6em 6em 0 0; background: #fff; box-shadow: 0 -1em 3em rgba(0,0,0,.14); display: flex; flex-direction: column; }
.gr-name { font-family: var(--font-display); font-size: 7em; line-height: 1.2; }
.gr-place p { font-size: 4.2em; color: #5f6368; margin-top: .25em; }
.gr-stars { color: #fbbc04; letter-spacing: -.05em; }
.gr-actions { display: flex; gap: 2em; margin: 4em 0; }
.gr-actions span { padding: .55em 1.1em; border-radius: 99em; font-size: 4.4em; font-weight: 600; color: #1a73e8; box-shadow: inset 0 0 0 1px #dadce0; white-space: nowrap; }
.gr-actions .gr-reserve { background: #1a73e8; color: #fff; box-shadow: none; }
.gr-photos { flex: 1; display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: 1.4em; margin: 0 -1em; padding-bottom: 0; }
.gr-photos i { border-radius: 3em; background: var(--photo) center / cover, #e8eaed; }
.gr-photos i:first-child { grid-row: span 2; border-radius: 3em 3em 0 0; }
.gr-scrim { position: absolute; inset: 0; background: rgba(32,33,36,.42); transition: opacity .4s ease-out; }
/* the sheet is as tall as what it holds: the form, then (shorter) the confirmation */
.gr-sheet { position: absolute; inset: 88em 0 0; z-index: 2; padding: 2.2em 5em 0; border-radius: 6em 6em 0 0; background: #fff; box-shadow: 0 -1em 3em rgba(0,0,0,.2); transition: transform .55s var(--ease-out), top .5s var(--ease-out); }
.gr-form, .gr-done { position: absolute; inset: 6.4em 5em 11em; transition: opacity .35s ease-out, transform .5s var(--ease-out); }
.gr-form { bottom: auto; opacity: 0; } /* keeps its own height while the sheet shortens */
.gr-title { display: block; font-family: var(--font-display); font-size: 5.6em; line-height: 1.25; }
.gr-title small { margin-left: .5em; font-family: var(--font-text); font-size: .75em; font-weight: 400; color: #5f6368; }
.gr-row { margin-top: 3.2em; }
.gr-row > span { display: block; font-size: 3.8em; color: #5f6368; margin-bottom: .5em; }
.gr-row > div { display: flex; gap: 1.6em; }
.gr-row > div span { flex: 1; padding: .5em 0; border-radius: 99em; text-align: center; font-size: 4.2em; white-space: nowrap; box-shadow: inset 0 0 0 1px #dadce0; transition: background-color .25s, color .25s, box-shadow .25s; }
.gr-row > div span.on { background: #e8f0fe; color: #174ea6; font-weight: 600; box-shadow: inset 0 0 0 1px #1a73e8; }
.gr-button { display: block; margin-top: 1.1em; padding: .65em 0; border-radius: 99em; background: #1a73e8; color: #fff; text-align: center; font-size: 4.6em; font-weight: 600; }
.gr-done { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gr-done i { width: 17em; height: 17em; margin-bottom: 2.4em; border-radius: 99em; background: #e6f4ea; display: grid; place-items: center; }
.gr-done svg { width: 9.5em; height: 9.5em; fill: none; stroke: #188038; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gr-done b { font-family: var(--font-display); font-size: 7em; line-height: 1.25; }
.gr-done span { font-size: 4.6em; color: #5f6368; margin-top: .2em; }
.gr-done span:last-of-type { color: #202124; font-weight: 600; }
.gr-done em { margin-top: .9em; padding: .45em 1.2em; border-radius: 99em; font-size: 4.2em; font-weight: 600; color: #1a73e8; box-shadow: inset 0 0 0 1px #dadce0; }
.gr-provider { position: absolute; left: 0; right: 0; bottom: 2em; text-align: center; font-size: 3.6em; color: #70757a; }
.gr-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(20,24,26,.28); box-shadow: 0 0 0 1.2em rgba(20,24,26,.1); opacity: 0; pointer-events: none; }
.gr-tap.on { animation: vd-tap .6s ease-out; }
/* the restaurant's side: the booking is in its book */
.gr-notif {
  display: flex; align-items: center; gap: 12px; width: min(100%, 300px); padding: 12px 16px 13px 12px; border-radius: 22px;
  background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05);
  transition: opacity .4s ease-out, transform .6s var(--ease-out);
}
.gr-notif .vg-app { width: 38px; height: 38px; border-radius: 10px; }
.gr-notif .vg-app .mark { width: 27px; }
.gr-notif p { margin: 0; display: grid; font-size: 15px; line-height: 1.4; min-width: 0; }
.gr-notif small { font-size: 13px; color: var(--ink-3); }
.gr-notif b { font-weight: 600; }
.gr-notif p > span { color: var(--ink-2); }
.gr-notif b, .gr-notif p > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the earlier moments, set by the script */
.vg-gres[data-sheet="0"] .gr-sheet { transform: translateY(104%); }
.vg-gres[data-sheet="0"] .gr-scrim { opacity: 0; }
.vg-gres[data-done="0"] .gr-sheet { top: 64em; }
.vg-gres[data-done="0"] .gr-form { opacity: 1; }
.vg-gres[data-done="0"] .gr-done { opacity: 0; transform: scale(.92); }
.vg-gres[data-notif="0"] .gr-notif { opacity: 0; transform: translateY(14px) scale(.95); }
.vg-gres.is-reset .gr-sheet, .vg-gres.is-reset .gr-scrim, .vg-gres.is-reset .gr-form, .vg-gres.is-reset .gr-done, .vg-gres.is-reset .gr-notif, .vg-gres.is-reset .gr-row span { transition: none; }
@media (min-width: 431px) {
  .vg-gres { --w: 280px; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0; }
  .gr-notif { width: auto; max-width: 280px; margin-left: -8px; position: relative; z-index: 1; align-self: end; margin-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .gr-sheet, .gr-scrim, .gr-form, .gr-done, .gr-notif, .gr-row span { transition: none; } .gr-tap.on { animation: none; } }

/* ---- Reservations, booking on the restaurant's own website: one phone with the BULMAT site of online presence (a picture)
   and, in HTML on top of it, the booking sheet in that site's own look: black, cream, condensed capitals, square red
   buttons. Sized in em of the screen's width / 100. The default (no script, reduced motion) is the sheet open with the
   choices made. data-scroll="0" is the top of the page, data-sheet="0" closes the sheet, data-done="1" confirms. ---- */
.kp-card:has(> .vg-sbk), .kp-visual .kp-card:has(> .vg-sbk) { width: 100%; margin: 0 auto; }
.vg-sbk { --w: 280px; --sbk-red: #d20f17; --sbk-cream: #f7efe1; --sbk-black: #0b0908; }
.vg-sb-phone { position: relative; width: calc(var(--w) + 12px); margin: 0 auto; border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: var(--sbk-black);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.vg-sb-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.sb-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-display); color: var(--sbk-cream); line-height: 1.2; text-align: left; background: var(--sbk-black); }
.sb-page { position: relative; transform: translateY(-24em); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.sb-page img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }
.sb-more { display: block; height: 30em; margin: 0 3.2em; border-radius: 1em; background: var(--photo) center 60% / cover; }
.sb-hot { position: absolute; left: 33.3%; top: 70em; width: 33.4%; height: 8.4em; }
.sb-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.3); transition: opacity .4s ease-out; }
.sb-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 95em; padding: 0 6em; background: var(--sbk-black); border-top: .8em solid var(--sbk-red);
  box-shadow: 0 -6em 16em rgba(0,0,0,.6); transition: transform .65s var(--ease-out), height .5s var(--ease-out); }
.sb-grab { display: block; width: 12em; height: 1em; margin: 1.8em auto 0; background: rgba(247,239,225,.3); }
.sb-form, .sb-done { position: absolute; left: 6em; right: 6em; top: 5.2em; transition: opacity .35s ease-out, transform .5s var(--ease-out); }
/* the site's own display face: heavy condensed capitals, in cream */
.sb-title { display: block; font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-stretch: condensed; font-size: 10.5em; line-height: 1; letter-spacing: .005em; text-transform: uppercase; }
.sb-row { margin-top: 2.7em; }
.sb-row > span { display: block; font-size: 3.8em; font-weight: 600; opacity: .7; margin-bottom: .4em; }
.sb-row > div { display: flex; gap: 1.6em; }
.sb-row > div span { flex: 1; padding: .48em 0; border-radius: .2em; text-align: center; font-size: 4.4em; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(247,239,225,.4); transition: background-color .25s, color .25s, box-shadow .25s; }
.sb-row > div span.on { background: var(--sbk-red); color: #fff; box-shadow: none; }
.sb-button { display: block; margin-top: .85em; padding: .58em 0; border-radius: .16em; background: var(--sbk-red); color: #fff; text-align: center; font-size: 5em; font-weight: 700; }
.sb-done { opacity: 0; transform: scale(.94); top: 8em; text-align: center; }
.sb-done i { display: grid; place-items: center; width: 15em; height: 15em; margin: 0 auto 3.4em; background: var(--sbk-red); border-radius: .8em; }
.sb-done svg { width: 9.5em; height: 9.5em; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: square; }
.sb-done .sb-title { font-size: 12em; }
.sb-done span { display: block; margin-top: .9em; font-size: 4.4em; font-weight: 600; }
.sb-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(255,255,255,.42); box-shadow: 0 0 0 1.2em rgba(255,255,255,.16); opacity: 0; pointer-events: none; }
.sb-tap.on { animation: vd-tap .6s ease-out; }
.vg-sbk[data-scroll="0"] .sb-page { transform: none; }
.vg-sbk[data-sheet="0"] .sb-sheet { transform: translateY(104%); }
.vg-sbk[data-sheet="0"] .sb-scrim { opacity: 0; }
.vg-sbk[data-done="1"] .sb-sheet { height: 62em; }
.vg-sbk[data-done="1"] .sb-form { opacity: 0; }
.vg-sbk[data-done="1"] .sb-done { opacity: 1; transform: none; }
.vg-sbk.is-reset .sb-page, .vg-sbk.is-reset .sb-sheet, .vg-sbk.is-reset .sb-scrim, .vg-sbk.is-reset .sb-form, .vg-sbk.is-reset .sb-done, .vg-sbk.is-reset .sb-row span { transition: none; }
@media (min-width: 431px) { .vg-sbk { --w: 300px; } }
@media (prefers-reduced-motion: reduce) { .sb-page, .sb-sheet, .sb-scrim, .sb-form, .sb-done, .sb-row span { transition: none; } .sb-tap.on { animation: none; } }

/* ---- Reservations, fewer no-shows: the guest's phone from the booking to the evening, the days passing above it, and the
   restaurant's book beside it. Three scenes share the screen (sized in em of its width / 100): the booking on BULMAT's
   site with a card as a guarantee (the look of .vg-sbk), a lock screen with the text message, the email to confirm.
   The default (no script, reduced motion) is the end: the email confirmed, both marks lit in the book. data-scene picks
   the scene; data-card / data-booked / data-sms / data-ok / data-row = "0" are the earlier moments. ---- */
.kp-card:has(> .vg-show), .kp-visual .kp-card:has(> .vg-show) { width: 100%; margin: 0 auto; }
.vg-show { --w: 280px; --sbk-red: #d20f17; --sbk-cream: #f7efe1; --sbk-black: #0b0908; display: grid; justify-items: center; gap: 14px; }
.sh-col { width: calc(var(--w) + 12px); }
/* the days */
.sh-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.sh-steps li { position: relative; padding-top: 18px; display: grid; font-size: 13px; line-height: 1.4; color: var(--ink-2); transition: color .4s, opacity .4s; }
.sh-steps b { font-size: 15px; font-weight: 600; color: var(--ink); }
.sh-steps li::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 99px; background: var(--vg-accent); transition: background-color .4s, box-shadow .4s; }
.sh-steps li::after { content: ""; position: absolute; top: 4px; right: calc(50% + 9px); width: calc(100% - 18px); height: 2px; border-radius: 2px; background: var(--vg-accent); transition: background-color .4s; }
.sh-steps li:first-child::after { display: none; }
.sh-steps li:last-child::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vg-accent) 22%, transparent); }
.vg-show[data-scene="1"] .sh-steps li:nth-child(n+2), .vg-show[data-scene="2"] .sh-steps li:nth-child(n+3) { opacity: .45; }
.vg-show[data-scene="1"] .sh-steps li:nth-child(n+2)::before, .vg-show[data-scene="2"] .sh-steps li:nth-child(n+3)::before,
.vg-show[data-scene="1"] .sh-steps li:nth-child(n+2)::after, .vg-show[data-scene="2"] .sh-steps li:nth-child(n+3)::after { background: var(--line-strong); }
.vg-show:is([data-scene="1"], [data-scene="2"]) .sh-steps li:last-child::before { box-shadow: none; }
.vg-show[data-scene="1"] .sh-steps li:nth-child(1)::before, .vg-show[data-scene="2"] .sh-steps li:nth-child(2)::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vg-accent) 22%, transparent); }
/* the phone and its three scenes */
.vg-show-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.vg-show-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.sh-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #fff; }
.sh-screen p { margin: 0; }
.sh-screen b { font-weight: 600; }
.sh-screen svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-scene { position: absolute; inset: 0; transition: opacity .55s ease; }
.sh-book, .sh-sms { opacity: 0; }
.vg-show[data-scene="1"] .sh-book, .vg-show[data-scene="2"] .sh-sms { opacity: 1; }
.vg-show:is([data-scene="1"], [data-scene="2"]) .sh-mail { opacity: 0; }
/* 1. the booking, in the restaurant's look */
.sh-book { background: var(--sbk-black); color: var(--sbk-cream); font-family: var(--font-display); }
.sh-site { position: absolute; inset: 0 0 auto; height: 36em; background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), var(--photo) 0 -24em / 100% auto; }
.sh-sheet { position: absolute; inset: 36em 0 0; padding: 4.6em 6em 0; border-top: .8em solid var(--sbk-red); background: var(--sbk-black); display: flex; flex-direction: column; }
.sh-title { font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Roboto Condensed", "Arial Narrow", var(--font-display); font-weight: 800 !important; font-size: 9.5em; line-height: 1.05; }
.sh-summary { margin-top: .3em; font-size: 4.6em; font-weight: 600; }
.sh-guar { margin-top: 3.6em !important; padding: 3em 3.4em 3.2em 12em; position: relative; display: grid; gap: .6em; box-shadow: inset 0 0 0 1px rgba(247,239,225,.35); border-radius: .8em; }
.sh-guar svg { position: absolute; left: 3em; top: 3.2em; width: 6.4em; height: 6.4em; color: var(--sbk-cream); }
.sh-guar b { font-size: 4.8em; }
.sh-guar span { font-size: 3.7em; opacity: .78; }
.sh-label { margin-top: .95em; font-size: 3.8em; font-weight: 600; opacity: .7; }
.sh-card { margin-top: 1.4em; height: 12em; padding: 0 3.4em; display: flex; align-items: center; gap: 3em; border-radius: .8em; box-shadow: inset 0 0 0 1px rgba(247,239,225,.4); transition: box-shadow .3s; }
.sh-card svg { width: 6.4em; height: 6.4em; flex: none; opacity: .8; }
.sh-card span { font-size: 4.6em; font-weight: 600; letter-spacing: .04em; white-space: nowrap; transition: opacity .35s; }
.sh-today { margin-top: 3em !important; display: flex; align-items: baseline; justify-content: space-between; }
.sh-today span { font-size: 4em; opacity: .78; }
.sh-today b { font-size: 6.4em; }
.sh-button { position: relative; display: grid; margin-top: .75em; padding: .62em 0; border-radius: .16em; background: var(--sbk-red); color: #fff; font-family: var(--font-display); font-size: 5em; font-weight: 700; text-align: center; transition: background-color .3s, box-shadow .3s, color .3s; }
.sh-button > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .4em; transition: opacity .3s; }
.sh-button > span:first-child { opacity: 0; }
.sh-button svg { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.sh-book .sh-button, .sh-mail .sh-button { background: none; color: var(--sbk-cream); box-shadow: inset 0 0 0 1.5px rgba(247,239,225,.55); }
.vg-show[data-card="0"] .sh-card span { opacity: 0; }
.vg-show:not([data-card="0"]) .sh-card { box-shadow: inset 0 0 0 1.5px var(--sbk-cream); }
.vg-show[data-booked="0"] .sh-book .sh-button, .vg-show[data-ok="0"] .sh-mail .sh-button { background: var(--sbk-red); color: #fff; box-shadow: none; }
.vg-show[data-booked="0"] .sh-book .sh-button > span:first-child, .vg-show[data-ok="0"] .sh-mail .sh-button > span:first-child { opacity: 1; }
.vg-show[data-booked="0"] .sh-book .sh-button > span:last-child, .vg-show[data-ok="0"] .sh-mail .sh-button > span:last-child { opacity: 0; }
/* 2. the day before: a lock screen and the text message */
.sh-sms { background: linear-gradient(165deg, #35505a, #14242c 55%, #232f45); color: #fff; text-align: center; }
.sh-date { display: block; margin-top: 4.4em; font-size: 5em; font-weight: 600; opacity: .9; }
.sh-clock { display: block; font-family: var(--font-display); font-size: 25em; font-weight: 600 !important; line-height: 1.05; letter-spacing: -.02em; }
.sh-note { position: absolute; left: 3.4em; right: 3.4em; top: 66em; padding: 3.4em 3.6em 3.8em 3.4em; border-radius: 5.4em; background: rgba(255,255,255,.9); color: #14181a; text-align: left; display: flex; align-items: flex-start; gap: 3em;
  box-shadow: 0 2em 6em rgba(0,0,0,.3); transition: opacity .4s ease-out, transform .6s var(--ease-out); }
.sh-note i { flex: none; width: 10.6em; height: 10.6em; border-radius: 2.6em; background: #34c759; display: grid; place-items: center; }
.sh-note svg { width: 7em; height: 7em; fill: #fff; stroke: none; }
.sh-note p { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.sh-note b { font-size: 4.4em; }
.sh-note small { font-size: 3.6em; color: #6b7275; }
.sh-note p > span { grid-column: 1 / -1; margin-top: .15em; font-size: 4.4em; line-height: 1.35; }
.vg-show[data-sms="0"] .sh-note { opacity: 0; transform: translateY(-10em) scale(.96); }
/* 3. the day itself: the email, and the guest confirms */
.sh-mail { padding: 13em 5em 0; background: #fff; color: #14181a; }
.sh-bar { display: flex; align-items: baseline; justify-content: space-between; font-size: 4.2em; color: #1a73e8; }
.sh-bar small { font-size: .9em; color: #6b7275; }
.sh-from { margin-top: 4.6em !important; display: grid; grid-template-columns: auto 1fr; column-gap: 3em; align-items: center; }
.sh-from i { grid-row: span 2; width: 1.56em; height: 1.56em; font-size: 6.4em; border-radius: .16em; background: var(--sbk-red); color: var(--sbk-cream); display: grid; place-items: center; font-style: normal; font-family: Impact, "Avenir Next Condensed", "Arial Narrow", sans-serif; }
.sh-from b { font-size: 4.6em; align-self: end; }
.sh-from small { font-size: 3.6em; color: #6b7275; align-self: start; }
.sh-subject { display: block; margin-top: .65em; font-family: var(--font-display); font-size: 6.6em; line-height: 1.25; }
.sh-banner { display: block; height: 30em; margin: -6em -6em 5em; border-bottom: .8em solid var(--sbk-red); background: var(--photo) 0 -20.5em / 100% auto; }
.sh-letter { margin-top: 4.4em; padding: 6em 6em 6.4em; border-radius: 1.2em; overflow: hidden; background: var(--sbk-black); color: var(--sbk-cream); font-family: var(--font-display); display: grid; }
.sh-letter .sh-title { font-size: 11em; }
.sh-letter > span:not(.sh-button) { margin-top: .4em; font-size: 4.6em; font-weight: 600; opacity: .85; }
.sh-letter .sh-button { margin-top: 1.1em; }
.sh-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(255,255,255,.45); box-shadow: 0 0 0 1.2em rgba(120,120,120,.22); opacity: 0; pointer-events: none; }
.sh-tap.on { animation: vd-tap .6s ease-out; }
/* the restaurant's side: the table in its book, and its two marks */
.sh-shop {
  display: flex; align-items: center; gap: 12px; width: min(100%, 300px); padding: 12px 16px 13px 12px; border-radius: 22px;
  background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05);
  transition: opacity .4s ease-out, transform .6s var(--ease-out);
}
.sh-shop .vg-app { width: 38px; height: 38px; border-radius: 10px; align-self: flex-start; margin-top: 3px; }
.sh-shop .vg-app .mark { width: 27px; }
.sh-shop p { margin: 0; display: grid; font-size: 15px; line-height: 1.4; min-width: 0; }
.sh-shop small { font-size: 13px; color: var(--ink-3); }
.sh-shop b { font-weight: 600; white-space: nowrap; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sh-tags em { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 99px; font-style: normal; font-size: 13px; font-weight: 600; background: var(--teal-soft); color: var(--teal); white-space: nowrap; transition: background-color .4s, color .4s, transform .5s var(--ease-out); }
.sh-tags em::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.sh-tags em:last-child { background: var(--basil-soft); color: var(--basil); }
.vg-show[data-row="0"] .sh-shop { opacity: 0; transform: translateY(14px) scale(.95); }
.vg-show[data-ok="0"] .sh-tags em:last-child { background: #eef0ef; color: var(--ink-3); }
.vg-show.is-reset * { transition: none !important; }
@media (min-width: 431px) {
  .vg-show { --w: 300px; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0; }
  .sh-shop { width: auto; max-width: 290px; margin-left: -8px; position: relative; z-index: 1; align-self: end; margin-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .vg-show * { transition: none !important; } .sh-tap.on { animation: none; } }

/* ---- Reservations, service: the tables on a waiter's phone, by number (no floor plan). Free tiles are outlined in green,
   booked ones sunny with their time, seated ones teal with the party. The screen is sized in em of its width / 100.
   data-bar shows the bar at the foot (a party arriving, or "pick a free table" with the free tiles glowing); the default
   (no script, reduced motion) is the end with no bar. ---- */
.kp-card:has(> .vg-floor), .kp-visual .kp-card:has(> .vg-floor) { width: 100%; margin: 0 auto; }
.vg-floor { --w: 280px; display: grid; justify-items: center; }
.tf-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.tf-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.tf-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; padding: 13em 5em 0; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #f6f5f1; color: var(--ink); }
.tf-screen p { margin: 0; }
.tf-head { display: flex; align-items: center; gap: 3em; }
.tf-head .vg-app { width: 10em; height: 10em; border-radius: 2.6em; flex: none; }
.tf-head .vg-app .mark { width: 7em; }
.tf-head > span:last-child { display: grid; }
.tf-head b { font-family: var(--font-display); font-size: 6.2em; font-weight: 700; line-height: 1.15; }
.tf-head small { font-size: 3.8em; color: var(--ink-3); }
.tf-counts { margin-top: 3.6em !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
.tf-c { display: flex; align-items: baseline; justify-content: center; gap: .4em; padding: .5em .4em .55em; border-radius: .7em; background: #fff; font-size: 3.6em; color: var(--ink-2); box-shadow: 0 0 0 1px rgba(15,42,48,.07); white-space: nowrap; }
.tf-c b { font-family: var(--font-display); font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.tf-c-free b { color: var(--basil); }
.tf-c-booked b { color: var(--sunny-deep); }
.tf-c-seated b { color: var(--teal); }
.tf-grid { list-style: none; margin: 3.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; }
.tf-t { position: relative; height: 17em; padding: 2.2em 2.4em; border-radius: 2.6em; display: flex; flex-direction: column; justify-content: space-between;
  background: #fff; box-shadow: inset 0 0 0 .55em var(--basil); transition: background-color .45s, box-shadow .45s, opacity .35s, color .45s; }
.tf-t b { font-family: var(--font-display); font-size: 5.6em; font-weight: 700; line-height: 1; }
.tf-t span { font-size: 3.4em; font-weight: 600; color: var(--basil); white-space: nowrap; transition: color .45s; }
.tf-t[data-s="booked"] { background: var(--sunny-soft); box-shadow: none; }
.tf-t[data-s="booked"] span { color: var(--sunny-deep); }
.tf-t[data-s="seated"] { background: var(--teal); box-shadow: none; color: #fff; }
.tf-t[data-s="seated"] span { color: rgba(255,255,255,.85); }
.tf-t.hit { animation: tf-hit .7s var(--ease-out); }
@keyframes tf-hit { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
.vg-floor[data-bar="pick"] .tf-t:not([data-s="free"]) { opacity: .32; }
.vg-floor[data-bar="pick"] .tf-t[data-s="free"] { animation: tf-glow 1s ease-in-out infinite alternate; }
@keyframes tf-glow { from { box-shadow: inset 0 0 0 .55em var(--basil), 0 0 0 0 color-mix(in srgb, var(--basil) 40%, transparent); }
  to { box-shadow: inset 0 0 0 .55em var(--basil), 0 0 0 1.6em color-mix(in srgb, var(--basil) 0%, transparent); } }
.tf-bar { position: absolute; left: 4em; right: 4em; bottom: 6em; min-height: 19em; padding: 3em 3.4em 3em 3.4em; border-radius: 4.4em; background: #fff; display: flex; align-items: center; gap: 3em;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3em 7em -2em rgba(15,42,48,.35); opacity: 0; transform: translateY(6em); transition: opacity .35s ease-out, transform .5s var(--ease-out); }
.tf-bar p { flex: 1; min-width: 0; display: grid; }
.tf-bar b { font-size: 4.8em; font-weight: 600; white-space: nowrap; }
.tf-bar small { font-size: 3.6em; color: var(--ink-3); white-space: nowrap; }
.tf-btn { flex: none; padding: .55em 1.3em; border-radius: 99em; background: var(--teal); color: #fff; font-size: 4.4em; font-weight: 600; transition: opacity .3s; }
.vg-floor:not([data-bar="off"]) .tf-bar { opacity: 1; transform: none; }
.tf-ico { flex: none; width: 10em; height: 10em; border-radius: 99em; display: none; place-items: center; background: var(--teal); color: #fff; }
.tf-ico svg { width: 6em; height: 6em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vg-floor:is([data-bar="done"], [data-bar="freed"]) .tf-ico { display: grid; }
.vg-floor[data-bar="freed"] .tf-ico { background: #fff; box-shadow: inset 0 0 0 .55em var(--basil); }
.vg-floor[data-bar="freed"] .tf-ico svg { display: none; }
.vg-floor:is([data-bar="done"], [data-bar="freed"]) .tf-btn { display: none; }
.vg-floor[data-bar="pick"] .tf-btn { opacity: 0; }
.tf-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(120,120,120,.28); box-shadow: 0 0 0 1.2em rgba(120,120,120,.16); opacity: 0; pointer-events: none; }
.tf-tap.on { animation: vd-tap .6s ease-out; }
.vg-floor.is-reset * { transition: none !important; animation: none !important; }
/* over the photo of the waiter taking the guests in: the phone rests on the lower part of the picture */
.kp-photo + .kp-card:has(> .vg-floor) { margin-top: -110px; }
@media (min-width: 431px) {
  .vg-floor { --w: 300px; }
  .kp-photo + .kp-card:has(> .vg-floor) { margin-top: -160px; }
  .kp-photo + .kp-card:has(> .vg-floor) .vg-floor { justify-items: end; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) { .vg-floor * { transition: none !important; animation: none !important; } }

/* ---- Reservations, the waitlist: the guest's phone (BULMAT's booking sheet: black, cream condensed capitals, square red
   buttons) and the restaurant's book beside it. Sized in em of the screen's width / 100. The default (no script, reduced
   motion) is the end: booked, the cancelled row and the row taken again both in the book. data-joined / data-cancel /
   data-done = "0" are the earlier moments; data-notif = "1" shows the notification. ---- */
.kp-card:has(> .vg-wait), .kp-visual .kp-card:has(> .vg-wait) { width: 100%; margin: 0 auto; }
.vg-wait { --w: 280px; --wl-red: #d20f17; --wl-cream: #f7efe1; --wl-black: #0b0908; display: grid; justify-items: center; gap: 14px; }
.wl-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: var(--wl-black);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.wl-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.wl-screen { position: relative; width: var(--w); aspect-ratio: 25 / 34; overflow: hidden; font-size: calc(var(--w) / 100); line-height: 1.3; text-align: left; background: var(--wl-black); color: var(--wl-cream); font-family: var(--font-display); }
.wl-screen p { margin: 0; }
.wl-screen svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wl-site { position: absolute; inset: 0 0 auto; height: 36em; background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), var(--photo) 0 -24em / 100% auto; }
.wl-sheet { position: absolute; inset: 36em 0 0; padding: 5em 6em 0; border-top: .8em solid var(--wl-red); display: flex; flex-direction: column; }
.wl-title { font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Roboto Condensed", "Arial Narrow", var(--font-display); font-weight: 800; font-size: 9.5em; line-height: 1.05; }
.wl-summary { margin-top: .3em; font-size: 4.6em; font-weight: 600; }
.wl-slots { list-style: none; margin: 5em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4em; }
.wl-slots li { height: 13em; border-radius: .8em; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 1px rgba(247,239,225,.22); color: rgba(247,239,225,.38); transition: background-color .4s, color .4s, box-shadow .4s; }
.wl-slots b { font-size: 4.6em; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; }
.wl-slots small { font-size: 3.2em; }
.wl-slots li.pick { box-shadow: inset 0 0 0 1.5px rgba(247,239,225,.6); color: rgba(247,239,225,.7); }
.vg-wait:not([data-done="0"]) .wl-slots li.pick { background: var(--wl-red); box-shadow: none; color: #fff; }
.vg-wait:not([data-done="0"]) .wl-slots li.pick b { text-decoration: none; }
.vg-wait:not([data-done="0"]) .wl-slots li.pick small { visibility: hidden; }
.wl-foot { position: relative; margin-top: 5em; min-height: 26em; }
.wl-ask, .wl-ok { position: absolute; inset: 0 0 auto; transition: opacity .45s, transform .5s var(--ease-out); }
.wl-line { font-size: 4.4em; opacity: .85; }
.wl-btn { position: relative; display: grid; margin-top: 3.2em; padding: 3em 0; border-radius: .8em; background: var(--wl-red); color: #fff; text-align: center; transition: background-color .3s, box-shadow .3s, color .3s; }
.wl-btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .4em; font-size: 4.8em; font-weight: 700; transition: opacity .3s; white-space: nowrap; }
.wl-btn > span:last-child { font-size: 4.2em; opacity: 0; }
.wl-btn svg { width: 1.1em; height: 1.1em; }
.vg-wait:not([data-joined="0"]) .wl-btn { background: none; color: var(--wl-cream); box-shadow: inset 0 0 0 1.5px rgba(247,239,225,.55); }
.vg-wait:not([data-joined="0"]) .wl-btn > span:first-child { opacity: 0; }
.vg-wait:not([data-joined="0"]) .wl-btn > span:last-child { opacity: 1; }
.wl-ok { display: flex; align-items: center; gap: 4em; padding-top: 1em; }
.wl-ok i { flex: none; width: 15em; height: 15em; border-radius: .8em; background: var(--wl-red); color: #fff; display: grid; place-items: center; }
.wl-ok i svg { width: 9em; height: 9em; }
.wl-ok p { display: grid; }
.wl-ok b { font-family: Impact, "Avenir Next Condensed", "HelveticaNeue-CondensedBlack", "Roboto Condensed", "Arial Narrow", var(--font-display); font-weight: 800; font-size: 8.4em; line-height: 1.1; }
.wl-ok span { font-size: 4.6em; font-weight: 600; opacity: .85; }
.vg-wait:not([data-done="0"]) .wl-ask, .vg-wait[data-done="0"] .wl-ok { opacity: 0; transform: translateY(3em); pointer-events: none; }
.wl-notif { position: absolute; z-index: 3; left: 3.4em; right: 3.4em; top: 9em; padding: 3.4em 3.6em 3.8em 3.4em; border-radius: 5.4em; background: rgba(255,255,255,.94); color: #14181a; display: flex; align-items: flex-start; gap: 3em; font-family: var(--font-text);
  box-shadow: 0 2em 6em rgba(0,0,0,.35); opacity: 0; transform: translateY(-14em); transition: opacity .4s ease-out, transform .6s var(--ease-out); }
.wl-notif i { flex: none; font-size: 6.4em; width: 1.66em; height: 1.66em; border-radius: .4em; background: var(--wl-red); color: var(--wl-cream); display: grid; place-items: center; font-style: normal;
  font-family: Impact, "Avenir Next Condensed", "Arial Narrow", sans-serif; }
.wl-notif p { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.wl-notif b { font-size: 4.4em; font-weight: 600; }
.wl-notif small { font-size: 3.6em; color: #6b7275; }
.wl-notif p > span { grid-column: 1 / -1; margin-top: .15em; font-size: 4.4em; line-height: 1.35; }
.vg-wait[data-notif="1"] .wl-notif { opacity: 1; transform: none; }
.wl-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(255,255,255,.45); box-shadow: 0 0 0 1.2em rgba(120,120,120,.22); opacity: 0; pointer-events: none; }
.wl-tap.on { animation: vd-tap .6s ease-out; }
/* the restaurant's book: the cancelled table, then the same time taken again from the waitlist */
.wl-shop { display: grid; gap: 10px; width: min(100%, 300px); padding: 14px 16px 16px; border-radius: 22px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); }
.wl-shop p { margin: 0; }
.wl-shop-head { display: flex; align-items: center; gap: 10px; }
.wl-shop-head .vg-app { width: 30px; height: 30px; border-radius: 8px; }
.wl-shop-head .vg-app .mark { width: 22px; }
.wl-shop-head small { font-size: 13px; color: var(--ink-3); }
.wl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; line-height: 1.4; transition: opacity .45s, transform .55s var(--ease-out); }
.wl-row b { font-weight: 600; white-space: nowrap; transition: color .4s; }
.wl-row em { position: relative; display: grid; font-style: normal; font-size: 13px; font-weight: 600; white-space: nowrap; }
.wl-row em, .wl-row em > span { padding: 2px 10px; border-radius: 99px; }
.wl-row-1 em { padding: 0; }
.wl-row-1 em > span { grid-area: 1 / 1; text-align: center; transition: opacity .35s; }
.wl-row-1 em > span:first-child { background: var(--teal-soft); color: var(--teal); opacity: 0; }
.wl-row-1 em > span:last-child { background: #eef0ef; color: var(--ink-3); }
.vg-wait:not([data-cancel="0"]) .wl-row-1 b { color: var(--ink-3); text-decoration: line-through; }
.vg-wait[data-cancel="0"] .wl-row-1 em > span:first-child { opacity: 1; }
.vg-wait[data-cancel="0"] .wl-row-1 em > span:last-child { opacity: 0; }
.wl-row-2 em { background: var(--basil-soft); color: var(--basil); }
.vg-wait[data-done="0"] .wl-row-2 { opacity: 0; transform: translateY(8px); }
.vg-wait.is-reset * { transition: none !important; }
@media (min-width: 431px) {
  .vg-wait { --w: 300px; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0; }
  .wl-shop { width: 260px; margin-left: -14px; position: relative; z-index: 1; align-self: end; margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .vg-wait * { transition: none !important; } .wl-tap.on { animation: none; } }

/* ---- The same scenes in other restaurants' looks, so the page is not all BULMAT (Bo, 2026-11-15). ---- */
/* Fiamma (Neapolitan pizzeria): cream ground, tomato red, retro serif italics, round buttons */
.vg-show--fiamma { --sbk-red: #b8221c; --sbk-cream: #4a1712; --sbk-black: #f7eddc; }
.vg-show--fiamma .sh-site { background: var(--photo) 0 -6em / 100% auto; }
.vg-show--fiamma .sh-banner { background: var(--photo) 0 -5em / 100% auto; }
.vg-show--fiamma .sh-title { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--sbk-red); }
.vg-show--fiamma .sh-guar { box-shadow: inset 0 0 0 1px rgba(74,23,18,.22); }
.vg-show--fiamma .sh-guar svg { color: var(--sbk-red); }
.vg-show--fiamma .sh-card { box-shadow: inset 0 0 0 1px rgba(74,23,18,.3); }
.vg-show--fiamma:not([data-card="0"]) .sh-card { box-shadow: inset 0 0 0 1.5px var(--sbk-red); }
.vg-show--fiamma .sh-button { border-radius: 99em; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.vg-show--fiamma .sh-book .sh-button, .vg-show--fiamma .sh-mail .sh-button { color: var(--sbk-red); box-shadow: inset 0 0 0 1.5px var(--sbk-red); }
.vg-show--fiamma[data-booked="0"] .sh-book .sh-button, .vg-show--fiamma[data-ok="0"] .sh-mail .sh-button { color: #fff; box-shadow: none; }
.vg-show--fiamma .sh-from i { color: #fff; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.vg-show--fiamma .sh-letter { box-shadow: inset 0 0 0 1px rgba(74,23,18,.12); }
/* Le Jardin (bistro): deep green, cream, brass, plain serif; its name set over a photo of the dining room */
.vg-wait--jardin { --wl-red: #c99b52; --wl-cream: #f3ead8; --wl-black: #1e3a2d; }
.vg-wait--jardin .wl-site { background: linear-gradient(rgba(14,30,22,.45), rgba(14,30,22,.82)), var(--photo) center / cover; }
.wl-site b { position: absolute; left: .55em; bottom: .4em; white-space: nowrap; text-shadow: 0 .2em 1.2em rgba(0,0,0,.45); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 11em; line-height: 1; color: var(--wl-cream); }
.vg-wait--jardin :is(.wl-title, .wl-ok b) { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.vg-wait--jardin .wl-btn { border-radius: 99em; color: var(--wl-black); }
.vg-wait--jardin:not([data-done="0"]) .wl-slots li.pick, .vg-wait--jardin .wl-ok i { color: var(--wl-black); }
.vg-wait--jardin .wl-ok i { border-radius: 99em; }
.vg-wait--jardin .wl-notif i { color: var(--wl-black); font-family: Georgia, "Times New Roman", serif; font-style: italic; }

/* ---- Reservations, after the visit (guest engagement): the guest's phone, the days passing above it, and the guest in
   the restaurant's list beside it. Three scenes sized in em of the screen's width / 100: the email inviting a Google review
   and the review posted, the loyalty card in the wallet getting a stamp, a message on the lock screen. In hoji's look:
   cream, matcha green, a light serif. The default (no script, reduced motion): the review posted, all marks lit.
   data-scene picks the scene; data-review / data-stars / data-posted / data-stamp / data-note = "0" and data-tags = 0..2
   are the earlier moments. ---- */
.kp-card:has(> .vg-back), .kp-visual .kp-card:has(> .vg-back) { width: 100%; margin: 0 auto; }
.vg-back { --w: 280px; --gb-green: #5d6c2c; --gb-cream: #f6efe3; --gb-ink: #2e321f; --gb-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; display: grid; justify-items: center; gap: 14px; }
.gb-col { width: calc(var(--w) + 12px); }
.gb-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.gb-steps li { position: relative; padding-top: 18px; display: grid; font-size: 13px; line-height: 1.4; color: var(--ink-2); transition: opacity .4s; }
.gb-steps b { font-size: 15px; font-weight: 600; color: var(--ink); }
.gb-steps li::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 99px; background: var(--vg-accent); transition: background-color .4s, box-shadow .4s; }
.gb-steps li::after { content: ""; position: absolute; top: 4px; right: calc(50% + 9px); width: calc(100% - 18px); height: 2px; border-radius: 2px; background: var(--vg-accent); transition: background-color .4s; }
.gb-steps li:first-child::after { display: none; }
.vg-back:not([data-scene]) .gb-steps li:first-child::before, .vg-back[data-scene="1"] .gb-steps li:nth-child(1)::before,
.vg-back[data-scene="2"] .gb-steps li:nth-child(2)::before, .vg-back[data-scene="3"] .gb-steps li:nth-child(3)::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vg-accent) 22%, transparent); }
.vg-back:not([data-scene]) .gb-steps li:nth-child(n+2), .vg-back[data-scene="1"] .gb-steps li:nth-child(n+2), .vg-back[data-scene="2"] .gb-steps li:nth-child(n+3) { opacity: .45; }
.vg-back:not([data-scene]) .gb-steps li:nth-child(n+2)::before, .vg-back:not([data-scene]) .gb-steps li:nth-child(n+2)::after,
.vg-back[data-scene="1"] .gb-steps li:nth-child(n+2)::before, .vg-back[data-scene="1"] .gb-steps li:nth-child(n+2)::after,
.vg-back[data-scene="2"] .gb-steps li:nth-child(n+3)::before, .vg-back[data-scene="2"] .gb-steps li:nth-child(n+3)::after { background: var(--line-strong); }
.gb-phone { position: relative; width: calc(var(--w) + 12px); border: 6px solid #14181a; border-radius: 34px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 60px -26px rgba(0,0,0,.55); }
.gb-phone::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 28%; height: 11px; margin-left: -14%; border-radius: 99px; background: #14181a; }
.gb-screen { position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden; font-size: calc(var(--w) / 100); font-family: var(--font-text); line-height: 1.3; text-align: left; background: #fff; color: #14181a; }
.gb-screen p { margin: 0; }
.gb-screen b { font-weight: 600; }
.gb-screen svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gb-scene { position: absolute; inset: 0; transition: opacity .55s ease; }
.gb-wallet, .gb-lock { opacity: 0; }
.vg-back[data-scene="2"] .gb-wallet, .vg-back[data-scene="3"] .gb-lock { opacity: 1; }
.vg-back:is([data-scene="2"], [data-scene="3"]) .gb-mail { opacity: 0; }
/* 1. the email the next day, and the review on Google */
.gb-mail { padding: 13em 5em 0; }
.gb-bar { display: flex; align-items: baseline; justify-content: space-between; font-size: 4.2em; color: #1a73e8; }
.gb-bar small { font-size: .9em; color: #6b7275; }
.gb-from { margin-top: 4.4em !important; display: grid; grid-template-columns: auto 1fr; column-gap: 3em; align-items: center; }
.gb-from i { grid-row: span 2; font-size: 6.4em; width: 1.56em; height: 1.56em; border-radius: 99em; background: var(--gb-green); color: var(--gb-cream); display: grid; place-items: center; font-style: italic; font-family: var(--gb-serif); }
.gb-from b { font-size: 4.6em; align-self: end; }
.gb-from small { font-size: 3.6em; color: #6b7275; align-self: start; }
.gb-subject { display: block; margin-top: .6em; font-family: var(--font-display); font-size: 6.2em; line-height: 1.25; }
.gb-letter { margin-top: 4em; padding: 0 6em 6em; border-radius: 1.6em; overflow: hidden; background: var(--gb-cream); color: var(--gb-ink); display: grid; justify-items: center; text-align: center; }
.gb-banner { display: block; justify-self: stretch; height: 26em; margin: 0 -6em 4.4em; background: var(--photo) 0 -11.5em / 100% auto; }
.gb-letter > span:not(.gb-button) { font-size: 4.6em; line-height: 1.4; }
.gb-button { margin-top: .9em; padding: .6em 1.4em; border-radius: 99em; background: var(--gb-green); color: #fff; font-size: 4.4em; font-weight: 600; }
.gb-google { position: absolute; left: 4em; right: 4em; bottom: 5em; padding: 4em 4.4em 4.4em; border-radius: 4em; background: #fff; display: grid; gap: 1.6em;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3em 8em -2em rgba(15,42,48,.4); transition: opacity .4s ease-out, transform .55s var(--ease-out); }
.gb-g-head { display: flex; align-items: center; gap: 3em; }
.gb-g-head img { width: 8em; height: 8em; }
.gb-g-head span { display: grid; }
.gb-g-head b { font-size: 4.6em; }
.gb-g-head small { font-size: 3.6em; color: #6b7275; }
.gb-stars { display: flex; gap: 1.2em; }
.gb-stars svg { width: 8em; height: 8em; fill: #fbbc04; stroke: none; transition: fill .2s; }
.gb-stars svg:nth-child(2) { transition-delay: .15s; } .gb-stars svg:nth-child(3) { transition-delay: .3s; } .gb-stars svg:nth-child(4) { transition-delay: .45s; } .gb-stars svg:nth-child(5) { transition-delay: .6s; }
.gb-quote { font-size: 4.4em; line-height: 1.4; transition: opacity .4s .5s; }
.gb-done { display: flex; align-items: center; gap: .4em; font-size: 4em; font-weight: 600; color: #188038; transition: opacity .35s; }
.gb-done svg { width: 1.1em; height: 1.1em; }
.vg-back[data-review="0"] .gb-google { opacity: 0; transform: translateY(12em); }
.vg-back[data-stars="0"] .gb-stars svg { fill: #e3e5e8; transition-delay: 0s; }
.vg-back[data-stars="0"] .gb-quote { opacity: 0; transition-delay: 0s; }
.vg-back[data-posted="0"] .gb-done { opacity: 0; }
/* 2. the loyalty card in the wallet, a stamp on the next visit */
.gb-wallet { padding: 14em 5em 0; background: #f2f2f6; }
.gb-wallet-head { font-family: var(--font-display); font-size: 8em; font-weight: 700; }
.gb-card { margin-top: 5em; padding: 6em 6em 6.4em; border-radius: 4em; background: var(--gb-green); color: var(--gb-cream); box-shadow: 0 2em 6em -2em rgba(40,50,20,.5); }
.gb-card-top { display: flex; align-items: baseline; justify-content: space-between; }
.gb-card-top b { font-family: var(--gb-serif); font-style: italic; font-weight: 500 !important; font-size: 13em; line-height: .9; }
.gb-card-top small { font-size: 4em; opacity: .85; }
.gb-stamps { list-style: none; margin: 7em 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.4em; justify-items: center; }
.gb-stamps li { width: 13em; height: 13em; border-radius: 99em; box-shadow: inset 0 0 0 .5em rgba(246,239,227,.55); transition: background-color .3s, box-shadow .3s; }
.gb-stamps li.on, .gb-stamps li.next { background: var(--gb-cream); box-shadow: none; }
.vg-back[data-stamp="0"] .gb-stamps li.next { background: none; box-shadow: inset 0 0 0 .5em rgba(246,239,227,.55); }
.vg-back[data-stamp="1"] .gb-stamps li.next { animation: gb-stamp .6s var(--ease-out); }
@keyframes gb-stamp { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.gb-card-note { margin-top: 1.5em !important; font-size: 4.2em; opacity: .9; }
/* 3. weeks later, a message on the lock screen */
.gb-lock { background: linear-gradient(165deg, #6f7d48, #2f3a1d 60%, #222a18); color: #fff; text-align: center; }
.gb-date { display: block; margin-top: 3.4em; font-size: 4.8em; font-weight: 600; opacity: .9; }
.gb-clock { display: block; font-family: var(--font-display); font-size: 25em; font-weight: 600 !important; line-height: 1.05; letter-spacing: -.02em; }
.gb-note { position: absolute; left: 3.4em; right: 3.4em; top: 70em; padding: 3.4em 3.6em 3.8em 3.4em; border-radius: 5.4em; background: rgba(255,255,255,.92); color: #14181a; text-align: left; display: flex; align-items: flex-start; gap: 3em;
  box-shadow: 0 2em 6em rgba(0,0,0,.3); transition: opacity .4s ease-out, transform .6s var(--ease-out); }
.gb-note i { flex: none; font-size: 6.4em; width: 1.66em; height: 1.66em; border-radius: .4em; background: var(--gb-green); color: var(--gb-cream); display: grid; place-items: center; font-style: italic; font-family: var(--gb-serif); }
.gb-note p { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.gb-note b { font-size: 4.4em; }
.gb-note small { font-size: 3.6em; color: #6b7275; }
.gb-note p > span { grid-column: 1 / -1; margin-top: .15em; font-size: 4.4em; line-height: 1.35; }
.vg-back[data-note="0"] .gb-note { opacity: 0; transform: translateY(-10em) scale(.96); }
.gb-tap { position: absolute; z-index: 4; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 99em; background: rgba(255,255,255,.45); box-shadow: 0 0 0 1.2em rgba(120,120,120,.22); opacity: 0; pointer-events: none; }
.gb-tap.on { animation: vd-tap .6s ease-out; }
/* the restaurant's side: the guest in its list, a mark at each step */
.gb-shop { display: flex; align-items: center; gap: 12px; width: min(100%, 300px); padding: 12px 16px 13px 12px; border-radius: 22px; background: var(--white); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 22px 40px -22px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); }
.gb-shop .vg-app { width: 38px; height: 38px; border-radius: 10px; align-self: flex-start; margin-top: 3px; }
.gb-shop .vg-app .mark { width: 27px; }
.gb-shop p { margin: 0; display: grid; font-size: 15px; line-height: 1.4; min-width: 0; }
.gb-shop small { font-size: 13px; color: var(--ink-3); }
.gb-shop b { font-weight: 600; white-space: nowrap; }
.gb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gb-tags em { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 99px; font-style: normal; font-size: 13px; font-weight: 600; background: var(--basil-soft); color: var(--basil); white-space: nowrap; transition: background-color .4s, color .4s; }
.gb-tags em::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.vg-back[data-tags="0"] .gb-tags em, .vg-back[data-tags="1"] .gb-tags em:nth-child(n+2), .vg-back[data-tags="2"] .gb-tags em:nth-child(n+3) { background: #eef0ef; color: var(--ink-3); }
.vg-back.is-reset * { transition: none !important; animation: none !important; }
@media (min-width: 431px) {
  .vg-back { --w: 300px; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0; }
  .gb-shop { width: auto; max-width: 280px; margin-left: -12px; position: relative; z-index: 1; align-self: end; margin-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .vg-back * { transition: none !important; animation: none !important; } }