/* styles.css */
@font-face {
  font-family: Readex;
  src: url("/experience/assets/ReadexPro.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Alexandria;
  src: url("/experience/assets/Alexandria.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --navy: #102d4f;
  --blue: #1769cf;
  --gold: #c6a36a;
  --bg: #f8f7f4;
  --soft: #e8edf3;
  --muted: #657487;
  --line: #dfe5ec;
  --radius: 24px;
  --shadow: 0 16px 48px #102d4f0a;
  --motion: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: Readex, system-ui, sans-serif;
  color: var(--navy);
  background: var(--bg);
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button {
  border: 0;
  background: none;
}
input,
select,
textarea {
  min-width: 0;
}
img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: Alexandria, Readex, sans-serif;
  line-height: 1.5;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(32px, 4.1vw, 57px);
  font-weight: 650;
  line-height: 1.65;
}
h1 span {
  color: var(--blue);
}
h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
}
h3 {
  font-size: 21px;
  font-weight: 600;
}
p {
  line-height: 1.95;
  color: var(--muted);
  overflow-wrap: anywhere;
}
small {
  display: block;
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}
b {
  font-weight: 600;
}
ul,
ol {
  line-height: 2;
}
::selection {
  background: #1769cf25;
}
hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 20px 0;
}
:focus-visible {
  outline: 3px solid #1769cf;
  outline-offset: 4px;
}
#main:focus {
  outline: none;
}
.skip {
  position: fixed;
  top: -80px;
  right: 20px;
  background: var(--navy);
  color: white;
  padding: 15px;
  z-index: 100;
}
.skip:focus {
  top: 8px;
}
.wrap {
  width: min(1220px, calc(100% - 80px));
  margin-inline: auto;
}
.topbar {
  min-height: 92px;
  padding: 15px max(40px, calc((100vw - 1220px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #102d4f0a;
  background: #f8f7f4ed;
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand img {
  width: 112px;
  height: 44px;
  object-fit: contain;
}
.brand span {
  font-size: 10px;
  letter-spacing: 2px;
  border-right: 1px solid var(--line);
  padding-right: 16px;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
}
.topbar nav a {
  padding-block: 10px;
  position: relative;
  color: var(--muted);
}
.topbar nav a.active {
  color: var(--navy);
}
.topbar nav a.active:after {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--blue);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 50%;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: var(--blue);
  color: white;
  border: 1px solid transparent;
  min-height: 52px;
  padding: 13px 23px;
  border-radius: 13px;
  font-weight: 500;
  font-size: 13px;
  transition:
    transform var(--motion),
    background var(--motion),
    box-shadow var(--motion);
}
.button:hover {
  box-shadow: 0 8px 24px #1769cf20;
  background: #1159b5;
  transform: translateY(-2px);
}
.button:active,
.add:active {
  transform: scale(0.97);
}
.button.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
}
.button.ghost:hover {
  background: #e8edf3;
}
.button.small {
  min-height: 40px;
  padding: 9px 15px;
  font-size: 11px;
  gap: 10px;
}
.button.full {
  width: 100%;
}
.button.danger,
.danger {
  color: #a63131;
}
.icon-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  line-height: 2;
  color: var(--muted);
  margin-bottom: 14px;
}
.eyebrow i,
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #458d6e;
  border-radius: 50%;
  margin-inline-end: 8px;
}
.lead {
  font-size: 15px;
  line-height: 2.2;
  max-width: 540px;
}
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 50px;
  min-height: 670px;
  align-items: center;
  padding-block: 65px;
}
.hero-copy {
  animation: rise 0.55s ease both;
}
.hero h1 {
  max-width: 620px;
  margin-bottom: 22px;
}
.hero h1 span {
  display: block;
}
.hero .lead {
  margin-bottom: 30px;
}
.hero-facts {
  display: flex;
  gap: 20px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 10px;
}
.hero-facts span:before {
  content: "✓";
  color: #207153;
  margin-inline-end: 7px;
}
.hero-stage {
  height: 480px;
  position: relative;
  isolation: isolate;
  animation: rise 0.7s 0.1s ease both;
}
.stage-grid {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background:
    radial-gradient(ellipse at 20% 60%, #dce8f5 0, transparent 65%),
    radial-gradient(ellipse at 80% 10%, #ece8de 0, transparent 60%);
  z-index: -1;
}
.mini-dashboard {
  position: absolute;
  width: 390px;
  height: 285px;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 18px;
  top: 90px;
  left: 0;
  box-shadow: 0 30px 60px #102d4f12;
  transform: perspective(1000px) rotateY(8deg) rotateZ(-3deg);
  padding: 20px;
}
.mini-top {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.mini-top i {
  font-style: normal;
  color: #207153;
}
.mini-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0;
  gap: 15px;
}
.mini-bars b {
  font-family: Alexandria;
  font-size: 16px;
  max-width: 115px;
}
.mini-bars span {
  color: var(--muted);
  font-size: 9px;
}
.mini-bars em {
  display: block;
  font-size: 22px;
  font-style: normal;
  color: var(--navy);
  margin-top: 7px;
}
.mini-food {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #f6f7f9;
  padding: 10px;
  border-radius: 10px;
}
.mini-food img {
  width: 54px;
  height: 48px;
  border-radius: 7px;
}
.mini-food span {
  font-size: 11px;
  flex: 1;
}
.mini-food b {
  display: block;
  font-size: 9px;
  margin-top: 7px;
}
.mini-food a {
  color: var(--blue);
  font-size: 22px;
}
.mini-chart {
  height: 34px;
  display: flex;
  gap: 8px;
  align-items: end;
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
}
.mini-chart i {
  flex: 1;
  background: #e2eaf4;
  border-radius: 3px;
  height: 40%;
}
.mini-chart i:nth-child(2n) {
  height: 75%;
  background: #bed1e9;
}
.mini-chart i:nth-child(3) {
  height: 100%;
  background: #1769cf;
}
.mini-phone {
  position: absolute;
  width: 176px;
  height: 350px;
  top: 40px;
  right: 0;
  padding: 11px;
  border-radius: 29px;
  background: white;
  border: 5px solid #102d4f;
  box-shadow: 15px 25px 50px #102d4f22;
  transform: rotate(6deg);
  text-align: center;
}
.phone-speaker {
  height: 6px;
  width: 48px;
  background: #102d4f;
  border-radius: 20px;
  margin: 0 auto 9px;
}
.mini-phone > img {
  width: 100%;
  height: 160px;
  border-radius: 15px;
}
.mini-phone > span {
  font-size: 8px;
  color: var(--muted);
  display: block;
  margin: 16px 0 4px;
}
.mini-phone > b {
  font-family: Alexandria;
  font-size: 19px;
}
.mini-phone small {
  font-size: 8px;
}
.phone-pill {
  margin-top: 15px;
  border-radius: 20px;
  background: var(--blue);
  padding: 9px;
  font-size: 8px;
  color: white;
}
.floating-note {
  position: absolute;
  bottom: 48px;
  right: 40px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 19px;
  font-size: 10px;
  box-shadow: var(--shadow);
}
.stage-label {
  position: absolute;
  bottom: 12px;
  left: 30px;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--muted);
}
.promise-bar {
  background: var(--navy);
  color: white;
  padding-block: 25px;
}
.promise-bar > .wrap {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  gap: 20px;
}
.promise-bar span:not(:first-child) {
  color: #b6c5d7;
  font-size: 10px;
}
.section {
  padding-block: 85px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.section-heading > p {
  font-size: 13px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.service-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform var(--motion),
    box-shadow var(--motion);
  animation: rise 0.5s calc(var(--i, 0) * 70ms) both;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.service-image {
  display: block;
  position: relative;
  height: 305px;
  overflow: hidden;
  background: #e8edf3;
}
.service-image > img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.service-card:hover .service-image img {
  transform: scale(1.025);
}
.service-image.dizly > img {
  object-position: center 45%;
}
.service-index {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #fffef6e8;
  backdrop-filter: blur(8px);
  color: var(--navy);
  border: 1px solid #ffffff66;
  border-radius: 7px;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 8px 12px;
}
.image-arrow {
  position: absolute;
  bottom: 18px;
  left: 18px;
  border-radius: 50%;
  background: #fff;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.service-body {
  padding: 30px;
}
.service-body .eyebrow {
  color: var(--blue);
  margin-bottom: 8px;
}
.service-body > p:not(.eyebrow) {
  font-size: 12px;
  margin-top: 12px;
  min-height: 48px;
}
.features {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 9px;
  color: var(--muted);
  margin: 22px 0;
}
.features li:before {
  content: "✓";
  color: #207153;
  margin-inline-end: 5px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: var(--blue);
  font-weight: 500;
  font-size: 12px;
  padding-block: 6px;
}
.service-body .text-link {
  border-top: 1px solid var(--line);
  width: 100%;
  padding-top: 20px;
}
.service-cta {
  background: #eef1f5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-block: 25px 70px;
}
.service-cta h2 {
  margin-bottom: 10px;
}
.service-cta p {
  font-size: 12px;
}
.service-cta .eyebrow {
  color: var(--blue);
}
.footer {
  border-top: 1px solid var(--line);
  padding: 35px max(40px, calc((100vw - 1220px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 10px;
  color: var(--muted);
}
.footer > span:first-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 1px;
}
.footer small {
  font-size: 9px;
  font-weight: 400;
  margin-top: 4px;
  letter-spacing: 0;
}
.footer a {
  color: var(--blue);
}
.workspace-top {
  padding-block: 36px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.workspace-top h1 {
  font-size: 30px;
}
.workspace-top > a {
  font-size: 11px;
  color: var(--muted);
}
.workspace-top .eyebrow {
  margin: 0;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 18px;
}
.field input,
.field textarea,
.field select,
.chat-composer input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fafbfc;
  padding: 13px 15px;
  border-radius: 11px;
  color: var(--navy);
  min-height: 47px;
  outline-offset: 2px;
}
.field textarea {
  resize: vertical;
  min-height: 90px;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
}
.field input[type="file"] {
  font-size: 11px;
  padding: 10px;
}
.search {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 15px;
  background: #fafbfc;
  min-height: 48px;
  margin-bottom: 20px;
}
.search > span {
  font-size: 25px;
  color: var(--muted);
}
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding-block: 12px;
  outline: 0;
  font-size: 12px;
  color: var(--navy);
  width: 100%;
}
.search:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow: auto;
  scrollbar-width: thin;
  padding-bottom: 10px;
  margin-block: 8px 24px;
}
.tabs > * {
  white-space: nowrap;
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 11px;
  color: var(--muted);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.tabs > .active {
  color: white;
  background: var(--navy);
  border-color: var(--navy);
}
.empty {
  text-align: center;
  padding: 50px 20px;
}
.empty > span {
  font-size: 40px;
  color: #8b9aac;
  display: block;
  margin-bottom: 12px;
}
.empty h3 {
  font-size: 19px;
}
.empty p {
  font-size: 12px;
  margin-top: 8px;
}
.welcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  min-height: 650px;
  padding-block: 65px;
}
.welcome .lead {
  margin-block: 20px;
}
.welcome form {
  max-width: 400px;
}
.welcome small {
  margin-top: 20px;
  max-width: 400px;
}
.welcome-visual > img {
  width: 100%;
  border-radius: 35px;
  box-shadow: var(--shadow);
  aspect-ratio: 1/1.1;
}
.restaurant {
  border-radius: 22px;
  background: white;
  border: 1px solid var(--line);
  overflow: hidden;
}
.restaurant-cover {
  height: 250px;
  position: relative;
  background: #dfe5ec;
}
.restaurant-cover > img {
  width: 100%;
  height: 100%;
}
.demo-badge {
  display: inline-flex;
  align-items: center;
  background: #fffefaef;
  color: var(--navy);
  padding: 7px 12px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  font-size: 10px;
}
.restaurant-cover .demo-badge {
  position: absolute;
  top: 20px;
  right: 20px;
}
.restaurant-info {
  position: relative;
  padding: 40px 32px 22px;
}
.restaurant-info > h1 {
  font-size: 32px;
  line-height: 1.5;
}
.restaurant-info > .eyebrow {
  margin-bottom: 5px;
  color: var(--menu-color);
}
.restaurant-info > p:not(.eyebrow) {
  font-size: 12px;
  max-width: 600px;
  margin-block: 10px;
}
.restaurant-logo {
  position: absolute;
  top: -38px;
  left: 32px;
  background: var(--menu-color);
  border: 5px solid white;
  color: white;
  border-radius: 22px;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  font-family: Alexandria;
  font-size: 35px;
  overflow: hidden;
}
.restaurant-logo img {
  width: 100%;
  height: 100%;
}
.restaurant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 10px;
  color: var(--muted);
  line-height: 2;
}
.menu-page {
  max-width: 1060px;
}
.menu-content {
  padding: 0 32px 32px;
}
.offer-banner {
  background: color-mix(in srgb, var(--menu-color) 8%, white);
  border-radius: 14px;
  padding: 22px;
  margin-block: 8px 24px;
  border-inline-start: 3px solid var(--menu-color);
}
.offer-banner span {
  font-size: 9px;
  color: var(--menu-color);
}
.offer-banner b {
  font-family: Alexandria;
  display: block;
  font-size: 20px;
  margin-block: 4px;
}
.offer-banner small {
  font-size: 9px;
}
.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.product {
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  background: white;
  animation: rise 0.22s ease both;
  min-width: 0;
}
.product > img {
  width: 100%;
  height: 155px;
  aspect-ratio: 1.5;
}
.product-copy {
  padding: 15px;
}
.product h3 {
  font-size: 14px;
  line-height: 1.7;
}
.product p {
  font-size: 10px;
  line-height: 1.9;
  margin-block: 7px;
  min-height: 38px;
}
.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.product-bottom b {
  font-size: 12px;
}
.add {
  min-height: 36px;
  min-width: 36px;
  background: var(--menu-color, var(--blue));
  color: white;
  border-radius: 11px;
  font-size: 23px;
  transition: transform var(--motion);
  padding: 2px 9px;
}
.add:disabled {
  background: #e8edf3;
  color: var(--muted);
  font-size: 9px;
}
.menu-cart {
  display: flex;
  width: 100%;
  position: sticky;
  bottom: 20px;
  margin-top: 25px;
  justify-content: space-between;
  background: var(--menu-color);
}
.dashboard {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;
  padding-bottom: 70px;
}
.editor {
  overflow: hidden;
}
.editor-tabs {
  padding: 16px 20px 10px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  gap: 5px;
}
.editor-tabs > * {
  flex: 1;
  justify-content: center;
}
.editor-body {
  padding: 28px;
}
.editor-body > h2 {
  font-size: 23px;
  margin-bottom: 22px;
}
.editor-body .section-heading h2 {
  font-size: 23px;
}
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
}
.upload {
  border: 1px dashed #b7c7dc;
  border-radius: 13px;
  background: #f6f9fc;
  padding: 16px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upload input {
  width: 100%;
  font-size: 9px;
}
.saved-note {
  color: #207153;
  font-size: 10px;
  margin-top: 20px;
}
.preview-column {
  position: sticky;
  top: 115px;
}
.preview-caption {
  font-size: 10px;
  text-align: center;
  margin-bottom: 20px;
}
.device-preview {
  width: min(100%, 390px);
  margin: auto;
  border: 7px solid #16344f;
  border-radius: 38px;
  padding: 8px;
  background: #f1f4f7;
  box-shadow: 0 22px 60px #102d4f12;
}
.device-preview #live-preview {
  max-height: 670px;
  overflow: auto;
  border-radius: 24px;
  scrollbar-width: thin;
}
.device-preview .restaurant {
  border: 0;
  border-radius: 24px;
}
.device-preview .restaurant-cover {
  height: 140px;
}
.device-preview .restaurant-info {
  padding: 30px 18px 18px;
}
.device-preview .restaurant-info > h1 {
  font-size: 23px;
}
.device-preview .restaurant-logo {
  width: 58px;
  height: 58px;
  font-size: 25px;
  left: 18px;
  top: -28px;
  border-radius: 16px;
}
.device-preview .menu-content {
  padding: 0 16px 20px;
}
.device-preview .offer-banner {
  padding: 15px;
}
.device-preview .offer-banner b {
  font-size: 15px;
}
.device-preview .offer-banner small {
  font-size: 8px;
}
.device-preview .tabs > * {
  font-size: 9px;
  padding: 8px 12px;
}
.device-preview .restaurant-meta {
  font-size: 8px;
  gap: 4px;
}
.device-preview .products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.device-preview .product > img {
  height: 90px;
}
.device-preview .product-copy {
  padding: 10px;
}
.device-preview .product h3 {
  font-size: 11px;
}
.device-preview .product p {
  font-size: 8px;
}
.device-preview .product-bottom b {
  font-size: 9px;
}
.device-preview .add {
  min-width: 28px;
  min-height: 28px;
  font-size: 18px;
}
.manage-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.manage-row:last-child {
  border-bottom: 0;
}
.manage-row > div:first-child {
  flex: 1;
}
.manage-row b {
  font-size: 12px;
}
.manage-row .actions {
  gap: 4px;
}
.manage-row .icon-button {
  min-width: 30px;
  width: 30px;
  height: 30px;
}
.manage-row .button.small {
  padding: 6px 8px;
  font-size: 9px;
  min-height: 32px;
}
.row-photo {
  width: 48px;
  height: 48px;
  border-radius: 9px;
}
.grow {
  flex: 1;
}
.mobile-switch {
  display: none;
}
.checkbox {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 18px;
}
.sandbox {
  display: flex;
  align-items: center;
  font-size: 11px;
  padding: 14px 18px;
  background: #edf3f9;
  border: 1px solid #d8e4f1;
  border-radius: 12px;
  line-height: 1.9;
  margin-bottom: 22px;
  color: #435f7f;
}
.pos-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(310px, 1fr);
  gap: 24px;
  align-items: start;
}
.pos-catalog,
.order-panel {
  padding: 25px;
}
.pos-catalog h2,
.order-panel h2 {
  font-size: 20px;
}
.pos-catalog .section-heading {
  margin-bottom: 20px;
}
.pos-catalog .section-heading > span {
  font-size: 10px;
  color: var(--muted);
}
.pos-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pos-products .product > img {
  height: 145px;
}
.order-panel {
  position: sticky;
  top: 115px;
}
.status-pill {
  background: #edf4ff;
  color: var(--blue);
  font-size: 8px;
  border-radius: 20px;
  padding: 6px 10px;
  white-space: nowrap;
}
.order-mode > * {
  flex: 1;
  justify-content: center;
  border-radius: 10px;
}
.order-lines {
  min-height: 160px;
  max-height: 380px;
  overflow: auto;
}
.cart-line {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.cart-line > div:first-child {
  flex: 1;
}
.cart-line small {
  font-size: 10px;
  margin-top: 4px;
}
.quantity {
  display: flex;
  align-items: center;
  gap: 9px;
}
.quantity button {
  min-width: 30px;
  min-height: 32px;
  background: #f0f3f7;
  border-radius: 8px;
  font-size: 17px;
}
.order-panel .field {
  margin-top: 22px;
}
.order-panel .field textarea {
  min-height: 66px;
}
.order-summary {
  font-size: 12px;
}
.order-summary > span {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  color: var(--muted);
}
.total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.total b {
  font-size: 22px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.order-panel > small {
  text-align: center;
  margin-top: 12px;
  font-size: 9px;
}
.receipt {
  text-align: center;
  color: #111;
  background: white;
}
.receipt h2 {
  font-size: 25px;
}
.receipt p {
  font-size: 10px;
}
.receipt table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  margin-top: 20px;
  font-size: 10px;
}
.receipt th,
.receipt td {
  padding: 12px 4px;
  border-bottom: 1px dashed #bbb;
}
.receipt .total {
  margin-top: 20px;
}
.history-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-align: right;
  flex-wrap: wrap;
}
.history-row span {
  color: var(--muted);
}
.portfolio-intro {
  padding-block: 65px;
}
.portfolio-intro > .lead {
  margin-block: 20px 35px;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 55px 30px;
  margin-top: 40px;
}
.portfolio-image {
  width: 100%;
  height: 300px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin-bottom: 25px;
}
.portfolio-image > img {
  height: 100%;
  width: 100%;
  transition: transform 0.5s;
}
.portfolio-image:hover > img {
  transform: scale(1.03);
}
.portfolio-image > span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  border-radius: 20px;
  background: white;
  padding: 10px 18px;
  font-size: 10px;
}
.portfolio-card h2 {
  font-size: 24px;
}
.portfolio-card > p:not(.eyebrow) {
  margin-block: 14px;
  font-size: 12px;
}
.project-screens {
  display: flex;
  gap: 20px;
  overflow: auto;
  margin-block: 20px;
}
.project-screens img {
  height: 250px;
  width: auto;
  max-width: 85%;
  border-radius: 16px;
}
.detail-photo {
  width: 100%;
  max-height: 250px;
  border-radius: 15px;
  margin-bottom: 20px;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  width: min(580px, calc(100% - 30px));
  max-height: 88dvh;
  color: var(--navy);
  background: white;
  box-shadow: 0 40px 100px #102d4f25;
  overflow: auto;
}
dialog[open] {
  animation: dialog-in 0.22s ease both;
}
dialog::backdrop {
  background: #0b203759;
  backdrop-filter: blur(5px);
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.dialog-head h2 {
  font-size: 20px;
}
dialog > p {
  font-size: 12px;
  margin-block: 15px;
}
dialog form > .button {
  margin-top: 8px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--navy);
  color: white;
  border-radius: 12px;
  padding: 14px 24px;
  z-index: 100;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  max-width: calc(100% - 28px);
  text-align: center;
  box-shadow: 0 8px 40px #102d4f22;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.skeleton-page {
  min-height: 70vh;
  padding-block: 65px;
  display: grid;
  gap: 25px;
}
.skeleton {
  height: 100px;
  border-radius: 20px;
  background: linear-gradient(100deg, #e8edf3 30%, #f1f4f7 45%, #e8edf3 60%);
  background-size: 220% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton:first-child {
  width: 65%;
}
.skeleton:last-child {
  height: 250px;
}
.subtle {
  font-size: 11px;
  color: var(--muted);
}
/* Dezly uses the current native source palette, typefaces and five destinations. */
.diz-intro {
  padding-block: 70px;
  min-height: 650px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 90px;
  align-items: center;
}
.diz-intro h1 span {
  color: #ce351c;
}
.diz-intro .lead {
  margin-block: 20px;
}
.diz-intro > div > p:not(.lead) {
  font-size: 11px;
}
.diz-login {
  padding: 35px;
  text-align: center;
}
.diz-logo {
  height: 95px;
  max-width: 180px;
  object-fit: contain;
  margin: 0 auto 20px;
}
.diz-login h2 {
  font-size: 25px;
}
.diz-login p {
  font-size: 11px;
  margin-block: 12px 24px;
}
.diz-login .field {
  text-align: right;
}
.diz-login .button {
  background: #171916;
  border-radius: 30px;
}
.diz-login > small {
  margin-top: 18px;
  font-size: 9px;
}
.diz-layout {
  display: grid;
  grid-template-columns: 1fr 580px;
  gap: 80px;
  align-items: start;
  padding-bottom: 65px;
}
.diz-guide {
  position: sticky;
  top: 135px;
  padding-top: 25px;
}
.diz-guide h2 {
  margin-block: 25px 20px;
  font-size: 35px;
}
.diz-guide > p {
  font-size: 13px;
  max-width: 380px;
}
.diz-guide > ol {
  color: var(--muted);
  font-size: 12px;
  padding-inline-start: 20px;
  margin-block: 25px;
}
.diz-guide .subtle {
  font-size: 10px;
  margin-block: 30px;
}
.diz-shell {
  background: white;
  border: 1px solid #dce4e6;
  border-radius: 30px;
  box-shadow: 0 18px 60px #102d4f0c;
  overflow: hidden;
  position: relative;
  --blue: #ce351c;
  --menu-color: #171916;
  color: #171916;
}
.diz-sandbox {
  background: #fceee9;
  color: #84351f;
  font-size: 9px;
  text-align: center;
  padding: 9px;
}
.diz-screen {
  min-height: 550px;
}
.diz-hero {
  height: 300px;
  position: relative;
  background: #171916;
  border-radius: 0 0 30px 30px;
  overflow: hidden;
  color: white;
}
.diz-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0.4);
}
.diz-hero-content {
  position: relative;
  padding: 20px 24px;
}
.diz-header-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.diz-header-actions .icon-button {
  background: #ffffff22;
  color: white;
  border-color: #ffffff33;
  margin-inline-end: auto;
}
.button.glass {
  background: #ffffff22;
  color: white;
  border-color: #ffffff44;
  backdrop-filter: blur(6px);
}
.diz-hero-content > p {
  color: #ffffffca;
  font-size: 12px;
}
.diz-hero-content > h2 {
  font-size: 29px;
  margin-block: 3px;
}
.location-action {
  color: white;
  font-size: 10px;
  padding: 10px 0;
}
.diz-hero .search {
  background: #ffffffee;
  margin-top: 6px;
  border: 0;
  border-radius: 26px;
}
.diz-body {
  padding: 25px;
}
.diz-body > h2 {
  font-size: 25px;
  margin-bottom: 20px;
}
.diz-body > h3 {
  font-size: 19px;
  margin-bottom: 15px;
}
.diz-body > .section-heading h3 {
  font-size: 17px;
}
.diz-body > p {
  font-size: 11px;
  margin-bottom: 20px;
}
.primary-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.primary-sections button {
  background: #f5f5f3;
  border-radius: 17px;
  padding: 7px;
  border: 1px solid transparent;
  min-width: 0;
}
.primary-sections button.active {
  border-color: #ce351c;
  background: #fff0e9;
}
.primary-sections img {
  height: 82px;
  width: 100%;
  object-fit: contain;
}
.primary-sections b {
  font-size: 10px;
  display: block;
  padding: 7px 0;
}
.stories {
  display: flex;
  gap: 14px;
  overflow: auto;
  margin-bottom: 25px;
  padding-block: 4px;
}
.stories > button {
  flex-shrink: 0;
  width: 65px;
  padding: 0;
}
.stories img {
  width: 57px;
  height: 57px;
  border: 2px solid #ce351c;
  padding: 3px;
  border-radius: 50%;
  margin: auto;
}
.stories .seen img {
  border-color: #bfc6c8;
}
.stories span {
  display: block;
  font-size: 8px;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merchant-card {
  display: flex;
  position: relative;
  margin-bottom: 16px;
  gap: 12px;
  border-bottom: 1px solid #e8edeb;
  padding-bottom: 17px;
}
.merchant-open {
  display: flex;
  gap: 13px;
  width: 100%;
  text-align: right;
  padding: 0;
  padding-inline-end: 26px;
  align-items: center;
}
.merchant-open img {
  width: 94px;
  height: 85px;
  border-radius: 15px;
}
.merchant-open h3 {
  font-size: 14px;
}
.merchant-open p {
  font-size: 10px;
  line-height: 1.9;
  margin-block: 5px;
}
.merchant-open small {
  font-size: 9px;
}
.favorite {
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 24px;
  color: #70776f;
  padding: 0;
}
.favorite.selected {
  color: #ce351c;
}
.diz-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff0e8;
  border-radius: 20px;
  padding: 25px;
  margin-block: 26px;
}
.diz-offer > div {
  flex: 1;
}
.diz-offer small {
  font-size: 8px;
  color: #a04c32;
}
.diz-offer h3 {
  font-size: 23px;
  margin-block: 10px;
}
.diz-offer img {
  width: 135px;
  height: 155px;
  border-radius: 20px;
}
.diz-offer .button {
  background: #171916;
  border-radius: 25px;
}
.demo-post {
  border: 1px solid #e8edeb;
  padding: 20px;
  border-radius: 18px;
}
.demo-post h3 {
  font-size: 16px;
}
.demo-post p {
  font-size: 10px;
  margin-bottom: 14px;
}
.demo-post .eyebrow {
  font-size: 9px;
}
.diz-nav {
  display: flex;
  position: sticky;
  bottom: 12px;
  margin: 16px 16px 14px;
  border-radius: 38px;
  border: 1.25px solid #ce351c3d;
  background: white;
  padding: 7px;
  box-shadow: 0 6px 24px #00000010;
  z-index: 5;
}
.diz-nav > button {
  flex: 1;
  min-width: 0;
  border-radius: 30px;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  min-height: 53px;
  transition: background var(--motion);
}
.diz-nav > button > span {
  font-size: 22px;
  line-height: 1.2;
}
.diz-nav small {
  font-size: 8px;
  color: #52636c;
}
.diz-nav .active {
  background: #ffe7df;
  color: #ce351c;
  flex: 1.45;
}
.diz-nav .active small {
  color: #a52c17;
}
.diz-cart {
  position: sticky;
  bottom: 98px;
  margin: 0 20px;
  width: calc(100% - 40px);
  background: #171916;
  border-radius: 30px;
  justify-content: space-between;
  z-index: 6;
}
.merchant-cover {
  height: 240px;
  position: relative;
}
.merchant-cover img {
  width: 100%;
  height: 100%;
}
.back-float {
  position: absolute;
  top: 16px;
  right: 16px;
}
.diz-body .section-heading > .favorite {
  position: static;
}
.diz-body .products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.diz-body .product > img {
  height: 135px;
}
.diz-body .product h3 {
  font-size: 12px;
}
.diz-body .product p {
  font-size: 9px;
}
.diz-body .product-bottom b {
  font-size: 11px;
}
.diz-body .add {
  border-radius: 50%;
  background: #171916;
}
.order-card {
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 18px 15px;
  text-align: right;
  width: 100%;
  margin-bottom: 15px;
}
.order-card > div {
  flex: 1;
}
.order-card b {
  font-size: 11px;
}
.order-card p {
  font-size: 10px;
  color: #ce351c;
  margin-top: 7px;
}
.order-card small {
  font-size: 8px;
  margin-top: 4px;
}
.order-icon {
  font-size: 26px;
  color: #ce351c;
}
.tracking-map {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dde6df;
}
.tracking-map svg {
  width: 100%;
  display: block;
}
.map-legend {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 10px;
  font-size: 8px;
  color: #52636c;
}
.tracking-metrics {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  text-align: center;
  gap: 10px;
}
.tracking-metrics b {
  font-size: 13px;
}
.tracking-metrics small {
  font-size: 8px;
  margin-top: 4px;
}
.milestones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 15px 0 25px;
  text-align: center;
  font-size: 8px;
  line-height: 1.8;
  color: #99a29e;
}
.milestones i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0f3f0;
  margin: 0 auto 8px;
  font-size: 12px;
  font-style: normal;
}
.milestones .done {
  color: #171916;
}
.milestones .done i {
  color: white;
  background: #ce351c;
}
.order-detail {
  padding: 20px;
  margin-block: 25px;
  box-shadow: none;
}
.order-detail h3 {
  font-size: 17px;
  margin-bottom: 15px;
}
.order-detail p {
  font-size: 10px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  padding-block: 10px;
}
.chat-title {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.chat-title b {
  font-size: 12px;
}
.chat-title small {
  font-size: 8px;
  margin-top: 4px;
}
.chat-messages {
  padding: 20px;
  min-height: 400px;
  max-height: 520px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f5f4f0;
}
.bubble {
  background: #fff;
  border: 1px solid #e8edeb;
  border-radius: 18px 18px 18px 3px;
  padding: 13px;
  max-width: 85%;
  align-self: flex-end;
  animation: rise 0.22s ease both;
}
.bubble p {
  font-size: 11px;
  color: #171916;
}
.bubble small {
  font-size: 7px;
  margin-top: 6px;
}
.bubble.outgoing {
  background: #ffe7df;
  align-self: flex-start;
  border-radius: 18px 18px 3px 18px;
}
.chat-composer {
  display: flex;
  gap: 9px;
  padding: 15px;
}
.chat-composer input {
  flex: 1;
  border-radius: 25px;
  font-size: 11px;
}
.chat-composer .button {
  border-radius: 25px;
}
.notification-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff4ef;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 13px;
}
.notification-row.read {
  background: #f5f5f3;
}
.notification-row > button:first-child {
  flex: 1;
  text-align: right;
  font-size: 11px;
}
.notification-row small {
  font-size: 8px;
  margin-top: 6px;
}
.account-head {
  text-align: center;
  padding: 20px;
}
.avatar {
  display: grid;
  place-items: center;
  background: #ffe7df;
  color: #ce351c;
  border-radius: 50%;
  height: 75px;
  width: 75px;
  font-family: Alexandria;
  font-size: 30px;
  margin: 0 auto 18px;
}
.account-head h2 {
  font-size: 25px;
}
.account-head p {
  font-size: 11px;
  margin-top: 7px;
}
.account-stats {
  display: flex;
  justify-content: space-around;
  background: #f5f5f3;
  padding: 22px;
  border-radius: 18px;
  text-align: center;
  margin-block: 20px 30px;
}
.account-stats b {
  font-size: 23px;
}
.account-stats small {
  font-size: 10px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e8edeb;
  padding: 20px 3px;
  font-size: 12px;
  width: 100%;
  text-align: right;
}
.settings-row:after {
  content: "←";
  color: #a9afaa;
}
.utility-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 12px;
}
.search-result {
  padding: 15px;
  border: 1px solid var(--line);
  font-size: 10px;
  border-radius: 10px;
}
.comment {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}
@media (min-width: 1500px) {
  .hero-stage {
    margin-inline-start: 20px;
  }
}
@media (max-width: 1100px) {
  .topbar {
    padding-inline: 25px;
    gap: 20px;
  }
  .topbar nav {
    gap: 17px;
  }
  .brand span {
    display: none;
  }
  .wrap {
    width: calc(100% - 50px);
  }
  .hero {
    gap: 25px;
    min-height: 620px;
  }
  .hero h1 {
    font-size: 42px;
  }
  .hero-stage {
    height: 450px;
  }
  .mini-dashboard {
    width: 320px;
    top: 105px;
  }
  .mini-phone {
    width: 155px;
    height: 325px;
    top: 55px;
  }
  .mini-phone > img {
    height: 145px;
  }
  .mini-phone > b {
    font-size: 17px;
  }
  .hero-facts {
    gap: 12px;
    font-size: 8px;
  }
  .dashboard {
    gap: 35px;
    grid-template-columns: 1.1fr 1fr;
  }
  .editor-body {
    padding: 20px;
  }
  .diz-layout {
    grid-template-columns: 1fr 540px;
    gap: 35px;
  }
  .diz-guide h2 {
    font-size: 29px;
  }
  .diz-intro {
    gap: 40px;
    grid-template-columns: 1fr 400px;
  }
  .pos-workspace {
    grid-template-columns: 1.45fr 1fr;
  }
  .pos-catalog,
  .order-panel {
    padding: 20px;
  }
  .pos-products .product > img {
    height: 120px;
  }
  .pos-products .product-copy {
    padding: 12px;
  }
  .footer {
    padding-inline: 25px;
  }
}
@media (max-width: 800px) {
  .topbar {
    min-height: 77px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 22px;
  }
  .brand img {
    width: 95px;
    height: 37px;
  }
  .topbar nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
    overflow: auto;
    white-space: nowrap;
    font-size: 11px;
    padding-top: 2px;
  }
  .topbar > .button {
    font-size: 10px;
    min-height: 34px;
    padding: 7px 12px;
  }
  .topbar nav a {
    padding-block: 6px 10px;
  }
  .wrap {
    width: calc(100% - 40px);
  }
  .hero {
    grid-template-columns: 1fr;
    padding-block: 40px;
    gap: 30px;
  }
  .hero h1 {
    font-size: 38px;
    max-width: 580px;
  }
  .hero .lead {
    font-size: 13px;
  }
  .hero-stage {
    height: 390px;
    max-width: 550px;
    width: 100%;
    margin: auto;
  }
  .mini-dashboard {
    width: 360px;
    top: 60px;
    left: 15px;
    height: 275px;
  }
  .mini-phone {
    top: 5px;
    right: 20px;
  }
  .floating-note {
    bottom: 8px;
    right: 50px;
  }
  .stage-label {
    bottom: 0;
    left: 30px;
    font-size: 6px;
  }
  .promise-bar > .wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 25px;
  }
  .promise-bar span:first-child {
    width: 100%;
    text-align: center;
  }
  .section {
    padding-block: 50px;
  }
  .service-image {
    height: 230px;
  }
  .service-body {
    padding: 23px;
  }
  .service-body h3 {
    font-size: 22px;
  }
  .service-body > p:not(.eyebrow) {
    font-size: 11px;
    min-height: 65px;
  }
  .features {
    font-size: 8px;
    gap: 8px;
  }
  .section-heading > p {
    font-size: 11px;
  }
  .service-cta {
    padding: 30px;
  }
  .service-cta h2 {
    font-size: 25px;
  }
  .footer {
    flex-wrap: wrap;
    font-size: 9px;
  }
  .welcome {
    min-height: auto;
    gap: 35px;
    padding-block: 45px;
  }
  .welcome h1 {
    font-size: 31px;
  }
  .welcome .lead {
    font-size: 12px;
  }
  .welcome-visual > img {
    aspect-ratio: 1/1.5;
  }
  .dashboard {
    grid-template-columns: 1fr;
  }
  .mobile-switch {
    display: block;
    margin-bottom: 20px;
  }
  .preview-column {
    display: none;
    position: static;
  }
  .show-preview .editor {
    display: none;
  }
  .show-preview .preview-column {
    display: block;
  }
  .device-preview {
    max-width: 420px;
  }
  .device-preview #live-preview {
    max-height: none;
  }
  .editor-body {
    padding: 25px;
  }
  .pos-workspace {
    grid-template-columns: 1fr;
  }
  .order-panel {
    position: static;
  }
  .pos-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .order-lines {
    max-height: none;
  }
  .workspace-top h1 {
    font-size: 25px;
  }
  .diz-intro {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  .diz-intro h1 {
    font-size: 36px;
  }
  .diz-login {
    padding: 25px;
  }
  .diz-login h2 {
    font-size: 21px;
  }
  .diz-layout {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  .diz-guide {
    position: static;
    display: none;
  }
  .diz-shell {
    border-radius: 25px;
  }
  .portfolio-image {
    height: 230px;
  }
}
@media (max-width: 540px) {
  .wrap {
    width: calc(100% - 32px);
  }
  h1 {
    font-size: 32px;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero {
    padding-top: 35px;
  }
  .hero-copy > .eyebrow {
    font-size: 8px;
  }
  .hero-facts {
    font-size: 8px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hero-stage {
    height: 335px;
  }
  .mini-dashboard {
    width: 285px;
    left: 0;
    top: 60px;
    height: 235px;
    padding: 15px;
  }
  .mini-top {
    font-size: 7px;
  }
  .mini-bars {
    margin: 20px 0;
  }
  .mini-bars b {
    font-size: 13px;
    max-width: 85px;
  }
  .mini-bars em {
    font-size: 18px;
  }
  .mini-food {
    padding: 8px;
  }
  .mini-food img {
    width: 42px;
    height: 40px;
  }
  .mini-food span {
    font-size: 9px;
  }
  .mini-chart {
    height: 22px;
    bottom: 12px;
  }
  .mini-phone {
    width: 133px;
    height: 279px;
    right: 5px;
    border-width: 4px;
    border-radius: 25px;
    padding: 8px;
    top: 10px;
  }
  .mini-phone > img {
    height: 120px;
  }
  .mini-phone > b {
    font-size: 15px;
  }
  .mini-phone > span {
    font-size: 7px;
    margin-top: 12px;
  }
  .mini-phone small {
    font-size: 6px;
  }
  .phone-pill {
    font-size: 6px;
    margin-top: 12px;
    padding: 8px;
  }
  .floating-note {
    bottom: 0;
    right: 30px;
    font-size: 8px;
    padding: 12px;
  }
  .stage-label {
    display: none;
  }
  .promise-bar > .wrap {
    gap: 14px;
    font-size: 10px;
  }
  .promise-bar span:not(:first-child) {
    font-size: 8px;
  }
  .section-heading {
    align-items: start;
    gap: 15px;
  }
  .section-heading > p {
    font-size: 9px;
    line-height: 1.9;
    max-width: 145px;
  }
  .section-heading h2 {
    font-size: 25px;
  }
  .eyebrow {
    font-size: 9px;
  }
  .service-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .service-image {
    height: 255px;
  }
  .service-body > p:not(.eyebrow) {
    min-height: 0;
    font-size: 12px;
  }
  .service-body h3 {
    font-size: 25px;
  }
  .features {
    font-size: 9px;
    gap: 12px;
  }
  .service-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
    margin-bottom: 40px;
    gap: 20px;
  }
  .service-cta h2 {
    font-size: 23px;
  }
  .service-cta .button {
    width: 100%;
    font-size: 11px;
  }
  .footer {
    padding: 25px 16px;
    gap: 18px;
  }
  .footer > span:first-child {
    width: 100%;
  }
  .footer > span:nth-child(2) {
    font-size: 8px;
  }
  .welcome {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .welcome-visual {
    order: -1;
    max-height: 240px;
    overflow: hidden;
    border-radius: 22px;
  }
  .welcome-visual > img {
    aspect-ratio: auto;
    height: 240px;
    object-position: center 65%;
  }
  .welcome h1 {
    font-size: 29px;
  }
  .welcome .lead {
    font-size: 12px;
  }
  .workspace-top {
    flex-direction: column;
    align-items: stretch;
    padding-top: 25px;
    gap: 15px;
  }
  .workspace-top .actions {
    justify-content: flex-start;
  }
  .workspace-top h1 {
    font-size: 25px;
  }
  .restaurant-cover {
    height: 180px;
  }
  .restaurant-info {
    padding: 32px 20px 20px;
  }
  .restaurant-info > h1 {
    font-size: 26px;
  }
  .restaurant-info > p:not(.eyebrow) {
    font-size: 10px;
  }
  .restaurant-logo {
    width: 60px;
    height: 60px;
    top: -30px;
    left: 20px;
    font-size: 25px;
    border-radius: 17px;
  }
  .restaurant-meta {
    font-size: 8px;
    gap: 8px;
  }
  .menu-content {
    padding: 0 17px 22px;
  }
  .offer-banner {
    padding: 18px;
  }
  .offer-banner b {
    font-size: 17px;
  }
  .offer-banner small {
    font-size: 8px;
  }
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .product > img {
    height: 110px;
  }
  .product-copy {
    padding: 11px;
  }
  .product h3 {
    font-size: 12px;
  }
  .product p {
    font-size: 8px;
    min-height: 33px;
  }
  .product-bottom b {
    font-size: 10px;
  }
  .add {
    min-height: 32px;
    min-width: 32px;
    font-size: 20px;
  }
  .tabs {
    gap: 6px;
    margin-bottom: 18px;
  }
  .tabs > * {
    font-size: 9px;
    padding: 9px 13px;
    min-height: 38px;
  }
  .restaurant .search {
    min-height: 44px;
  }
  .menu-cart {
    font-size: 10px;
    padding: 13px;
    gap: 8px;
  }
  .menu-cart b {
    font-size: 12px;
  }
  .editor-body {
    padding: 20px;
  }
  .editor-body .section-heading h2 {
    font-size: 20px;
  }
  .editor-body .section-heading .button {
    font-size: 9px;
  }
  .manage-row .actions {
    width: 100%;
  }
  .manage-row .button.small {
    font-size: 9px;
  }
  .editor-tabs {
    padding: 14px;
  }
  .upload-grid {
    gap: 10px;
  }
  .upload {
    font-size: 10px;
    padding: 12px;
  }
  .device-preview {
    border-width: 5px;
    padding: 6px;
    max-width: 360px;
  }
  .pos-catalog,
  .order-panel {
    padding: 18px;
  }
  .pos-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pos-products .product > img {
    height: 110px;
  }
  .pos-catalog h2,
  .order-panel h2 {
    font-size: 18px;
  }
  .sandbox {
    font-size: 9px;
    padding: 12px;
  }
  .quantity {
    gap: 6px;
  }
  .cart-line {
    gap: 8px;
    font-size: 10px;
  }
  .quantity button {
    min-width: 29px;
  }
  .portfolio-intro {
    padding-block: 40px;
  }
  .portfolio-intro h1 {
    font-size: 32px;
  }
  .portfolio-intro .lead {
    font-size: 12px;
  }
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .portfolio-image {
    height: 240px;
  }
  .portfolio-card h2 {
    font-size: 23px;
  }
  .diz-intro {
    padding-block: 40px;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .diz-intro h1 {
    font-size: 35px;
  }
  .diz-intro .lead {
    font-size: 12px;
  }
  .diz-login {
    padding: 28px;
  }
  .diz-layout {
    width: 100%;
    padding-bottom: 30px;
  }
  .diz-shell {
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }
  .diz-body {
    padding: 20px 16px;
  }
  .diz-hero-content {
    padding: 18px 20px;
  }
  .diz-hero {
    height: 290px;
  }
  .diz-hero-content > h2 {
    font-size: 27px;
  }
  .primary-sections {
    gap: 7px;
  }
  .primary-sections img {
    height: 65px;
  }
  .primary-sections b {
    font-size: 9px;
  }
  .merchant-open img {
    width: 80px;
    height: 77px;
  }
  .merchant-open h3 {
    font-size: 12px;
  }
  .merchant-open p {
    font-size: 9px;
  }
  .merchant-open small {
    font-size: 8px;
  }
  .diz-offer {
    padding: 20px;
    gap: 15px;
  }
  .diz-offer h3 {
    font-size: 22px;
  }
  .diz-offer img {
    width: 105px;
    height: 125px;
  }
  .diz-body .products {
    gap: 10px;
  }
  .diz-body .product > img {
    height: 112px;
  }
  .diz-body .product h3 {
    font-size: 11px;
  }
  .diz-body .product-bottom b {
    font-size: 9px;
  }
  .diz-nav {
    margin: 12px;
    bottom: 10px;
  }
  .diz-nav small {
    font-size: 7px;
  }
  .diz-cart {
    font-size: 11px;
  }
  .diz-body > .actions {
    gap: 6px;
  }
  .diz-body > .actions .button {
    font-size: 9px;
    padding-inline: 12px;
  }
  .order-card {
    gap: 9px;
    padding: 14px 11px;
  }
  .order-card > b {
    font-size: 9px;
  }
  .order-card b {
    font-size: 10px;
  }
  .order-card small {
    font-size: 7px;
  }
  .tracking-metrics b {
    font-size: 11px;
  }
  .milestones {
    font-size: 7px;
    gap: 5px;
  }
  .diz-body .sandbox {
    font-size: 8px;
  }
  .chat-title {
    padding: 16px;
    gap: 9px;
  }
  .chat-title b {
    font-size: 10px;
  }
  .chat-composer {
    padding: 12px;
    gap: 7px;
  }
  .chat-composer input {
    font-size: 10px;
    padding: 11px;
  }
  .bubble p {
    font-size: 10px;
  }
  .bubble small {
    font-size: 7px;
  }
  dialog {
    padding: 20px;
    border-radius: 18px;
  }
  .dialog-head h2 {
    font-size: 18px;
  }
  .receipt table {
    font-size: 8px;
  }
  .receipt .total b {
    font-size: 19px;
  }
  #toast {
    bottom: 18px;
    font-size: 11px;
    width: max-content;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .service-card:hover,
  .button:hover {
    transform: none;
  }
}
.pos-workspace > *,
.dashboard > *,
.diz-layout > * {
  min-width: 0;
}
@media (max-width: 540px) {
  .add,
  .quantity button,
  .icon-button {
    min-width: 44px;
    min-height: 44px;
  }
  .tabs > * {
    min-height: 44px;
  }
  .button.small {
    min-height: 44px;
  }
  .pos-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .diz-nav > button {
    min-height: 53px;
  }
}
@media print {
  html,
  body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body > * {
    display: none !important;
  }
  #dialog {
    display: block !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none;
    max-height: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  #dialog::backdrop {
    display: none;
  }
  #dialog .dialog-head,
  #dialog .no-print {
    display: none !important;
  }
  .receipt {
    display: block !important;
    color: black;
  }
  .receipt * {
    color: black !important;
  }
  #dialog:not([open]) {
    display: none !important;
  }
  @page {
    size: A5;
    margin: 10mm;
  }
}

/* dizly/native.css */
/* Native reference: local mrd-flutter + the five screenshots supplied on 31 Oct. */
.diz-shell {
  --native-coral: #ce351c;
  --native-ink: #171916;
  --native-muted: #52636c;
  width: 100%;
  height: 850px;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  color: var(--native-ink);
  background: #fff;
  container-type: inline-size;
}
.diz-layout {
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 90px;
}
.diz-screen {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 112px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.diz-screen::-webkit-scrollbar {
  display: none;
}
.diz-sandbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  font-size: 8px;
}
.diz-sandbox a {
  font-size: 9px;
  min-height: 22px;
  display: flex;
  align-items: center;
}
.diz-shell h2,
.diz-shell h3 {
  letter-spacing: 0;
}
.diz-shell p {
  color: var(--native-muted);
}
.d-icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.native-service-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: right;
  padding: 18px 14px;
  border: 1px solid #dce4e6;
  border-radius: 18px;
  margin-bottom: 14px;
}
.native-service-card > span {
  flex: 1;
}
.native-service-card b {
  font-size: 14px;
  display: block;
  line-height: 1.6;
}
.native-service-card small {
  font-size: 11px;
  line-height: 1.7;
  margin-top: 4px;
}
.native-service-card > .d-icon:first-child {
  color: #ce351c;
}
.native-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #ffffff15;
  border: 0;
  border-radius: 17px;
  width: 50px;
  min-width: 50px;
  height: 50px;
  color: inherit;
  position: relative;
}
.native-icon .d-icon {
  width: 27px;
  height: 27px;
}
.native-count {
  position: absolute;
  top: -3px;
  right: -2px;
  border: 2px solid white;
  border-radius: 50%;
  min-width: 19px;
  height: 19px;
  padding: 0 3px;
  font-size: 10px;
  color: white;
  background: #b90c2e;
  display: grid;
  place-items: center;
  font-style: normal;
  line-height: 1;
}
.diz-nav {
  position: absolute;
  bottom: 16px;
  left: 12px;
  right: 12px;
  margin: 0;
  padding: 7px;
  min-height: 76px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  border: 1.25px solid #ce351c3d;
  background: #fffffff5;
  box-shadow: 0 6px 24px #0000000c;
  backdrop-filter: blur(12px);
  z-index: 12;
  gap: 0;
  direction: rtl;
}
.diz-nav > button {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border-radius: 31px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  color: #52636c;
  transition:
    background 220ms ease,
    flex 220ms ease;
}
.diz-nav > button small {
  display: none;
}
.diz-nav > button .native-nav-icon {
  display: inline-flex;
  position: relative;
  font-size: 0;
  line-height: 1;
}
.native-nav-icon .d-icon {
  width: 25px;
  height: 25px;
}
.diz-nav .active {
  flex: 2.35;
  color: #ce351c;
  background: #fffaf8;
  border: 1px solid #ede9e5;
  box-shadow: 0 2px 9px #00000008;
}
.diz-nav .active small {
  display: block;
  font:
    500 12px/1.35 Readex,
    sans-serif;
  color: #ce351c;
  white-space: nowrap;
}
.native-nav-icon .native-count {
  top: -8px;
  right: -7px;
}
.diz-cart {
  position: absolute;
  bottom: 105px;
  left: 16px;
  right: 16px;
  margin: 0;
  width: auto;
  border-radius: 28px;
  background: #171916;
  z-index: 10;
  font-size: 12px;
}
.diz-shell .button:hover {
  background: #ae2c17;
}
.diz-shell .button.ghost:hover {
  background: #fff0ea;
}
.diz-hero {
  height: 390px;
  border-radius: 0 0 30px 30px;
  position: relative;
  background: #171916;
  overflow: hidden;
  color: white;
}
.diz-hero-photo {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  filter: none;
  object-position: center;
}
.diz-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, #171916d6 0%, #17191638 45%, #171916e6 100%),
    linear-gradient(270deg, #171916b8, transparent);
}
.diz-hero-content {
  position: relative;
  z-index: 1;
  padding: 10px 14px 0;
  height: 100%;
}
.native-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 57px;
}
.native-header-row .native-icon {
  background: #ffffff1a;
  color: white;
  backdrop-filter: blur(5px);
}
.native-header-row .native-icon .d-icon {
  width: 27px;
  height: 27px;
}
.native-deliver-to {
  flex: 1;
  padding: 5px 0;
  text-align: center;
  color: white;
  min-width: 0;
}
.native-deliver-to small {
  font-size: 11px;
  color: #ffffffb3;
}
.native-deliver-to span {
  font-size: 12px;
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.native-hero-copy {
  margin: 16px 2px 0;
  width: 85%;
  min-height: 167px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.native-hero-copy p {
  color: #ffb49a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 7px;
}
.native-hero-copy h2 {
  font-size: 27px !important;
  line-height: 1.45;
  font-weight: 700;
  color: #fff;
  margin: 0 0 9px;
}
.native-hero-copy > span {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: white;
  max-width: 310px;
}
.native-greeting {
  font-size: 14px !important;
  color: white !important;
  font-weight: 600;
  line-height: 1.5;
  padding-inline: 2px;
  margin: 7px 0 12px !important;
}
.native-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-inline: 0;
}
.native-search-row .search {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 32px;
  background: white;
  margin: 0;
  height: 59px;
  padding: 0 17px;
  gap: 10px;
}
.native-search-row .search > .d-icon {
  width: 24px;
  height: 24px;
  color: #52636c;
}
.native-search-row input {
  font-size: 12px;
  padding: 16px 0;
  color: #52636c;
}
.native-avatar {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border: 2px solid white;
  border-radius: 50%;
  padding: 2px;
  background: white;
  overflow: hidden;
}
.native-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.native-slide-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 33px;
}
.native-slide-dots button {
  display: grid;
  place-items: center;
  width: 35px;
  min-height: 30px;
  padding: 0;
}
.native-slide-dots span {
  height: 6px;
  width: 6px;
  border-radius: 10px;
  background: #ffffff80;
  display: block;
  transition:
    width 180ms ease,
    background 180ms ease;
}
.native-slide-dots .active span {
  width: 22px;
  background: white;
}
.native-demo-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 17px;
  color: #207153;
}
.native-demo-note > .d-icon {
  width: 25px;
  height: 25px;
}
.native-demo-note > div {
  flex: 1;
  min-width: 0;
}
.native-demo-note b {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: #171916;
  line-height: 1.6;
}
.native-demo-note span {
  font-size: 11px;
  color: #52636c;
  line-height: 1.6;
  display: block;
}
.native-demo-note .native-icon {
  background: none;
  color: #171916;
  min-width: 40px;
  width: 40px;
  height: 44px;
}
.diz-body.native-home-body {
  padding: 14px 16px 20px;
}
.native-services {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  border: 1px solid #c9cbc8;
  border-radius: 22px;
  text-align: right;
  width: 100%;
  margin: 2px 0 18px;
  min-height: 82px;
  background: white;
}
.native-services > .d-icon:first-child {
  width: 27px;
  height: 27px;
}
.native-services > span {
  flex: 1;
}
.native-services b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.native-services small {
  font-size: 12px;
  line-height: 1.65;
}
.native-services > .d-icon:last-child {
  width: 20px;
  height: 20px;
}
.diz-shell .primary-sections {
  gap: 8px;
  margin: 0 0 25px;
}
.diz-shell .primary-sections button {
  padding: 0;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  border: 0;
}
.diz-shell .primary-sections img {
  height: 104px;
  object-fit: cover;
  width: 100%;
  border-radius: 18px 18px 0 0;
}
.diz-shell .primary-sections b {
  padding: 12px 3px;
  display: block;
  font:
    500 12px/1.75 Alexandria,
    sans-serif;
}
.diz-shell .primary-sections .active {
  box-shadow: 0 0 0 1px #ce351c;
  background: #fffaf8;
}
.native-home-body > .section-heading {
  align-items: center;
  margin-bottom: 16px;
}
.native-home-body > .section-heading h3 {
  font-size: 18px;
}
.native-home-body > .section-heading p {
  font-size: 12px;
  line-height: 1.6;
  margin-top: 5px;
}
.diz-shell .merchant-card {
  border: 1px solid #dce4e6;
  border-radius: 20px;
  padding: 13px 12px;
  min-height: 128px;
  margin: 0 0 13px;
  background: white;
  position: relative;
}
.diz-shell .merchant-open {
  gap: 13px;
  padding: 0 0 0 28px;
  align-items: center;
  min-width: 0;
}
.diz-shell .merchant-open > img {
  width: 100px;
  height: 110px;
  border-radius: 16px;
  flex-shrink: 0;
}
.diz-shell .merchant-open > div {
  min-width: 0;
  flex: 1;
}
.diz-shell .merchant-open h3 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
}
.diz-shell .merchant-open p {
  font-size: 12px;
  line-height: 1.6;
  margin: 4px 0 9px;
}
.diz-shell .merchant-open small {
  font-size: 11px;
  line-height: 1.6;
  color: #171916;
}
.merchant-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.merchant-meta > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 6px;
}
.merchant-meta .d-icon {
  width: 15px;
  height: 15px;
  color: #52636c;
}
.native-star {
  color: #faa902;
  font-size: 19px;
  line-height: 1;
}
.diz-shell .favorite {
  left: 14px;
  top: 18px;
  color: #171916;
  width: 28px;
  height: 35px;
  display: grid;
  place-items: center;
}
.diz-shell .favorite .d-icon {
  width: 25px;
  height: 25px;
}
.diz-shell .favorite.selected {
  color: #171916;
}
.native-merchant-header {
  position: relative;
}
.native-merchant-header .merchant-cover {
  height: 214px;
  position: relative;
}
.native-merchant-header .merchant-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.merchant-cover-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.merchant-cover-actions > div {
  display: flex;
  gap: 5px;
}
.merchant-cover-actions .native-icon {
  background: #ffffff29;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  padding: 8px;
}
.merchant-cover-actions .native-icon .d-icon {
  width: 24px;
  height: 24px;
}
.merchant-avatar {
  position: relative;
  width: 94px;
  height: 94px;
  border: 4px solid white;
  border-radius: 50%;
  padding: 0;
  background: white;
  display: block;
  margin: -53px auto 14px;
  z-index: 2;
}
.merchant-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.merchant-avatar > span {
  position: absolute;
  bottom: 0;
  left: 0;
  background: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #171916;
  box-shadow: 0 0 0 2px white;
}
.merchant-avatar .d-icon {
  width: 20px;
  height: 20px;
}
.native-merchant-info {
  text-align: center;
  padding: 0 22px 25px;
}
.native-merchant-info > h2 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 7px;
}
.native-rating {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: #fff3de;
  padding: 7px 16px;
  min-height: 36px;
  border-radius: 25px;
  font-size: 14px;
  margin: 0 auto 22px;
  color: #171916;
}
.native-rating > span {
  color: #faa902;
  font-size: 22px;
  line-height: 1;
}
.native-rating small {
  font-size: 11px;
  color: #171916;
}
.native-rating .d-icon {
  width: 15px;
  height: 15px;
}
.native-address {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #171916;
  background: #f6f6f3;
  border-radius: 24px;
  padding: 5px 10px;
  min-height: 40px;
  color: #171916;
}
.native-address > span {
  flex: 1;
  font-size: 11px;
  line-height: 1.5;
  position: relative;
  min-width: 0;
}
.native-address > span > small {
  position: absolute;
  right: 0;
  top: -14px;
  background: white;
  padding: 0 4px;
  font-size: 8px;
  line-height: 1.5;
  color: #171916;
}
.native-address > .d-icon {
  width: 22px;
  height: 22px;
}
.native-address > .d-icon:last-child {
  transform: rotate(-35deg);
}
.native-hours {
  display: flex;
  justify-content: center;
  gap: 7px;
  align-items: center;
  margin: 20px 0 30px;
  font-size: 12px;
  line-height: 1.6;
}
.native-hours > span {
  padding: 7px 10px;
  background: #e7edef;
  border-radius: 12px;
}
.native-hours > b {
  background: #eaf5ef;
  color: #207153;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 12px;
  font-weight: 600;
}
.native-hours .d-icon {
  width: 14px;
  height: 14px;
}
.native-store-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.native-store-actions > button {
  flex: 1;
  border: 1px solid #dededb;
  border-radius: 30px;
  background: white;
  min-height: 56px;
  font-size: 15px;
  font-weight: 600;
}
.native-store-actions .native-follow {
  background: #171916;
  color: white;
  border-color: #171916;
}
.native-merchant-tabs {
  position: sticky;
  top: 0;
  display: flex;
  overflow: auto;
  gap: 0;
  scrollbar-width: none;
  background: #fff;
  z-index: 5;
  border-bottom: 1px solid #171916;
  padding: 12px 0 0;
  flex-shrink: 0;
}
.native-merchant-tabs button {
  font-size: 13px;
  color: #52636c;
  white-space: nowrap;
  min-height: 55px;
  position: relative;
  flex: 1;
  min-width: 87px;
  padding: 12px 10px 18px;
}
.native-merchant-tabs .active {
  color: #171916;
  font-weight: 600;
}
.native-merchant-tabs .active:after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 25%;
  left: 25%;
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: #171916;
}
.diz-body.native-merchant-body {
  padding: 23px 16px;
}
.native-merchant-body > h3 {
  font-size: 22px;
  margin: 0 0 24px;
}
.native-category-list {
  display: flex;
  gap: 14px;
  overflow: auto;
  scrollbar-width: none;
  margin-bottom: 20px;
  padding: 4px 0 0;
}
.native-category-list > button {
  flex-shrink: 0;
  width: 88px;
  padding: 0;
  font-size: 12px;
  text-align: center;
}
.category-photo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid #e4e5e3;
  background: #e7edef;
  border-radius: 18px;
  padding: 5px;
  overflow: hidden;
  color: #52636c;
}
.category-photo .d-icon {
  width: 24px;
  height: 24px;
}
.category-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}
.native-category-list b {
  font-size: 12px;
  font-weight: 400;
  display: block;
  margin-top: 8px;
  line-height: 1.8;
}
.native-category-list .active {
  color: #ce351c;
}
.native-category-list .active .category-photo {
  border: 1.5px solid #ce351c;
}
.diz-shell .native-products {
  gap: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.diz-shell .native-product {
  border: 1px solid #dededb;
  border-radius: 18px;
  overflow: hidden;
  animation: none;
}
.native-product-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 1.3;
  background: #e7edef;
}
.native-product-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diz-shell .native-product .product-copy {
  padding: 13px 15px 16px;
}
.diz-shell .native-product h3 {
  font-family: Readex, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  min-height: 48px;
}
.diz-shell .native-product p {
  font-size: 12px;
  margin: 9px 0 12px;
  line-height: 1.65;
  min-height: 0;
  color: #52636c;
}
.diz-shell .native-product .product-bottom {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.diz-shell .native-product .product-bottom b {
  font-size: 18px;
  color: #171916;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  direction: rtl;
}
.diz-shell .native-product .add {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  font-size: 28px;
  line-height: 1;
  background: #171916;
  border-radius: 50%;
  padding: 0;
  font-weight: 300;
}
.native-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.native-gallery button {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}
.native-gallery img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
}
.native-merchant-body .demo-post > img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
}
.native-review {
  border: 1px solid #dce4e6;
  border-radius: 18px;
  padding: 20px;
}
.native-review > b {
  font-size: 22px;
  color: #ce351c;
  display: block;
  margin-bottom: 10px;
}
.native-review > p {
  font-size: 12px;
  margin-bottom: 20px;
}
.native-review > strong {
  font-size: 13px;
}
.native-account-header {
  position: relative;
  background: #171916;
  color: white;
  border-radius: 0 0 30px 30px;
  padding: 26px 24px 23px;
  overflow: hidden;
  isolation: isolate;
}
.account-watermark {
  position: absolute;
  bottom: 20px;
  left: 18px;
  width: 190px;
  height: 165px;
  object-fit: contain;
  opacity: 0.055;
  z-index: -1;
}
.native-account-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 25px;
}
.native-account-title h2 {
  font-size: 27px;
  line-height: 1.4;
  color: white;
  font-weight: 700;
}
.native-account-title .native-icon {
  width: 43px;
  height: 43px;
  min-width: 43px;
  background: #ffffff14;
  border-radius: 50%;
}
.native-account-title .d-icon {
  width: 23px;
  height: 23px;
}
.native-account-identity {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  margin-bottom: 29px;
}
.native-account-avatar {
  width: 83px;
  height: 83px;
  min-width: 83px;
  border-radius: 50%;
  padding: 4px;
  border: 1.5px solid #ff9a7d;
  background: #171916;
}
.native-account-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.native-account-identity > div:last-child {
  min-width: 0;
  padding-top: 1px;
}
.native-account-identity h3 {
  font-size: 22px;
  color: white;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 9px;
}
.native-account-identity p {
  color: #d5dacf;
  font-size: 14px;
  line-height: 1.6;
}
.native-account-identity small {
  color: #d5dacf;
  font-size: 12px;
  line-height: 1.6;
}
.native-account-address {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 5px 0;
  text-align: right;
  color: white;
}
.native-account-address > .d-icon:first-child {
  color: #ff9a7d;
  width: 23px;
  height: 23px;
}
.native-account-address > span {
  flex: 1;
}
.native-account-address small {
  color: #d5dacf;
  font-size: 11px;
  line-height: 1.5;
}
.native-account-address b {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  display: block;
  margin-top: 3px;
}
.native-account-address > .d-icon:last-child {
  width: 19px;
  height: 19px;
}
.diz-body.native-account-body {
  padding: 20px 17px;
}
.native-account-body > h3 {
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.native-account-body .account-stats {
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 0 0 6px;
  margin: 0 0 28px;
  border-radius: 0;
}
.account-stats > button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.account-stats > button > span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: #ffe7df;
  color: #ce351c;
  border-radius: 17px;
  margin-bottom: 9px;
}
.account-stats > button > span .d-icon {
  width: 24px;
  height: 24px;
}
.account-stats > button > b {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 3px;
}
.account-stats > button > small {
  font-size: 12px;
  color: #52636c;
  line-height: 1.5;
}
.native-settings-group {
  border: 1px solid #dce4e6;
  border-radius: 22px;
  background: white;
  overflow: hidden;
  padding: 6px 0;
}
.native-settings-group .settings-row {
  display: flex;
  align-items: center;
  gap: 15px;
  border: 0;
  border-bottom: 1px solid #f5f5f3;
  min-height: 78px;
  padding: 17px 20px;
  width: 100%;
  text-align: right;
  font-size: 16px;
}
.native-settings-group .settings-row:after {
  display: none;
}
.native-settings-group .settings-row > .d-icon:first-child {
  width: 25px;
  height: 25px;
}
.native-settings-group .settings-row > span {
  flex: 1;
  line-height: 1.5;
}
.native-settings-group .settings-row small {
  font-size: 11px;
  color: #52636c;
  margin-top: 5px;
  line-height: 1.6;
}
.native-settings-group .settings-row > .d-icon:last-child {
  width: 19px;
  height: 19px;
}
.diz-shell .chat-title b {
  font-size: 13px;
}
.diz-shell .chat-title small {
  font-size: 10px;
}
.diz-shell .bubble p {
  font-size: 13px;
}
.diz-shell .bubble small {
  font-size: 9px;
}
.diz-shell .chat-composer input {
  font-size: 13px;
}
.diz-shell .order-card b {
  font-size: 13px;
}
.diz-shell .order-card p {
  font-size: 12px;
}
.diz-shell .order-card small {
  font-size: 10px;
}
.diz-shell .notification-row > button:first-child {
  font-size: 13px;
}
.diz-shell .notification-row small {
  font-size: 10px;
}
.native-map {
  height: 445px;
  position: relative;
  overflow: hidden;
  background: #f1eee7;
  isolation: isolate;
}
.native-map-art {
  position: absolute;
  inset: 0;
  transform-origin: 52% 52%;
  transition: transform 220ms ease;
}
.native-map-art > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map-land {
  fill: #f1eee7;
}
.map-parks {
  fill: #dce4d6;
}
.map-river {
  fill: none;
  stroke: #a7cbd3;
  stroke-width: 24;
  stroke-linecap: round;
}
.map-districts {
  fill: #dfddd6;
}
.map-small-roads {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linejoin: round;
}
.map-main-road-outline {
  fill: none;
  stroke: #e0a590;
  stroke-width: 13;
}
.map-main-road {
  fill: none;
  stroke: #f6cd8d;
  stroke-width: 8;
}
.map-cross-road-outline {
  fill: none;
  stroke: #ccc9c0;
  stroke-width: 13;
}
.map-cross-road {
  fill: none;
  stroke: #fffdf6;
  stroke-width: 9;
}
.map-labels {
  fill: #62645e;
  font-family: Readex, sans-serif;
  font-size: 11px;
  font-weight: 500;
}
.alternate-layer .map-land {
  fill: #e3e9df;
}
.alternate-layer .map-parks {
  fill: #c0d5b4;
}
.alternate-layer .map-districts {
  fill: #cfdbcb;
}
.alternate-layer .map-small-roads {
  stroke: #f2f7f2;
}
.native-map-title {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  background: #ffffffed;
  border: 1px solid #dededb;
  border-radius: 17px;
  padding: 13px 17px;
  font-size: 14px;
  box-shadow: 0 3px 10px #0000000a;
  backdrop-filter: blur(5px);
}
.native-map-controls {
  position: absolute;
  top: 70px;
  right: 12px;
  background: #ffffffed;
  border: 1px solid #dce4e6;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 0;
  box-shadow: 0 2px 8px #0000000a;
  direction: ltr;
  padding: 2px 3px;
}
.native-map-controls .native-icon,
.native-map-controls > button {
  color: #171916;
  width: 48px;
  min-width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  padding: 8px;
  background: none;
}
.native-map-controls .d-icon {
  width: 24px;
  height: 24px;
}
.native-map > .map-expand,
.native-map > .map-center {
  position: absolute;
  left: 14px;
  width: 43px;
  min-width: 43px;
  height: 43px;
  border-radius: 14px;
  background: #fff3ec;
  color: #171916;
}
.native-map > .map-expand {
  top: 78px;
}
.native-map > .map-center {
  bottom: 42px;
}
.native-map > .map-center .d-icon {
  width: 24px;
  height: 24px;
}
.native-map-credit {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #ffffffda;
  border-radius: 0 8px 0 0;
  font-size: 9px;
  padding: 4px 8px;
  line-height: 1.6;
  color: #52636c;
}
.native-map-pin {
  position: absolute;
  width: 45px;
  height: 45px;
  background: white;
  border: 3px solid #1769cf;
  border-radius: 50%;
  padding: 2px;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px #00000020;
  z-index: 2;
}
.native-map-pin img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.native-home-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 3px solid #ce351c;
  background: white;
  display: grid;
  place-items: center;
  color: #ce351c;
  box-shadow: 0 2px 6px #00000018;
  z-index: 3;
}
.native-home-pin .d-icon {
  width: 28px;
  height: 28px;
}
.native-map.is-expanded {
  position: absolute;
  inset: 36px 0 0;
  height: auto;
  z-index: 11;
}
.native-map-intro {
  padding: 32px 16px 14px;
  text-align: center;
}
.native-map-intro > h2 {
  font-size: 22px;
  font-weight: 600;
  color: #171916;
  line-height: 1.5;
  margin-bottom: 5px;
}
.native-map-intro > p {
  font-size: 13px;
  line-height: 1.6;
  color: #52636c;
}
.native-map-merchants {
  padding-top: 0 !important;
}
@media (max-width: 1100px) {
  .diz-layout {
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 45px;
  }
}
@media (max-width: 800px) {
  .diz-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
  }
  .diz-shell {
    height: 850px;
  }
  .diz-guide {
    display: none;
  }
}
@media (max-width: 540px) {
  .diz-active .topbar,
  .diz-active .footer,
  .diz-active .workspace-top {
    display: none;
  }
  .diz-active #main {
    min-height: 100dvh;
  }
  .diz-active .diz-layout {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  .diz-active .diz-shell {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .diz-shell .diz-body {
    padding-inline: 16px;
  }
  .diz-shell .native-home-body {
    padding-top: 14px;
  }
  .diz-nav {
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    min-height: 76px;
  }
  .diz-nav > button {
    min-height: 56px;
  }
  .diz-shell .native-header-row .native-icon {
    width: 49px;
    min-width: 49px;
    height: 50px;
  }
  .diz-shell .native-category-list > button {
    width: 88px;
  }
  .diz-shell .native-product .product-copy {
    padding: 13px 12px 16px;
  }
  .diz-shell .native-product .product-bottom b {
    font-size: 17px;
  }
  .diz-shell .native-product .add {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .diz-shell .native-product h3 {
    font-size: 15px;
  }
  .diz-shell .native-product p {
    font-size: 12px;
  }
  .native-merchant-header .merchant-cover {
    height: 211px;
  }
  .native-merchant-info > h2 {
    font-size: 24px;
  }
  .diz-shell .diz-cart {
    bottom: 104px;
    font-size: 12px;
  }
}
@media (max-width: 365px) {
  .native-hero-copy h2 {
    font-size: 24px !important;
  }
  .native-hero-copy > span {
    font-size: 12px;
  }
  .native-header-row {
    gap: 5px;
  }
  .diz-shell .native-header-row .native-icon {
    width: 43px;
    min-width: 43px;
    height: 47px;
  }
  .native-deliver-to span {
    font-size: 11px;
  }
  .native-search-row input {
    font-size: 11px;
  }
  .diz-nav .active small {
    font-size: 11px;
  }
  .native-account-identity h3 {
    font-size: 20px;
  }
  .diz-shell .native-product .product-copy {
    padding-inline: 9px;
  }
  .diz-shell .native-product .product-bottom b {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diz-screen {
    scroll-behavior: auto;
  }
  .native-slide-dots span,
  .diz-nav > button {
    transition: none;
  }
}

/* premium.css */
/* Premium platform. Dezly keeps its approved native presentation. */
body:not([data-experience-page="dizly"]) {
  background: #f5f5f2;
  color: #102d4f;
}
body:not([data-experience-page="dizly"]) .topbar {
  background: #fffdf9ed;
  border-bottom: 1px solid #dfe5e9;
  padding-block: 14px;
  min-height: 88px;
}
body[data-experience-page="home"] .topbar {
  background: #0d2239f5;
  color: #fff;
  border-color: #ffffff13;
}
body[data-experience-page="home"] .brand span {
  color: #e3c99f;
  border-color: #ffffff25;
}
body[data-experience-page="home"] .topbar nav a {
  color: #bdc9d7;
}
body[data-experience-page="home"] .topbar nav a.active {
  color: #fff;
}
body[data-experience-page="home"] .topbar nav a.active:after {
  background: #d7b77c;
}
body[data-experience-page="home"] .topbar > .button {
  color: #f2dfbd;
  border-color: #ffffff25;
  background: #ffffff07;
}
body:not([data-experience-page="dizly"]) .brand {
  gap: 14px;
}
body:not([data-experience-page="dizly"]) .brand img {
  height: 52px;
  width: 104px;
}
body:not([data-experience-page="dizly"]) .topbar nav a {
  font-size: 12px;
  padding: 11px 2px;
}
body:not([data-experience-page="dizly"]) .button {
  border-radius: 14px;
  min-height: 50px;
}
.experience-home {
  overflow: clip;
}
.premium-hero {
  position: relative;
  isolation: isolate;
  background: #0d2239;
  color: #fff;
  border-radius: 0 0 44px 44px;
}
.hero-orbit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 8% 60%, #25466b80 0, transparent 50%),
    radial-gradient(ellipse at 90% 5%, #23456d60, transparent 45%);
}
.hero-orbit:before {
  content: "";
  position: absolute;
  width: 750px;
  height: 750px;
  border: 1px solid #ffffff08;
  border-radius: 50%;
  left: -140px;
  top: -200px;
  box-shadow:
    0 0 0 110px #ffffff03,
    0 0 0 220px #ffffff02;
}
.premium-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding-top: 65px;
  padding-bottom: 80px;
  min-height: 670px;
}
.premium-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #d3bd97;
  margin-bottom: 20px;
  line-height: 1.8;
}
.premium-eyebrow > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3b27a;
  box-shadow: 0 0 0 5px #d3b27a12;
}
.premium-eyebrow b {
  font-weight: 300;
  color: #ffffff50;
  margin-inline: 3px;
}
.premium-hero h1 {
  font-size: clamp(34px, 4vw, 57px);
  font-weight: 650;
  line-height: 1.6;
  letter-spacing: -0.04em;
  color: white;
  max-width: 620px;
}
.premium-hero h1 em {
  display: block;
  color: #d9b985;
  font-style: normal;
}
.premium-lead {
  font-size: 14px;
  color: #bdcbda;
  line-height: 2.1;
  margin-top: 24px;
  max-width: 480px;
}
.premium-primary {
  background: #e5c48d;
  color: #162b44;
  min-height: 54px;
  min-width: 180px;
  padding: 15px 23px;
  justify-content: space-between;
  margin-top: 29px;
  font-weight: 600;
  box-shadow: 0 8px 35px #00000014;
}
.premium-primary:hover {
  background: #efd4a8;
  box-shadow: 0 10px 30px #00000025;
}
.premium-proof {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-top: 24px;
  color: #bccbd9;
  font-size: 9px;
  flex-wrap: wrap;
}
.premium-proof i {
  font-style: normal;
  color: #e4c58f;
  margin-inline-end: 5px;
}
.premium-stage {
  height: 465px;
  position: relative;
  margin-left: 0;
  min-width: 0;
}
.stage-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #c6d3df;
  padding: 0 3px 16px;
}
.stage-dot {
  display: inline-block;
  background: #a8d7bd;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #a8d7bd12;
}
.stage-caption small {
  margin-inline-start: auto;
  font-size: 7px;
  letter-spacing: 1px;
  color: #7790a9;
}
.stage-main-photo {
  display: block;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 25px;
  border: 1px solid #ffffff25;
  border-radius: 26px;
  overflow: hidden;
  background: #142d49;
  box-shadow: 0 24px 70px #00000020;
}
.stage-main-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  object-position: center 54%;
  filter: brightness(0.83);
}
.stage-main-photo:hover > img {
  transform: scale(1.035);
}
.stage-main-photo:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(0deg, #05172de8, transparent);
}
.stage-photo-label {
  position: absolute;
  right: 25px;
  left: 25px;
  bottom: 25px;
  z-index: 1;
}
.stage-photo-label > span {
  font-size: 10px;
  color: #e9d6b3;
  display: block;
  margin-bottom: 7px;
}
.stage-photo-label > b {
  font-family: Alexandria, sans-serif;
  font-size: 23px;
  color: white;
  display: block;
  font-weight: 600;
}
.stage-photo-label > i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff16;
  border: 1px solid #ffffff40;
  font-size: 23px;
  font-style: normal;
  backdrop-filter: blur(8px);
}
.stage-floating-receipt {
  position: absolute;
  top: 98px;
  left: -35px;
  width: 212px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  background: #fffefa;
  box-shadow: 0 20px 60px #00000030;
  border-radius: 18px;
  transform: rotate(-6deg);
  color: #102d4f;
  z-index: 2;
  transition: transform 0.3s;
}
.stage-floating-receipt:hover {
  transform: rotate(-3deg) translateY(-4px);
}
.receipt-mark {
  font-size: 7px;
  letter-spacing: 1.1px;
  color: #8191a1;
}
.receipt-demo-title {
  font-family: Alexandria, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  margin: 12px 0 17px;
}
.receipt-demo-row {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  padding: 8px 0;
  color: #617286;
  border-bottom: 1px dashed #e3e8ed;
}
.receipt-demo-row > b {
  font-size: 9px;
  color: #102d4f;
  font-weight: 500;
}
.receipt-demo-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 17px 0 13px;
  font-size: 8px;
  color: #617286;
}
.receipt-demo-total > b {
  font-size: 20px;
  color: #102d4f;
  font-weight: 650;
  white-space: nowrap;
}
.receipt-demo-total small {
  display: inline;
  font-size: 8px;
  color: #617286;
}
.receipt-demo-state {
  font-size: 7px;
  color: #428162;
  padding-top: 9px;
  border-top: 1px solid #e7ece9;
  display: flex;
  gap: 6px;
  align-items: center;
}
.receipt-demo-state i {
  font-style: normal;
  width: 14px;
  height: 14px;
  background: #e8f3ec;
  color: #428162;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.stage-corner {
  position: absolute;
  right: 18px;
  bottom: -10px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.stage-corner > b {
  font-size: 46px;
  line-height: 1;
  color: #dab883;
  font-weight: 500;
  letter-spacing: -3px;
}
.stage-corner > span {
  font-size: 9px;
  line-height: 1.8;
  color: #9db0c5;
}
.hero-bottom-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid #ffffff18;
  color: #b7c5d3;
  font-size: 9px;
}
.hero-bottom-line > span:last-child {
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #7890a7;
}
.hero-bottom-line i {
  font-size: 17px;
  font-style: normal;
  margin-inline-start: 20px;
  color: #e5c48d;
}
.premium-experiences {
  padding-top: 85px;
  padding-bottom: 65px;
}
.premium-section-heading {
  margin-bottom: 35px;
  align-items: end;
}
.premium-eyebrow.dark {
  color: #8c744e;
}
.premium-section-heading h2 {
  font-size: 42px;
  line-height: 1.5;
  font-weight: 600;
}
.premium-section-heading h2 em {
  font-style: normal;
  color: #1769cf;
}
.section-note {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 8px;
}
.section-note > span {
  font-size: 11px;
  color: #9e8e76;
  letter-spacing: 1px;
  direction: ltr;
  padding-left: 20px;
  border-left: 1px solid #d9dedf;
}
.section-note > p {
  font-size: 12px;
  line-height: 1.9;
  color: #6b7a88;
}
.premium-service-grid {
  gap: 25px;
}
.experience-card.service-card {
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: #0d2239;
  box-shadow: 0 12px 35px #0d22390b;
  overflow: hidden;
  animation: none;
}
.experience-card.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px #0d223920;
}
.experience-tile {
  display: block;
  height: 490px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
}
.tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.65s cubic-bezier(0.2, 0.6, 0.2, 1);
  filter: saturate(0.85);
}
.experience-tile:hover .tile-photo {
  transform: scale(1.04);
}
.tile-dizly .tile-photo {
  object-position: center 40%;
}
.tile-pos .tile-photo {
  object-position: 64% 12%;
  filter: saturate(0.65) brightness(0.9);
}
.tile-menu .tile-photo {
  object-position: center 40%;
}
.tile-portfolio .tile-photo {
  object-position: 50% 40%;
}
.tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    #06192afc 0%,
    #071d32eb 28%,
    #071b2f80 55%,
    #06192a20 80%,
    #06192a55 100%
  );
  z-index: -1;
}
.tile-top {
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tile-symbol {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border: 1px solid #ffffff35;
  background: #ffffff12;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #f1e7d8;
}
.tile-number {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #ffffffd6;
  direction: ltr;
}
.tile-open {
  margin-inline-start: auto;
  background: #ffffff18;
  border: 1px solid #ffffff30;
  backdrop-filter: blur(9px);
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-size: 21px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.experience-tile:hover .tile-open {
  background: #d9b985;
  color: #0d2239;
  transform: rotate(-6deg);
}
.tile-copy {
  position: absolute;
  bottom: 28px;
  left: 30px;
  right: 30px;
  display: block;
}
.tile-kicker {
  font-size: 10px;
  color: #d8bc90;
  line-height: 1.9;
  display: block;
  margin-bottom: 7px;
}
.tile-copy h3 {
  font-size: 29px;
  color: #fff;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 9px;
}
.tile-description {
  display: block;
  font-size: 11px;
  line-height: 1.95;
  color: #cad5df;
  max-width: 410px;
}
.tile-features {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 17px 0 23px;
}
.tile-features > span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  font-size: 8px;
  line-height: 1.7;
  color: #dee7ed;
  background: #ffffff0e;
  border: 1px solid #ffffff20;
  border-radius: 6px;
  padding: 4px 9px;
}
.tile-bottom {
  border-top: 1px solid #ffffff24;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.tile-cta {
  min-height: 46px;
  min-width: 146px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 27px;
  padding: 11px 17px;
  border-radius: 12px;
  background: #fffdf7;
  color: #102d4f;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.2s;
}
.tile-cta > span {
  font-size: 20px;
  line-height: 1;
}
.experience-tile:hover .tile-cta {
  background: #e7c795;
}
.tile-live {
  font-size: 8px;
  color: #aebed0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tile-live i {
  display: block;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #a9d4ba;
}
.experience-journey {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 100px;
  align-items: start;
  padding-top: 45px;
  padding-bottom: 75px;
  border-top: 1px solid #dce2e5;
}
.journey-heading h2 {
  font-size: 29px;
  line-height: 1.7;
}
.experience-journey ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.experience-journey li {
  display: flex;
  gap: 23px;
  padding: 0 0 23px;
  margin-bottom: 23px;
  border-bottom: 1px solid #dce2e5;
}
.experience-journey li:last-child {
  margin: 0;
  padding-bottom: 0;
  border: 0;
}
.experience-journey li > span {
  font-size: 12px;
  color: #ac966f;
  padding-top: 4px;
  direction: ltr;
}
.experience-journey h3 {
  font-size: 18px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.experience-journey p {
  font-size: 11px;
  line-height: 1.9;
}
body:not([data-experience-page="dizly"]) .service-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #102d4f;
  color: white;
  border: 0;
  padding: 48px 50px;
  border-radius: 26px;
  min-height: 210px;
}
body:not([data-experience-page="dizly"]) .service-cta:after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  left: -150px;
  top: -120px;
  border: 1px solid #ffffff12;
  border-radius: 50%;
  box-shadow: 0 0 0 65px #ffffff04;
  z-index: -1;
}
body:not([data-experience-page="dizly"]) .service-cta h2 {
  color: #fff;
  font-size: 30px;
  line-height: 1.6;
}
body:not([data-experience-page="dizly"]) .service-cta p {
  color: #acbed0;
  font-size: 12px;
}
body:not([data-experience-page="dizly"]) .service-cta .eyebrow {
  color: #d4b582;
}
body:not([data-experience-page="dizly"]) .service-cta > .button {
  background: #e4c592;
  color: #102d4f;
  min-height: 53px;
  white-space: nowrap;
}
body:not([data-experience-page="dizly"]) .workspace-top {
  padding-block: 38px 28px;
}
body:not([data-experience-page="dizly"]) .workspace-top h1 {
  font-size: 34px;
  line-height: 1.6;
}
body:not([data-experience-page="dizly"]) .workspace-top .eyebrow {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #8e7956;
}
body:not([data-experience-page="dizly"]) .card {
  box-shadow: 0 14px 45px #102d4f08;
  border-color: #dde4e9;
  border-radius: 24px;
}
body:not([data-experience-page="dizly"]) .restaurant-cover {
  height: 300px;
}
body:not([data-experience-page="dizly"]) .restaurant-info {
  padding-top: 43px;
}
body:not([data-experience-page="dizly"]) .restaurant-info > h1 {
  font-size: 35px;
}
body:not([data-experience-page="dizly"]) .restaurant-logo {
  width: 88px;
  height: 88px;
  top: -43px;
  border-radius: 24px;
}
body:not([data-experience-page="dizly"]) .offer-banner {
  padding: 24px;
  border-inline-start-width: 3px;
}
body:not([data-experience-page="dizly"]) .product {
  border-radius: 18px;
  box-shadow: 0 6px 20px #102d4f04;
}
body:not([data-experience-page="dizly"]) .product > img {
  height: 175px;
}
body:not([data-experience-page="dizly"]) .product-copy {
  padding: 18px;
}
body:not([data-experience-page="dizly"]) .product h3 {
  font-size: 15px;
}
body:not([data-experience-page="dizly"]) .product p {
  font-size: 11px;
}
body:not([data-experience-page="dizly"]) .product-bottom b {
  font-size: 13px;
}
body:not([data-experience-page="dizly"]) .product .add {
  min-height: 42px;
  min-width: 42px;
}
body:not([data-experience-page="dizly"]) .device-preview .restaurant-cover {
  height: 150px;
}
body:not([data-experience-page="dizly"]) .device-preview .restaurant-info {
  padding-top: 32px;
}
body:not([data-experience-page="dizly"]) .device-preview .restaurant-info > h1 {
  font-size: 24px;
}
body:not([data-experience-page="dizly"]) .device-preview .restaurant-logo {
  width: 61px;
  height: 61px;
  top: -30px;
  border-radius: 17px;
}
body:not([data-experience-page="dizly"]) .device-preview .product > img {
  height: 95px;
}
body:not([data-experience-page="dizly"]) .device-preview .product-copy {
  padding: 11px;
}
body:not([data-experience-page="dizly"]) .device-preview .product h3 {
  font-size: 11px;
}
body:not([data-experience-page="dizly"]) .device-preview .product p {
  font-size: 8px;
}
body:not([data-experience-page="dizly"]) .device-preview .product-bottom b {
  font-size: 9px;
}
body:not([data-experience-page="dizly"]) .device-preview .product .add {
  min-width: 29px;
  min-height: 29px;
}
body:not([data-experience-page="dizly"]) .pos-products .product > img {
  height: 150px;
}
body:not([data-experience-page="dizly"]) .order-panel {
  background: #102d4f;
  color: #fff;
  border: 0;
  padding: 27px;
  box-shadow: 0 20px 50px #102d4f20;
}
body:not([data-experience-page="dizly"]) .order-panel .section-heading h2 {
  color: #fff;
  font-size: 22px;
}
body:not([data-experience-page="dizly"]) .order-panel .status-pill {
  background: #ffffff12;
  border: 1px solid #ffffff20;
  color: #e8c78f;
}
body:not([data-experience-page="dizly"]) .order-panel .tabs > * {
  background: transparent;
  border-color: #ffffff25;
  color: #c5d1de;
}
body:not([data-experience-page="dizly"]) .order-panel .tabs > .active {
  background: #e8c991;
  color: #102d4f;
  border-color: #e8c991;
}
body:not([data-experience-page="dizly"]) .order-panel .field {
  color: #d3deea;
}
body:not([data-experience-page="dizly"]) .order-panel .field input,
body:not([data-experience-page="dizly"]) .order-panel .field textarea {
  background: #ffffff0c;
  border-color: #ffffff25;
  color: #fff;
}
body:not([data-experience-page="dizly"]) .order-panel textarea::placeholder {
  color: #98adc2;
}
body:not([data-experience-page="dizly"]) .order-panel .cart-line {
  border-color: #ffffff20;
}
body:not([data-experience-page="dizly"]) .order-panel .quantity button {
  background: #ffffff12;
  color: #fff;
}
body:not([data-experience-page="dizly"]) .order-panel small,
body:not([data-experience-page="dizly"]) .order-panel .empty p {
  color: #9fb3c9;
}
body:not([data-experience-page="dizly"]) .order-panel .empty h3 {
  color: #fff;
}
body:not([data-experience-page="dizly"]) .order-panel .order-summary > span {
  color: #b4c4d5;
}
body:not([data-experience-page="dizly"]) .order-panel .total {
  border-color: #ffffff30;
}
body:not([data-experience-page="dizly"]) .order-panel .total b {
  color: #fff;
}
body:not([data-experience-page="dizly"]) .order-panel > .button {
  background: #e8c991;
  color: #102d4f;
}
body:not([data-experience-page="dizly"]) .portfolio-intro {
  padding-top: 55px;
}
body:not([data-experience-page="dizly"]) .portfolio-intro > h1 {
  font-size: 48px;
  line-height: 1.55;
}
body:not([data-experience-page="dizly"]) .portfolio-image {
  height: 340px;
  border: 1px solid #dfe5ea;
  box-shadow: 0 15px 40px #102d4f10;
  border-radius: 25px;
}
body:not([data-experience-page="dizly"]) .portfolio-card > h2 {
  font-size: 25px;
}
body:not([data-experience-page="dizly"]) .portfolio-card > p:not(.eyebrow) {
  font-size: 13px;
}
body:not([data-experience-page="dizly"]) .footer {
  background: #f0f1ef;
  padding-block: 35px;
  border-color: #dbe2e7;
}
@media (max-width: 1100px) {
  .premium-hero-grid {
    gap: 45px;
    min-height: 620px;
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .premium-hero h1 {
    font-size: 44px;
  }
  .premium-stage {
    height: 430px;
  }
  .stage-floating-receipt {
    width: 190px;
    left: -15px;
    padding: 17px;
  }
  .tile-copy h3 {
    font-size: 25px;
  }
  .experience-tile {
    height: 460px;
  }
  .experience-journey {
    gap: 60px;
  }
  .premium-section-heading h2 {
    font-size: 37px;
  }
}
@media (max-width: 800px) {
  .premium-hero-grid {
    gap: 35px;
    padding-top: 40px;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .premium-hero-copy {
    max-width: 610px;
  }
  .premium-hero h1 {
    font-size: 44px;
    max-width: 590px;
  }
  .premium-stage {
    height: 360px;
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
  }
  .stage-main-photo {
    left: 0;
    right: 60px;
    top: 30px;
    bottom: 15px;
  }
  .stage-floating-receipt {
    left: 0;
    top: 70px;
    width: 200px;
  }
  .stage-corner {
    right: 75px;
    bottom: 0;
  }
  .stage-caption {
    padding-right: 65px;
  }
  .premium-section-heading h2 {
    font-size: 33px;
  }
  .section-note > span {
    display: none;
  }
  .premium-experiences {
    padding-top: 55px;
  }
  .experience-tile {
    height: 440px;
  }
  .tile-top {
    top: 20px;
    left: 20px;
    right: 20px;
  }
  .tile-copy {
    left: 23px;
    right: 23px;
    bottom: 23px;
  }
  .tile-copy h3 {
    font-size: 24px;
  }
  .tile-features {
    gap: 5px;
  }
  .tile-features > span {
    font-size: 7px;
    padding-inline: 6px;
  }
  .tile-live {
    display: none;
  }
  .tile-cta {
    width: 100%;
  }
  .experience-journey {
    gap: 40px;
    grid-template-columns: 1fr 1.3fr;
  }
  .journey-heading h2 {
    font-size: 24px;
  }
  .experience-journey h3 {
    font-size: 16px;
  }
  .experience-journey p {
    font-size: 10px;
  }
}
@media (max-width: 540px) {
  body:not([data-experience-page="dizly"]) .topbar {
    padding: 10px 16px 6px;
    gap: 5px;
    min-height: 0;
  }
  body:not([data-experience-page="dizly"]) .brand img {
    width: 88px;
    height: 42px;
  }
  body:not([data-experience-page="dizly"]) .brand span {
    display: block;
    font-size: 8px;
    letter-spacing: 1.2px;
    padding-right: 11px;
  }
  body:not([data-experience-page="dizly"]) .topbar > .button {
    font-size: 10px;
    min-height: 39px;
    padding: 8px 12px;
  }
  body:not([data-experience-page="dizly"]) .topbar nav {
    padding: 0;
    gap: 16px;
  }
  body:not([data-experience-page="dizly"]) .topbar nav a {
    font-size: 11px;
    min-height: 44px;
    padding: 13px 0 10px;
  }
  .premium-hero {
    border-radius: 0 0 28px 28px;
  }
  .premium-hero-grid {
    padding-top: 31px;
    padding-bottom: 32px;
    gap: 22px;
  }
  .premium-eyebrow {
    font-size: 8px;
    letter-spacing: 0.6px;
    margin-bottom: 17px;
    gap: 8px;
  }
  .premium-hero h1 {
    font-size: 32px;
    line-height: 1.6;
    max-width: 390px;
  }
  .premium-lead {
    font-size: 13px;
    line-height: 1.95;
    margin-top: 17px;
  }
  .premium-primary {
    margin-top: 21px;
    min-height: 52px;
    min-width: 170px;
    font-size: 12px;
  }
  .premium-proof {
    font-size: 8px;
    gap: 14px;
    margin-top: 18px;
  }
  .premium-stage {
    height: 158px;
  }
  .stage-caption {
    display: none;
  }
  .stage-main-photo {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 19px;
  }
  .stage-main-photo > img {
    object-position: center 47%;
    filter: brightness(0.6);
  }
  .stage-photo-label {
    right: 19px;
    bottom: 22px;
    left: 18px;
  }
  .stage-photo-label > span {
    font-size: 9px;
    margin-bottom: 7px;
  }
  .stage-photo-label > b {
    font-size: 19px;
  }
  .stage-photo-label > i {
    width: 39px;
    height: 39px;
    font-size: 21px;
  }
  .stage-floating-receipt,
  .stage-corner {
    display: none;
  }
  .hero-bottom-line {
    padding-block: 16px;
    font-size: 8px;
    gap: 10px;
  }
  .hero-bottom-line > span:last-child {
    display: none;
  }
  .hero-bottom-line i {
    font-size: 16px;
    margin-inline-start: 8px;
  }
  .premium-experiences {
    padding-top: 41px;
    padding-bottom: 36px;
  }
  .premium-section-heading {
    margin-bottom: 23px;
    align-items: flex-end;
    gap: 14px;
  }
  .premium-section-heading h2 {
    font-size: 32px;
    line-height: 1.5;
  }
  .premium-section-heading .premium-eyebrow {
    font-size: 8px;
    letter-spacing: 0;
    margin-bottom: 10px;
  }
  .section-note {
    max-width: 136px;
    padding: 0;
  }
  .section-note > p {
    font-size: 10px;
    line-height: 1.9;
  }
  .premium-service-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 19px;
  }
  .experience-card.service-card,
  .experience-tile {
    border-radius: 22px;
  }
  .experience-tile {
    height: 402px;
  }
  .tile-top {
    top: 20px;
    left: 20px;
    right: 20px;
    gap: 10px;
  }
  .tile-symbol {
    width: 37px;
    min-width: 37px;
    height: 37px;
    font-size: 9px;
    border-radius: 10px;
  }
  .tile-number {
    font-size: 7px;
    letter-spacing: 1.2px;
  }
  .tile-open {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }
  .tile-copy {
    right: 23px;
    left: 23px;
    bottom: 23px;
  }
  .tile-kicker {
    font-size: 9px;
    margin-bottom: 6px;
  }
  .tile-copy h3 {
    font-size: 27px;
    margin-bottom: 8px;
    line-height: 1.55;
  }
  .tile-description {
    font-size: 11px;
    line-height: 1.95;
    max-width: none;
  }
  .tile-features {
    gap: 6px;
    margin: 15px 0 20px;
  }
  .tile-features > span {
    font-size: 8px;
    min-height: 27px;
    padding: 4px 8px;
    border-radius: 6px;
  }
  .tile-bottom {
    padding-top: 17px;
  }
  .tile-cta {
    width: 100%;
    min-height: 49px;
    font-size: 12px;
    padding: 12px 17px;
  }
  .tile-live {
    display: none;
  }
  .tile-shade {
    background: linear-gradient(
      0deg,
      #071c30 0%,
      #071c30ef 32%,
      #071c3090 60%,
      #071c3018 88%,
      #071c3050 100%
    );
  }
  .tile-portfolio h3 {
    font-size: 24px;
  }
  .experience-journey {
    padding-top: 31px;
    padding-bottom: 37px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .journey-heading h2 {
    font-size: 26px;
  }
  .experience-journey li {
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 18px;
  }
  .experience-journey li > span {
    font-size: 11px;
  }
  .experience-journey h3 {
    font-size: 17px;
  }
  .experience-journey p {
    font-size: 12px;
    line-height: 1.8;
  }
  .premium-contact .service-cta {
    margin-top: 0;
  }
  body:not([data-experience-page="dizly"]) .service-cta {
    padding: 28px 25px;
    border-radius: 22px;
    min-height: 0;
  }
  body:not([data-experience-page="dizly"]) .service-cta h2 {
    font-size: 25px;
    line-height: 1.6;
  }
  body:not([data-experience-page="dizly"]) .service-cta p {
    font-size: 12px;
    line-height: 1.9;
  }
  body:not([data-experience-page="dizly"]) .service-cta > .button {
    width: 100%;
    min-height: 53px;
    font-size: 12px;
  }
  body:not([data-experience-page="dizly"]) .workspace-top {
    padding-block: 26px 22px;
    gap: 17px;
  }
  body:not([data-experience-page="dizly"]) .workspace-top h1 {
    font-size: 27px;
  }
  body:not([data-experience-page="dizly"]) .workspace-top .eyebrow {
    font-size: 9px;
  }
  body:not([data-experience-page="dizly"]) .workspace-top .actions .button {
    min-height: 46px;
    font-size: 10px;
  }
  body:not([data-experience-page="dizly"]) .restaurant-cover {
    height: 205px;
  }
  body:not([data-experience-page="dizly"]) .restaurant-info {
    padding-top: 37px;
  }
  body:not([data-experience-page="dizly"]) .restaurant-info > h1 {
    font-size: 28px;
  }
  body:not([data-experience-page="dizly"]) .restaurant-logo {
    width: 70px;
    height: 70px;
    top: -35px;
    border-radius: 20px;
  }
  body:not([data-experience-page="dizly"]) .restaurant-info > p:not(.eyebrow) {
    font-size: 12px;
    line-height: 1.9;
  }
  body:not([data-experience-page="dizly"]) .restaurant-meta {
    font-size: 10px;
    gap: 8px;
  }
  body:not([data-experience-page="dizly"]) .offer-banner {
    padding: 20px;
  }
  body:not([data-experience-page="dizly"]) .offer-banner b {
    font-size: 18px;
  }
  body:not([data-experience-page="dizly"]) .offer-banner small {
    font-size: 10px;
  }
  body:not([data-experience-page="dizly"]) .product > img,
  body:not([data-experience-page="dizly"]) .pos-products .product > img {
    height: 123px;
  }
  body:not([data-experience-page="dizly"]) .product-copy {
    padding: 12px;
  }
  body:not([data-experience-page="dizly"]) .product h3 {
    font-size: 13px;
  }
  body:not([data-experience-page="dizly"]) .product p {
    font-size: 10px;
    line-height: 1.8;
    min-height: 36px;
  }
  body:not([data-experience-page="dizly"]) .product-bottom b {
    font-size: 11px;
  }
  body:not([data-experience-page="dizly"]) .product .add {
    min-width: 44px;
    min-height: 44px;
  }
  body:not([data-experience-page="dizly"]) .device-preview .restaurant-cover {
    height: 140px;
  }
  body:not([data-experience-page="dizly"])
    .device-preview
    .restaurant-info
    > h1 {
    font-size: 24px;
  }
  body:not([data-experience-page="dizly"]) .device-preview .restaurant-logo {
    width: 58px;
    height: 58px;
    top: -29px;
  }
  body:not([data-experience-page="dizly"]) .device-preview .product-copy {
    padding: 10px;
  }
  body:not([data-experience-page="dizly"]) .device-preview .product h3 {
    font-size: 11px;
  }
  body:not([data-experience-page="dizly"]) .device-preview .product p {
    font-size: 9px;
  }
  body:not([data-experience-page="dizly"]) .device-preview .product-bottom b {
    font-size: 10px;
  }
  body:not([data-experience-page="dizly"]) .device-preview .product .add {
    min-width: 34px;
    min-height: 34px;
  }
  body:not([data-experience-page="dizly"]) .pos-workspace {
    gap: 19px;
  }
  body:not([data-experience-page="dizly"]) .order-panel {
    padding: 22px;
  }
  body:not([data-experience-page="dizly"]) .order-panel .quantity {
    gap: 6px;
  }
  body:not([data-experience-page="dizly"]) .order-panel .quantity button {
    width: 36px;
    min-width: 36px;
    min-height: 44px;
  }
  body:not([data-experience-page="dizly"]) .portfolio-intro {
    padding-top: 32px;
  }
  body:not([data-experience-page="dizly"]) .portfolio-intro > h1 {
    font-size: 34px;
  }
  body:not([data-experience-page="dizly"]) .portfolio-image {
    height: 260px;
    border-radius: 22px;
  }
  body:not([data-experience-page="dizly"]) .portfolio-grid {
    gap: 33px;
  }
  body:not([data-experience-page="dizly"]) .portfolio-card > h2 {
    font-size: 25px;
  }
  body:not([data-experience-page="dizly"]) .portfolio-card > p:not(.eyebrow) {
    font-size: 12px;
    line-height: 1.9;
  }
}
@media (max-width: 365px) {
  .premium-hero h1 {
    font-size: 29px;
  }
  .premium-proof {
    font-size: 7px;
    gap: 10px;
  }
  .premium-section-heading h2 {
    font-size: 29px;
  }
  .section-note {
    max-width: 118px;
  }
  .section-note > p {
    font-size: 9px;
  }
  .experience-tile {
    height: 410px;
  }
  .tile-copy {
    left: 20px;
    right: 20px;
  }
  .tile-copy h3 {
    font-size: 25px;
  }
  .tile-portfolio h3 {
    font-size: 23px;
  }
  .tile-features > span {
    font-size: 7px;
    padding-inline: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .experience-tile .tile-photo,
  .tile-open,
  .stage-main-photo > img,
  .stage-floating-receipt {
    transition: none !important;
  }
  .experience-card.service-card:hover,
  .experience-tile:hover .tile-photo,
  .stage-main-photo:hover > img,
  .stage-floating-receipt:hover {
    transform: none !important;
  }
}
@media print {
  body:not([data-experience-page="dizly"]) {
    background: white;
  }
  .premium-hero,
  .premium-experiences,
  .experience-journey,
  .premium-contact {
    display: none !important;
  }
}

/* Phones reach the service choices sooner; the POS order stays one tap away. */
.pos-mobile-bar {
  display: none;
}
@media (max-width: 540px) {
  .premium-hero-grid {
    padding-top: 26px;
    padding-bottom: 29px;
    gap: 0;
  }
  .premium-stage,
  .hero-bottom-line {
    display: none;
  }
  .premium-hero h1 {
    font-size: 30px;
    line-height: 1.55;
  }
  .premium-eyebrow {
    margin-bottom: 14px;
  }
  .premium-lead {
    margin-top: 15px;
    font-size: 13px;
  }
  .premium-proof {
    margin-top: 16px;
  }
  .premium-experiences {
    padding-top: 30px;
  }
  .premium-section-heading {
    display: block;
    margin-bottom: 21px;
  }
  .premium-section-heading h2 {
    font-size: 29px;
    line-height: 1.5;
  }
  .premium-section-heading h2 br {
    display: none;
  }
  .premium-section-heading h2 em {
    padding-inline-start: 5px;
  }
  .section-note {
    max-width: none;
    margin-top: 9px;
    padding: 0;
  }
  .section-note p {
    font-size: 11px;
    line-height: 1.8;
  }
  .section-note p br {
    display: none;
  }
  body[data-experience-page="pos"] {
    padding-bottom: 85px;
  }
  .pos-mobile-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 25;
    min-height: 64px;
    padding: 10px 13px 10px 18px;
    background: #102d4f;
    color: #fff;
    border: 1px solid #ffffff28;
    border-radius: 17px;
    box-shadow: 0 10px 40px #102d4f35;
  }
  .pos-mobile-bar > span {
    flex: 1;
  }
  .pos-mobile-bar strong {
    font-size: 12px;
    display: block;
    line-height: 1.6;
  }
  .pos-mobile-bar small {
    font-size: 9px;
    color: #c2d2e1;
    line-height: 1.5;
    display: block;
  }
  .pos-mobile-bar > b {
    font-size: 16px;
    color: #e9ca94;
    white-space: nowrap;
  }
  .pos-mobile-bar > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #ffffff14;
    font-size: 19px;
    font-style: normal;
  }
}
@media print {
  .pos-mobile-bar {
    display: none !important;
  }
}

/* User-supplied display face. Native Dezly typography remains independent. */
@font-face {
  font-family: "Alkamra Display";
  src: url("/experience/assets/ArabicUIDisplayBlack.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
body:not([data-experience-page="dizly"]) h1,
body:not([data-experience-page="dizly"]) h2,
body:not([data-experience-page="dizly"]) .tile-copy h3,
body:not([data-experience-page="dizly"]) .journey-heading h2,
body:not([data-experience-page="dizly"]) .experience-journey h3 {
  font-family: "Alkamra Display", Readex, system-ui, sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: normal;
}
body:not([data-experience-page="dizly"]) .premium-hero h1 {
  line-height: 1.4;
}
body:not([data-experience-page="dizly"]) .tile-copy h3 {
  line-height: 1.45;
  margin-bottom: 8px;
}
@media (max-width: 540px) {
  body:not([data-experience-page="dizly"]) .premium-hero h1 {
    font-size: 32px;
    line-height: 1.4;
  }
  body:not([data-experience-page="dizly"]) .premium-section-heading h2 {
    font-size: 29px;
    line-height: 1.5;
  }
}

/* studio.css */
/* Each service gets its own scene, rather than a repeated card shell. */
.gallery-scenes {
  display: block;
}
.gallery-scenes .experience-card.service-card {
  margin: 0 0 85px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.gallery-scenes .experience-card.service-card:hover {
  transform: none;
  box-shadow: none;
}
.gallery-scenes .experience-tile {
  height: auto;
  min-height: 480px;
  border-radius: 0;
  display: grid;
  padding: 0;
  isolation: isolate;
  background: transparent;
  color: #102d4f;
  overflow: visible;
}
.gallery-scenes .scene-copy {
  position: relative;
  z-index: 2;
  padding: 52px;
  align-self: center;
}
.scene-number {
  display: block;
  font-size: 9px;
  color: #8f9dac;
  direction: ltr;
  text-align: right;
  letter-spacing: 2px;
  margin-bottom: 42px;
}
.scene-eyebrow {
  display: block;
  color: #9c7744;
  font-size: 11px;
  margin-bottom: 12px;
  line-height: 1.9;
}
body:not([data-experience-page="dizly"]) .gallery-scenes h3 {
  font:
    900 clamp(30px, 3.5vw, 47px)/1.4 "Alkamra Display",
    Readex,
    sans-serif;
  margin: 0 0 15px;
  letter-spacing: normal;
}
.scene-description {
  font-size: 12px;
  line-height: 2;
  color: #6c7e8c;
  max-width: 420px;
  margin: 0 0 26px;
}
.scene-features {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.scene-features li {
  font-size: 9px;
  display: flex;
  gap: 7px;
  color: #627589;
  line-height: 1.9;
}
.scene-features li > span {
  color: #b7945e;
}
.scene-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  padding-bottom: 7px;
  border-bottom: 1px solid #9baebf;
  color: #102d4f;
}
.scene-action > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #102d4f;
  color: #fff;
  border-radius: 50%;
  font-size: 22px;
  transition:
    transform 220ms,
    background 220ms;
}
.experience-tile:hover .scene-action > span {
  transform: translate(-3px, -3px);
  background: #1769cf;
}
.gallery-scenes .experience-tile:focus-visible {
  outline: 3px solid #1769cf;
  outline-offset: 7px;
}
.gallery-scenes .tile-photo {
  z-index: 0;
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: none !important;
}
.scene-diz .experience-tile {
  grid-template-columns: 1fr 1fr;
}
.diz-scene-art {
  min-height: 530px;
  position: relative;
  background: #dcded6;
  border-radius: 180px 24px 24px 24px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.diz-scene-art > .tile-photo {
  position: absolute;
  inset: 0;
  filter: brightness(0.65);
}
.diz-scene-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #151c20a0, transparent 70%);
}
.scene-phone {
  position: relative;
  z-index: 1;
  width: 250px;
  height: 470px;
  overflow: hidden;
  border: 9px solid #151819;
  border-radius: 36px 36px 0 0;
  box-shadow: 12px 8px 60px #0006;
  background: white;
  transform: rotate(-6deg) translateY(38px);
}
.scene-phone img {
  width: 100%;
  display: block;
}
.scene-phone-speaker {
  width: 60px;
  height: 10px;
  position: absolute;
  background: #151819;
  border-radius: 0 0 8px 8px;
  top: 0;
  left: calc(50% - 30px);
  z-index: 2;
}
.diz-scene-caption {
  position: absolute;
  bottom: 20px;
  left: 21px;
  z-index: 2;
  color: white;
  font-size: 8px;
  letter-spacing: 1.5px;
  writing-mode: vertical-rl;
}
.gallery-scenes .experience-card.scene-pos {
  background: #e6eaf0;
  padding: 44px 48px 27px;
  border-radius: 12px 12px 60px 12px;
}
.scene-pos .experience-tile {
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.pos-scene-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.pos-scene-heading .scene-number {
  margin-bottom: 14px;
}
.pos-scene-heading .scene-description {
  max-width: 600px;
  margin-bottom: 20px;
}
.pos-scene-heading .scene-action {
  flex-shrink: 0;
}
.pos-scene-art {
  width: 90%;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 1.95;
  overflow: hidden;
}
.pos-scene-art > .tile-photo {
  object-fit: contain;
}
.scene-note {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  background: #f9faf8;
  padding: 11px 18px;
  border-radius: 5px;
  font-size: 9px;
  box-shadow: 0 8px 30px #102d4f12;
}
.scene-note i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #47806b;
}
.scene-pos .scene-features {
  margin-top: 20px;
  margin-bottom: 0;
}
.scene-menu .experience-tile {
  grid-template-columns: 1.1fr 1fr;
  background: #f1eadd;
  border-radius: 14px;
}
.menu-scene-art {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
}
.menu-scene-art > .tile-photo {
  position: absolute;
  inset: 0;
}
.table-label {
  position: absolute;
  bottom: 27px;
  right: 27px;
  min-width: 140px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fffdf3;
  box-shadow: 0 8px 30px #32261420;
  transform: rotate(4deg);
}
.table-label b {
  font-size: 42px;
  font-family: Georgia, serif;
  color: #94764d;
  font-weight: 400;
}
.table-label small {
  font-size: 10px;
  line-height: 1.9;
  color: #6b655a;
}
.scene-menu .scene-action > span {
  background: #806442;
}
.gallery-scenes .scene-web .experience-tile {
  min-height: 580px;
  background: #101e2a;
  border-radius: 10px;
  color: white;
  overflow: hidden;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}
.scene-web .scene-copy {
  padding: 65px 45px;
}
.scene-web .scene-number {
  color: #8396a9;
}
.scene-web .scene-description,
.scene-web .scene-features li {
  color: #b3c2ce;
}
.scene-web .scene-action {
  color: #fff;
  border-color: #ffffff40;
}
.scene-web .scene-action > span {
  background: #e2bf85;
  color: #102d4f;
}
.web-scene-art {
  padding: 65px 0 65px 35px;
  position: relative;
  z-index: 1;
  transform: perspective(1200px) rotateY(8deg);
}
.web-scene-art > .tile-photo {
  border: 5px solid #2a3947;
  border-top-width: 28px;
  border-radius: 9px;
  box-shadow: 0 40px 70px #0005;
  height: 340px;
}
.web-browser-bar {
  display: flex;
  gap: 5px;
  align-items: center;
  position: absolute;
  top: 75px;
  right: 16px;
  left: 51px;
  direction: ltr;
}
.web-browser-bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7d8d9c;
}
.web-browser-bar i:first-child {
  background: #ca927b;
}
.web-browser-bar span {
  font-size: 6px;
  color: #c2d0dc;
  margin-left: auto;
  letter-spacing: 2px;
}
.web-scene-word {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  font-size: clamp(90px, 16vw, 235px);
  font-weight: 800;
  letter-spacing: -10px;
  color: #ffffff04;
  direction: ltr;
  line-height: 1;
  pointer-events: none;
}
.menu-trial {
  position: relative;
  background: #f1dcae;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 230px 1fr;
  border-radius: 8px;
  overflow: hidden;
  color: #43301d;
}
.trial-stamp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 34px 20px;
  border-inline-end: 1px dashed #a17d4a65;
  position: relative;
}
.trial-stamp:before,
.trial-stamp:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f5f5f2;
  left: -12px;
}
.trial-stamp:before {
  top: -12px;
}
.trial-stamp:after {
  bottom: -12px;
}
.trial-stamp strong {
  font-size: 115px;
  font-weight: 400;
  font-family: Georgia, serif;
  line-height: 1;
  letter-spacing: -10px;
  color: #72502a;
  padding: 6px 12px 0 0;
}
.trial-stamp > span {
  font-size: 12px;
}
.trial-copy {
  padding: 36px 42px 32px 60px;
}
body:not([data-experience-page="dizly"]) .trial-copy h2 {
  font-size: 31px;
  line-height: 1.4;
  color: #49321c;
  margin-bottom: 12px;
}
.trial-copy > p {
  font-size: 11px;
  line-height: 1.9;
  color: #786047;
}
.trial-copy .eyebrow {
  margin-bottom: 10px;
  font-size: 10px;
  color: #917247;
}
body:not([data-experience-page="dizly"]) .trial-action {
  display: inline-flex;
  background: #49321c;
  color: #fff5e2;
  border-radius: 6px;
  gap: 24px;
  font-size: 12px;
  margin: 16px 0 13px;
}
.trial-copy > small {
  display: block;
  color: #806e57;
  font-size: 9px;
  line-height: 1.9;
  max-width: 470px;
}
.trial-edge {
  position: absolute;
  top: 30px;
  left: 18px;
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: 2px;
  color: #957449;
}
.menu-offer-wrap {
  margin: 0 auto 65px;
}
.menu-offer-wrap .menu-trial {
  margin-top: 0;
}
@media (max-width: 900px) {
  .gallery-scenes .scene-copy {
    padding: 32px;
  }
  .diz-scene-art {
    min-height: 490px;
  }
  .scene-number {
    margin-bottom: 24px;
  }
  .pos-scene-heading {
    display: block;
  }
  .pos-scene-heading .scene-action {
    margin-bottom: 20px;
  }
  .gallery-scenes .scene-pos {
    padding: 30px;
  }
  .pos-scene-art {
    width: 100%;
  }
  .scene-menu .experience-tile {
    grid-template-columns: 1fr 1fr;
  }
  .scene-web .experience-tile {
    grid-template-columns: 1fr !important;
  }
  .scene-web .scene-copy {
    padding-top: 10px;
  }
  .web-scene-art {
    padding: 30px 30px 20px;
    transform: none;
  }
  .web-browser-bar {
    top: 40px;
    right: 44px;
  }
  .web-scene-art > .tile-photo {
    height: 300px;
  }
}
@media (max-width: 540px) {
  .gallery-scenes .experience-card.service-card {
    margin-bottom: 50px;
  }
  .gallery-scenes .experience-tile {
    min-height: 400px;
  }
  .gallery-scenes .scene-copy {
    padding: 28px 2px 0;
  }
  .gallery-scenes .scene-diz .experience-tile,
  .gallery-scenes .scene-menu .experience-tile {
    display: flex;
    flex-direction: column;
  }
  .scene-diz .scene-copy {
    order: 2;
  }
  .diz-scene-art {
    min-height: 340px;
    width: 100%;
    border-radius: 100px 15px 15px 15px;
  }
  .scene-phone {
    width: 200px;
    height: 330px;
    border-width: 7px;
    border-radius: 27px 27px 0 0;
    transform: rotate(-6deg) translateY(35px);
  }
  .scene-number {
    font-size: 8px;
    margin-bottom: 15px;
  }
  .scene-eyebrow {
    font-size: 10px;
  }
  body:not([data-experience-page="dizly"]) .gallery-scenes h3 {
    font-size: 30px;
  }
  .scene-description {
    font-size: 11px;
    margin-bottom: 18px;
  }
  .scene-features {
    margin-bottom: 18px;
    gap: 7px 15px;
  }
  .scene-action {
    font-size: 12px;
    min-height: 50px;
  }
  .gallery-scenes .scene-pos {
    margin-inline: -4px;
    padding: 25px 20px;
    border-radius: 10px 10px 36px 10px;
  }
  .pos-scene-heading .scene-description {
    font-size: 11px;
  }
  .pos-scene-art {
    aspect-ratio: 1.5;
    margin-top: 5px;
  }
  .scene-note {
    position: relative;
    display: inline-flex;
    font-size: 8px;
    padding: 9px 11px;
  }
  .scene-pos .scene-features {
    margin-top: 10px;
  }
  .menu-scene-art {
    min-height: 300px;
    width: 100%;
    border-radius: 10px 10px 0 0;
  }
  .scene-menu .scene-copy {
    padding: 29px 22px 30px;
  }
  .table-label {
    bottom: 20px;
    right: 20px;
    min-width: 125px;
    padding: 12px;
  }
  .table-label b {
    font-size: 34px;
  }
  .gallery-scenes .scene-web .experience-tile {
    min-height: 600px;
  }
  .web-scene-art {
    padding: 25px 20px 0;
  }
  .web-scene-art > .tile-photo {
    height: 215px;
    border-width: 3px;
    border-top-width: 23px;
  }
  .web-browser-bar {
    top: 34px;
    right: 30px;
    left: 31px;
  }
  .gallery-scenes .scene-web .scene-copy {
    padding: 28px 24px 35px;
  }
  .menu-trial {
    grid-template-columns: 87px minmax(0, 1fr);
    margin-top: 16px;
  }
  .trial-stamp {
    padding: 30px 10px;
  }
  .trial-stamp strong {
    font-size: 65px;
    letter-spacing: -6px;
    padding-right: 6px;
  }
  .trial-stamp > span {
    font-size: 9px;
  }
  .trial-copy {
    padding: 24px 17px 24px 20px;
  }
  body:not([data-experience-page="dizly"]) .trial-copy h2 {
    font-size: 24px;
  }
  .trial-copy > p {
    font-size: 10px;
  }
  body:not([data-experience-page="dizly"]) .trial-action {
    font-size: 10px;
    gap: 9px;
    padding: 12px;
    min-height: 48px;
  }
  .trial-copy > small {
    font-size: 8px;
  }
  .trial-edge {
    display: none;
  }
  .menu-offer-wrap {
    margin-bottom: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-action > span {
    transition: none;
  }
}

/* pos/terminal.css */
/* Functional cashier screen inside a physical terminal. */
body[data-experience-page="pos"] {
  background: #e9e9e4;
  padding-bottom: 0;
}
.pos-intro > div > p:last-child {
  font-size: 12px;
  color: #71808a;
  line-height: 2;
  margin-top: 10px;
}
.terminal-desk {
  position: relative;
  padding-top: 12px;
  padding-bottom: 28px;
}
.terminal-desk:before {
  content: "";
  position: absolute;
  bottom: 100px;
  left: 7%;
  right: 7%;
  height: 140px;
  border-radius: 50%;
  background: #172b3b25;
  filter: blur(45px);
  pointer-events: none;
}
.terminal-stage {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, #3e454c, #12181d 60%, #30373c);
  border: 1px solid #5a6165;
  padding: 0 15px;
  border-radius: 23px;
  box-shadow:
    0 2px 0 #ffffff5a inset,
    0 3px 0 #080c0f,
    0 20px 45px #16263225;
}
.terminal-bezel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 37px;
  color: #939ea7;
  font-size: 8px;
  letter-spacing: 2px;
  padding: 0 8px;
}
.terminal-bezel-top b {
  font-weight: 400;
  color: #69747c;
  margin-left: 10px;
}
.terminal-camera {
  position: absolute;
  top: 13px;
  left: calc(50% - 4px);
  width: 7px;
  height: 7px;
  background: #090d12;
  border: 1px solid #4b545a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #222a30;
}
.terminal-live {
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: normal;
  font-size: 8px;
}
.terminal-live i,
.power-led i {
  width: 4px;
  height: 4px;
  background: #9db88d;
  border-radius: 50%;
  box-shadow: 0 0 7px #a5d08f65;
}
.terminal-glass {
  height: min(660px, 65vw);
  min-height: 510px;
  overflow: hidden;
  border-radius: 6px;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
}
.terminal-toolbar {
  flex-shrink: 0;
  height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #e1e6eb;
  gap: 15px;
}
.terminal-restaurant {
  display: flex;
  align-items: center;
  gap: 10px;
}
.terminal-restaurant > span {
  height: 37px;
  width: 37px;
  border-radius: 10px;
  background: #132e48;
  color: #e0be85;
  display: grid;
  place-items: center;
  font-size: 19px;
}
.terminal-restaurant b {
  font-size: 12px;
  display: block;
}
.terminal-restaurant small {
  font-size: 8px;
  color: #88949e;
  display: block;
  line-height: 1.7;
}
.terminal-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}
.terminal-toolbar .button {
  font-size: 9px;
  padding: 8px 12px;
  min-height: 39px;
  border-radius: 8px;
}
.pos-experience .terminal-glass .pos-workspace {
  width: 100%;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 335px;
  align-items: stretch;
  gap: 0;
}
.pos-experience .terminal-glass .pos-catalog {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f6f7f9;
}
.terminal-catalog-head {
  padding: 20px 22px 0;
  flex-shrink: 0;
}
.terminal-catalog-head .section-heading {
  margin-bottom: 14px;
}
body:not([data-experience-page="dizly"]) .terminal-catalog-head h2 {
  font-size: 21px;
}
.terminal-catalog-head .section-heading > span {
  font-size: 9px;
  color: #8494a0;
}
.terminal-catalog-head .search {
  margin: 0 0 13px;
  border-radius: 9px;
  min-height: 41px;
  background: white;
}
.terminal-catalog-head .search input {
  font-size: 11px;
  min-height: 39px;
  padding-block: 9px;
}
.terminal-catalog-head .tabs {
  margin-bottom: 14px;
  gap: 8px;
}
.terminal-catalog-head .tabs > button {
  font-size: 10px;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 8px;
}
.terminal-catalog-body {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: 0 22px 22px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ccd4da transparent;
}
.pos-experience .terminal-glass .pos-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pos-experience .terminal-glass .pos-products .product {
  border: 0;
  border-radius: 10px;
  background: white;
  overflow: hidden;
  box-shadow: 0 2px 7px #102d4f06;
}
.pos-experience .terminal-glass .pos-products .product > img {
  height: 110px;
}
.pos-experience .terminal-glass .pos-products .product-copy {
  padding: 10px;
}
.pos-experience .terminal-glass .pos-products .product h3 {
  font-size: 12px;
  margin-bottom: 8px;
}
.pos-experience .terminal-glass .pos-products .product p {
  display: none;
}
.pos-experience .terminal-glass .pos-products .product-bottom {
  gap: 4px;
  margin-top: 0;
}
.pos-experience .terminal-glass .pos-products .product-bottom b {
  font-size: 10px;
  color: #334c61;
}
.pos-experience .terminal-glass .pos-products .product .add {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 9px;
  font-size: 23px;
}
.pos-experience .terminal-glass .order-panel {
  position: static;
  top: auto;
  background: #fff;
  border: 0;
  border-inline-start: 1px solid #e1e6eb;
  color: #102d4f;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.terminal-order-head {
  padding: 20px 20px 0;
  flex-shrink: 0;
}
.terminal-order-head .section-heading {
  margin-bottom: 15px;
}
.pos-experience .terminal-glass .order-panel .section-heading h2 {
  color: #102d4f;
  font-size: 19px;
}
body:not([data-experience-page="dizly"]) .terminal-order-head h2 {
  color: #102d4f;
  font-size: 19px;
}
.pos-experience .terminal-glass .order-panel .status-pill {
  background: #edf4ed;
  color: #5d8260;
  padding: 5px 8px;
}
.pos-experience .terminal-glass .order-panel .order-mode {
  margin-bottom: 14px;
  gap: 7px;
  background: #f2f4f6;
  padding: 4px;
  border-radius: 9px;
}
.pos-experience .terminal-glass .order-panel .order-mode > button {
  background: transparent;
  color: #83919c;
  min-height: 36px;
  padding: 8px;
  font-size: 10px;
  border-radius: 6px;
}
.pos-experience .terminal-glass .order-panel .order-mode > .active {
  background: white;
  color: #102d4f;
  box-shadow: 0 2px 5px #102d4f0d;
}
.terminal-order-head .field {
  margin: 0 0 10px !important;
  font-size: 10px;
}
.terminal-order-head .field input {
  background: #f6f7f9 !important;
  border-color: #dfe5eb !important;
  color: #102d4f !important;
  font-size: 11px;
  min-height: 37px;
  padding: 8px;
}
.terminal-order-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 20px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.terminal-order-body .order-lines {
  min-height: 70px;
  max-height: none;
  overflow: visible;
}
.pos-experience .terminal-glass .order-panel .empty {
  padding: 30px 5px 20px;
}
.pos-experience .terminal-glass .order-panel .empty > span {
  font-size: 22px;
}
.pos-experience .terminal-glass .order-panel .empty h3 {
  color: #536c7c;
  font-size: 13px;
}
.pos-experience .terminal-glass .order-panel .empty p {
  color: #8597a4;
  font-size: 9px;
}
.pos-experience .terminal-glass .order-panel .cart-line {
  border-color: #e8edf1;
  flex-wrap: wrap;
  gap: 9px;
  padding: 13px 0;
  font-size: 11px;
}
.pos-experience .terminal-glass .order-panel .cart-line small {
  color: #8999a6;
  font-size: 9px;
}
.pos-experience .terminal-glass .order-panel .quantity {
  gap: 7px;
}
.pos-experience .terminal-glass .order-panel .quantity button {
  min-width: 36px;
  width: 36px;
  min-height: 36px;
  color: #102d4f;
  background: #eff3f6;
  font-size: 17px;
}
.pos-experience .terminal-glass .order-panel .order-note {
  font-size: 9px;
  color: #718591;
  margin-top: 15px;
  padding-bottom: 15px;
}
.pos-experience .terminal-glass .order-panel .order-note textarea {
  background: #f6f7f9;
  border: 1px solid #e1e7ec;
  color: #102d4f;
  min-height: 51px;
  padding: 9px;
  font-size: 10px;
  border-radius: 8px;
}
.pos-experience .terminal-glass .order-panel .order-note textarea::placeholder {
  color: #92a1aa;
}
.terminal-checkout {
  padding: 10px 20px 15px;
  background: #fff;
  border-top: 1px solid #e5eaef;
  flex-shrink: 0;
}
.pos-experience .terminal-glass .order-panel .order-summary > span {
  color: #82939f;
  font-size: 10px;
  padding: 3px 0 9px;
}
.pos-experience .terminal-glass .order-panel .total {
  color: #607786;
  border-color: #e5eaef;
  padding: 11px 0;
  font-size: 11px;
}
.pos-experience .terminal-glass .order-panel .total b {
  color: #102d4f;
  font-size: 23px;
}
.terminal-checkout .button {
  min-height: 47px;
  background: #163d56;
  color: white;
  font-size: 11px;
  border-radius: 9px;
}
body.pos-wide .terminal-checkout .button {
  min-height: 44px;
}
body.pos-wide .terminal-order-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 15px;
}
body.pos-wide .terminal-order-head .section-heading {
  flex: 1;
  margin-bottom: 0;
}
body.pos-wide .terminal-glass .order-panel .section-heading h2 {
  font-size: 16px;
}
body.pos-wide .terminal-order-head .status-pill {
  display: none;
}
body.pos-wide .terminal-order-head .order-mode {
  width: 125px;
  margin: 0;
}
body.pos-wide .terminal-order-head .field {
  width: 100%;
}
body.pos-wide .terminal-glass .order-panel .order-summary > span {
  display: none;
}
body.pos-wide .terminal-glass .order-panel .total {
  border: 0;
  padding: 0 0 6px;
}
body.pos-wide .terminal-glass .order-panel .total b {
  font-size: 20px;
}
body.pos-wide .terminal-checkout > small {
  display: none;
}
body.pos-wide .terminal-glass .order-panel .quantity button {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
}
body.pos-rotated #dialog[open] {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 50%;
  margin: 0;
  width: min(520px, calc(100dvh - 24px));
  max-width: calc(100dvh - 24px);
  max-height: calc(100vw - 24px);
  transform: translate(-50%, -50%) rotate(90deg);
}
body.pos-wide .terminal-glass .pos-products .product .add {
  min-width: 44px;
  min-height: 44px;
}
body.pos-wide .terminal-order-head .order-mode {
  margin-bottom: 8px;
}
body.pos-wide .terminal-glass .order-panel .order-summary > span {
  padding-bottom: 4px;
}
body.pos-wide .terminal-glass .order-panel .total {
  padding: 7px 0;
}
.terminal-checkout > small {
  font-size: 7px;
  color: #9aabb6;
  text-align: center;
  display: block;
  margin-top: 10px;
  line-height: 1.8;
}
.terminal-bezel-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 10px;
  color: #626e77;
  font-size: 6px;
  letter-spacing: 1.5px;
  direction: ltr;
}
.terminal-bezel-bottom > b {
  color: #c0c8ce;
  letter-spacing: 4px;
  font-size: 10px;
  font-weight: 400;
}
.power-led {
  display: flex;
  align-items: center;
  gap: 7px;
}
.terminal-stand {
  height: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 0;
}
.terminal-stand > div {
  height: 100px;
  width: 150px;
  background: linear-gradient(
    90deg,
    #858b8e,
    #b5babc 40%,
    #b9bec0 60%,
    #797f82
  );
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.terminal-stand > span {
  height: 15px;
  width: 310px;
  background: linear-gradient(#a2a9ac, #8a9296);
  border-radius: 50% 50% 6px 6px;
  transform: translateY(-4px);
  box-shadow: 0 9px 20px #102d4f22;
}
.desk-detail {
  position: absolute;
  bottom: 48px;
  right: 25px;
  display: flex;
  gap: 19px;
  align-items: center;
}
.desk-detail p > span {
  display: block;
  font-size: 12px;
  color: #5f7381;
}
.desk-detail p > small {
  font-size: 9px;
  display: block;
  color: #91a0a9;
  margin-top: 8px;
}
.desk-printer {
  position: relative;
  width: 85px;
  height: 65px;
  background: linear-gradient(145deg, #414a50, #20292f);
  border-radius: 14px 14px 7px 7px;
  box-shadow: 0 4px 12px #2635402a;
  display: grid;
  place-items: end center;
  padding-bottom: 8px;
}
.desk-printer > span {
  position: absolute;
  width: 59px;
  height: 4px;
  background: #0a1016;
  top: 20px;
  left: 13px;
  border-radius: 5px;
}
.desk-printer > i {
  position: absolute;
  width: 48px;
  height: 38px;
  background: #fffdf4;
  bottom: 47px;
  left: 19px;
  transform: rotate(-4deg);
  box-shadow: 1px 1px 5px #0001;
}
.desk-printer > b {
  font-size: 5px;
  letter-spacing: 1px;
  font-weight: 400;
  color: #9aa6ae;
}
.pos-afterword {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 0 40px;
  font-size: 10px;
  color: #8b9aa3;
}
.pos-afterword i {
  width: 45px;
  height: 1px;
  background: #cbd2d4;
}
.pos-contact {
  margin-bottom: 65px;
}
.pos-orientation-hint,
.terminal-exit {
  display: none;
}
.terminal-cart-jump {
  display: none;
}
.terminal-exit {
  min-height: 32px;
  min-width: 40px;
  color: #c6d3de;
  font-size: 25px;
  border-radius: 6px;
  background: #ffffff0d;
}
/* Explicit wide mode also works without the Fullscreen/Orientation APIs. */
body.pos-wide {
  overflow: hidden;
}
body.pos-wide > .topbar,
body.pos-wide > .footer,
body.pos-wide .pos-intro,
body.pos-wide .pos-orientation-hint,
body.pos-wide .terminal-stand,
body.pos-wide .desk-detail,
body.pos-wide .pos-afterword,
body.pos-wide .pos-contact {
  display: none !important;
}
body.pos-wide .terminal-stage {
  position: fixed;
  z-index: 70;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  padding: 0 9px;
  display: flex;
  flex-direction: column;
}
body.pos-wide .terminal-glass {
  flex: 1;
  min-height: 0;
  height: auto;
}
body.pos-wide .terminal-exit {
  display: block;
}
body.pos-wide .terminal-live {
  margin-inline-start: auto;
  margin-inline-end: 20px;
}
body.pos-wide .terminal-camera {
  display: none;
}
body.pos-wide .terminal-bezel-bottom {
  height: 25px;
  flex-shrink: 0;
}
body.pos-rotated .terminal-stage {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 100dvh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}
body.pos-wide .terminal-catalog-head {
  padding-top: 10px;
}
body.pos-wide .terminal-catalog-head .section-heading {
  display: none;
}
body.pos-wide .pos-experience .terminal-glass .pos-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.pos-wide .pos-experience .terminal-glass .pos-products .product > img {
  height: 85px;
}
body.pos-wide .terminal-toolbar {
  height: 54px;
}
body.pos-wide .terminal-order-head {
  padding-top: 11px;
}
body.pos-wide .terminal-order-head .section-heading {
  margin-bottom: 9px;
}
body.pos-wide .terminal-checkout {
  padding-top: 5px;
  padding-bottom: 8px;
}
body.pos-wide .terminal-checkout > small {
  margin-top: 5px;
}
body.pos-wide .terminal-glass .pos-workspace {
  grid-template-columns: minmax(0, 1fr) 290px;
}
/* Receipt emerges from the printer slot; DOM text stays selectable/printable. */
#dialog:has(.receipt-printer) {
  width: 520px;
  max-width: calc(100vw - 24px);
  background: #eef0ed;
  padding: 22px;
  border-radius: 18px;
}
#dialog:has(.receipt-printer) .dialog-head {
  margin-bottom: 8px;
}
#dialog:has(.receipt-printer) .dialog-head h2 {
  font-size: 15px;
}
.receipt-success {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 8px 0 30px;
}
.receipt-success > span {
  height: 33px;
  width: 33px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e2eae0;
  color: #64815f;
}
.receipt-success b {
  font-size: 13px;
}
.receipt-success p {
  font-size: 10px;
  color: #8c9a9c;
  margin-top: 5px;
}
.receipt-printer {
  max-width: 350px;
  margin: auto;
}
.printer-machine {
  height: 76px;
  background: linear-gradient(145deg, #445056, #26323a);
  border-radius: 15px 15px 6px 6px;
  padding: 18px 20px;
  position: relative;
  box-shadow: 0 9px 20px #29374120;
  z-index: 2;
}
.printer-machine > span {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 2px;
  color: #bac4c7;
  direction: ltr;
}
.printer-machine b {
  font-size: 6px;
  font-weight: 400;
  color: #819397;
  padding-top: 3px;
  letter-spacing: 1px;
}
.printer-machine > i {
  width: 4px;
  height: 4px;
  background: #aec9a4;
  border-radius: 50%;
  position: absolute;
  top: 37px;
  left: 20px;
  box-shadow: 0 0 7px #bce9b0;
}
.printer-slot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 9px;
  height: 7px;
  border-radius: 4px;
  background: #080f13;
  box-shadow: 0 1px 1px #ffffff21;
}
.printer-paper-window {
  overflow: hidden;
  padding: 0 26px 17px;
  margin-top: -14px;
  position: relative;
  z-index: 3;
}
.receipt.thermal-paper {
  position: relative;
  padding: 23px 16px 18px;
  background: #fffdf6;
  box-shadow: 0 5px 14px #26334019;
  animation: thermal-feed 1250ms cubic-bezier(0.18, 0.6, 0.3, 1) both;
  transform-origin: top;
}
.thermal-paper:after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  right: 0;
  height: 8px;
  background:
    linear-gradient(135deg, #fffdf6 5px, transparent 0) 0 0/10px 10px,
    linear-gradient(225deg, #fffdf6 5px, transparent 0) 0 0/10px 10px;
}
.receipt.thermal-paper h2 {
  font-size: 22px;
  color: #283b45;
  margin-bottom: 5px;
}
.receipt.thermal-paper p {
  font-size: 8px;
  line-height: 1.9;
  color: #78827f;
}
.receipt-wordmark {
  letter-spacing: 3px;
  font-size: 7px !important;
  margin-bottom: 8px;
  color: #89928f;
}
.receipt-number {
  font-size: 10px;
  color: #536564;
  display: block;
  margin: 8px 0;
}
.receipt-rule {
  border-bottom: 1px dashed #cfd4ca;
  margin-top: 12px;
}
.receipt.thermal-paper table {
  font-size: 8px;
  margin-top: 12px;
}
.receipt.thermal-paper td,
.receipt.thermal-paper th {
  padding: 10px 2px;
  border-color: #d4d7ce;
}
.receipt.thermal-paper th {
  color: #9da59e;
  font-weight: 400;
}
.receipt.thermal-paper td {
  color: #52625e;
}
.receipt.thermal-paper .total {
  margin-top: 0;
  padding: 14px 0;
  border-color: #d3d9d0;
  font-size: 10px;
  color: #52615d;
}
.receipt.thermal-paper .total b {
  font-size: 20px;
  color: #283d35;
}
.receipt.thermal-paper > small {
  font-size: 6px;
  letter-spacing: 2px;
  color: #abb3ab;
}
.receipt-barcode {
  width: 120px;
  height: 23px;
  margin: 15px auto 7px;
  background: repeating-linear-gradient(
    90deg,
    #5b6960 0 1px,
    transparent 1px 3px,
    #5b6960 3px 5px,
    transparent 5px 7px,
    #5b6960 7px 8px,
    transparent 8px 12px
  );
}
.receipt-actions {
  justify-content: center;
  margin-top: 18px;
}
.receipt-actions .button {
  font-size: 11px;
  min-height: 45px;
}
.receipt-review .thermal-paper {
  animation: none;
  box-shadow: none;
  padding: 15px;
}
.receipt-review .thermal-paper:after {
  display: none;
}
@keyframes thermal-feed {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-18px);
  }
  to {
    clip-path: inset(0 0 -10px 0);
    transform: translateY(0);
  }
}
@media (max-width: 1100px) {
  .pos-experience .terminal-glass .pos-workspace {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .pos-experience .terminal-glass .pos-products .product > img {
    height: 100px;
  }
  .terminal-catalog-head {
    padding-inline: 16px;
  }
  .terminal-catalog-body {
    padding-inline: 16px;
  }
  .desk-detail {
    right: 10px;
  }
  .desk-detail p {
    display: none;
  }
}
@media (max-width: 700px) {
  .pos-orientation-hint {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    border: 1px solid #cbd5d9;
    border-radius: 12px;
    margin-bottom: 22px;
  }
  .pos-orientation-hint > div {
    flex: 1;
  }
  .pos-orientation-hint b {
    font-size: 10px;
    line-height: 1.8;
    display: block;
  }
  .pos-orientation-hint small {
    font-size: 8px;
    color: #8c9da5;
    line-height: 1.9;
    display: block;
  }
  .pos-orientation-hint .button {
    font-size: 9px;
    padding: 10px;
    border-radius: 8px;
  }
  .rotate-device {
    font-size: 30px;
    color: #627c87;
  }
  .pos-intro > .button {
    display: none;
  }
  .terminal-stage {
    padding: 0 9px;
    border-radius: 15px;
  }
  .terminal-bezel-top {
    font-size: 6px;
    min-height: 29px;
  }
  .terminal-bezel-top b {
    display: none;
  }
  .terminal-live {
    font-size: 7px;
  }
  .terminal-camera {
    top: 11px;
  }
  .terminal-glass {
    height: 690px;
    min-height: 0;
  }
  .terminal-toolbar {
    padding: 10px;
    height: 59px;
  }
  .terminal-restaurant > span {
    width: 29px;
    height: 29px;
    font-size: 15px;
  }
  .terminal-restaurant b {
    font-size: 10px;
  }
  .terminal-restaurant small {
    display: none;
  }
  .terminal-toolbar .button {
    font-size: 8px;
    min-height: 36px;
    padding: 8px;
  }
  .terminal-tools {
    gap: 5px;
  }
  .terminal-cart-jump {
    display: inline-flex;
  }
  .pos-experience .terminal-glass .pos-workspace {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .pos-experience .terminal-glass .pos-catalog {
    height: 460px;
  }
  .pos-experience .terminal-glass .order-panel {
    min-height: 450px;
    border-inline-start: 0;
    border-top: 1px solid #e0e6eb;
  }
  .pos-experience .terminal-glass .pos-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pos-experience .terminal-glass .pos-products .product > img {
    height: 95px;
  }
  .pos-experience .terminal-glass .pos-products .product .add {
    min-width: 44px;
    min-height: 44px;
  }
  .terminal-order-body {
    overflow: visible;
  }
  .terminal-order-head,
  .terminal-checkout {
    padding-inline: 15px;
  }
  .terminal-checkout {
    padding-block: 12px;
  }
  .terminal-order-body {
    padding-inline: 15px;
  }
  .pos-experience .terminal-glass .order-panel .cart-line {
    flex-wrap: nowrap;
  }
  .pos-experience .terminal-glass .order-panel .quantity button {
    min-height: 44px;
  }
  .pos-experience .terminal-glass .order-panel .order-note {
    font-size: 10px;
  }
  .pos-experience .terminal-glass .order-panel .order-note textarea {
    font-size: 11px;
  }
  .pos-experience .terminal-glass .order-panel .total {
    font-size: 12px;
  }
  .terminal-checkout .button {
    font-size: 12px;
  }
  .terminal-checkout > small {
    font-size: 8px;
  }
  .terminal-bezel-bottom {
    height: 35px;
    font-size: 4px;
  }
  .terminal-bezel-bottom > b {
    font-size: 8px;
  }
  .terminal-stand {
    height: 80px;
  }
  .terminal-stand > div {
    width: 90px;
    height: 70px;
  }
  .terminal-stand > span {
    width: 190px;
    height: 12px;
  }
  .desk-detail {
    display: none;
  }
  .terminal-desk:before {
    bottom: 50px;
  }
  .pos-afterword {
    gap: 10px;
    font-size: 8px;
    padding-bottom: 30px;
  }
  .pos-afterword i {
    width: 20px;
  }
  .pos-contact {
    margin-bottom: 35px;
  }
  body.pos-wide .terminal-glass .pos-workspace {
    display: grid;
    overflow: hidden;
  }
  body.pos-wide .terminal-cart-jump {
    display: none;
  }
  body.pos-wide .terminal-glass .pos-catalog {
    height: auto;
  }
  body.pos-wide .pos-experience .terminal-glass .order-panel {
    min-height: 0;
    border-inline-start: 1px solid #e1e6eb;
    border-top: 0;
  }
  body.pos-wide .terminal-order-body {
    overflow: auto;
  }
  body.pos-wide .pos-experience .terminal-glass .order-panel .cart-line {
    flex-wrap: wrap;
  }
  body.pos-wide .terminal-checkout .button {
    font-size: 10px;
  }
  body.pos-wide .terminal-checkout > small {
    font-size: 7px;
  }
}
@media (max-height: 540px) and (orientation: landscape) {
  body[data-experience-page="pos"] > .topbar {
    position: static;
  }
  .terminal-glass {
    height: 520px;
    min-height: 0;
  }
  body.pos-wide .terminal-bezel-top {
    min-height: 26px;
  }
  body.pos-wide .terminal-bezel-bottom {
    height: 19px;
  }
  body.pos-wide .pos-experience .terminal-glass .pos-products .product > img {
    height: 82px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .receipt.thermal-paper {
    animation: none;
  }
}
@media print {
  body.pos-rotated #dialog[open] {
    transform: none;
    max-height: none;
    max-width: none;
  }
  body.pos-wide {
    overflow: visible;
  }
  #dialog:has(.receipt-printer) {
    width: 100% !important;
    padding: 0;
    background: white;
  }
  .receipt-printer {
    max-width: none;
  }
  .printer-paper-window {
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .receipt.thermal-paper {
    animation: none;
    transform: none;
    clip-path: none;
    box-shadow: none;
    background: white;
  }
  .thermal-paper:after {
    display: none;
  }
}

/* menu/restaurant.css */
/* Customer-facing restaurant identity and its live owner preview. */
.restaurant-icon {
  flex-shrink: 0;
  vertical-align: middle;
}
body[data-experience-page="menu"] {
  background: #f5f3ee;
}
.menu-page .restaurant.restaurant-menu,
.device-preview .restaurant.restaurant-menu {
  border: 0;
  border-radius: 22px;
  overflow: visible;
  background: #fffefa;
  box-shadow: 0 20px 70px #3f352609;
  color: #233b3d;
}
.dining-hero {
  position: relative;
  min-height: 365px;
  overflow: hidden;
  isolation: isolate;
  background: #182b25;
  border-radius: 22px 22px 0 0;
  color: white;
}
.dining-cover {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.dining-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}
.dining-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, #10221fee 0, #10221fb0 48%, #10221f30 100%),
    linear-gradient(0deg, #10221f70, transparent 55%);
}
.dining-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 36px 0;
}
.dining-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 9px;
  letter-spacing: 2px;
  direction: ltr;
  color: #f5e6c7;
}
.dining-wordmark i {
  display: block;
  width: 20px;
  height: 1px;
  background: #e5c99770;
}
.dining-demo {
  font-size: 10px;
  color: #ffffffdb;
  background: #ffffff13;
  border: 1px solid #ffffff2a;
  border-radius: 30px;
  padding: 6px 11px;
}
.dining-identity {
  padding: 29px 38px 38px;
  max-width: 620px;
  position: relative;
}
.dining-monogram {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #fff9e9;
  border: 1px solid #e3cd9f;
  color: #8d6c40;
  font:
    900 28px "Alkamra Display",
    Readex,
    sans-serif;
  border-radius: 16px 16px 16px 4px;
  overflow: hidden;
  margin-bottom: 18px;
}
.dining-monogram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dining-kicker {
  color: #e5cfa9;
  font-size: 11px;
  margin-bottom: 9px;
}
.restaurant-menu .dining-identity h1 {
  color: white;
  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.35;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.dining-identity > p:last-child {
  font-size: 12px;
  color: #ffffffd8;
  line-height: 1.9;
  max-width: 470px;
}
.dining-edition {
  position: absolute;
  bottom: 35px;
  left: 30px;
  font-size: 7px;
  letter-spacing: 2.5px;
  writing-mode: vertical-rl;
  color: #ffffff85;
}
.dining-meta {
  display: flex;
  gap: 35px;
  padding: 23px 35px;
  background: #f4f1e9;
  border-bottom: 1px solid #e9e5dc;
}
.dining-meta > span {
  display: flex;
  gap: 12px;
  align-items: center;
}
.dining-meta > span > .restaurant-icon {
  color: #9c8158;
  width: 20px;
  height: 20px;
}
.dining-meta small {
  display: block;
  font-size: 10px;
  margin-bottom: 4px;
  color: #8e8b7e;
}
.dining-meta b {
  font-size: 11px;
  line-height: 1.8;
  font-weight: 450;
  color: #465958;
}
.restaurant-menu .menu-content.dining-content {
  padding: 34px 35px 20px;
}
.dining-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.dining-welcome p {
  font-size: 11px;
  color: #9d825b;
  margin-bottom: 7px;
}
.restaurant-menu .dining-welcome h2 {
  color: #243c3b;
  font-family: "Alkamra Display", Readex, sans-serif;
  font-size: 29px;
  line-height: 1.4;
}
.dining-welcome > span {
  font-size: 13px;
  color: #5b706a;
  text-align: center;
  line-height: 1.8;
  border-inline-start: 1px solid #e2e7df;
  padding-inline-start: 22px;
}
.dining-welcome > span small {
  color: #949b8e;
  font-size: 10px;
}
.dining-search.search {
  min-height: 52px;
  margin-bottom: 9px;
  background: #f8f8f3;
  border: 1px solid #e5e8df;
  border-radius: 13px;
  gap: 12px;
  color: #6c817b;
}
.dining-search.search input {
  min-height: 50px;
  font-size: 12px;
  color: #304c45;
}
.dining-search.search:focus-within {
  outline-color: var(--menu-color);
}
.restaurant-menu .menu-categories {
  display: flex;
  gap: 12px;
  padding: 15px 0 20px;
  margin: 0 0 17px;
  scrollbar-width: none;
  border-bottom: 1px solid #e9ede5;
}
.restaurant-menu .menu-categories .menu-category {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 9px 13px;
  border: 1px solid #e4e8df;
  color: #54645c;
  background: white;
  border-radius: 13px;
  flex-shrink: 0;
  font-size: 11px;
  text-align: start;
}
.restaurant-menu .menu-categories .menu-category.active {
  background: color-mix(in srgb, var(--menu-color) 7%, white);
  border-color: color-mix(in srgb, var(--menu-color) 55%, white);
  color: var(--menu-color);
}
.menu-category-photo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #eef2e9;
}
.menu-category-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-category > span:last-child {
  line-height: 1.7;
}
.menu-category small {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  color: #8d998f;
}
.dining-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: start;
  border: 1px solid #e7decf;
  border-radius: 16px;
  width: 100%;
  background: #f4eee1;
  overflow: hidden;
  min-height: 190px;
  margin-bottom: 32px;
}
.dining-feature > span {
  padding: 24px 28px;
  flex: 1;
}
.dining-feature > span > small {
  display: block;
  font-size: 11px;
  color: #9c7d50;
  margin-bottom: 12px;
}
.dining-feature > span > b {
  font-family: "Alkamra Display", Readex, sans-serif;
  font-weight: 900;
  font-size: 29px;
  line-height: 1.4;
  color: #3a4a3b;
  display: block;
}
.dining-feature > span > span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #817653;
  margin-top: 17px;
}
.dining-feature > img {
  width: 43%;
  align-self: stretch;
  max-height: 235px;
  object-fit: cover;
}
.dining-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
}
.restaurant-menu .dining-section h2 {
  font-family: Readex, sans-serif;
  font-weight: 550;
  font-size: 20px;
  color: #2b443c;
}
.dining-section > span {
  font-size: 11px;
  color: #98a08f;
}
.restaurant-menu .dining-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.restaurant-menu .dish-card.product {
  background: white;
  border: 1px solid #e6e9e0;
  border-radius: 17px;
  overflow: hidden;
  animation: none;
  box-shadow: 0 5px 16px #3d523605;
}
.dish-photo-button {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #f2f0e6;
}
.dish-photo-button img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  display: block;
  transition: transform 250ms ease;
}
.dish-photo-button:hover img {
  transform: scale(1.035);
}
.dish-count {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fffefaee;
  color: #2f5b48;
  border-radius: 30px;
  font-size: 10px;
  padding: 6px 9px;
  backdrop-filter: blur(8px);
}
.dish-count .restaurant-icon {
  width: 13px;
  height: 13px;
}
.dish-copy {
  padding: 17px;
}
.dish-availability {
  font-size: 10px;
  color: #a09070;
  display: block;
  margin-bottom: 8px;
}
.restaurant-menu .dish-copy h3 {
  font-family: Readex, sans-serif;
  font-weight: 550;
  font-size: 16px;
  color: #233e34;
  line-height: 1.7;
  margin-bottom: 7px;
}
.restaurant-menu .dish-copy p {
  font-size: 11px;
  color: #7f8c7d;
  line-height: 1.9;
  min-height: 42px;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.dish-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dish-bottom > b {
  font-size: 16px;
  font-weight: 500;
  color: #3b5748;
  white-space: nowrap;
}
.restaurant-menu .dish-bottom .add {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 0;
  color: white;
  background: var(--menu-color);
  padding: 0;
}
.restaurant-menu .dish-bottom .add:disabled {
  background: #eff1ea;
  color: #aeb6a6;
}
.dish-unavailable .dish-photo-button img {
  filter: grayscale(0.65);
  opacity: 0.6;
}
.dish-unavailable .dish-availability {
  color: #a78b76;
}
.dining-endnote {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ca28f;
  font-size: 10px;
  padding: 32px 0 14px;
  flex-wrap: wrap;
}
.dining-endnote > .restaurant-icon {
  width: 15px;
  height: 15px;
}
.dining-endnote > a {
  margin-inline-start: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.restaurant-menu .dining-cart.menu-cart {
  display: flex;
  gap: 14px;
  position: fixed;
  z-index: 22;
  width: min(650px, calc(100vw - 32px));
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 14px 18px;
  background: var(--menu-color);
  color: white;
  box-shadow: 0 9px 36px #102d4f26;
  border-radius: 16px;
  min-height: 66px;
}
.dining-cart-count {
  display: grid;
  place-items: center;
  min-width: 35px;
  height: 35px;
  border-radius: 10px;
  background: #ffffff1a;
  font-size: 14px;
}
.dining-cart > span:nth-child(2) {
  font-size: 12px;
  text-align: start;
  flex: 1;
}
.dining-cart small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: #ffffffb3;
}
.dining-cart > b {
  font-size: 15px;
  font-weight: 500;
}
.dining-empty {
  text-align: center;
  padding: 45px;
  grid-column: 1/-1;
}
.dining-empty > svg {
  width: 35px;
  height: 35px;
  color: #a6b29e;
  margin-bottom: 20px;
}
.restaurant-menu .dining-empty h3 {
  font-size: 20px;
  color: #59735b;
}
.dining-empty p {
  font-size: 12px;
  color: #9aa58f;
  margin-top: 8px;
}
/* The welcome is part of the product, not a plain form on a blank page. */
.menu-onboarding {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding-block: 65px;
}
.menu-onboarding-copy > .eyebrow {
  color: #9c8357;
  font-size: 11px;
}
body:not([data-experience-page="dizly"]) .menu-onboarding h1 {
  font-size: 43px;
  color: #233d35;
  line-height: 1.5;
  margin: 17px 0;
}
.menu-onboarding h1 > span {
  color: #a18552;
}
.menu-onboarding-copy > p:not(.eyebrow) {
  font-size: 13px;
  line-height: 2.1;
  color: #7a8979;
}
.menu-onboarding form {
  max-width: 430px;
  margin-top: 30px;
}
.menu-onboarding .field {
  font-size: 12px;
  color: #53694e;
}
.menu-onboarding .field input {
  border: 1px solid #dce2d3;
  border-radius: 12px;
  background: #fffefa;
  min-height: 54px;
}
.menu-onboarding .button {
  background: #284d3c;
  color: white;
  gap: 30px;
  min-height: 53px;
  border-radius: 12px;
}
.onboarding-assurance {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #8f9e87;
  font-size: 10px;
  line-height: 1.9;
  margin-top: 20px;
  max-width: 420px;
}
.onboarding-assurance > .restaurant-icon {
  width: 16px;
  height: 16px;
}
.menu-onboarding-art {
  position: relative;
  height: 540px;
  border-radius: 90px 20px 20px 20px;
  background: #263c2b;
  overflow: hidden;
}
.onboarding-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
}
.onboarding-menu-slip {
  position: absolute;
  width: 250px;
  bottom: 45px;
  left: 30px;
  background: #fffdf3;
  color: #4c5742;
  padding: 30px 24px;
  box-shadow: 0 15px 60px #0003;
  transform: rotate(-6deg);
}
.onboarding-menu-slip > span {
  font-size: 7px;
  letter-spacing: 2px;
  color: #a29472;
}
.onboarding-menu-slip > b {
  font:
    900 36px "Alkamra Display",
    Readex,
    sans-serif;
  display: block;
  margin: 20px 0 10px;
}
.onboarding-menu-slip > p {
  font-size: 11px;
  color: #909581;
  margin-bottom: 23px;
}
.onboarding-menu-slip > div {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  padding: 14px 0;
  border-top: 1px dashed #d6dacb;
}
.onboarding-menu-slip strong {
  font-weight: 500;
  color: #7e8a6b;
}
.onboarding-menu-slip small {
  font-size: 7px;
}
.onboarding-menu-slip > i {
  display: block;
  font-size: 9px;
  font-style: normal;
  color: #b0b49b;
  margin-top: 17px;
}
.onboarding-art-caption {
  position: absolute;
  top: 28px;
  left: 24px;
  color: #fff9df;
  font-size: 8px;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
}
/* Owner workspace retains all existing edit actions and validation. */
.menu-studio-dashboard .editor {
  background: #fffefa;
  border: 1px solid #e3e7df;
  border-radius: 17px;
  box-shadow: 0 10px 40px #35472a06;
}
.menu-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  border-bottom: 1px solid #e6eade;
  color: #405b42;
}
.menu-editor-toolbar > span {
  width: 7px;
  height: 7px;
  background: #70936d;
  border-radius: 50%;
}
.menu-editor-toolbar > b {
  font-size: 12px;
  font-weight: 550;
}
.menu-editor-toolbar > small {
  font-size: 9px;
  margin-inline-start: auto;
  color: #9ba68d;
}
.menu-studio-dashboard .editor-tabs {
  padding: 13px 18px;
  margin: 0;
  border-bottom: 1px solid #e8ebdf;
  background: #f8f9f3;
}
.menu-studio-dashboard .editor-tabs > button {
  flex: 1;
  justify-content: center;
  border-radius: 9px;
  font-size: 12px;
  border: 0;
  background: transparent;
  min-height: 45px;
}
.menu-studio-dashboard .editor-tabs > .active {
  background: white;
  color: #284d3c;
  box-shadow: 0 2px 10px #284d3c0c;
}
.menu-studio-dashboard .editor .field input,
.menu-studio-dashboard .editor .field textarea,
.menu-studio-dashboard .editor .field select {
  border: 1px solid #e1e6da;
  background: #fafbf7;
  border-radius: 10px;
  min-height: 48px;
  font-size: 12px;
}
.menu-studio-dashboard .editor .field {
  color: #617854;
  font-size: 12px;
  gap: 10px;
  margin-bottom: 23px;
}
.menu-studio-dashboard .upload {
  border: 1px dashed #becbb0;
  background: #f8faf2;
  color: #718360;
  border-radius: 13px;
  padding: 19px 14px;
  font-size: 12px;
}
.menu-studio-dashboard .manage-row {
  border-color: #e8ecdf;
  padding-block: 18px;
}
.menu-studio-dashboard .row-photo {
  border-radius: 12px;
  object-fit: cover;
}
.menu-studio-dashboard .preview-caption {
  color: #748c68;
  font-size: 11px;
}
/* Item details use an accessible dialog with an uninterrupted image header. */
#dialog:has(.dish-detail) {
  padding: 0;
  width: 510px;
  max-width: calc(100vw - 24px);
  border-radius: 22px;
  background: #fffefa;
}
#dialog:has(.dish-detail) .dialog-head {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  z-index: 2;
  padding: 0;
  margin: 0;
  justify-content: flex-end;
}
#dialog:has(.dish-detail) .dialog-head h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#dialog:has(.dish-detail) #close-dialog {
  background: #fffefaed;
  border: 1px solid #ffffff7a;
  width: 44px;
  height: 44px;
  color: #4b6653;
  border-radius: 50%;
}
.dish-detail-photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.dish-detail-copy {
  padding: 27px;
}
.dish-detail-copy > span {
  color: #a18b60;
  font-size: 11px;
}
.dish-detail-copy h3 {
  font:
    900 29px/1.5 "Alkamra Display",
    Readex,
    sans-serif;
  color: #2d493a;
  margin: 12px 0;
}
.dish-detail-copy p {
  color: #7d8c74;
  font-size: 13px;
  line-height: 2;
}
.dish-detail-copy > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 23px 0;
}
.dish-detail-copy b {
  font-size: 21px;
  color: #385a41;
}
.dish-detail-copy small {
  font-size: 10px;
  color: #a1aa91;
  line-height: 1.9;
}
.dish-detail-copy .button {
  background: var(--blue);
  min-height: 52px;
  border-radius: 12px;
}
.dish-detail-copy > small {
  display: block;
  margin-top: 12px;
  text-align: center;
}
/* Narrow previews follow the same composition as a phone customer view. */
.restaurant-menu.is-preview .dining-hero {
  min-height: 290px;
}
.restaurant-menu.is-preview .dining-hero-top {
  padding: 19px 20px 0;
}
.restaurant-menu.is-preview .dining-identity {
  padding: 23px 20px 25px;
}
.restaurant-menu.is-preview .dining-identity h1 {
  font-size: 29px;
}
.restaurant-menu.is-preview .dining-identity > p:last-child {
  font-size: 11px;
}
.restaurant-menu.is-preview .dining-edition {
  display: none;
}
.restaurant-menu.is-preview .dining-meta {
  padding: 18px;
  gap: 15px;
  flex-wrap: wrap;
}
.restaurant-menu.is-preview .dining-content {
  padding: 25px 16px 15px;
}
.restaurant-menu.is-preview .dining-welcome h2 {
  font-size: 25px;
}
.restaurant-menu.is-preview .dining-products {
  grid-template-columns: 1fr;
  gap: 13px;
}
.restaurant-menu.is-preview .dish-card {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
}
.restaurant-menu.is-preview .dish-photo-button img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 160px;
}
.restaurant-menu.is-preview .dish-copy {
  padding: 13px;
}
.restaurant-menu.is-preview .dish-copy h3 {
  font-size: 14px;
}
.restaurant-menu.is-preview .dish-copy p {
  font-size: 10px;
  min-height: 0;
  margin-bottom: 10px;
}
.restaurant-menu.is-preview .dish-availability {
  font-size: 9px;
}
.restaurant-menu.is-preview .dish-bottom > b {
  font-size: 13px;
}
.restaurant-menu.is-preview .dish-count {
  font-size: 8px;
  right: 4px;
  top: 6px;
  padding: 5px;
}
.restaurant-menu.is-preview .dish-count svg {
  display: none;
}
.restaurant-menu.is-preview .dining-cart {
  position: sticky;
  bottom: 8px;
  width: 100%;
  left: auto;
  transform: none;
  padding: 11px;
  gap: 8px;
}
.restaurant-menu.is-preview .dining-cart > b {
  font-size: 12px;
}
.restaurant-menu.is-preview .dining-cart small {
  display: none;
}
.restaurant-menu.is-preview .dining-feature {
  min-height: 160px;
}
.restaurant-menu.is-preview .dining-feature > span {
  padding: 18px;
}
.restaurant-menu.is-preview .dining-feature b {
  font-size: 23px;
}
@media (max-width: 800px) {
  .menu-onboarding {
    gap: 35px;
  }
  .menu-onboarding-art {
    height: 480px;
  }
  body:not([data-experience-page="dizly"]) .menu-onboarding h1 {
    font-size: 35px;
  }
  .restaurant-menu .dining-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .menu-onboarding {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 32px 40px;
  }
  .menu-onboarding-copy {
    order: 1;
  }
  .menu-onboarding-art {
    height: 300px;
    border-radius: 65px 16px 16px 16px;
  }
  .onboarding-menu-slip {
    width: 210px;
    padding: 20px;
    bottom: 22px;
    left: 25px;
  }
  .onboarding-menu-slip > b {
    font-size: 28px;
    margin: 13px 0 8px;
  }
  .onboarding-menu-slip > p {
    margin-bottom: 15px;
  }
  .onboarding-menu-slip > div {
    padding-block: 10px;
  }
  .onboarding-menu-slip > i {
    margin-top: 12px;
  }
  .menu-onboarding-copy h1 {
    font-size: 32px !important;
  }
  .menu-onboarding-copy > p:not(.eyebrow) {
    font-size: 12px;
  }
  .menu-onboarding form {
    margin-top: 24px;
  }
  .menu-page {
    width: 100%;
    padding: 0 12px;
  }
  .menu-page .restaurant.restaurant-menu {
    border-radius: 17px;
  }
  .dining-hero {
    min-height: 320px;
    border-radius: 17px 17px 0 0;
  }
  .dining-hero-top {
    padding: 21px 21px 0;
  }
  .dining-identity {
    padding: 25px 23px 32px;
  }
  .restaurant-menu .dining-identity h1 {
    font-size: 32px;
  }
  .dining-identity > p:last-child {
    font-size: 12px;
  }
  .dining-monogram {
    width: 46px;
    height: 46px;
    font-size: 26px;
    margin-bottom: 15px;
  }
  .dining-edition {
    display: none;
  }
  .dining-kicker {
    font-size: 10px;
  }
  .dining-meta {
    padding: 19px 21px;
    gap: 17px;
    flex-direction: column;
  }
  .dining-meta > span {
    gap: 10px;
  }
  .dining-meta small {
    font-size: 10px;
  }
  .dining-meta b {
    font-size: 11px;
  }
  .restaurant-menu .menu-content.dining-content {
    padding: 26px 16px 18px;
  }
  .restaurant-menu .dining-welcome h2 {
    font-size: 26px;
  }
  .dining-welcome > span {
    font-size: 11px;
    padding-inline-start: 15px;
  }
  .dining-welcome {
    margin-bottom: 23px;
  }
  .dining-search.search input {
    font-size: 12px;
  }
  .restaurant-menu .menu-categories {
    gap: 10px;
    margin-bottom: 12px;
  }
  .restaurant-menu .menu-categories .menu-category {
    padding: 8px 10px;
    gap: 8px;
    min-height: 67px;
  }
  .menu-category-photo {
    width: 42px;
    height: 42px;
  }
  .dining-feature {
    min-height: 165px;
    margin-bottom: 27px;
  }
  .dining-feature > span {
    padding: 19px;
  }
  .dining-feature > span > small {
    font-size: 10px;
    margin-bottom: 8px;
  }
  .dining-feature > span > b {
    font-size: 25px;
  }
  .dining-feature > span > span {
    font-size: 10px;
    margin-top: 13px;
    gap: 7px;
  }
  .restaurant-menu .dining-section h2 {
    font-size: 19px;
  }
  .restaurant-menu .dining-products {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .restaurant-menu .dish-card.product {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    border-radius: 15px;
  }
  .dish-photo-button img {
    height: 100%;
    min-height: 165px;
    aspect-ratio: auto;
  }
  .dish-copy {
    padding: 13px 14px;
  }
  .restaurant-menu .dish-copy h3 {
    font-size: 15px;
    margin-bottom: 6px;
  }
  .restaurant-menu .dish-copy p {
    font-size: 11px;
    min-height: 0;
    margin-bottom: 11px;
    line-height: 1.8;
  }
  .dish-availability {
    font-size: 9px;
    margin-bottom: 5px;
  }
  .dish-bottom > b {
    font-size: 14px;
  }
  .dish-count {
    font-size: 8px;
    top: 7px;
    right: 5px;
    padding: 6px;
  }
  .dish-count > svg {
    display: none;
  }
  .dining-endnote {
    font-size: 9px;
    gap: 7px;
  }
  .dining-endnote > a {
    font-size: 9px;
  }
  .dining-cart > b {
    font-size: 13px;
  }
  .dining-cart > span:nth-child(2) {
    font-size: 11px;
  }
  .menu-studio-dashboard .editor-body {
    padding: 23px 18px;
  }
  .menu-studio-dashboard .editor-tabs > button {
    font-size: 11px;
  }
  .menu-editor-toolbar {
    padding: 18px;
  }
  .dish-detail-photo {
    height: 225px;
  }
  .dish-detail-copy {
    padding: 24px;
  }
  .dish-detail-copy h3 {
    font-size: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dish-photo-button img {
    transition: none;
  }
}

.menu-studio-dashboard .upload {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 104px;
  cursor: pointer;
}
.menu-studio-dashboard .upload:after {
  content: "+ اختيار صورة";
  display: block;
  font-size: 11px;
  color: #5c7650;
  padding: 7px 12px;
  background: #ecf1e3;
  border-radius: 8px;
}
.menu-studio-dashboard .upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.menu-studio-dashboard .upload:focus-within {
  outline: 2px solid #749366;
  outline-offset: 3px;
}
.restaurant-menu .dish-copy p {
  color: #667760;
}
.dining-identity > p:last-child {
  color: #f3f4e9;
}
.dining-meta small,
.dining-section > span,
.menu-category small {
  color: #6c795f;
}

/* pos/workspace.css */
/* Application layer only: the accepted terminal bezel and printer stay intact. */
#main .cashier-ui {
  --cashier-ink: #183c36;
  --cashier-accent: #2d6252;
  --cashier-muted: #87968b;
  --cashier-line: #e3e9e1;
  --cashier-canvas: #f5f7f2;
  background: var(--cashier-canvas);
  color: var(--cashier-ink);
}
#main .cashier-ui .cashier-toolbar {
  background: #fffefa;
  border-color: var(--cashier-line);
  height: 72px;
  padding: 12px 23px;
}
#main .cashier-ui .terminal-restaurant > span {
  background: #eaf0e4;
  color: #6f8954;
  border-radius: 12px;
  height: 40px;
  width: 40px;
}
#main .cashier-ui .terminal-restaurant b {
  font-size: 13px;
  font-weight: 550;
  color: var(--cashier-ink);
}
#main .cashier-ui .terminal-restaurant b i {
  font-style: normal;
  margin-inline: 9px;
  color: #c2ccba;
}
#main .cashier-ui .terminal-restaurant small {
  color: #91a08d;
  font-size: 9px;
  margin-top: 5px;
}
#main .cashier-ui .terminal-tools {
  gap: 15px;
}
#main .cashier-ui .cashier-session {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #8d9a84;
}
#main .cashier-ui .cashier-session > i {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #8ca973;
}
#main .cashier-ui .cashier-new {
  min-height: 42px;
  gap: 9px;
  border-radius: 10px;
  font-size: 11px;
  background: #254f41;
  color: white;
  padding: 10px 15px;
}
#main .cashier-ui .cashier-new > svg {
  width: 15px;
  height: 15px;
}
#main .cashier-ui .cashier-workspace {
  grid-template-columns: 65px minmax(0, 1fr) 345px;
  display: grid;
  min-height: 0;
  align-items: stretch;
  background: var(--cashier-canvas);
  overflow: hidden;
}
#main .cashier-ui .cashier-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  background: #1c3a31;
  padding: 20px 8px 15px;
}
#main .cashier-ui .cashier-rail-brand {
  color: #e1d1a9;
  font:
    25px Georgia,
    serif;
  text-align: center;
  padding-bottom: 10px;
}
#main .cashier-ui .cashier-rail-brand > span {
  display: block;
  font:
    7px Readex,
    sans-serif;
  letter-spacing: 3px;
  color: #7e9b87;
  padding-top: 6px;
}
#main .cashier-ui .cashier-rail > button {
  width: 49px;
  min-height: 59px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9ab2a1;
  border-radius: 10px;
  transition: background 180ms;
}
#main .cashier-ui .cashier-rail > button > span {
  font-size: 9px;
}
#main .cashier-ui .cashier-rail > button.active {
  background: #ffffff14;
  color: #f5ecd0;
}
#main .cashier-ui .cashier-rail > button:hover {
  background: #ffffff1f;
}
#main .cashier-ui .cashier-rail > a {
  margin-top: auto;
  color: #829b87;
  min-height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  font-size: 20px;
}
#main .cashier-ui .pos-catalog {
  background: var(--cashier-canvas);
}
#main .cashier-ui .terminal-catalog-head {
  padding: 24px 23px 0;
}
#main .cashier-ui .cashier-catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 23px;
}
#main .cashier-ui .cashier-catalog-heading p {
  font-size: 10px;
  color: #a1a48c;
  margin-bottom: 7px;
}
#main .cashier-ui .cashier-catalog-heading h2 {
  font-family: Readex, sans-serif;
  font-size: 21px;
  font-weight: 550;
  line-height: 1.5;
  color: #28493a;
}
#main .cashier-ui .search {
  width: 45%;
  min-height: 44px;
  margin: 0;
  background: #fffefa;
  border: 1px solid #e0e7d9;
  color: #8da082;
  border-radius: 10px;
  padding-inline: 13px;
  gap: 9px;
}
#main .cashier-ui .search input {
  min-height: 42px;
  padding-block: 10px;
  font-size: 11px;
  color: #405c43;
}
#main .cashier-ui .search > svg {
  width: 17px;
  height: 17px;
}
#main .cashier-ui .search:focus-within {
  outline: 2px solid #749366;
  outline-offset: 2px;
}
#main .cashier-ui .cashier-categories {
  gap: 9px;
  margin: 0;
  padding: 0 0 15px;
  scrollbar-width: none;
}
#main .cashier-ui .cashier-categories > button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  color: #718767;
  background: #fffefa;
  border: 1px solid #e4e9db;
  border-radius: 10px;
  font-size: 10px;
}
#main .cashier-ui .cashier-categories > button > svg {
  width: 17px;
  height: 17px;
  color: #91a37f;
}
#main .cashier-ui .cashier-categories > button > small {
  font-size: 9px;
  color: #9dab8c;
  padding: 2px 4px;
}
#main .cashier-ui .cashier-categories > button.active {
  background: #294f40;
  color: #fff7e4;
  border-color: #294f40;
}
#main .cashier-ui .cashier-categories > button.active > svg {
  color: #d1d9bd;
}
#main .cashier-ui .cashier-categories > button.active > small {
  color: #b2c6a3;
}
#main .cashier-ui .cashier-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 0 16px;
  color: #6d825f;
  font-size: 11px;
}
#main .cashier-ui .cashier-results > small {
  font-size: 10px;
  color: #a2af95;
}
#main .cashier-ui .terminal-catalog-body {
  padding: 0 23px 23px;
  scrollbar-color: #c4d0b8 transparent;
}
#main .cashier-ui .pos-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  align-content: start;
}
#main .cashier-ui .cashier-item.product {
  border: 1px solid #e4e9dc;
  background: #fffefa;
  border-radius: 13px;
  box-shadow: 0 3px 10px #33442c04;
  overflow: hidden;
  animation: none;
}
#main .cashier-ui .cashier-item.product.is-selected {
  border-color: #769b65;
  box-shadow: 0 0 0 1px #769b6517;
}
#main .cashier-ui .cashier-item-photo {
  position: relative;
  aspect-ratio: 1.55;
  overflow: hidden;
  background: #ebece2;
}
#main .cashier-ui .cashier-item-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#main .cashier-ui .cashier-item.is-unavailable .cashier-item-photo img {
  opacity: 0.55;
  filter: grayscale(0.7);
}
#main .cashier-ui .cashier-picked {
  position: absolute;
  top: 9px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: #fffdf2ef;
  color: #46633e;
  font-size: 9px;
  border-radius: 7px;
  backdrop-filter: blur(8px);
}
#main .cashier-ui .cashier-picked > svg {
  width: 12px;
  height: 12px;
}
#main .cashier-ui .cashier-unavailable {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  background: #fffefaec;
  color: #889074;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
#main .cashier-ui .product-copy {
  padding: 13px 13px 12px;
}
#main .cashier-ui .cashier-item-category {
  font-size: 9px;
  color: #a0a78f;
  display: block;
  line-height: 1.7;
  margin-bottom: 4px;
}
#main .cashier-ui .product h3 {
  font-family: Readex, sans-serif;
  font-weight: 550;
  font-size: 13px;
  line-height: 1.7;
  color: #2e4a37;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
#main .cashier-ui .product-bottom {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
#main .cashier-ui .cashier-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #37573d;
  direction: ltr;
}
#main .cashier-ui .cashier-price > small {
  font-size: 9px;
  color: #849379;
  font-weight: 400;
}
#main .cashier-ui .product .add {
  min-height: 42px;
  min-width: 42px;
  height: 42px;
  width: 42px;
  border-radius: 10px;
  border: 1px solid #e2e9da;
  color: #527447;
  background: #eef3e6;
  padding: 0;
  display: grid;
  place-items: center;
}
#main .cashier-ui .product .add:hover {
  background: #dfeacf;
}
#main .cashier-ui .product .add:active {
  transform: scale(0.95);
}
#main .cashier-ui .product.is-selected .add {
  background: #284f3e;
  color: #faf9eb;
  border-color: #284f3e;
}
#main .cashier-ui .product .add:disabled {
  background: #f1f2eb;
  color: #b5bdab;
  border-color: #e9ecdf;
}
#main .cashier-ui .order-panel {
  background: #fffefa;
  border-inline-start: 1px solid #dfe6d7;
}
#main .cashier-ui .terminal-order-head {
  padding: 24px 20px 0;
}
#main .cashier-ui .terminal-order-head .section-heading {
  margin-bottom: 18px;
}
#main .cashier-ui .cashier-order-kicker {
  font-size: 7px;
  color: #a6ae94;
  letter-spacing: 2px;
  direction: ltr;
  text-align: right;
  margin-bottom: 7px;
}
#main .cashier-ui .terminal-order-head h2 {
  color: #284739;
  font-size: 21px;
  line-height: 1.4;
}
#main .cashier-ui .cashier-order-count {
  display: grid;
  place-items: center;
  min-width: 35px;
  height: 35px;
  border: 1px solid #e5e9db;
  border-radius: 10px;
  color: #94a07e;
  font-size: 12px;
  background: #f7f8f0;
}
#main .cashier-ui .order-mode {
  display: flex;
  padding: 4px;
  margin: 0 0 18px;
  gap: 5px;
  background: #f0f3e8;
  border: 1px solid #e5eadc;
  border-radius: 10px;
  overflow: visible;
}
#main .cashier-ui .order-mode > button {
  flex: 1;
  min-height: 38px;
  padding: 8px;
  gap: 9px;
  border: 0;
  border-radius: 7px;
  color: #8a987b;
  background: transparent;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main .cashier-ui .order-mode > button > svg {
  width: 17px;
  height: 17px;
}
#main .cashier-ui .order-mode > .active {
  background: #fffefa;
  color: #416136;
  box-shadow: 0 2px 6px #34462b0c;
}
#main .cashier-ui .terminal-order-head .field {
  color: #748962;
  font-size: 10px;
}
#main .cashier-ui .terminal-order-head .field input {
  background: #f8f9f2 !important;
  color: #47663c !important;
  border-color: #e0e7d6 !important;
  min-height: 42px;
}
#main .cashier-ui .terminal-order-body {
  padding: 0 20px;
  scrollbar-color: #c6d1b7 transparent;
}
#main .cashier-ui .order-lines {
  min-height: 0;
}
#main .cashier-ui .cashier-line.cart-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-color: #e6ebdd;
  padding: 17px 0;
  flex-wrap: nowrap;
}
#main .cashier-ui .cashier-line-photo {
  width: 45px;
  height: 47px;
  object-fit: cover;
  border-radius: 9px;
  flex-shrink: 0;
}
#main .cashier-ui .cashier-line-copy {
  flex: 1;
  min-width: 0;
}
#main .cashier-ui .cashier-line-copy > b {
  display: block;
  color: #37543a;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
#main .cashier-ui .cashier-line-copy > small {
  display: block;
  color: #9aa88a;
  font-size: 9px;
  margin-top: 3px;
  line-height: 1.7;
}
#main .cashier-ui .quantity {
  gap: 9px;
  margin-top: 10px;
  font-size: 11px;
  color: #4c6b40;
}
#main .cashier-ui .quantity button {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  border: 1px solid #e0e8d4;
  border-radius: 8px;
  background: #f8faf2;
  color: #6f8b58;
  padding: 0;
  display: grid;
  place-items: center;
}
#main .cashier-ui .quantity button > svg {
  width: 13px;
  height: 13px;
}
#main .cashier-ui .cashier-line-end {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 13px;
}
#main .cashier-ui .cashier-line-end > strong {
  color: #567045;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  padding-top: 3px;
}
#main .cashier-ui .cashier-line-end > button {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 32px;
  color: #bdafa0;
  border-radius: 7px;
}
#main .cashier-ui .cashier-line-end > button:hover {
  background: #faf1eb;
  color: #a56b4e;
}
#main .cashier-ui .cashier-line-end > button > svg {
  width: 15px;
  height: 15px;
}
#main .cashier-ui .order-note {
  color: #91a080;
  font-size: 10px;
  margin-top: 15px;
  padding-bottom: 15px;
}
#main .cashier-ui .order-note textarea {
  background: #f8f9f1;
  color: #566e46;
  border: 1px solid #e6eadb;
  border-radius: 10px;
  min-height: 55px;
  font-size: 11px;
  padding: 10px 12px;
}
#main .cashier-ui .order-note textarea::placeholder {
  color: #b0b59e;
}
#main .cashier-ui .terminal-checkout {
  background: #fffefa;
  border-color: #e5eadb;
  padding: 15px 20px 17px;
}
#main .cashier-ui .order-summary > span {
  color: #98a58a;
  font-size: 10px;
  padding: 0 0 12px;
}
#main .cashier-ui .order-summary > span b {
  color: #5b754b;
  font-weight: 500;
}
#main .cashier-ui .total {
  border-color: #e5eadc;
  padding: 15px 0 17px;
  font-size: 12px;
  color: #607c4f;
}
#main .cashier-ui .total > span > small {
  color: #a5ae96;
  font-size: 8px;
  display: block;
  margin-top: 4px;
}
#main .cashier-ui .total > b {
  font-size: 25px;
  color: #2c5039;
  font-weight: 550;
}
#main .cashier-ui .terminal-checkout .button {
  background: #244f3c;
  color: #fff9e8;
  border-radius: 11px;
  min-height: 51px;
  justify-content: space-between;
  padding-inline: 15px;
  font-size: 11px;
}
#main .cashier-ui .terminal-checkout .button > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
#main .cashier-ui .terminal-checkout .button > svg {
  width: 16px;
  height: 16px;
}
#main .cashier-ui .terminal-checkout .button > span > svg {
  width: 17px;
  height: 17px;
  color: #c5d7b0;
}
#main .cashier-ui .terminal-checkout .button:disabled {
  opacity: 0.4;
}
#main .cashier-ui .terminal-checkout > small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 7px;
  color: #a4ae95;
  margin-top: 12px;
}
#main .cashier-ui .terminal-checkout > small > svg {
  width: 10px;
  height: 10px;
}
#main .cashier-ui .cashier-empty {
  padding: 50px 5px;
  text-align: center;
}
#main .cashier-ui .cashier-empty > svg {
  width: 50px;
  height: 50px;
  stroke-width: 1;
  color: #c2ceb0;
  padding: 10px;
  box-sizing: content-box;
  border: 1px dashed #dce4ce;
  border-radius: 50%;
  margin-bottom: 20px;
}
#main .cashier-ui .cashier-empty h3 {
  font-family: Readex, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #6b8558;
}
#main .cashier-ui .cashier-empty p {
  font-size: 11px;
  line-height: 1.9;
  color: #a1ae90;
  margin-top: 11px;
}
#main .cashier-ui .cashier-empty > span {
  font-size: 8px;
  color: #bcc6a7;
  display: block;
  margin-top: 25px;
}
#main .cashier-ui .cashier-no-results {
  grid-column: 1/-1;
  text-align: center;
  padding: 40px 15px;
  color: #879b76;
}
#main .cashier-ui .cashier-no-results > svg {
  width: 30px;
  height: 30px;
  margin-bottom: 20px;
  color: #c1cdb2;
}
#main .cashier-ui .cashier-no-results h3 {
  font-size: 17px;
  font-weight: 500;
  color: #6e875a;
}
#main .cashier-ui .cashier-no-results p {
  font-size: 11px;
  margin-top: 10px;
  color: #9aaa8b;
}
#main .cashier-ui button:focus-visible,
#main .cashier-ui a:focus-visible {
  outline: 2px solid #a8bc7f;
  outline-offset: 3px;
}
#main .cashier-ui button:active {
  filter: brightness(0.96);
}
@media (max-width: 1100px) {
  #main .cashier-ui .cashier-workspace {
    grid-template-columns: 55px minmax(0, 1fr) 305px;
  }
  #main .cashier-ui .cashier-rail {
    padding-inline: 4px;
  }
  #main .cashier-ui .terminal-catalog-head {
    padding: 20px 17px 0;
  }
  #main .cashier-ui .terminal-catalog-body {
    padding-inline: 17px;
  }
  #main .cashier-ui .pos-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #main .cashier-ui .cashier-catalog-heading {
    gap: 12px;
  }
  #main .cashier-ui .cashier-catalog-heading h2 {
    font-size: 19px;
  }
  #main .cashier-ui .cashier-line-photo {
    width: 37px;
    height: 40px;
  }
}
@media (max-width: 700px) {
  #main .cashier-ui .cashier-toolbar {
    padding: 10px 12px;
    height: 65px;
    gap: 7px;
  }
  #main .cashier-ui .terminal-restaurant {
    gap: 7px;
  }
  #main .cashier-ui .terminal-restaurant > span {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  #main .cashier-ui .terminal-restaurant b {
    font-size: 11px;
  }
  #main .cashier-ui .terminal-restaurant b i {
    display: none;
  }
  #main .cashier-ui .terminal-restaurant small {
    display: none;
  }
  #main .cashier-ui .cashier-session {
    display: none;
  }
  #main .cashier-ui .terminal-tools {
    gap: 7px;
  }
  #main .cashier-ui .cashier-new {
    padding: 10px;
    min-height: 44px;
    font-size: 10px;
    gap: 6px;
  }
  #main .cashier-ui .terminal-cart-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    font-size: 10px;
    min-height: 44px;
    background: #eaf0df;
    color: #60824c;
    border-radius: 9px;
  }
  #main .cashier-ui .terminal-cart-jump > svg {
    width: 15px;
    height: 15px;
  }
  #main .cashier-ui .cashier-workspace {
    display: block;
    overflow: auto;
  }
  #main .cashier-ui .cashier-rail {
    display: none;
  }
  #main .cashier-ui .terminal-catalog-head {
    padding-top: 19px;
  }
  #main .cashier-ui .cashier-catalog-heading {
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  #main .cashier-ui .cashier-catalog-heading > div {
    width: 100%;
  }
  #main .cashier-ui .cashier-catalog-heading h2 {
    font-size: 23px;
  }
  #main .cashier-ui .cashier-catalog-heading p {
    font-size: 10px;
  }
  #main .cashier-ui .search {
    width: 100%;
    min-height: 46px;
  }
  #main .cashier-ui .search input {
    font-size: 12px;
  }
  #main .cashier-ui .cashier-categories {
    padding-bottom: 11px;
  }
  #main .cashier-ui .cashier-categories > button {
    min-height: 46px;
    padding: 10px 11px;
    font-size: 10px;
  }
  #main .cashier-ui .cashier-categories > button > small {
    display: none;
  }
  #main .cashier-ui .cashier-results {
    padding-bottom: 14px;
  }
  #main .cashier-ui .pos-catalog {
    height: 530px;
  }
  #main .cashier-ui .cashier-item-photo {
    aspect-ratio: 1.3;
  }
  #main .cashier-ui .product-copy {
    padding: 11px;
  }
  #main .cashier-ui .product h3 {
    font-size: 12px;
    margin-bottom: 12px;
  }
  #main .cashier-ui .cashier-item-category {
    font-size: 9px;
  }
  #main .cashier-ui .cashier-price {
    font-size: 16px;
  }
  #main .cashier-ui .cashier-price > small {
    font-size: 8px;
  }
  #main .cashier-ui .product .add {
    min-height: 44px;
    min-width: 44px;
    height: 44px;
    width: 44px;
  }
  #main .cashier-ui .cashier-picked {
    font-size: 8px;
    right: 6px;
    top: 6px;
    padding: 6px;
  }
  #main .cashier-ui .cashier-picked > svg {
    display: none;
  }
  #main .cashier-ui .order-panel {
    border-inline-start: 0;
    border-top: 1px solid #dce5d2;
    min-height: 470px;
  }
  #main .cashier-ui .terminal-order-head {
    padding: 20px 17px 0;
  }
  #main .cashier-ui .terminal-order-body {
    padding-inline: 17px;
    overflow: visible;
  }
  #main .cashier-ui .cashier-line-photo {
    width: 43px;
    height: 46px;
  }
  #main .cashier-ui .cashier-line-copy > b {
    font-size: 12px;
  }
  #main .cashier-ui .cashier-line-copy > small {
    font-size: 10px;
  }
  #main .cashier-ui .quantity button {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
  #main .cashier-ui .cashier-line-end > button {
    min-width: 44px;
    min-height: 44px;
  }
  #main .cashier-ui .cashier-line-end > strong {
    font-size: 10px;
  }
  #main .cashier-ui .cashier-empty {
    padding-block: 30px;
  }
  #main .cashier-ui .terminal-checkout {
    padding: 15px 17px 17px;
  }
  #main .cashier-ui .terminal-checkout .button {
    font-size: 11px;
    min-height: 52px;
  }
}
/* Wide mode is keyed to the usable canvas, including the rotated fallback. */
body.pos-wide #main .cashier-ui .cashier-workspace {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 292px;
  overflow: hidden;
}
body.pos-wide #main .cashier-ui .cashier-rail {
  display: flex;
  padding: 10px 3px;
  gap: 7px;
}
body.pos-wide #main .cashier-ui .cashier-rail-brand {
  display: none;
}
body.pos-wide #main .cashier-ui .cashier-rail > button {
  width: 42px;
  min-height: 55px;
  border-radius: 8px;
}
body.pos-wide #main .cashier-ui .cashier-toolbar {
  height: 53px;
  padding: 7px 15px;
}
body.pos-wide #main .cashier-ui .cashier-session {
  display: none;
}
body.pos-wide #main .cashier-ui .terminal-cart-jump {
  display: none;
}
body.pos-wide #main .cashier-ui .terminal-restaurant small {
  display: none;
}
body.pos-wide #main .cashier-ui .cashier-new {
  min-height: 40px;
  padding: 7px 11px;
  font-size: 10px;
}
body.pos-wide #main .cashier-ui .terminal-catalog-head {
  padding: 12px 15px 0;
}
body.pos-wide #main .cashier-ui .cashier-catalog-heading {
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 12px;
}
body.pos-wide #main .cashier-ui .cashier-catalog-heading > div {
  width: auto;
  flex-shrink: 0;
}
body.pos-wide #main .cashier-ui .cashier-catalog-heading p {
  display: none;
}
body.pos-wide #main .cashier-ui .cashier-catalog-heading h2 {
  font-size: 17px;
}
body.pos-wide #main .cashier-ui .search {
  width: 53%;
  min-height: 40px;
}
body.pos-wide #main .cashier-ui .search input {
  min-height: 38px;
  font-size: 11px;
}
body.pos-wide #main .cashier-ui .cashier-categories {
  margin: 0;
  padding-bottom: 11px;
  gap: 7px;
}
body.pos-wide #main .cashier-ui .cashier-categories > button {
  padding: 8px 10px;
  min-height: 39px;
  font-size: 10px;
  gap: 6px;
}
body.pos-wide #main .cashier-ui .cashier-categories > button > small {
  display: none;
}
body.pos-wide #main .cashier-ui .cashier-categories > button > svg {
  width: 15px;
  height: 15px;
}
body.pos-wide #main .cashier-ui .cashier-results {
  display: none;
}
body.pos-wide #main .cashier-ui .terminal-catalog-body {
  padding: 0 15px 15px;
}
body.pos-wide #main .cashier-ui .pos-catalog {
  height: auto;
}
body.pos-wide #main .cashier-ui .pos-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
body.pos-wide #main .cashier-ui .cashier-item-photo {
  aspect-ratio: 1.55;
}
body.pos-wide #main .cashier-ui .product-copy {
  padding: 9px 10px;
}
body.pos-wide #main .cashier-ui .cashier-item-category {
  display: none;
}
body.pos-wide #main .cashier-ui .product h3 {
  font-size: 11px;
  margin-bottom: 8px;
}
body.pos-wide #main .cashier-ui .cashier-price {
  font-size: 15px;
  gap: 3px;
}
body.pos-wide #main .cashier-ui .cashier-price > small {
  font-size: 7px;
}
body.pos-wide #main .cashier-ui .product .add {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
}
body.pos-wide #main .cashier-ui .order-panel {
  min-height: 0;
  border-top: 0;
  border-inline-start: 1px solid #e0e6d7;
}
body.pos-wide #main .cashier-ui .terminal-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
}
body.pos-wide #main .cashier-ui .terminal-order-head .section-heading {
  flex: 1;
  margin: 0;
}
body.pos-wide #main .cashier-ui .terminal-order-head h2 {
  font-size: 16px;
}
body.pos-wide #main .cashier-ui .cashier-order-kicker,
body.pos-wide #main .cashier-ui .cashier-order-count {
  display: none;
}
body.pos-wide #main .cashier-ui .order-mode {
  width: 130px;
  margin: 0;
  padding: 3px;
}
body.pos-wide #main .cashier-ui .order-mode > button {
  min-height: 35px;
  padding: 6px;
  font-size: 10px;
  gap: 5px;
}
body.pos-wide #main .cashier-ui .order-mode > button > svg {
  width: 13px;
  height: 13px;
}
body.pos-wide #main .cashier-ui .terminal-order-body {
  padding: 0 13px;
  overflow: auto;
}
body.pos-wide #main .cashier-ui .cashier-line {
  gap: 7px;
  padding: 11px 0;
}
body.pos-wide #main .cashier-ui .cashier-line-photo {
  width: 32px;
  height: 35px;
}
body.pos-wide #main .cashier-ui .cashier-line-copy > b {
  font-size: 10px;
}
body.pos-wide #main .cashier-ui .cashier-line-copy > small {
  font-size: 8px;
}
body.pos-wide #main .cashier-ui .cashier-line-end > strong {
  font-size: 9px;
}
body.pos-wide #main .cashier-ui .quantity {
  margin-top: 6px;
  gap: 7px;
}
body.pos-wide #main .cashier-ui .quantity button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
}
body.pos-wide #main .cashier-ui .cashier-line-end > button {
  min-width: 38px;
  min-height: 38px;
}
body.pos-wide #main .cashier-ui .terminal-checkout {
  padding: 8px 13px 10px;
}
body.pos-wide #main .cashier-ui .order-summary > span {
  display: none;
}
body.pos-wide #main .cashier-ui .total {
  border: 0;
  padding: 0 0 9px;
  font-size: 11px;
}
body.pos-wide #main .cashier-ui .total > b {
  font-size: 20px;
}
body.pos-wide #main .cashier-ui .total > span > small {
  display: none;
}
body.pos-wide #main .cashier-ui .terminal-checkout .button {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 10px;
  border-radius: 9px;
}
body.pos-wide #main .cashier-ui .terminal-checkout .button > span > svg {
  display: none;
}
body.pos-wide #main .cashier-ui .terminal-checkout > small {
  display: none;
}
body.pos-wide #main .cashier-ui .cashier-empty {
  padding: 17px 5px;
}
body.pos-wide #main .cashier-ui .cashier-empty > svg {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
}
body.pos-wide #main .cashier-ui .cashier-empty h3 {
  font-size: 12px;
}
body.pos-wide #main .cashier-ui .cashier-empty p {
  font-size: 10px;
  margin-top: 7px;
}
body.pos-wide #main .cashier-ui .cashier-empty > span {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  #main .cashier-ui .cashier-rail > button {
    transition: none;
  }
  #main .cashier-ui .product .add:active {
    transform: none;
  }
}

/* Compact order options leave the order itself in view. */
#main .cashier-ui .cashier-order-options {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
#main .cashier-ui .cashier-order-options .order-mode {
  flex: 1;
  width: auto;
  margin: 0;
  min-width: 0;
}
#main .cashier-ui .cashier-table-number:empty {
  display: none;
}
#main .cashier-ui .cashier-table-number {
  width: 72px;
  flex-shrink: 0;
}
#main .cashier-ui .cashier-table-number .field {
  margin: 0 !important;
  gap: 6px;
  font-size: 9px;
}
#main .cashier-ui .cashier-table-number input {
  padding: 8px;
  min-height: 43px;
  width: 100%;
}
#main .cashier-ui .terminal-order-head {
  padding-top: 20px;
}
#main .cashier-ui .terminal-order-head .section-heading {
  margin-bottom: 14px;
}
#main .cashier-ui .cashier-item-category,
#main .cashier-ui .cashier-price > small,
#main .cashier-ui .cashier-line-copy > small,
#main .cashier-ui .order-note,
#main .cashier-ui .order-summary > span,
#main .cashier-ui .cashier-results > small {
  color: #64765d;
}
#main .cashier-ui .cashier-results {
  color: #536b4d;
}
#main .cashier-ui .order-note textarea::placeholder {
  color: #829277;
}
#main .cashier-ui .terminal-checkout {
  padding-top: 12px;
}
#main .cashier-ui .total {
  padding: 12px 0 14px;
}
body.pos-wide #main .cashier-ui .cashier-order-options {
  width: 130px;
  margin: 0;
  align-items: center;
}
body.pos-wide #main .cashier-ui .cashier-table-number {
  width: 52px;
}
body.pos-wide #main .cashier-ui .cashier-table-number .field {
  font-size: 8px;
}
body.pos-wide #main .cashier-ui .cashier-order-options:has(input) {
  width: 185px;
}
body.pos-wide #main .cashier-ui .terminal-order-head .section-heading {
  margin: 0;
}

/* reference-theme.css */
/* Reference direction: charcoal, royal blue and orange. Native Dezly is excluded. */
body:not([data-experience-page="dizly"]) {
  --navy: var(--ref-f3f5ff);
  --blue: var(--ref-1058ff);
  --gold: var(--ref-ff982f);
  --bg: var(--ref-17171e);
  --soft: var(--ref-242737);
  --muted: var(--ref-a7afc4);
  --line: var(--ref-34394c);
  --shadow: 0 18px 55px var(--ref-0002);
  background: var(--ref-17171e);
  color: var(--ref-f3f5ff);
  color-scheme: dark;
}
body:not([data-experience-page="dizly"]) .topbar,
body[data-experience-page="home"] .topbar {
  background: var(--ref-17171ef2);
  border-color: var(--ref-343748);
  color: var(--ref-f6f7ff);
}
body:not([data-experience-page="dizly"]) .topbar nav a {
  color: var(--ref-aab3ca);
}
body:not([data-experience-page="dizly"]) .topbar nav a.active {
  color: var(--ref-fff);
}
body:not([data-experience-page="dizly"]) .topbar nav a.active:after {
  background: var(--ref-ff982f);
}
body:not([data-experience-page="dizly"]) .brand span {
  color: var(--ref-c7d5ff);
  border-color: var(--ref-3a4257);
}
body:not([data-experience-page="dizly"]) .topbar > .button {
  color: var(--ref-e0e7ff);
  background: var(--ref-242737);
  border-color: var(--ref-3e465c);
}
body:not([data-experience-page="dizly"]) .button {
  background: var(--ref-1058ff);
  color: var(--ref-fff);
  border-color: var(--ref-1058ff);
  box-shadow: none;
}
body:not([data-experience-page="dizly"]) .button:hover {
  background: var(--ref-2c6dff);
}
body:not([data-experience-page="dizly"]) .button.ghost {
  background: transparent;
  border-color: var(--ref-414a63);
  color: var(--ref-d5def6);
}
body:not([data-experience-page="dizly"]) .card {
  background: var(--ref-20232f);
  border-color: var(--ref-373d52);
  box-shadow: 0 15px 50px var(--ref-0001);
}
body:not([data-experience-page="dizly"]) .field input,
body:not([data-experience-page="dizly"]) .field textarea,
body:not([data-experience-page="dizly"]) .field select,
body:not([data-experience-page="dizly"]) .search {
  background: var(--ref-191d29);
  color: var(--ref-eef1ff);
  border-color: var(--ref-3c435a);
}
body:not([data-experience-page="dizly"]) input::placeholder,
body:not([data-experience-page="dizly"]) textarea::placeholder {
  color: var(--ref-8d98b3);
}
body:not([data-experience-page="dizly"]) .tabs > * {
  color: var(--ref-aeb8d0);
  border-color: var(--ref-394159);
  background: var(--ref-212636);
}
body:not([data-experience-page="dizly"]) .tabs > .active {
  background: var(--ref-1058ff);
  color: var(--ref-fff);
  border-color: var(--ref-1058ff);
}
body:not([data-experience-page="dizly"]) .workspace-top,
body:not([data-experience-page="dizly"]) .workspace-top h1,
body:not([data-experience-page="dizly"]) .portfolio-intro > h1 {
  color: var(--ref-f0f3ff);
}
body:not([data-experience-page="dizly"]) .workspace-top .eyebrow,
body:not([data-experience-page="dizly"]) .eyebrow {
  color: var(--ref-ffab58);
}
body:not([data-experience-page="dizly"]) .sandbox {
  color: var(--ref-abc0ff);
  background: var(--ref-1058ff12);
  border-color: var(--ref-1058ff45);
}
body:not([data-experience-page="dizly"]) .footer {
  background: var(--ref-12131b);
  border-color: var(--ref-2c3245);
  color: var(--ref-8d99b6);
}
body:not([data-experience-page="dizly"]) .footer > span:first-child {
  color: var(--ref-d2ddff);
}
body:not([data-experience-page="dizly"]) .footer a {
  color: var(--ref-ffad62);
}
body:not([data-experience-page="dizly"]) #dialog {
  background: var(--ref-202431);
  color: var(--ref-f3f5ff);
  border: 1px solid var(--ref-414a64);
}
body:not([data-experience-page="dizly"]) #dialog .icon-button {
  color: var(--ref-e3e9ff);
  background: var(--ref-2c3447);
}
body:not([data-experience-page="dizly"]) .quantity button {
  background: var(--ref-2a344a);
  color: var(--ref-dde6ff);
}
body:not([data-experience-page="dizly"]) .product {
  background: var(--ref-242938);
  border-color: var(--ref-3b435a);
}
body:not([data-experience-page="dizly"]) .product h3 {
  color: var(--ref-f4f5ff);
}
body:not([data-experience-page="dizly"]) .product p {
  color: var(--ref-b5bfd5);
}
body:not([data-experience-page="dizly"]) .product-bottom b {
  color: var(--ref-ffb269);
}
body:not([data-experience-page="dizly"]) .product .add {
  background: var(--ref-1058ff);
  color: white;
}
/* Device-led hero, inspired by the third supplied reference. */
.experience-home .premium-hero {
  background: var(--ref-13141c);
  border-radius: 0;
  border-bottom: 1px solid var(--ref-33364a);
}
.experience-home .hero-orbit {
  background: radial-gradient(ellipse at 13% 60%, var(--ref-1058ff20), transparent 53%);
}
.experience-home .hero-orbit:before {
  display: none;
}
.experience-home .premium-hero-grid {
  min-height: 705px;
  padding-block: 65px 55px;
  gap: 55px;
  grid-template-columns: 1fr 1.05fr;
}
.experience-home .premium-eyebrow {
  color: var(--ref-b7c8f6);
  font-size: 11px;
}
.experience-home .premium-eyebrow > span {
  background: var(--ref-ff982f);
  box-shadow: 0 0 0 5px var(--ref-ff982f12);
}
.experience-home .premium-hero h1 {
  font-size: clamp(42px, 4.6vw, 67px);
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--ref-f8f9ff);
}
.experience-home .premium-hero h1 em {
  color: var(--ref-ff982f);
}
.experience-home .premium-lead {
  color: var(--ref-b1bad0);
  font-size: 14px;
}
body:not([data-experience-page="dizly"]) .experience-home .premium-primary {
  background: var(--ref-ff982f);
  color: var(--ref-17171e);
  border: 0;
  border-radius: 12px;
  min-height: 55px;
  font-size: 14px;
}
.experience-home .premium-proof {
  font-size: 10px;
  color: var(--ref-9daac6);
}
.experience-home .premium-proof i {
  color: var(--ref-ffad59);
}
.experience-home .hero-bottom-line {
  border-color: var(--ref-33394e);
  color: var(--ref-a8b5d1);
}
.experience-home .hero-bottom-line > span:last-child {
  color: var(--ref-6b80b1);
}
.experience-home .hero-bottom-line i {
  color: var(--ref-ff982f);
}
.experience-home .tech-stage {
  display: block;
  height: 510px;
  position: relative;
  min-width: 0;
}
.tech-halo {
  position: absolute;
  width: 420px;
  height: 420px;
  top: 20px;
  left: 10px;
  border: 1px solid var(--ref-1058ffaa);
  border-radius: 50%;
  box-shadow:
    0 0 45px var(--ref-1058ff25),
    inset 0 0 45px var(--ref-1058ff13);
  transform: rotate(-15deg) scaleY(0.9);
}
.tech-halo:after {
  content: "";
  position: absolute;
  inset: 45px;
  border: 1px solid var(--ref-1058ff40);
  border-radius: 50%;
}
.tech-stage-word {
  position: absolute;
  top: 80px;
  left: 0;
  font-size: 62px;
  letter-spacing: -3px;
  font-weight: 750;
  color: var(--ref-ffffff04);
  direction: ltr;
  pointer-events: none;
}
.tech-monitor {
  position: absolute;
  width: 99%;
  left: -10px;
  top: 155px;
  transform: perspective(1000px) rotateY(7deg) rotateZ(2deg);
  z-index: 2;
  filter: drop-shadow(0 25px 40px var(--ref-0008));
}
.tech-monitor > img {
  display: block;
  width: 100%;
  border: 1px solid var(--ref-626d86);
  border-radius: 13px;
}
.tech-monitor > span {
  position: absolute;
  bottom: -28px;
  left: 6px;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--ref-889dc9);
  display: flex;
  align-items: center;
  gap: 9px;
  direction: ltr;
}
.tech-monitor > span > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ref-ff982f);
}
.tech-phone {
  position: absolute;
  width: 172px;
  height: 350px;
  top: 2px;
  left: 22px;
  border: 7px solid var(--ref-141721);
  background: var(--ref-fff);
  border-radius: 27px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--ref-66738e),
    0 25px 50px var(--ref-0007);
  transform: rotate(-9deg);
  z-index: 3;
}
.tech-phone > img {
  width: 100%;
  display: block;
}
.tech-phone-speaker {
  position: absolute;
  width: 48px;
  height: 9px;
  background: var(--ref-141721);
  top: 0;
  left: calc(50% - 24px);
  z-index: 2;
  border-radius: 0 0 8px 8px;
}
.tech-demo-label {
  position: absolute;
  top: 33px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ref-aebde1);
  z-index: 4;
}
.tech-demo-label b {
  color: var(--ref-ff982f);
  font-size: 53px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -4px;
  direction: ltr;
}
.tech-demo-label > span {
  font-size: 10px;
  line-height: 1.9;
}
.experience-home .premium-experiences {
  padding-top: 85px;
}
.experience-home .premium-section-heading h2 {
  color: var(--ref-f5f6ff);
  font-size: 45px;
}
.experience-home .premium-section-heading h2 em {
  color: var(--ref-5485ff);
}
.experience-home .section-note > span {
  color: var(--ref-ffab59);
  border-color: var(--ref-3b435b);
}
.experience-home .section-note > p {
  color: var(--ref-9ba9c7);
}
.experience-home .scene-number {
  color: var(--ref-748ab7);
}
.experience-home .scene-eyebrow {
  color: var(--ref-ffad5d);
}
.experience-home .gallery-scenes h3 {
  color: var(--ref-f3f5ff);
}
.experience-home .scene-description {
  color: var(--ref-a7b5d0);
  font-size: 13px;
}
.experience-home .scene-features li {
  color: var(--ref-b3bed5);
}
.experience-home .scene-features li > span {
  color: var(--ref-ff982f);
}
.experience-home .scene-action {
  color: var(--ref-e8eeff);
  border-color: var(--ref-3f5278);
}
.experience-home .scene-action > span {
  background: var(--ref-1058ff);
  color: white;
}
.experience-home .diz-scene-art {
  border-radius: 150px 16px 16px 16px;
  border: 1px solid var(--ref-333f5a);
}
.experience-home .gallery-scenes .experience-card.scene-pos {
  background: linear-gradient(135deg, var(--ref-1058ff20), var(--ref-1c2235) 65%);
  border: 1px solid var(--ref-35466c);
  border-radius: 15px 15px 55px 15px;
}
.experience-home .scene-note {
  background: var(--ref-1058ff);
  color: var(--ref-fff);
  box-shadow: 0 8px 30px var(--ref-0002);
}
.experience-home .scene-note i {
  background: var(--ref-ffb262);
}
.experience-home .scene-menu .experience-tile {
  background: var(--ref-21232e);
  border: 1px solid var(--ref-3b3e50);
}
.experience-home .scene-menu .scene-action > span {
  background: var(--ref-ff982f);
  color: var(--ref-19191f);
}
.experience-home .table-label {
  background: var(--ref-ff982f);
  color: var(--ref-211b16);
  box-shadow: 0 15px 35px var(--ref-0003);
}
.experience-home .table-label b,
.experience-home .table-label small {
  color: var(--ref-241d19);
}
.experience-home .scene-web .experience-tile {
  background: var(--ref-10131f);
  border: 1px solid var(--ref-303a57);
}
.experience-home .scene-web .scene-action > span {
  background: var(--ref-ff982f);
  color: var(--ref-17171e);
}
.experience-home .web-scene-word {
  color: var(--ref-1058ff0b);
}
.experience-home .web-scene-art > .tile-photo {
  border-color: var(--ref-2d3855);
}
.experience-home .web-browser-bar i:first-child {
  background: var(--ref-ff982f);
}
.experience-home .experience-journey {
  border-color: var(--ref-333c54);
}
.experience-home .experience-journey h2,
.experience-home .experience-journey h3 {
  color: var(--ref-eaf0ff);
}
.experience-home .experience-journey p {
  color: var(--ref-aab6d0);
}
.experience-home .experience-journey li {
  border-color: var(--ref-343d56);
}
.experience-home .experience-journey li > span {
  color: var(--ref-ff982f);
}
/* The 14-day offer stays concrete; its presentation changes to the new palette. */
body:not([data-experience-page="dizly"]) .menu-trial {
  background: var(--ref-ff982f);
  color: var(--ref-17171e);
  border: 1px solid var(--ref-ffb468);
}
body:not([data-experience-page="dizly"]) .trial-stamp {
  border-color: var(--ref-22222b50);
}
body:not([data-experience-page="dizly"]) .trial-stamp:before,
body:not([data-experience-page="dizly"]) .trial-stamp:after {
  background: var(--ref-17171e);
}
body:not([data-experience-page="dizly"]) .trial-stamp strong {
  color: var(--ref-17171e);
  font-family: Readex, sans-serif;
  font-weight: 700;
  letter-spacing: -9px;
  font-size: 105px;
}
body:not([data-experience-page="dizly"]) .trial-copy h2 {
  color: var(--ref-17171e);
  font-size: 35px;
}
body:not([data-experience-page="dizly"]) .trial-copy > p,
body:not([data-experience-page="dizly"]) .trial-copy > small,
body:not([data-experience-page="dizly"]) .trial-edge {
  color: var(--ref-46301e);
}
body:not([data-experience-page="dizly"]) .trial-copy .trial-action {
  background: var(--ref-17171e);
  color: white;
  border-color: var(--ref-17171e);
}
body:not([data-experience-page="dizly"]) .service-cta {
  background: var(--ref-1058ff);
  color: white;
  border: 1px solid var(--ref-5488ff);
  border-radius: 20px;
  box-shadow: 0 15px 70px var(--ref-1058ff14);
}
body:not([data-experience-page="dizly"]) .service-cta h2 {
  color: white;
  font-size: 34px;
}
body:not([data-experience-page="dizly"]) .service-cta p {
  color: var(--ref-d1ddff);
}
body:not([data-experience-page="dizly"]) .service-cta .eyebrow {
  color: var(--ref-ffbd78);
}
body:not([data-experience-page="dizly"]) .service-cta > .button {
  background: var(--ref-ff982f);
  color: var(--ref-17171e);
  border-color: var(--ref-ff982f);
}
/* Restaurant menu and owner workspace. */
body[data-experience-page="menu"] {
  background: var(--ref-17171e);
}
body:not([data-experience-page="dizly"]) .menu-page .restaurant.restaurant-menu,
body:not([data-experience-page="dizly"])
  .device-preview
  .restaurant.restaurant-menu {
  background: var(--ref-1e222e);
  color: var(--ref-eef2ff);
  border: 1px solid var(--ref-373f57);
}
body:not([data-experience-page="dizly"]) .dining-hero {
  background: var(--ref-171d2c);
}
body:not([data-experience-page="dizly"]) .dining-cover:after {
  background: linear-gradient(270deg, var(--ref-10182af0), var(--ref-10182aad) 50%, var(--ref-10182a25));
}
body:not([data-experience-page="dizly"]) .dining-wordmark,
body:not([data-experience-page="dizly"]) .dining-kicker {
  color: var(--ref-ffb16b);
}
body:not([data-experience-page="dizly"]) .dining-monogram {
  background: var(--ref-ff982f);
  border-color: var(--ref-ffb66d);
  color: var(--ref-17171e);
}
body:not([data-experience-page="dizly"]) .dining-meta {
  background: var(--ref-252a3a);
  border-color: var(--ref-3b4259);
}
body:not([data-experience-page="dizly"]) .dining-meta b {
  color: var(--ref-d3dcf1);
}
body:not([data-experience-page="dizly"]) .dining-meta small,
body:not([data-experience-page="dizly"]) .dining-meta .restaurant-icon {
  color: var(--ref-a0aecb);
}
body:not([data-experience-page="dizly"]) .dining-welcome p {
  color: var(--ref-ffae63);
}
body:not([data-experience-page="dizly"]) .dining-welcome h2,
body:not([data-experience-page="dizly"]) .restaurant-menu .dining-section h2 {
  color: var(--ref-f1f4ff);
}
body:not([data-experience-page="dizly"]) .dining-welcome > span {
  color: var(--ref-adc0f3);
  border-color: var(--ref-414a64);
}
body:not([data-experience-page="dizly"]) .dining-welcome > span small,
body:not([data-experience-page="dizly"]) .dining-section > span {
  color: var(--ref-93a3c3);
}
body:not([data-experience-page="dizly"]) .dining-search.search {
  background: var(--ref-181d2a);
  border-color: var(--ref-414a64);
  color: var(--ref-9cb3e7);
}
body:not([data-experience-page="dizly"]) .dining-search.search input {
  color: var(--ref-e5edff);
}
body:not([data-experience-page="dizly"]) .restaurant-menu .menu-categories {
  border-color: var(--ref-38435d);
}
body:not([data-experience-page="dizly"])
  .restaurant-menu
  .menu-categories
  .menu-category {
  background: var(--ref-242a3a);
  color: var(--ref-b8c6e2);
  border-color: var(--ref-3d4863);
}
body:not([data-experience-page="dizly"])
  .restaurant-menu
  .menu-categories
  .menu-category.active {
  background: var(--ref-1058ff);
  color: white;
  border-color: var(--ref-397aff);
}
body:not([data-experience-page="dizly"]) .menu-category small {
  color: var(--ref-9caccb);
}
body:not([data-experience-page="dizly"]) .menu-category.active small {
  color: var(--ref-d0deff);
}
body:not([data-experience-page="dizly"]) .dining-feature {
  background: linear-gradient(110deg, var(--ref-1058ff20), var(--ref-222b42));
  border-color: var(--ref-3d5079);
}
body:not([data-experience-page="dizly"]) .dining-feature > span > b {
  color: var(--ref-f4f6ff);
}
body:not([data-experience-page="dizly"]) .dining-feature > span > span {
  color: var(--ref-ffae65);
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-card.product {
  background: var(--ref-252a3a);
  border-color: var(--ref-3b445e);
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-copy h3 {
  color: var(--ref-f4f6ff);
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-copy p {
  color: var(--ref-b0bed8);
}
body:not([data-experience-page="dizly"]) .dish-bottom > b {
  color: var(--ref-ffae65);
}
body:not([data-experience-page="dizly"]) .dish-count {
  background: var(--ref-1058ffed);
  color: white;
}
body:not([data-experience-page="dizly"]) .dish-availability {
  color: var(--ref-e7a471);
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-bottom .add {
  background: var(--ref-1058ff);
  color: white;
}
body:not([data-experience-page="dizly"])
  .restaurant-menu
  .dish-bottom
  .add:disabled {
  background: var(--ref-34394a);
  color: var(--ref-7f8da6);
}
body:not([data-experience-page="dizly"]) .dining-endnote {
  color: var(--ref-9aa9c9);
}
body:not([data-experience-page="dizly"]) .menu-onboarding h1 {
  color: var(--ref-f2f5ff);
}
body:not([data-experience-page="dizly"]) .menu-onboarding h1 > span {
  color: var(--ref-ff982f);
}
body:not([data-experience-page="dizly"])
  .menu-onboarding-copy
  > p:not(.eyebrow) {
  color: var(--ref-aab7d3);
}
body:not([data-experience-page="dizly"]) .menu-onboarding-copy .eyebrow {
  color: var(--ref-ffac5d);
}
body:not([data-experience-page="dizly"]) .menu-onboarding .field {
  color: var(--ref-c0cee8);
}
body:not([data-experience-page="dizly"]) .menu-onboarding .field input {
  background: var(--ref-212737);
  border-color: var(--ref-404b67);
  color: var(--ref-e7edff);
}
body:not([data-experience-page="dizly"]) .menu-onboarding .button {
  background: var(--ref-ff982f);
  color: var(--ref-17171e);
}
body:not([data-experience-page="dizly"]) .onboarding-assurance {
  color: var(--ref-97a7c9);
}
body:not([data-experience-page="dizly"]) .onboarding-menu-slip {
  background: var(--ref-1058ff);
  color: white;
  border: 1px solid var(--ref-76a0ff);
}
body:not([data-experience-page="dizly"]) .onboarding-menu-slip strong,
body:not([data-experience-page="dizly"]) .onboarding-menu-slip > span,
body:not([data-experience-page="dizly"]) .onboarding-menu-slip > b {
  color: var(--ref-fff4e9);
}
body:not([data-experience-page="dizly"]) .onboarding-menu-slip > div {
  border-color: var(--ref-ffffff3b);
}
body:not([data-experience-page="dizly"]) .menu-studio-dashboard .editor {
  background: var(--ref-202635);
  border-color: var(--ref-3b4763);
}
body:not([data-experience-page="dizly"]) .menu-editor-toolbar {
  color: var(--ref-eef3ff);
  border-color: var(--ref-3c4862);
}
body:not([data-experience-page="dizly"]) .menu-editor-toolbar > span {
  background: var(--ref-ff982f);
}
body:not([data-experience-page="dizly"]) .menu-editor-toolbar > small {
  color: var(--ref-9eafd1);
}
body:not([data-experience-page="dizly"]) .menu-studio-dashboard .editor-tabs {
  background: var(--ref-191f2e);
  border-color: var(--ref-3b4763);
}
body:not([data-experience-page="dizly"])
  .menu-studio-dashboard
  .editor-tabs
  > button {
  color: var(--ref-a9bbdf);
}
body:not([data-experience-page="dizly"])
  .menu-studio-dashboard
  .editor-tabs
  > .active {
  background: var(--ref-1058ff);
  color: white;
}
body:not([data-experience-page="dizly"]) .menu-studio-dashboard .editor .field {
  color: var(--ref-c1cee7);
}
body:not([data-experience-page="dizly"])
  .menu-studio-dashboard
  .editor
  .field
  input,
body:not([data-experience-page="dizly"])
  .menu-studio-dashboard
  .editor
  .field
  textarea,
body:not([data-experience-page="dizly"])
  .menu-studio-dashboard
  .editor
  .field
  select {
  background: var(--ref-171e2c);
  border-color: var(--ref-44516f);
  color: var(--ref-e7efff);
}
body:not([data-experience-page="dizly"]) .menu-studio-dashboard .upload {
  background: var(--ref-1a2335);
  border-color: var(--ref-4a618c);
  color: var(--ref-b1c4e7);
}
body:not([data-experience-page="dizly"]) .menu-studio-dashboard .upload:after {
  background: var(--ref-1058ff);
  color: white;
}
body:not([data-experience-page="dizly"]) .menu-studio-dashboard .manage-row {
  border-color: var(--ref-3d4b69);
}
body:not([data-experience-page="dizly"]) .preview-caption {
  color: var(--ref-9bb8ff);
}
body:not([data-experience-page="dizly"]) #dialog:has(.dish-detail) {
  background: var(--ref-202637);
}
body:not([data-experience-page="dizly"]) .dish-detail-copy h3 {
  color: var(--ref-f4f7ff);
}
body:not([data-experience-page="dizly"]) .dish-detail-copy p {
  color: var(--ref-c0cbe1);
}
body:not([data-experience-page="dizly"]) .dish-detail-copy > span,
body:not([data-experience-page="dizly"]) .dish-detail-copy b {
  color: var(--ref-ffad63);
}
body:not([data-experience-page="dizly"]) .dish-detail-copy small {
  color: var(--ref-9cadcd);
}
/* POS interior. ID scope overrides the older light interior, not the device. */
body[data-experience-page="pos"] {
  background: var(--ref-17171e);
}
body[data-experience-page="pos"] #main .cashier-ui {
  --cashier-ink: var(--ref-eaf0ff);
  --cashier-accent: var(--ref-1058ff);
  --cashier-muted: var(--ref-a4b4d3);
  --cashier-line: var(--ref-3b4662);
  --cashier-canvas: var(--ref-1a2030);
  background: var(--ref-1a2030);
  color: var(--ref-eaf0ff);
  color-scheme: dark;
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-toolbar,
body[data-experience-page="pos"] #main .cashier-ui .order-panel,
body[data-experience-page="pos"] #main .cashier-ui .terminal-checkout {
  background: var(--ref-202637);
  border-color: var(--ref-3d4865);
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-restaurant > span {
  background: var(--ref-1058ff);
  color: var(--ref-fff);
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-restaurant b,
body[data-experience-page="pos"] #main .cashier-ui .terminal-order-head h2,
body[data-experience-page="pos"] #main .cashier-ui .product h3,
body[data-experience-page="pos"] #main .cashier-ui .cashier-line-copy > b,
body[data-experience-page="pos"] #main .cashier-ui .cashier-catalog-heading h2 {
  color: var(--ref-f3f6ff);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-new,
body[data-experience-page="pos"] #main .cashier-ui .cashier-rail {
  background: var(--ref-1058ff);
  color: white;
  border-color: var(--ref-1058ff);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-rail > button,
body[data-experience-page="pos"] #main .cashier-ui .cashier-rail > a {
  color: var(--ref-c2d4ff);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-rail
  > button.active {
  background: var(--ref-ffffff22);
  color: white;
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-rail-brand {
  color: var(--ref-ffba73);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-rail-brand > span {
  color: var(--ref-b1caff);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-session {
  color: var(--ref-9db4e1);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-session > i {
  background: var(--ref-ff982f);
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-restaurant small,
body[data-experience-page="pos"] #main .cashier-ui .cashier-order-kicker,
body[data-experience-page="pos"] #main .cashier-ui .cashier-item-category,
body[data-experience-page="pos"] #main .cashier-ui .cashier-line-copy > small,
body[data-experience-page="pos"] #main .cashier-ui .cashier-results,
body[data-experience-page="pos"] #main .cashier-ui .cashier-results > small,
body[data-experience-page="pos"] #main .cashier-ui .cashier-price > small,
body[data-experience-page="pos"] #main .cashier-ui .order-note,
body[data-experience-page="pos"] #main .cashier-ui .order-summary > span {
  color: var(--ref-a5b5d4);
}
body[data-experience-page="pos"] #main .cashier-ui .search,
body[data-experience-page="pos"] #main .cashier-ui .order-note textarea {
  background: var(--ref-171e2d);
  border-color: var(--ref-435273);
  color: var(--ref-dce7ff);
}
body[data-experience-page="pos"] #main .cashier-ui .search input {
  color: var(--ref-dce7ff);
}
body[data-experience-page="pos"] #main .cashier-ui .search svg {
  color: var(--ref-9cb3df);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-categories
  > button {
  background: var(--ref-262e42);
  color: var(--ref-afc1e4);
  border-color: var(--ref-445271);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-categories
  > button
  > svg,
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-categories
  > button
  > small {
  color: var(--ref-93addd);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-categories
  > button.active {
  background: var(--ref-1058ff);
  border-color: var(--ref-1058ff);
  color: white;
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-categories
  > button.active
  > svg,
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-categories
  > button.active
  > small {
  color: var(--ref-d9e4ff);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-item.product {
  background: var(--ref-252d41);
  border-color: var(--ref-3f4c6c);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-item.product.is-selected {
  border-color: var(--ref-5c8bff);
  box-shadow: 0 0 0 1px var(--ref-1058ff33);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-price,
body[data-experience-page="pos"] #main .cashier-ui .cashier-line-end > strong,
body[data-experience-page="pos"] #main .cashier-ui .total > b {
  color: var(--ref-ffad62);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-picked {
  background: var(--ref-1058fff0);
  color: white;
}
body[data-experience-page="pos"] #main .cashier-ui .product .add {
  background: var(--ref-354668);
  color: var(--ref-b6cdff);
  border-color: var(--ref-4b6390);
}
body[data-experience-page="pos"] #main .cashier-ui .product.is-selected .add {
  background: var(--ref-1058ff);
  color: white;
  border-color: var(--ref-397aff);
}
body[data-experience-page="pos"] #main .cashier-ui .order-mode {
  background: var(--ref-171e2c);
  border-color: var(--ref-43506d);
}
body[data-experience-page="pos"] #main .cashier-ui .order-mode > button {
  color: var(--ref-9eafd0);
}
body[data-experience-page="pos"] #main .cashier-ui .order-mode > .active {
  background: var(--ref-1058ff);
  color: white;
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-order-count {
  color: var(--ref-ffad62);
  background: var(--ref-ff982f12);
  border-color: var(--ref-ff982f40);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .terminal-order-head
  .field
  input {
  background: var(--ref-1a2335) !important;
  color: var(--ref-d9e5ff) !important;
  border-color: var(--ref-45567b) !important;
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-line.cart-line {
  border-color: var(--ref-3d4862);
}
body[data-experience-page="pos"] #main .cashier-ui .quantity {
  color: var(--ref-b6c8eb);
}
body[data-experience-page="pos"] #main .cashier-ui .quantity button {
  color: var(--ref-c3d8ff);
  background: var(--ref-2a3751);
  border-color: var(--ref-486089);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-line-end > button {
  color: var(--ref-b1a296);
}
body[data-experience-page="pos"] #main .cashier-ui .total {
  border-color: var(--ref-3c4966);
  color: var(--ref-c8d6f0);
}
body[data-experience-page="pos"] #main .cashier-ui .total small {
  color: var(--ref-9daed0);
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-checkout .button {
  background: var(--ref-ff982f);
  color: var(--ref-17171e);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .terminal-checkout
  .button
  > span
  > svg {
  color: var(--ref-40301d);
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-checkout > small {
  color: var(--ref-9caed0);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-empty h3,
body[data-experience-page="pos"] #main .cashier-ui .cashier-no-results h3 {
  color: var(--ref-d0dcf5);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-empty p,
body[data-experience-page="pos"] #main .cashier-ui .cashier-no-results p {
  color: var(--ref-8fa5ce);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-empty > svg {
  color: var(--ref-6784b6);
  border-color: var(--ref-3e5378);
}
body[data-experience-page="pos"] .pos-intro > div > p:last-child {
  color: var(--ref-a2b2d0);
}
body[data-experience-page="pos"] .pos-orientation-hint {
  border-color: var(--ref-3e4c69);
  background: var(--ref-1d2435);
}
body[data-experience-page="pos"] .pos-orientation-hint small {
  color: var(--ref-9caccc);
}
body[data-experience-page="pos"] .pos-afterword,
body[data-experience-page="pos"] .desk-detail p > span {
  color: var(--ref-a4b5d4);
}
body[data-experience-page="pos"] .desk-detail p > small {
  color: var(--ref-7c92ba);
}
body[data-experience-page="pos"] .pos-afterword i {
  background: var(--ref-3d4d6e);
}
/* Keep a real paper appearance inside the new dark receipt dialog. */
body:not([data-experience-page="dizly"]) #dialog:has(.receipt-printer) {
  background: var(--ref-1b2231);
}
body:not([data-experience-page="dizly"]) .receipt-success b {
  color: var(--ref-e8efff);
}
body:not([data-experience-page="dizly"]) .receipt-success p {
  color: var(--ref-9caed0);
}
body:not([data-experience-page="dizly"]) .receipt {
  --navy: var(--ref-102d4f);
  --line: var(--ref-cdd2cb);
  --muted: var(--ref-657487);
  color: var(--ref-263d35);
  color-scheme: light;
}
body:not([data-experience-page="dizly"]) .portfolio-card > h2 {
  color: var(--ref-eff3ff);
}
body:not([data-experience-page="dizly"]) .portfolio-card > p {
  color: var(--ref-a6b7d7);
}
body:not([data-experience-page="dizly"]) .portfolio-card a {
  color: var(--ref-8aafff);
}
@media (max-width: 800px) {
  .experience-home .premium-hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 35px;
    padding-top: 42px;
    padding-bottom: 35px;
  }
  .experience-home .premium-hero h1 {
    font-size: 49px;
    max-width: 620px;
  }
  .experience-home .tech-stage {
    width: min(570px, 100%);
    margin: auto;
    height: 455px;
  }
}
@media (max-width: 540px) {
  .experience-home .premium-hero-grid {
    padding-block: 28px 28px;
    gap: 15px;
  }
  body:not([data-experience-page="dizly"]) .experience-home .premium-hero h1 {
    font-size: 36px;
    line-height: 1.35;
  }
  .experience-home .premium-eyebrow {
    font-size: 9px;
  }
  .experience-home .premium-lead {
    font-size: 12px;
    line-height: 2;
    margin-top: 20px;
  }
  .experience-home .premium-primary {
    margin-top: 23px;
  }
  .experience-home .premium-proof {
    font-size: 9px;
    gap: 13px;
  }
  .experience-home .tech-stage {
    display: block;
    height: 265px;
    margin-top: 20px;
  }
  .tech-halo {
    width: 250px;
    height: 250px;
    top: -5px;
    left: 20px;
  }
  .tech-monitor {
    width: 94%;
    top: 80px;
    left: 0;
    border-radius: 8px;
  }
  .tech-monitor > img {
    border-radius: 8px;
  }
  .tech-phone {
    width: 108px;
    height: 219px;
    border: 5px solid var(--ref-141721);
    border-radius: 18px;
    left: 8px;
    top: 0;
  }
  .tech-phone-speaker {
    width: 32px;
    height: 6px;
    left: calc(50% - 16px);
  }
  .tech-stage-word {
    top: 50px;
    font-size: 38px;
  }
  .tech-demo-label {
    top: 5px;
    right: 5px;
    gap: 9px;
  }
  .tech-demo-label b {
    font-size: 38px;
  }
  .tech-demo-label > span {
    font-size: 8px;
  }
  .tech-monitor > span {
    bottom: -23px;
    font-size: 6px;
  }
  .experience-home .premium-experiences {
    padding-top: 35px;
  }
  .experience-home .premium-section-heading h2 {
    font-size: 31px;
  }
  .experience-home .scene-description {
    font-size: 12px;
  }
  .experience-home .scene-diz .scene-copy {
    padding-top: 25px;
  }
  .experience-home .diz-scene-art {
    border-radius: 90px 14px 14px 14px;
  }
  body:not([data-experience-page="dizly"]) .trial-stamp strong {
    font-size: 65px;
    letter-spacing: -6px;
  }
  body:not([data-experience-page="dizly"]) .trial-copy h2 {
    font-size: 26px;
  }
  body:not([data-experience-page="dizly"]) .service-cta h2 {
    font-size: 27px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-rail {
    display: flex;
    flex-direction: row;
    padding: 7px 12px;
    gap: 8px;
    border: 0;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-rail-brand {
    display: none;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-rail > button {
    min-width: 66px;
    min-height: 44px;
    flex-direction: row;
    width: auto;
    gap: 8px;
    padding: 8px 10px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-rail > a {
    margin: 0;
    margin-inline-start: auto;
  }
  body.pos-wide[data-experience-page="pos"] #main .cashier-ui .cashier-rail {
    flex-direction: column;
    padding: 10px 3px;
  }
  body.pos-wide[data-experience-page="pos"]
    #main
    .cashier-ui
    .cashier-rail
    > button {
    min-width: 42px;
    width: 42px;
    min-height: 55px;
    flex-direction: column;
    padding: 6px;
  }
  body.pos-wide[data-experience-page="pos"]
    #main
    .cashier-ui
    .cashier-rail
    > a {
    margin: 0;
    margin-top: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tech-monitor,
  .tech-phone {
    transition: none;
  }
}
@media print {
  body:not([data-experience-page="dizly"]) .receipt {
    background: white;
    color: var(--ref-111);
  }
}

/* Final legibility and compact toolbar polish. */
body:not([data-experience-page="dizly"]) .portfolio-image > span {
  color: var(--ref-161a25);
  background: var(--ref-ff982f);
}
body:not([data-experience-page="dizly"]) .saved-note {
  color: var(--ref-8fbbff);
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-order-head .field {
  color: var(--ref-b8c9eb);
}
body[data-experience-page="pos"] #main .cashier-ui .order-summary > span b {
  color: var(--ref-b8c9eb);
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-cart-jump {
  background: var(--ref-293b5b);
  color: var(--ref-c5d8ff);
  border: 1px solid var(--ref-47618b);
  white-space: nowrap;
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-new {
  white-space: nowrap;
  flex-shrink: 0;
}
body[data-experience-page="pos"] #main .cashier-ui button:focus-visible,
body[data-experience-page="pos"] #main .cashier-ui a:focus-visible {
  outline-color: var(--ref-ffad62);
}
@media (max-width: 540px) {
  body[data-experience-page="pos"] #main .cashier-ui .terminal-restaurant b i,
  body[data-experience-page="pos"] #main .cashier-ui .cashier-tool-name {
    display: none;
  }
  body[data-experience-page="pos"] #main .cashier-ui .terminal-restaurant b {
    white-space: nowrap;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-new,
  body[data-experience-page="pos"] #main .cashier-ui .terminal-cart-jump {
    font-size: 9px;
    padding-inline: 9px;
  }
}

/* apple-ui.css */
:root {
  --ref-1058ff12: #1058ff12;
  --ref-10182aad: #10182aad;
  --ref-ffffff3b: #ffffff3b;
  --ref-10182a25: #10182a25;
  --ref-ff982f40: #ff982f40;
  --ref-10182af0: #10182af0;
  --ref-1058fff0: #1058fff0;
  --ref-1058ff14: #1058ff14;
  --ref-1058ff40: #1058ff40;
  --ref-1058ff33: #1058ff33;
  --ref-1058ffed: #1058ffed;
  --ref-1058ff45: #1058ff45;
  --ref-22222b50: #22222b50;
  --ref-ffffff04: #ffffff04;
  --ref-1058ffaa: #1058ffaa;
  --ref-1058ff13: #1058ff13;
  --ref-ff982f12: #ff982f12;
  --ref-1058ff25: #1058ff25;
  --ref-1058ff20: #1058ff20;
  --ref-17171ef2: #17171ef2;
  --ref-ffffff22: #ffffff22;
  --ref-1058ff0b: #1058ff0b;
  --ref-ff982f: #ff982f;
  --ref-dde6ff: #dde6ff;
  --ref-1058ff: #1058ff;
  --ref-9daed0: #9daed0;
  --ref-b1bad0: #b1bad0;
  --ref-f4f6ff: #f4f6ff;
  --ref-3b445e: #3b445e;
  --ref-6784b6: #6784b6;
  --ref-d3dcf1: #d3dcf1;
  --ref-b5bfd5: #b5bfd5;
  --ref-9caccc: #9caccc;
  --ref-b3bed5: #b3bed5;
  --ref-b8c9eb: #b8c9eb;
  --ref-a8b5d1: #a8b5d1;
  --ref-2d3855: #2d3855;
  --ref-c8d6f0: #c8d6f0;
  --ref-414a64: #414a64;
  --ref-e3e9ff: #e3e9ff;
  --ref-9daac6: #9daac6;
  --ref-262e42: #262e42;
  --ref-9eafd0: #9eafd0;
  --ref-1b2231: #1b2231;
  --ref-3f4c6c: #3f4c6c;
  --ref-3b435a: #3b435a;
  --ref-d9e4ff: #d9e4ff;
  --ref-f5f6ff: #f5f6ff;
  --ref-eff3ff: #eff3ff;
  --ref-33364a: #33364a;
  --ref-9cb3e7: #9cb3e7;
  --ref-aab7d3: #aab7d3;
  --ref-241d19: #241d19;
  --ref-e7edff: #e7edff;
  --ref-33394e: #33394e;
  --ref-e8eeff: #e8eeff;
  --ref-38435d: #38435d;
  --ref-adc0f3: #adc0f3;
  --ref-4a618c: #4a618c;
  --ref-a9bbdf: #a9bbdf;
  --ref-293b5b: #293b5b;
  --ref-f2f5ff: #f2f5ff;
  --ref-3d4863: #3d4863;
  --ref-3f5278: #3f5278;
  --ref-3d5079: #3d5079;
  --ref-ffab58: #ffab58;
  --ref-17171e: #17171e;
  --ref-404b67: #404b67;
  --ref-8d99b6: #8d99b6;
  --ref-97a7c9: #97a7c9;
  --ref-171e2d: #171e2d;
  --ref-19191f: #19191f;
  --ref-414a63: #414a63;
  --ref-f0f3ff: #f0f3ff;
  --ref-3b435b: #3b435b;
  --ref-9aa9c9: #9aa9c9;
  --ref-e7efff: #e7efff;
  --ref-1d2435: #1d2435;
  --ref-76a0ff: #76a0ff;
  --ref-2a3751: #2a3751;
  --ref-c5d8ff: #c5d8ff;
  --ref-20232f: #20232f;
  --ref-4b6390: #4b6390;
  --ref-e5edff: #e5edff;
  --ref-1a2030: #1a2030;
  --ref-102d4f: #102d4f;
  --ref-ffb66d: #ffb66d;
  --ref-3b4259: #3b4259;
  --ref-b1c4e7: #b1c4e7;
  --ref-7c92ba: #7c92ba;
  --ref-2c3447: #2c3447;
  --ref-c0cee8: #c0cee8;
  --ref-a2b2d0: #a2b2d0;
  --ref-afc1e4: #afc1e4;
  --ref-a4b5d4: #a4b5d4;
  --ref-9cb3df: #9cb3df;
  --ref-333c54: #333c54;
  --ref-8aafff: #8aafff;
  --ref-141721: #141721;
  --ref-3d4d6e: #3d4d6e;
  --ref-d5def6: #d5def6;
  --ref-ffb16b: #ffb16b;
  --ref-1a2335: #1a2335;
  --ref-d9e5ff: #d9e5ff;
  --ref-3a4257: #3a4257;
  --ref-2a344a: #2a344a;
  --ref-ffae65: #ffae65;
  --ref-ffab59: #ffab59;
  --ref-9bb8ff: #9bb8ff;
  --ref-c2d4ff: #c2d4ff;
  --ref-3d4862: #3d4862;
  --ref-47618b: #47618b;
  --ref-c0cbe1: #c0cbe1;
  --ref-ffb468: #ffb468;
  --ref-f3f6ff: #f3f6ff;
  --ref-2c6dff: #2c6dff;
  --ref-eef3ff: #eef3ff;
  --ref-263d35: #263d35;
  --ref-191f2e: #191f2e;
  --ref-191d29: #191d29;
  --ref-373f57: #373f57;
  --ref-8fa5ce: #8fa5ce;
  --ref-242938: #242938;
  --ref-1c2235: #1c2235;
  --ref-cdd2cb: #cdd2cb;
  --ref-c7d5ff: #c7d5ff;
  --ref-aebde1: #aebde1;
  --ref-748ab7: #748ab7;
  --ref-202635: #202635;
  --ref-b6cdff: #b6cdff;
  --ref-c3d8ff: #c3d8ff;
  --ref-d2ddff: #d2ddff;
  --ref-ffad63: #ffad63;
  --ref-373d52: #373d52;
  --ref-3b4662: #3b4662;
  --ref-fff4e9: #fff4e9;
  --ref-9ba9c7: #9ba9c7;
  --ref-13141c: #13141c;
  --ref-aab6d0: #aab6d0;
  --ref-93a3c3: #93a3c3;
  --ref-46301e: #46301e;
  --ref-d0deff: #d0deff;
  --ref-eaf0ff: #eaf0ff;
  --ref-8d98b3: #8d98b3;
  --ref-f3f5ff: #f3f5ff;
  --ref-6b80b1: #6b80b1;
  --ref-ffad5d: #ffad5d;
  --ref-10131f: #10131f;
  --ref-f4f7ff: #f4f7ff;
  --ref-21232e: #21232e;
  --ref-626d86: #626d86;
  --ref-b6c8eb: #b6c8eb;
  --ref-242a3a: #242a3a;
  --ref-3c435a: #3c435a;
  --ref-d0dcf5: #d0dcf5;
  --ref-aab3ca: #aab3ca;
  --ref-f1f4ff: #f1f4ff;
  --ref-3e4c69: #3e4c69;
  --ref-a4b4d3: #a4b4d3;
  --ref-f4f5ff: #f4f5ff;
  --ref-3d4865: #3d4865;
  --ref-b0bed8: #b0bed8;
  --ref-b7c8f6: #b7c8f6;
  --ref-3c4862: #3c4862;
  --ref-35466c: #35466c;
  --ref-b1caff: #b1caff;
  --ref-12131b: #12131b;
  --ref-c1cee7: #c1cee7;
  --ref-161a25: #161a25;
  --ref-181d2a: #181d2a;
  --ref-eef2ff: #eef2ff;
  --ref-34394a: #34394a;
  --ref-3b3e50: #3b3e50;
  --ref-889dc9: #889dc9;
  --ref-445271: #445271;
  --ref-222b42: #222b42;
  --ref-9caccb: #9caccb;
  --ref-a0aecb: #a0aecb;
  --ref-8fbbff: #8fbbff;
  --ref-3e465c: #3e465c;
  --ref-43506d: #43506d;
  --ref-34394c: #34394c;
  --ref-f6f7ff: #f6f7ff;
  --ref-a6b7d7: #a6b7d7;
  --ref-3c4966: #3c4966;
  --ref-242737: #242737;
  --ref-a7afc4: #a7afc4;
  --ref-212636: #212636;
  --ref-435273: #435273;
  --ref-d1ddff: #d1ddff;
  --ref-202431: #202431;
  --ref-5488ff: #5488ff;
  --ref-44516f: #44516f;
  --ref-eef1ff: #eef1ff;
  --ref-3e5378: #3e5378;
  --ref-ffb262: #ffb262;
  --ref-397aff: #397aff;
  --ref-aeb8d0: #aeb8d0;
  --ref-ffac5d: #ffac5d;
  --ref-b1a296: #b1a296;
  --ref-171e2c: #171e2c;
  --ref-212737: #212737;
  --ref-657487: #657487;
  --ref-333f5a: #333f5a;
  --ref-394159: #394159;
  --ref-e8efff: #e8efff;
  --ref-ffbd78: #ffbd78;
  --ref-211b16: #211b16;
  --ref-343d56: #343d56;
  --ref-9cadcd: #9cadcd;
  --ref-66738e: #66738e;
  --ref-5485ff: #5485ff;
  --ref-a5b5d4: #a5b5d4;
  --ref-354668: #354668;
  --ref-202637: #202637;
  --ref-40301d: #40301d;
  --ref-ffba73: #ffba73;
  --ref-5c8bff: #5c8bff;
  --ref-3d4b69: #3d4b69;
  --ref-ffae63: #ffae63;
  --ref-1e222e: #1e222e;
  --ref-9caed0: #9caed0;
  --ref-a7b5d0: #a7b5d0;
  --ref-45567b: #45567b;
  --ref-dce7ff: #dce7ff;
  --ref-e7a471: #e7a471;
  --ref-7f8da6: #7f8da6;
  --ref-3b4763: #3b4763;
  --ref-2c3245: #2c3245;
  --ref-e0e7ff: #e0e7ff;
  --ref-9db4e1: #9db4e1;
  --ref-b8c6e2: #b8c6e2;
  --ref-ffad59: #ffad59;
  --ref-252d41: #252d41;
  --ref-303a57: #303a57;
  --ref-ffad62: #ffad62;
  --ref-486089: #486089;
  --ref-343748: #343748;
  --ref-ffb269: #ffb269;
  --ref-93addd: #93addd;
  --ref-9eafd1: #9eafd1;
  --ref-f8f9ff: #f8f9ff;
  --ref-171d2c: #171d2c;
  --ref-252a3a: #252a3a;
  --ref-abc0ff: #abc0ff;
  --ref-0008: #0008;
  --ref-0003: #0003;
  --ref-0001: #0001;
  --ref-0002: #0002;
  --ref-0007: #0007;
  --ref-111: #111;
  --ref-fff: #fff;
}
:root[data-color-mode="light"] {
  --ref-10182aad: #ffffffad;
  --ref-ffffff3b: #1d24313b;
  --ref-10182a25: #ffffff25;
  --ref-10182af0: #fffffff0;
  --ref-22222b50: #ffffff50;
  --ref-ffffff04: #1d243104;
  --ref-17171ef2: #f5f5f7f2;
  --ref-ffffff22: #1d243122;
  --ref-dde6ff: #1d2431;
  --ref-9daed0: #566176;
  --ref-b1bad0: #566176;
  --ref-f4f6ff: #1d2431;
  --ref-3b445e: #d9dde5;
  --ref-6784b6: #566176;
  --ref-d3dcf1: #1d2431;
  --ref-b5bfd5: #566176;
  --ref-9caccc: #566176;
  --ref-b3bed5: #566176;
  --ref-b8c9eb: #566176;
  --ref-a8b5d1: #566176;
  --ref-2d3855: #d9dde5;
  --ref-c8d6f0: #566176;
  --ref-414a64: #d9dde5;
  --ref-e3e9ff: #1d2431;
  --ref-9daac6: #566176;
  --ref-262e42: #d9dde5;
  --ref-9eafd0: #566176;
  --ref-1b2231: #ffffff;
  --ref-3f4c6c: #d9dde5;
  --ref-3b435a: #d9dde5;
  --ref-d9e4ff: #1d2431;
  --ref-f5f6ff: #1d2431;
  --ref-eff3ff: #1d2431;
  --ref-33364a: #d9dde5;
  --ref-9cb3e7: #566176;
  --ref-aab7d3: #566176;
  --ref-241d19: #ffffff;
  --ref-e7edff: #1d2431;
  --ref-33394e: #d9dde5;
  --ref-e8eeff: #1d2431;
  --ref-38435d: #d9dde5;
  --ref-adc0f3: #566176;
  --ref-4a618c: #566176;
  --ref-a9bbdf: #566176;
  --ref-293b5b: #d9dde5;
  --ref-f2f5ff: #1d2431;
  --ref-3d4863: #d9dde5;
  --ref-3f5278: #566176;
  --ref-3d5079: #566176;
  --ref-17171e: #f5f5f7;
  --ref-404b67: #d9dde5;
  --ref-8d99b6: #566176;
  --ref-97a7c9: #566176;
  --ref-171e2d: #ffffff;
  --ref-19191f: #f5f5f7;
  --ref-414a63: #d9dde5;
  --ref-f0f3ff: #1d2431;
  --ref-3b435b: #d9dde5;
  --ref-9aa9c9: #566176;
  --ref-e7efff: #1d2431;
  --ref-1d2435: #ffffff;
  --ref-2a3751: #d9dde5;
  --ref-c5d8ff: #566176;
  --ref-20232f: #ffffff;
  --ref-4b6390: #566176;
  --ref-e5edff: #1d2431;
  --ref-1a2030: #ffffff;
  --ref-102d4f: #d9dde5;
  --ref-3b4259: #d9dde5;
  --ref-b1c4e7: #566176;
  --ref-7c92ba: #566176;
  --ref-2c3447: #d9dde5;
  --ref-c0cee8: #566176;
  --ref-a2b2d0: #566176;
  --ref-afc1e4: #566176;
  --ref-a4b5d4: #566176;
  --ref-9cb3df: #566176;
  --ref-333c54: #d9dde5;
  --ref-8aafff: #566176;
  --ref-141721: #f5f5f7;
  --ref-3d4d6e: #d9dde5;
  --ref-d5def6: #1d2431;
  --ref-1a2335: #ffffff;
  --ref-d9e5ff: #1d2431;
  --ref-3a4257: #d9dde5;
  --ref-2a344a: #d9dde5;
  --ref-9bb8ff: #566176;
  --ref-c2d4ff: #566176;
  --ref-3d4862: #d9dde5;
  --ref-47618b: #566176;
  --ref-c0cbe1: #566176;
  --ref-f3f6ff: #1d2431;
  --ref-eef3ff: #1d2431;
  --ref-263d35: #d9dde5;
  --ref-191f2e: #ffffff;
  --ref-191d29: #ffffff;
  --ref-373f57: #d9dde5;
  --ref-8fa5ce: #566176;
  --ref-242938: #d9dde5;
  --ref-1c2235: #ffffff;
  --ref-cdd2cb: #566176;
  --ref-c7d5ff: #566176;
  --ref-aebde1: #566176;
  --ref-748ab7: #566176;
  --ref-202635: #ffffff;
  --ref-b6cdff: #566176;
  --ref-c3d8ff: #566176;
  --ref-d2ddff: #566176;
  --ref-373d52: #d9dde5;
  --ref-3b4662: #d9dde5;
  --ref-fff4e9: #1d2431;
  --ref-9ba9c7: #566176;
  --ref-13141c: #f5f5f7;
  --ref-aab6d0: #566176;
  --ref-93a3c3: #566176;
  --ref-46301e: #d9dde5;
  --ref-d0deff: #566176;
  --ref-eaf0ff: #1d2431;
  --ref-8d98b3: #566176;
  --ref-f3f5ff: #1d2431;
  --ref-6b80b1: #566176;
  --ref-10131f: #f5f5f7;
  --ref-f4f7ff: #1d2431;
  --ref-21232e: #ffffff;
  --ref-626d86: #566176;
  --ref-b6c8eb: #566176;
  --ref-242a3a: #d9dde5;
  --ref-3c435a: #d9dde5;
  --ref-d0dcf5: #566176;
  --ref-aab3ca: #566176;
  --ref-f1f4ff: #1d2431;
  --ref-3e4c69: #d9dde5;
  --ref-a4b4d3: #566176;
  --ref-f4f5ff: #1d2431;
  --ref-3d4865: #d9dde5;
  --ref-b0bed8: #566176;
  --ref-b7c8f6: #566176;
  --ref-3c4862: #d9dde5;
  --ref-35466c: #d9dde5;
  --ref-b1caff: #566176;
  --ref-12131b: #f5f5f7;
  --ref-c1cee7: #566176;
  --ref-161a25: #ffffff;
  --ref-181d2a: #ffffff;
  --ref-eef2ff: #1d2431;
  --ref-34394a: #d9dde5;
  --ref-3b3e50: #d9dde5;
  --ref-889dc9: #566176;
  --ref-445271: #d9dde5;
  --ref-222b42: #d9dde5;
  --ref-9caccb: #566176;
  --ref-a0aecb: #566176;
  --ref-8fbbff: #566176;
  --ref-3e465c: #d9dde5;
  --ref-43506d: #d9dde5;
  --ref-34394c: #d9dde5;
  --ref-f6f7ff: #1d2431;
  --ref-a6b7d7: #566176;
  --ref-3c4966: #d9dde5;
  --ref-242737: #d9dde5;
  --ref-a7afc4: #566176;
  --ref-212636: #ffffff;
  --ref-435273: #d9dde5;
  --ref-d1ddff: #566176;
  --ref-202431: #ffffff;
  --ref-44516f: #d9dde5;
  --ref-eef1ff: #1d2431;
  --ref-3e5378: #566176;
  --ref-aeb8d0: #566176;
  --ref-b1a296: #566176;
  --ref-171e2c: #ffffff;
  --ref-212737: #d9dde5;
  --ref-657487: #566176;
  --ref-333f5a: #d9dde5;
  --ref-394159: #d9dde5;
  --ref-e8efff: #1d2431;
  --ref-211b16: #f5f5f7;
  --ref-343d56: #d9dde5;
  --ref-9cadcd: #566176;
  --ref-66738e: #566176;
  --ref-a5b5d4: #566176;
  --ref-354668: #d9dde5;
  --ref-202637: #d9dde5;
  --ref-40301d: #d9dde5;
  --ref-3d4b69: #d9dde5;
  --ref-1e222e: #ffffff;
  --ref-9caed0: #566176;
  --ref-a7b5d0: #566176;
  --ref-45567b: #566176;
  --ref-dce7ff: #1d2431;
  --ref-7f8da6: #566176;
  --ref-3b4763: #d9dde5;
  --ref-2c3245: #d9dde5;
  --ref-e0e7ff: #1d2431;
  --ref-9db4e1: #566176;
  --ref-b8c6e2: #566176;
  --ref-252d41: #d9dde5;
  --ref-303a57: #d9dde5;
  --ref-486089: #566176;
  --ref-343748: #d9dde5;
  --ref-93addd: #566176;
  --ref-9eafd1: #566176;
  --ref-f8f9ff: #1d2431;
  --ref-171d2c: #ffffff;
  --ref-252a3a: #d9dde5;
  --ref-abc0ff: #566176;
  --ref-fff: #1d2431;
}

:root {
  --ui-bg: #17171e;
  --ui-panel: #22242c;
  --ui-raised: #2c2f39;
  --ui-text: #f5f5f7;
  --ui-muted: #b0b6c5;
  --ui-line: #ffffff1c;
  --ui-blue: #377dff;
  --ui-accent: #ffa653;
  --ui-tint: #377dff20;
  --ui-shadow: 0 18px 60px #0004;
}
:root[data-color-mode="light"] {
  --ui-bg: #f5f5f7;
  --ui-panel: #fff;
  --ui-raised: #eceef3;
  --ui-text: #1d2431;
  --ui-muted: #596477;
  --ui-line: #18263c1c;
  --ui-blue: #1769cf;
  --ui-accent: #a65312;
  --ui-tint: #1769cf12;
  --ui-shadow: 0 18px 60px #18263c12;
}
body:not([data-experience-page="dizly"]),
body:not([data-experience-page="dizly"]) * {
  font-family: "Alkamra Display", system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-synthesis: none;
}
body:not([data-experience-page="dizly"]) {
  background: var(--ui-bg);
  color: var(--ui-text);
  color-scheme: dark;
  --navy: var(--ui-text);
  --bg: var(--ui-bg);
  --soft: var(--ui-raised);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
}
:root[data-color-mode="light"] body:not([data-experience-page="dizly"]) {
  color-scheme: light;
}
body:not([data-experience-page="dizly"]) :is(h1, h2, h3) {
  text-wrap: balance;
  letter-spacing: 0;
}
body:not([data-experience-page="dizly"]) :is(p, button, a) {
  overflow-wrap: break-word;
}
body:not([data-experience-page="dizly"])
  :is(b, strong, .quantity, .receipt, .cashier-product-price, .dish-bottom) {
  font-variant-numeric: tabular-nums;
}
body:not([data-experience-page="dizly"]) :is(button, .button, .scene-action) {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
body:not([data-experience-page="dizly"]) :is(button, a):focus-visible {
  outline: 3px solid var(--ui-blue);
  outline-offset: 4px;
}
body:not([data-experience-page="dizly"]) :is(.button, .scene-action) {
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 22px;
  font-size: 13px;
  line-height: 1.6;
  border: 0;
  box-shadow: none;
  gap: 10px;
}
body:not([data-experience-page="dizly"]) .button {
  background: var(--ui-blue);
  color: white;
}
body:not([data-experience-page="dizly"]) .button.ghost {
  background: var(--ui-raised);
  color: var(--ui-text);
  border: 0;
}
body:not([data-experience-page="dizly"]) .button.small {
  min-height: 44px;
  font-size: 11px;
  padding: 10px 17px;
}
body:not([data-experience-page="dizly"])
  :is(.button, .icon-button, .add, .quantity button):active {
  transform: scale(0.96);
}
body:not([data-experience-page="dizly"])
  :is(.icon-button, .add, .quantity button) {
  border-radius: 50%;
  min-width: 44px;
  min-height: 44px;
}
body:not([data-experience-page="dizly"]) .topbar {
  background: color-mix(in srgb, var(--ui-bg) 90%, transparent);
  backdrop-filter: blur(18px);
  border-color: var(--ui-line);
  padding-top: max(12px, env(safe-area-inset-top));
  gap: 20px;
}
body:not([data-experience-page="dizly"]) .topbar nav {
  gap: 4px;
}
body:not([data-experience-page="dizly"]) .topbar nav a {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ui-muted);
}
body:not([data-experience-page="dizly"]) .topbar nav a.active {
  color: var(--ui-text);
  background: var(--ui-raised);
}
body:not([data-experience-page="dizly"]) .topbar nav a.active:after {
  display: none;
}
.platform-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.platform-tools svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.appearance-switch {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--ui-raised);
}
.appearance-switch button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ui-muted);
  border-radius: 50%;
  position: relative;
}
.appearance-switch button:before {
  content: "";
  position: absolute;
  inset: -3px;
}
.appearance-switch [aria-pressed="true"] {
  background: var(--ui-panel);
  color: var(--ui-text);
  box-shadow: 0 2px 6px #0001;
}
.platform-command.icon-button {
  display: grid;
  place-items: center;
  background: var(--ui-raised);
  color: var(--ui-text);
  width: 44px;
  height: 44px;
  padding: 0;
}
body[data-experience-page="dizly"] .platform-tools,
body[data-experience-page="dizly"] .platform-back {
  display: none;
}
body:not([data-experience-page="dizly"]) .experience-home .premium-hero h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.45;
}
body:not([data-experience-page="dizly"]) .experience-home .premium-primary {
  border-radius: 999px;
  background: var(--ui-blue);
  color: white;
  min-height: 52px;
  font-size: 14px;
}
.experience-home .premium-hero h1 em {
  color: var(--ui-accent);
}
.experience-home .scene-action {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  background: var(--ui-raised);
  color: var(--ui-text);
  border: 0;
}
.experience-home .scene-action > span {
  background: none !important;
  color: var(--ui-blue) !important;
  width: 22px;
  height: 22px;
  padding: 0;
}
body:not([data-experience-page="dizly"])
  .experience-home
  .gallery-scenes
  :is(
    .experience-card.scene-pos,
    .scene-menu .experience-tile,
    .scene-web .experience-tile
  ) {
  border: 0;
  border-radius: 28px;
  background: var(--ui-panel);
  box-shadow: none;
}
.experience-home .diz-scene-art {
  border: 0;
  border-radius: 28px;
}
.experience-home .table-label {
  border-radius: 18px;
  color: #211b16;
}
.experience-home .table-label :is(b, small) {
  color: #211b16;
}
body:not([data-experience-page="dizly"])
  :is(.trial-copy h2, .trial-stamp strong) {
  color: #17171e;
}
body:not([data-experience-page="dizly"]) .trial-copy .trial-action {
  background: #17171e;
  color: white;
  border-radius: 999px;
}
body:not([data-experience-page="dizly"])
  :is(.trial-copy > p, .trial-copy > small, .trial-edge) {
  color: #46301e;
}
body:not([data-experience-page="dizly"]) .service-cta {
  border-radius: 28px;
  border: 0;
}
body:not([data-experience-page="dizly"]) .service-cta :is(h2, p) {
  color: white;
}
body:not([data-experience-page="dizly"]) .service-cta > .button {
  background: white;
  color: #1769cf;
}
body:not([data-experience-page="dizly"])
  :is(
    .card,
    #dialog,
    .menu-studio-dashboard .editor,
    .restaurant.restaurant-menu
  ) {
  border-radius: 24px;
  border-color: var(--ui-line);
  background: var(--ui-panel);
}
body:not([data-experience-page="dizly"]) #dialog {
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
body:not([data-experience-page="dizly"]) #dialog::backdrop {
  background: #080b1480;
  backdrop-filter: blur(7px);
}
body:not([data-experience-page="dizly"]) .field :is(input, textarea, select) {
  border: 1px solid var(--ui-line);
  background: var(--ui-bg);
  border-radius: 14px;
  font-size: 14px;
}
body:not([data-experience-page="dizly"]) .field input:not([type="file"]),
body:not([data-experience-page="dizly"]) .field select {
  min-height: 48px;
}
body:not([data-experience-page="dizly"]) .search {
  border-radius: 999px;
  min-height: 48px;
}
body:not([data-experience-page="dizly"]) .search input {
  font-size: 14px;
}
body:not([data-experience-page="dizly"]) :is(.tabs, .editor-tabs) {
  gap: 4px;
}
body:not([data-experience-page="dizly"]) :is(.tabs, .editor-tabs) > button {
  border-radius: 999px;
  min-height: 44px;
}
body:not([data-experience-page="dizly"])
  .restaurant-menu
  .menu-categories
  .menu-category {
  border-radius: 18px;
  border: 0;
  background: var(--ui-raised);
}
body:not([data-experience-page="dizly"])
  .restaurant-menu
  .menu-categories
  .menu-category.active {
  background: var(--ui-blue);
  color: white;
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-card.product {
  border: 0;
  border-radius: 20px;
  background: var(--ui-bg);
  box-shadow: none;
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-bottom .add {
  background: var(--ui-blue);
  border-radius: 50%;
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-copy h3 {
  font-size: 17px;
}
body:not([data-experience-page="dizly"]) .restaurant-menu .dish-copy p {
  font-size: 12px;
  line-height: 1.9;
}
body:not([data-experience-page="dizly"]) .dining-cover:after {
  background: linear-gradient(270deg, #10182af0, #10182aad 50%, #10182a25);
}
body:not([data-experience-page="dizly"]) .dining-identity :is(h1, p),
body:not([data-experience-page="dizly"]) .dining-wordmark {
  color: white;
}
body:not([data-experience-page="dizly"]) .dining-monogram {
  color: #17171e;
}
body:not([data-experience-page="dizly"]) .dining-cart.menu-cart {
  border-radius: 999px;
  bottom: calc(16px + env(safe-area-inset-bottom));
}
body:not([data-experience-page="dizly"]) .is-preview .dining-cart.menu-cart {
  bottom: 8px;
}
body[data-experience-page="pos"] #main .cashier-ui {
  color-scheme: inherit;
  --cashier-ink: var(--ui-text);
  --cashier-muted: var(--ui-muted);
  --cashier-line: var(--ui-line);
  --cashier-canvas: var(--ui-bg);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  :is(.cashier-catalog-body, .terminal-catalog-body) {
  background: var(--ui-bg);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  :is(.cashier-toolbar, .order-panel, .terminal-checkout) {
  background: var(--ui-panel);
  border-color: var(--ui-line);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-categories
  > button {
  border-radius: 999px;
  min-height: 44px;
}
body[data-experience-page="pos"] #main .cashier-ui .product {
  border: 0;
  border-radius: 18px;
  background: var(--ui-panel);
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-line {
  border-color: var(--ui-line);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-line
  .quantity
  button {
  min-width: 36px;
  min-height: 44px;
  border-radius: 50%;
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-new {
  border-radius: 999px;
  min-height: 44px;
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-checkout .button {
  border-radius: 999px;
  background: var(--ui-blue);
  color: white;
}
body:not([data-experience-page="dizly"]) .thermal-paper.receipt,
body:not([data-experience-page="dizly"]) .thermal-paper.receipt * {
  color: #171717;
}
body:not([data-experience-page="dizly"]) .thermal-paper.receipt {
  background: white;
}
@supports (corner-shape: squircle) {
  body:not([data-experience-page="dizly"])
    :is(.card, #dialog, .dish-card, .cashier-ui .product) {
    corner-shape: squircle;
  }
}
@media (max-width: 900px) {
  body:not([data-experience-page="dizly"]) .topbar {
    gap: 12px;
    flex-wrap: wrap;
  }
  body:not([data-experience-page="dizly"]) .topbar nav {
    order: 5;
    width: 100%;
    flex-basis: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 540px) {
  body:not([data-experience-page="dizly"]) .topbar {
    padding-inline: 16px;
    gap: 8px;
  }
  body:not([data-experience-page="dizly"]) .brand {
    min-width: 0;
    flex: none;
  }
  body:not([data-experience-page="dizly"]) .brand img {
    width: 80px;
    height: auto;
  }
  body:not([data-experience-page="dizly"]) .brand span {
    display: none;
  }
  body:not([data-experience-page="dizly"]) .topbar > .button {
    padding: 10px 12px;
    font-size: 10px;
    min-height: 44px;
  }
  body:not([data-experience-page="dizly"]) .topbar nav a {
    padding: 9px 10px;
    font-size: 10px;
    flex: 1;
  }
  .platform-tools {
    gap: 5px;
  }
  .appearance-switch button {
    width: 34px;
    height: 38px;
  }
  body:not([data-experience-page="dizly"]) .experience-home .premium-hero h1 {
    font-size: 35px;
    line-height: 1.45;
  }
  body:not([data-experience-page="dizly"])
    .experience-home
    .premium-section-heading
    h2 {
    font-size: 29px;
  }
  body:not([data-experience-page="dizly"])
    :is(.scene-description, .premium-lead) {
    font-size: 13px;
  }
  body:not([data-experience-page="dizly"]) .restaurant-menu .dish-copy h3 {
    font-size: 16px;
  }
  body:not([data-experience-page="dizly"]) .restaurant-menu .dish-copy p {
    font-size: 11px;
  }
  body:not([data-experience-page="dizly"]) .footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}
@media (hover: hover) {
  body:not([data-experience-page="dizly"]) .button:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 16px #0001;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-experience-page="dizly"]) *,
  body:not([data-experience-page="dizly"]) *:before,
  body:not([data-experience-page="dizly"]) *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  body:not([data-experience-page="dizly"]) .thermal-paper.receipt,
  body:not([data-experience-page="dizly"]) .thermal-paper.receipt * {
    color: #111 !important;
    background: white !important;
  }
  .platform-tools,
  .platform-back {
    display: none !important;
  }
}

[hidden] {
  display: none !important;
}
body:not([data-experience-page="dizly"]) .blurhash-media {
  background-size: cover;
  background-position: center;
}
body:not([data-experience-page="dizly"]) #toast {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: calc(100vw - 32px);
  background: var(--ui-panel);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  box-shadow: var(--ui-shadow);
  bottom: calc(24px + env(safe-area-inset-bottom));
  font-size: 12px;
  padding: 13px 18px;
}
body:not([data-experience-page="dizly"]) #toast button {
  color: var(--ui-blue);
  min-width: 52px;
  min-height: 44px;
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--ui-tint);
  white-space: nowrap;
}
body:not([data-experience-page="dizly"]) #toast.show:has(button) {
  pointer-events: auto;
}
.sheet-handle {
  display: none;
}
.platform-back-lane {
  padding-block: 10px 0;
}
.platform-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-muted);
  min-height: 44px;
  font-size: 11px;
  padding: 8px 4px;
}
.back-preview {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  background: var(--ui-panel);
  box-shadow: var(--ui-shadow);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  padding: 17px;
  width: 260px;
  text-align: start;
  z-index: 45;
  pointer-events: none;
}
.back-preview :is(small, b, span) {
  display: block;
  line-height: 1.8;
}
.back-preview small {
  color: var(--ui-muted);
  font-size: 10px;
}
.back-preview b {
  font-size: 14px;
  color: var(--ui-text);
  margin-block: 5px;
}
.back-preview > span {
  font-size: 10px;
  color: var(--ui-muted);
}
body:not([data-experience-page="dizly"]) #dialog.command-dialog {
  width: min(650px, calc(100vw - 28px));
  padding: 25px;
  overflow: hidden;
}
.command-dialog .dialog-head h2 {
  font-size: 22px;
}
.command-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  padding: 8px 14px;
  margin: 20px 0;
}
.command-search > span {
  font-size: 25px;
  color: var(--ui-muted);
}
.command-search input {
  flex: 1;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  min-height: 42px;
  outline-offset: 5px;
  font-size: 14px;
}
kbd {
  display: inline-block;
  border: 1px solid var(--ui-line);
  border-radius: 5px;
  padding: 2px 5px;
  font-size: 10px;
  color: var(--ui-muted);
  white-space: nowrap;
}
.command-browser {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  min-height: 245px;
  gap: 18px;
}
.command-groups {
  border-inline-end: 1px solid var(--ui-line);
  padding-inline-end: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.command-groups > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  text-align: start;
  min-height: 49px;
  border-radius: 13px;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--ui-muted);
}
.command-groups > button[aria-pressed="true"] {
  color: var(--ui-blue);
  background: var(--ui-tint);
}
.command-panel {
  padding: 16px 4px;
}
.command-kicker {
  font-size: 8px;
  color: var(--ui-accent);
  letter-spacing: 1.5px;
}
.command-panel h3 {
  font-size: 22px;
  margin-top: 14px;
}
.command-panel p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--ui-muted);
  margin: 10px 0 18px;
}
.command-panel > a,
.command-results > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 47px;
  gap: 15px;
  color: var(--ui-blue);
  background: var(--ui-tint);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 12px;
  margin-top: 8px;
}
.command-results {
  max-height: 330px;
  overflow: auto;
}
.command-results small {
  display: block;
  font-size: 10px;
  color: var(--ui-muted);
  margin-top: 5px;
}
.command-empty {
  padding: 35px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--ui-muted);
}
.command-hints {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid var(--ui-line);
  padding-top: 17px;
  margin-top: 20px;
  font-size: 9px;
  color: var(--ui-muted);
}
.skeleton-heading {
  display: block;
  max-width: 390px;
  height: 40px;
  margin-bottom: 35px;
  border-radius: 15px;
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}
.skeleton-tile > .skeleton {
  display: block;
  height: 190px;
  border-radius: 20px;
}
.skeleton-tile > i.skeleton {
  height: 17px;
  margin-top: 14px;
  width: 75%;
}
.skeleton-tile > i:last-child {
  width: 50%;
}
body:not([data-experience-page="dizly"]) .skeleton {
  background: linear-gradient(
    100deg,
    var(--ui-raised),
    var(--ui-panel),
    var(--ui-raised)
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
  to {
    background-position: -200% 0;
  }
}
::view-transition-old(root) {
  animation: route-out 120ms ease both;
}
::view-transition-new(root) {
  animation: route-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
::view-transition-group(root) {
  pointer-events: none;
}
@keyframes route-out {
  to {
    opacity: 0;
  }
}
@keyframes route-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  body:not([data-experience-page="dizly"]) #dialog:not(.receipt-dialog) {
    position: fixed;
    margin: auto auto 0;
    inset: auto 0 0;
    max-height: 90dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 27px 27px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: translate 180ms ease;
  }
  body:not([data-experience-page="dizly"]) #dialog.command-dialog {
    padding: 20px;
  }
  .sheet-handle {
    display: grid;
    place-items: center;
    height: 30px;
    margin: -10px 0 8px;
    touch-action: none;
    cursor: grab;
  }
  .sheet-handle > span {
    width: 36px;
    height: 5px;
    border-radius: 5px;
    background: var(--ui-muted);
    opacity: 0.5;
  }
  body:not([data-experience-page="dizly"]) #dialog.sheet-dragging {
    transition: none;
  }
  body:not([data-experience-page="dizly"])
    #dialog:has(.dish-detail)
    .sheet-handle {
    position: absolute;
    top: 20px;
    left: calc(50% - 40px);
    width: 80px;
    z-index: 5;
  }
  .command-browser {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .command-groups {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    border: 0;
    padding: 0;
    gap: 6px;
  }
  .command-groups > button {
    width: auto;
    min-width: 100px;
    font-size: 11px;
  }
  .command-panel {
    padding: 10px 0;
  }
  .command-hints {
    font-size: 8px;
  }
  .command-search input {
    font-size: 13px;
  }
  .command-search kbd {
    display: none;
  }
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
  .platform-back-lane {
    padding-top: 0;
  }
  body[data-experience-page="menu"] #toast {
    bottom: calc(105px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root) {
    animation: none !important;
  }
  .skeleton {
    animation: none !important;
  }
}
@media print {
  .platform-back-lane {
    display: none !important;
  }
}

/* Quiet optical depth: a lit edge, a restrained gradient and natural press feedback. */
body:not([data-experience-page="dizly"]) {
  --button-top: #5593ff;
  --button-base: #2465df;
  --button-rim: #a6caff66;
}
:root[data-color-mode="light"] body:not([data-experience-page="dizly"]) {
  --button-top: #3885ed;
  --button-base: #155cc9;
  --button-rim: #9dcdff77;
}
body:not([data-experience-page="dizly"]) .button:not(.ghost),
body:not([data-experience-page="dizly"]) .experience-home .premium-primary {
  background: linear-gradient(180deg, var(--button-top), var(--button-base));
  color: white;
  border: 1px solid var(--button-rim);
  box-shadow:
    inset 0 1px 0 #ffffff22,
    0 3px 9px #08296616;
  border-radius: 999px;
}
body:not([data-experience-page="dizly"]) .button.ghost {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ui-raised) 82%, white 5%),
    var(--ui-raised)
  );
  border: 1px solid var(--ui-line);
  box-shadow: inset 0 1px 0 #ffffff08;
}
body:not([data-experience-page="dizly"]) .button:not(:disabled):active {
  transform: scale(0.965);
  filter: brightness(0.96);
  box-shadow: inset 0 1px 4px #0002;
}
body:not([data-experience-page="dizly"]) .button.small {
  font-size: 11px;
}
body:not([data-experience-page="dizly"]) .service-cta > .button {
  background: linear-gradient(180deg, #fff, #eaf0ff);
  color: #195fca;
  border-color: #ffffffaa;
}
body:not([data-experience-page="dizly"]) .trial-copy .trial-action {
  background: linear-gradient(180deg, #33363c, #181a20);
  border-color: #ffffff2b;
  color: white;
}
body[data-experience-page="menu"] .menu-gallery {
  --menu-button-top: color-mix(in srgb, var(--menu-accent) 80%, #fff 20%);
  --menu-button-base: color-mix(in srgb, var(--menu-accent) 92%, #3e240a 8%);
}
body[data-experience-page="menu"]
  .menu-gallery
  :is(.dish-bottom .add, .menu-explore, .menu-bottom-nav > button.active) {
  background: linear-gradient(
    180deg,
    var(--menu-button-top),
    var(--menu-button-base)
  );
  box-shadow:
    inset 0 1px 0 #ffffff38,
    0 3px 10px #0001;
  border: 1px solid color-mix(in srgb, var(--menu-accent) 70%, #fff 30%);
  color: white;
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-checkout .button {
  background: linear-gradient(180deg, var(--button-top), var(--button-base));
  border: 1px solid var(--button-rim);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-line
  .quantity
  button {
  min-width: 44px;
}
body:not([data-experience-page="dizly"]) .experience-home .scene-action {
  background: linear-gradient(
    180deg,
    var(--ui-raised),
    color-mix(in srgb, var(--ui-raised) 85%, black)
  );
  border: 1px solid var(--ui-line);
  box-shadow: inset 0 1px 0 #ffffff0c;
}
body:not([data-experience-page="dizly"])
  .appearance-switch
  [aria-pressed="true"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ui-panel) 90%, white 10%),
    var(--ui-panel)
  );
  box-shadow:
    0 2px 6px #0002,
    inset 0 1px 0 #ffffff15;
}
body:not([data-experience-page="dizly"]) .button:disabled {
  box-shadow: none;
  filter: none;
}
@media (hover: hover) {
  body:not([data-experience-page="dizly"])
    .experience-card
    .experience-tile:hover
    .scene-action {
    transform: translateY(-2px);
  }
  .menu-gallery .dish-photo-button:hover img {
    transform: scale(1.045);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-experience-page="dizly"]) .button:active,
  .menu-gallery .dish-photo-button:hover img,
  body:not([data-experience-page="dizly"])
    .experience-card
    .experience-tile:hover
    .scene-action {
    transform: none;
  }
}

/* Final contrast pass in the light cashier workspace. */
body[data-experience-page="pos"] #main .cashier-ui .cashier-item.product {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
}
body[data-experience-page="pos"]
  #main
  .cashier-ui
  .cashier-item.product.is-selected {
  border-color: var(--ui-blue);
  box-shadow: 0 0 0 1px var(--ui-tint);
}
:root[data-color-mode="light"]
  body[data-experience-page="pos"]
  #main
  .cashier-ui
  :is(.cashier-price, .cashier-line-end > strong, .total > b) {
  color: #294c70;
}
body[data-experience-page="pos"] #main .cashier-ui .cashier-rail > button,
body[data-experience-page="pos"] #main .cashier-ui .cashier-rail > a {
  color: #fff;
}
body[data-experience-page="pos"] #main .cashier-ui .terminal-restaurant > span {
  color: #fff;
}
:root[data-color-mode="light"]
  body:not([data-experience-page="dizly"])
  :is(.eyebrow, .workspace-top .eyebrow) {
  color: #96501b;
}
body[data-experience-page="menu"]
  .menu-studio-dashboard
  .device-preview
  #live-preview {
  height: min(670px, 72dvh);
  max-height: 670px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dining-hero {
  min-height: 340px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dining-hero-top {
  gap: 7px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .menu-brand-lockup {
  gap: 8px;
}
body[data-experience-page="menu"]
  .menu-gallery.is-preview
  .menu-brand-lockup
  b {
  font-size: 12px;
}
body[data-experience-page="menu"]
  .menu-gallery.is-preview
  .menu-brand-lockup
  small {
  font-size: 8px;
}
body[data-experience-page="menu"]
  .menu-gallery.is-preview
  .menu-gallery
  .dining-identity {
  max-width: 300px;
}

@media (max-width: 540px) {
  body:not([data-experience-page="dizly"]) .brand img {
    height: 80px;
  }
}

/* menu/gallery.css */
/* Restaurant-first layout from the supplied references: no account, login or profile. */
body[data-experience-page="menu"] .menu-gallery {
  --menu-paper: var(--ui-panel);
  --menu-ink: var(--ui-text);
  --menu-accent: var(--menu-color);
  position: relative;
  overflow: hidden;
  isolation: auto;
}
body[data-experience-page="menu"] .menu-gallery .dining-hero {
  min-height: 450px;
  position: relative;
  background: #10120f;
  border-radius: 24px 24px 0 0;
}
.menu-gallery .dining-cover {
  position: absolute;
  inset: 0;
}
.menu-gallery .dining-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-experience-page="menu"] .menu-gallery .dining-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, #080b09ef 0%, #080b0970 56%, #080b0910),
    linear-gradient(0deg, #080b09cc, transparent 45%);
}
.menu-gallery .dining-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 27px 34px;
  gap: 15px;
}
.menu-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}
body[data-experience-page="menu"] .menu-gallery .dining-monogram {
  display: grid;
  place-items: center;
  margin: 0;
  width: 49px;
  height: 49px;
  min-width: 49px;
  border: 1px solid #ffffff55;
  background: #ffffff15;
  color: white;
  border-radius: 50%;
  overflow: hidden;
}
.menu-brand-lockup b {
  display: block;
  font-size: 15px;
}
.menu-brand-lockup small {
  display: block;
  font-size: 10px;
  color: #e2e7dc;
  margin-top: 4px;
}
.menu-hero-tools {
  display: flex;
  gap: 9px;
}
.menu-hero-tools button {
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff45;
  border-radius: 50%;
  color: white;
  background: #10151199;
  display: grid;
  place-items: center;
  position: relative;
}
.menu-hero-tools i {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -3px;
  font-size: 10px;
  font-style: normal;
  background: var(--menu-accent);
  border: 2px solid #101511;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.menu-gallery .dining-identity {
  position: relative;
  padding: 24px 38px 40px;
  max-width: 570px;
}
body[data-experience-page="menu"] .menu-gallery .dining-kicker {
  font-size: 12px;
  color: #e7c79a;
  margin-bottom: 9px;
}
body[data-experience-page="menu"] .menu-gallery .dining-identity h1 {
  font-size: 44px;
  line-height: 1.35;
  color: white;
  margin-bottom: 15px;
}
.menu-gallery .dining-identity h1 em {
  font-style: normal;
  color: #ffbc72;
}
.menu-gallery .dining-identity > p:last-of-type {
  font-size: 13px;
  color: #eff1e9;
  line-height: 1.8;
  max-width: 420px;
}
body[data-experience-page="menu"] .menu-gallery .menu-explore {
  margin-top: 23px;
  background: var(--menu-accent);
  color: white;
  min-height: 46px;
  font-size: 12px;
  padding: 11px 22px;
}
.menu-cover-caption {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 0 38px 36px;
  gap: 20px;
  color: #e6eadf;
  font-size: 10px;
}
.menu-cover-caption > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.menu-cover-caption svg {
  width: 15px;
  height: 15px;
}
body[data-experience-page="menu"] .menu-gallery .menu-content.dining-content {
  padding: 0 26px 105px;
  position: relative;
}
.menu-category-deck {
  position: relative;
  margin: -13px -26px 0;
  padding: 20px 22px 6px;
  background: var(--menu-paper);
  border-radius: 28px 28px 0 0;
  scroll-margin-top: 145px;
}
body[data-experience-page="menu"] .menu-gallery .menu-categories {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  gap: 10px;
  padding: 0 0 13px;
  margin: 0;
  border: 0;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
body[data-experience-page="menu"]
  .menu-gallery
  .menu-categories
  .menu-category {
  display: flex;
  flex-direction: column;
  flex: 0 0 100px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 5px;
  border-radius: 18px;
  background: none;
  color: var(--menu-ink);
  min-height: 108px;
  border: 1px solid transparent;
  font-size: 11px;
  scroll-snap-align: start;
}
body[data-experience-page="menu"]
  .menu-gallery
  .menu-categories
  .menu-category.active {
  background: var(--ui-tint);
  border-color: color-mix(in srgb, var(--menu-accent) 45%, transparent);
  color: var(--menu-accent);
}
.menu-gallery .menu-category-photo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--ui-raised);
}
.menu-gallery .menu-category-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 9px;
}
.menu-small-label {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--ui-accent);
  margin-bottom: 6px;
}
body[data-experience-page="menu"] .menu-gallery .menu-search-row h2 {
  font-size: 27px;
  color: var(--menu-ink);
}
body[data-experience-page="menu"] .menu-gallery .dining-search {
  max-width: 370px;
  width: 45%;
  margin: 0;
  border: 0;
  background: var(--ui-bg);
  color: var(--ui-muted);
}
.menu-gallery .dining-search input {
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--menu-ink);
  width: 100%;
  outline-offset: 3px;
}
.menu-dish-group {
  padding-top: 26px;
}
body[data-experience-page="menu"] .menu-gallery .dining-section {
  padding: 0 0 17px;
}
body[data-experience-page="menu"] .menu-gallery .dining-section h2 {
  color: var(--menu-ink);
  font-size: 22px;
}
.menu-gallery .dining-section > button {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-accent);
  font-size: 11px;
  min-height: 44px;
  padding: 7px 0 7px 10px;
}
.menu-gallery .dining-section > button svg {
  width: 16px;
  height: 16px;
}
body[data-experience-page="menu"] .menu-gallery .dining-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
body[data-experience-page="menu"] .menu-gallery .dish-card.product {
  display: block;
  border-radius: 20px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  overflow: hidden;
  box-shadow: none;
}
body[data-experience-page="menu"] .menu-gallery .dish-photo-button {
  width: 100%;
  padding: 0;
  display: block;
  border-radius: 0;
  background: var(--ui-raised);
}
body[data-experience-page="menu"] .menu-gallery .dish-photo-button img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.4;
  min-height: 0;
  object-fit: cover;
}
body[data-experience-page="menu"] .menu-gallery .dish-copy {
  padding: 15px;
}
body[data-experience-page="menu"] .menu-gallery .dish-copy h3 {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 7px;
  color: var(--menu-ink);
}
body[data-experience-page="menu"] .menu-gallery .dish-copy p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--ui-muted);
  margin: 0 0 16px;
  min-height: 43px;
}
.menu-gallery .dish-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  flex-wrap: wrap;
}
body[data-experience-page="menu"] .menu-gallery .dish-bottom > b {
  font-size: 16px;
  color: var(--ui-accent);
  white-space: nowrap;
}
body[data-experience-page="menu"] .menu-gallery .dish-bottom .add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  min-width: 78px;
  min-height: 44px;
  height: 44px;
  width: auto;
  padding: 8px 12px;
  background: var(--menu-accent);
  color: white;
  font-size: 11px;
}
.menu-gallery .dish-bottom .add svg {
  width: 15px;
  height: 15px;
}
body[data-experience-page="menu"] .menu-gallery .dish-bottom .add:disabled {
  background: var(--ui-raised);
  color: var(--ui-muted);
}
body[data-experience-page="menu"] .menu-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  position: sticky;
  bottom: 0;
  margin: -92px auto 12px;
  padding: 9px;
  max-width: 440px;
  width: calc(100% - 28px);
  z-index: 12;
  background: color-mix(in srgb, var(--menu-paper) 94%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  box-shadow: 0 8px 30px #0002;
}
.menu-bottom-nav > button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  flex: 1;
  border-radius: 999px;
  font-size: 10px;
  color: var(--ui-muted);
  padding: 8px;
}
.menu-bottom-nav > button.active {
  color: white;
  background: var(--menu-accent);
}
.menu-bottom-nav > button svg {
  width: 20px;
  height: 20px;
}
.menu-bottom-nav b {
  display: inline-grid;
  place-items: center;
  background: var(--menu-accent);
  color: white;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
}
.menu-bottom-nav small {
  font-size: 9px;
  color: var(--ui-accent);
}
@media (min-width: 1000px) {
  body[data-experience-page="menu"] .menu-gallery .dining-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  body[data-experience-page="menu"] .menu-page {
    padding: 0 10px;
  }
  body[data-experience-page="menu"] .menu-gallery .dining-hero {
    min-height: 350px;
  }
  .menu-gallery .dining-hero-top {
    padding: 20px 18px;
    gap: 9px;
  }
  .menu-brand-lockup {
    gap: 8px;
  }
  .menu-brand-lockup b {
    font-size: 12px;
  }
  .menu-brand-lockup small {
    font-size: 8px;
  }
  body[data-experience-page="menu"] .menu-gallery .dining-monogram {
    width: 39px;
    height: 39px;
    min-width: 39px;
  }
  .menu-hero-tools {
    gap: 6px;
  }
  .menu-gallery .dining-identity {
    padding: 20px 23px 24px;
    max-width: 325px;
  }
  body[data-experience-page="menu"] .menu-gallery .dining-identity h1 {
    font-size: 33px;
    margin-bottom: 12px;
  }
  .menu-gallery .dining-identity > p:last-of-type {
    font-size: 11px;
    max-width: 260px;
  }
  body[data-experience-page="menu"] .menu-gallery .menu-explore {
    min-height: 44px;
    margin-top: 16px;
  }
  .menu-cover-caption {
    padding: 0 23px 30px;
    gap: 10px;
    font-size: 9px;
  }
  body[data-experience-page="menu"] .menu-gallery .menu-content.dining-content {
    padding: 0 12px 105px;
  }
  .menu-category-deck {
    margin: -13px -12px 0;
    padding: 16px 10px 4px;
  }
  body[data-experience-page="menu"] .menu-gallery .menu-categories {
    gap: 3px;
  }
  body[data-experience-page="menu"]
    .menu-gallery
    .menu-categories
    .menu-category {
    flex-basis: 78px;
    min-height: 95px;
    font-size: 9px;
    gap: 8px;
    padding: 8px 4px;
  }
  .menu-gallery .menu-category-photo {
    width: 50px;
    height: 50px;
  }
  .menu-search-row {
    display: block;
    padding-top: 18px;
  }
  body[data-experience-page="menu"] .menu-gallery .menu-search-row h2 {
    font-size: 24px;
  }
  body[data-experience-page="menu"] .menu-gallery .dining-search {
    width: 100%;
    max-width: none;
    margin-top: 14px;
  }
  body[data-experience-page="menu"] .menu-gallery .dining-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body[data-experience-page="menu"] .menu-gallery .dining-section {
    padding-bottom: 9px;
  }
  body[data-experience-page="menu"] .menu-gallery .dining-section h2 {
    font-size: 19px;
  }
  body[data-experience-page="menu"] .menu-gallery .dish-card.product {
    border-radius: 16px;
  }
  body[data-experience-page="menu"] .menu-gallery .dish-photo-button img {
    aspect-ratio: 1.15;
  }
  body[data-experience-page="menu"] .menu-gallery .dish-copy {
    padding: 11px;
  }
  body[data-experience-page="menu"] .menu-gallery .dish-copy h3 {
    font-size: 14px;
  }
  body[data-experience-page="menu"] .menu-gallery .dish-copy p {
    font-size: 10px;
    min-height: 53px;
    margin-bottom: 12px;
  }
  body[data-experience-page="menu"] .menu-gallery .dish-bottom > b {
    font-size: 13px;
  }
  body[data-experience-page="menu"] .menu-gallery .dish-bottom .add {
    min-width: 44px;
    width: 44px;
    padding: 8px;
  }
  .menu-gallery .dish-bottom .add > span {
    display: none;
  }
  body[data-experience-page="menu"] .menu-bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom));
    margin: 0;
    width: calc(100% - 38px);
    max-width: 400px;
  }
  .menu-gallery .dining-endnote {
    padding-top: 28px;
    padding-bottom: 10px;
  }
}
/* The owner's phone has the same real responsive menu, without a viewport-fixed bar. */
body[data-experience-page="menu"] .menu-gallery.is-preview .dining-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dish-card.product {
  display: block;
}
body[data-experience-page="menu"]
  .menu-gallery.is-preview
  .dish-photo-button
  img {
  height: auto;
  min-height: 0;
  aspect-ratio: 1.15;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dish-copy {
  padding: 10px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dish-copy h3 {
  font-size: 13px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dish-copy p {
  font-size: 10px;
  min-height: 52px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dish-bottom > b {
  font-size: 12px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dish-bottom .add {
  width: 44px;
  min-width: 44px;
  padding: 8px;
}
.menu-gallery.is-preview .dish-bottom .add > span {
  display: none;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dining-hero-top {
  padding: 18px 14px;
}
.menu-gallery.is-preview .dining-identity {
  padding: 20px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dining-identity h1 {
  font-size: 29px;
}
.menu-gallery.is-preview .menu-search-row {
  display: block;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .dining-search {
  width: 100%;
  margin-top: 15px;
}
body[data-experience-page="menu"]
  .menu-gallery.is-preview
  .menu-categories
  .menu-category {
  flex-basis: 76px;
  min-height: 95px;
}
body[data-experience-page="menu"] .menu-gallery.is-preview .menu-bottom-nav {
  position: sticky;
  left: auto;
  transform: none;
  bottom: 8px;
  margin: -90px auto 8px;
  width: calc(100% - 20px);
}
@media (print) {
  .menu-bottom-nav {
    display: none !important;
  }
}

/* Menu palette: charcoal + tangerine, cream + olive. Owner colors remain live. */
body[data-experience-page="menu"] .menu-gallery {
  --menu-default-accent: #f48428;
  --ui-panel: #151716;
  --ui-bg: #1e211e;
  --ui-raised: #2a2f29;
  --ui-text: #faf8ef;
  --ui-muted: #bcc4b7;
  --ui-line: #ffffff1b;
  --ui-blue: #f48428;
  --ui-accent: #ffab65;
  --ui-tint: #f484281c;
  --menu-paper: var(--ui-panel);
  --menu-ink: var(--ui-text);
  background: var(--menu-paper);
}
:root[data-color-mode="light"] body[data-experience-page="menu"] .menu-gallery {
  --menu-default-accent: #315d42;
  --ui-panel: #f5f7ef;
  --ui-bg: #fff;
  --ui-raised: #e8eddf;
  --ui-text: #203b2a;
  --ui-muted: #68725f;
  --ui-line: #315d421c;
  --ui-blue: #315d42;
  --ui-accent: #315d42;
  --ui-tint: #315d4210;
}
.menu-bottom-nav > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  flex: 1;
  border-radius: 999px;
  font-size: 10px;
  color: var(--ui-muted);
  padding: 8px;
  text-align: center;
}
.menu-bottom-nav > a svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 600px) {
  .menu-bottom-nav > a,
  .menu-bottom-nav > button {
    font-size: 9px;
    min-height: 60px;
    padding: 7px 4px;
  }
  .menu-bottom-nav > button svg,
  .menu-bottom-nav > a svg {
    width: 19px;
    height: 19px;
  }
}

body[data-experience-page="menu"]
  .menu-gallery
  :is(.dish-bottom .add, .menu-explore, .menu-bottom-nav > button.active) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--menu-accent) 82%, white),
    color-mix(in srgb, var(--menu-accent) 92%, #1a2018)
  );
  border: 1px solid color-mix(in srgb, var(--menu-accent) 75%, white);
  box-shadow:
    inset 0 1px 0 #ffffff2c,
    0 3px 9px #0001;
}
body[data-experience-page="menu"] .menu-gallery .dish-bottom .add:disabled {
  background: var(--ui-raised);
  border-color: transparent;
  box-shadow: none;
}

/* menu/orders.css */
/* Table ordering belongs to each visitor's demo, never a shared restaurant inbox. */
body[data-experience-page="menu"] .menu-studio-dashboard.orders-open {
  grid-template-columns: 1fr;
  max-width: 1080px;
}
body[data-experience-page="menu"] .orders-open .preview-column {
  display: none;
}
body[data-experience-page="menu"] .editor-tabs > button {
  gap: 7px;
  white-space: nowrap;
}
.orders-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ui-tint);
  color: var(--ui-blue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.editor-tabs > .active .orders-tab-count {
  color: inherit;
  background: #ffffff26;
}
.orders-inbox-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
}
.orders-inbox-heading h2 {
  font-size: 28px;
  line-height: 1.5;
  margin-top: 8px;
}
.orders-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-muted);
  font-size: 11px;
  white-space: nowrap;
}
.orders-live > i {
  width: 7px;
  height: 7px;
  background: #4b9c75;
  border-radius: 50%;
}
.orders-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 19px;
}
.orders-stats > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 21px 10px;
  background: var(--ui-bg);
}
.orders-stats > div + div {
  border-inline-start: 1px solid var(--ui-line);
}
.orders-stats b {
  font-size: 29px;
  line-height: 1.2;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.orders-stats span {
  font-size: 12px;
  color: var(--ui-muted);
}
.orders-sandbox-note {
  font-size: 12px;
  line-height: 1.9;
  color: var(--ui-muted);
  max-width: 740px;
}
.orders-filters {
  margin: 20px 0 !important;
  gap: 6px;
}
.orders-filters > button {
  font-size: 12px;
  padding: 10px 17px;
  min-height: 44px;
}
.orders-inbox-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.menu-order-card {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 22px;
  padding: 21px;
  min-width: 0;
}
.menu-order-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.order-table-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ui-text);
  font-size: 15px;
}
.order-table-mark > svg {
  width: 37px;
  height: 37px;
  padding: 8px;
  background: var(--ui-raised);
  border-radius: 12px;
}
.order-table-mark b {
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}
.order-reference {
  text-align: end;
}
.order-reference strong {
  font-size: 16px;
  color: var(--ui-text);
  direction: ltr;
  display: block;
  font-variant-numeric: tabular-nums;
}
.order-reference small {
  font-size: 10px;
  color: var(--ui-muted);
  display: block;
  margin-top: 5px;
}
.menu-order-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ui-raised);
  color: var(--ui-text);
}
.menu-order-status svg {
  width: 15px;
  height: 15px;
}
.menu-order-status[data-status="new"] {
  background: #dc8b2d1f;
  color: #ffc27c;
}
.menu-order-status[data-status="accepted"],
.menu-order-status[data-status="preparing"] {
  background: #508cff1f;
  color: #b4ccff;
}
.menu-order-status[data-status="ready"],
.menu-order-status[data-status="served"] {
  background: #4b9c7524;
  color: #a4e4c4;
}
.menu-order-status[data-status="cancelled"] {
  background: #c3585820;
  color: #f3b3b3;
}
:root[data-color-mode="light"] .menu-order-status[data-status="new"] {
  color: #84420b;
}
:root[data-color-mode="light"] .menu-order-status[data-status="accepted"],
:root[data-color-mode="light"] .menu-order-status[data-status="preparing"] {
  color: #235ca9;
}
:root[data-color-mode="light"] .menu-order-status[data-status="ready"],
:root[data-color-mode="light"] .menu-order-status[data-status="served"] {
  color: #276144;
}
:root[data-color-mode="light"] .menu-order-status[data-status="cancelled"] {
  color: #9a3737;
}
.menu-order-lines {
  padding: 17px 0 8px;
  margin-top: 13px;
  border-top: 1px solid var(--ui-line);
}
.menu-order-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 12px;
  line-height: 1.7;
}
.menu-order-lines span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ui-text);
}
.menu-order-lines span > b {
  color: var(--ui-muted);
  margin-inline-end: 5px;
  white-space: nowrap;
}
.menu-order-lines strong {
  white-space: nowrap;
  color: var(--ui-text);
  font-size: 12px;
}
.menu-order-note {
  font-size: 12px;
  line-height: 1.8;
  padding: 13px;
  background: var(--ui-raised);
  border-radius: 12px;
  overflow-wrap: anywhere;
  color: var(--ui-muted);
  margin: 7px 0 16px;
}
.menu-order-note > b {
  display: block;
  color: var(--ui-text);
  font-size: 10px;
  margin-bottom: 5px;
}
.menu-order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--ui-line);
  padding-top: 16px;
  font-size: 12px;
  color: var(--ui-muted);
}
.menu-order-total > b {
  font-size: 19px;
  white-space: nowrap;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.menu-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 19px;
}
.menu-order-actions .button:first-child {
  flex: 1;
  justify-content: center;
}
.menu-order-actions .button {
  font-size: 11px !important;
}
.menu-orders-empty {
  padding: 35px 15px;
  text-align: center;
  grid-column: 1/-1;
}
.menu-orders-empty > svg {
  width: 44px;
  height: 44px;
  color: var(--ui-muted);
  margin: 0 auto 20px;
}
.menu-orders-empty h3 {
  font-size: 22px;
}
.menu-orders-empty p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ui-muted);
  max-width: 360px;
  margin: 10px auto 22px;
}
.customer-menu-orders {
  display: grid;
  gap: 16px;
}
.menu-current-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ui-tint);
  border: 1px solid var(--ui-line);
  border-radius: 17px;
  padding: 13px 16px;
  width: 100%;
  margin-top: 18px;
  text-align: start;
  color: var(--menu-ink);
  min-height: 56px;
  font-size: 11px;
}
.menu-current-order > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.menu-current-order > b {
  font-size: 10px;
  color: var(--ui-accent);
  margin-inline-start: auto;
}
.checkout-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--ui-line);
  padding: 4px 0 18px;
  margin-bottom: 6px;
  font-size: 12px;
}
.checkout-context > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-muted);
}
.checkout-context > b {
  max-width: 60%;
  overflow-wrap: anywhere;
}
.menu-checkout .cart-line {
  gap: 10px;
}
.menu-checkout .cart-line > div:first-child {
  min-width: 0;
}
.menu-checkout .cart-line b {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.menu-checkout .cart-line small {
  font-size: 11px;
  margin-top: 6px;
}
.menu-checkout .quantity {
  gap: 4px;
  flex-shrink: 0;
}
.checkout-form-heading {
  margin: 25px 0 20px;
}
.checkout-form-heading h3 {
  font-size: 23px;
}
.checkout-form-heading p {
  font-size: 12px;
  color: var(--ui-muted);
  line-height: 1.9;
  margin-top: 7px;
}
.menu-checkout .field {
  font-size: 13px;
  margin: 17px 0 9px;
  gap: 9px;
}
.menu-checkout input,
.menu-checkout textarea {
  width: 100%;
  color: var(--ui-text);
}
.menu-checkout input[name="table"] {
  font-size: 20px !important;
  font-variant-numeric: tabular-nums;
  min-height: 56px !important;
}
.menu-checkout .field-optional {
  font-size: 10px;
  color: var(--ui-muted);
}
#menu-table-hint {
  font-size: 10px;
  line-height: 1.8;
  color: var(--ui-muted);
  display: block;
}
.menu-checkout .checkout-error {
  color: #ffb3ac;
  font-size: 12px;
  line-height: 1.8;
  margin: 8px 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #c3585814;
}
:root[data-color-mode="light"] .menu-checkout .checkout-error {
  color: #a13228;
}
.menu-checkout [aria-invalid="true"] {
  border-color: #bd5f56 !important;
}
.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--ui-line);
  gap: 15px;
  padding: 20px 0;
  margin-top: 24px;
}
.checkout-total > span {
  font-size: 13px;
  color: var(--ui-muted);
}
.checkout-total > b {
  font-size: 24px;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.menu-checkout #send-menu-order {
  justify-content: center;
  min-height: 52px;
  font-size: 15px;
  gap: 12px;
}
body[data-experience-page="menu"] #dialog:has(.menu-checkout) .dialog-head {
  position: sticky;
  top: -1px;
  z-index: 3;
  background: var(--ui-panel);
  padding-block: 12px;
}
.checkout-demo-note {
  font-size: 11px;
  line-height: 1.9;
  text-align: center;
  color: var(--ui-muted);
  margin-top: 14px;
}
.menu-order-sent {
  text-align: center;
}
.order-sent-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 6px auto 20px;
  background: #4b9c7524;
  color: #8fdbb5;
  border-radius: 50%;
}
.order-sent-icon svg {
  width: 32px;
  height: 32px;
}
:root[data-color-mode="light"] .order-sent-icon {
  color: #276144;
}
.menu-order-sent > h3 {
  font-size: 27px;
  line-height: 1.5;
  margin: 8px 0 10px;
}
.menu-order-sent > p:not(.eyebrow) {
  font-size: 12px;
  color: var(--ui-muted);
  margin-bottom: 23px;
}
.menu-order-sent .menu-order-card {
  text-align: start;
  margin-bottom: 20px;
}
.menu-order-sent > .button {
  margin-top: 9px;
  justify-content: center;
}
@media (max-width: 600px) {
  .orders-inbox-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }
  .orders-inbox-heading h2 {
    font-size: 25px;
  }
  .orders-inbox-list {
    grid-template-columns: 1fr;
  }
  .orders-stats > div {
    padding: 18px 7px;
  }
  .orders-stats b {
    font-size: 26px;
  }
  .orders-stats span {
    font-size: 10px;
  }
  .menu-order-card {
    padding: 18px;
    border-radius: 18px;
  }
  body[data-experience-page="menu"] .menu-studio-dashboard .editor-tabs {
    padding: 11px 8px;
    gap: 2px;
  }
  body[data-experience-page="menu"]
    .menu-studio-dashboard
    .editor-tabs
    > button {
    padding: 9px 7px;
    font-size: 10px;
    gap: 4px;
    min-height: 46px;
  }
  .orders-tab-count {
    font-size: 10px;
    min-width: 20px;
    height: 20px;
  }
  .menu-current-order {
    flex-wrap: wrap;
    font-size: 10px;
    padding: 13px 12px;
  }
  .menu-checkout .quantity button {
    min-width: 36px !important;
    width: 36px;
    min-height: 44px;
  }
  .menu-checkout .cart-line b {
    font-size: 12px;
  }
  .menu-checkout .cart-line small {
    font-size: 10px;
  }
  .menu-order-actions .button {
    padding: 10px 14px;
  }
  .menu-checkout :is(input, textarea) {
    font-size: 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-order-card {
    animation: none;
  }
}

/* phone.css */
/* A single phone canvas. Content scrolls inside its workspace, not under actions. */
.phone-more,
.phone-page-title,
.cashier-phone-tabs {
  display: none;
}
.phone-options nav,
.phone-option-actions {
  display: grid;
  gap: 4px;
}
.phone-options nav a,
.phone-option-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: start;
  background: var(--ui-raised);
  color: var(--ui-text);
  font-size: 13px;
}
.phone-option-actions {
  margin-block: 14px;
}
.phone-theme-options {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-block: 18px;
}
.phone-theme-options > span {
  flex: 1;
}
.phone-theme-options button {
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
}
.phone-theme-options [aria-pressed="true"] {
  background: var(--ui-blue);
  color: white;
}
body[data-experience-page="dizly"] :is(.phone-more, .phone-page-title) {
  display: none;
}

/* Explicit dimensions prevent legacy mobile min-heights stretching the glass. */
body.pos-wide .terminal-stage {
  inset: 8px;
  width: calc(100vw - 16px);
  height: calc(100dvh - 16px);
  border: 2px solid #737b82;
  border-radius: 20px;
  padding: 0 10px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 #ffffff70,
    0 0 0 8px #101217,
    0 10px 30px #0005;
}
body.pos-wide .terminal-glass {
  height: 0;
  min-height: 0;
  flex: 1 1 0;
  border-radius: 9px;
}
body.pos-wide .terminal-bezel-top {
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
}
body.pos-wide .terminal-bezel-bottom {
  height: 22px;
  min-height: 22px;
  flex: 0 0 22px;
}
body.pos-wide .terminal-exit {
  width: 44px;
  min-height: 30px;
  font-size: 21px;
}
body.pos-wide .platform-back-lane {
  display: none;
}
body.pos-rotated .terminal-stage {
  inset: auto;
  left: 50%;
  top: 50%;
  width: calc(100dvh - 16px);
  height: calc(100vw - 16px);
}
body.pos-wide #main .cashier-ui .cashier-workspace {
  grid-template-columns: 44px minmax(0, 1fr) minmax(238px, 34%);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
body.pos-wide #main .cashier-ui .cashier-toolbar {
  flex: 0 0 44px;
  height: 44px;
  padding: 3px 12px;
}
body.pos-wide #main .cashier-ui .terminal-restaurant > span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
body.pos-wide #main .cashier-ui .terminal-restaurant b {
  font-size: 11px;
}
body.pos-wide #main .cashier-ui .cashier-new {
  min-height: 36px;
  padding: 5px 12px;
}
body.pos-wide #main .cashier-ui .cashier-rail {
  padding: 5px 2px;
  gap: 4px;
  background: var(--ui-raised);
  border-inline-end: 1px solid var(--ui-line);
}
body.pos-wide #main .cashier-ui .cashier-rail > button {
  min-width: 40px;
  width: 40px;
  min-height: 44px;
  padding: 5px 2px;
  gap: 3px;
  color: var(--ui-muted);
}
body.pos-wide #main .cashier-ui .cashier-rail > button.active {
  color: var(--ui-blue);
  background: var(--ui-tint);
}
body.pos-wide #main .cashier-ui .cashier-rail > a {
  display: none;
}
body.pos-wide #main .cashier-ui .cashier-catalog-heading {
  margin: 0 0 5px;
}
body.pos-wide #main .cashier-ui .cashier-catalog-heading > div {
  display: none;
}
body.pos-wide #main .cashier-ui .search {
  width: 100%;
  margin: 0;
  min-height: 38px;
}
body.pos-wide #main .cashier-ui .search input {
  min-height: 36px;
}
body.pos-wide #main .cashier-ui .terminal-catalog-head {
  padding: 6px 10px 0;
}
body.pos-wide #main .cashier-ui .cashier-categories {
  padding: 0 0 6px;
  gap: 5px;
}
body.pos-wide #main .cashier-ui .cashier-categories > button {
  min-height: 36px;
  padding: 5px 10px;
  font-size: 9px;
}
body.pos-wide #main .cashier-ui .cashier-categories svg {
  display: none;
}
body.pos-wide #main .cashier-ui .terminal-catalog-body {
  padding: 0 10px 10px;
}
body.pos-wide #main .cashier-ui .pos-products {
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.pos-wide #main .cashier-ui .cashier-item-photo {
  height: 65px;
  aspect-ratio: auto;
}
body.pos-wide #main .cashier-ui .product-copy {
  padding: 6px 8px;
}
body.pos-wide #main .cashier-ui .product h3 {
  font-size: 10px;
  margin: 0 0 4px;
}
body.pos-wide #main .cashier-ui .cashier-price {
  font-size: 13px;
}
body.pos-wide #main .cashier-ui .product .add {
  height: 40px;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
}
body.pos-wide #main .cashier-ui .terminal-order-head {
  padding: 6px 10px;
  gap: 4px;
}
body.pos-wide #main .cashier-ui .terminal-order-head h2 {
  font-size: 12px;
}
body.pos-wide #main .cashier-ui .cashier-order-options {
  width: 118px;
}
body.pos-wide #main .cashier-ui .cashier-order-options:has(input) {
  width: 100%;
}
body.pos-wide #main .cashier-ui .order-mode > button {
  min-height: 34px;
  padding: 4px 8px;
}
body.pos-wide #main .cashier-ui .cashier-table-number .field {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
body.pos-wide #main .cashier-ui .cashier-table-number {
  width: 85px;
}
body.pos-wide #main .cashier-ui .cashier-table-number input {
  min-height: 32px;
  width: 40px;
  padding: 3px;
}
body.pos-wide #main .cashier-ui .terminal-checkout {
  padding: 5px 10px 7px;
}
body.pos-wide #main .cashier-ui .total {
  padding: 0 0 5px;
}
body.pos-wide #main .cashier-ui .total > b {
  font-size: 18px;
}
body.pos-wide #main .cashier-ui .terminal-checkout .button {
  min-height: 40px;
  padding: 6px;
}
body.pos-wide #main .cashier-ui .cashier-empty {
  padding: 10px 3px;
}
body.pos-wide #main .cashier-ui .cashier-empty p {
  display: none;
}
body.pos-wide #main .cashier-ui .cashier-empty > svg {
  margin: 0 0 5px;
  width: 25px;
  height: 25px;
}

@media (max-width: 700px),
  (max-height: 600px) and (max-width: 1400px) and (orientation: landscape) {
  body:not([data-experience-page="dizly"]) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  body:not([data-experience-page="dizly"]) > .topbar {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    height: calc(60px + env(safe-area-inset-top));
    min-height: 60px;
    padding: env(safe-area-inset-top) 14px 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    border-radius: 0;
  }
  body:not([data-experience-page="dizly"]) .topbar .brand {
    margin: 0;
    flex: 0 0 auto;
    gap: 0;
  }
  body:not([data-experience-page="dizly"]) .topbar .brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }
  body:not([data-experience-page="dizly"])
    .topbar
    :is(nav, .platform-tools, #header-contact, .brand > span) {
    display: none;
  }
  body:not([data-experience-page="dizly"]) .phone-page-title {
    display: block;
    font-size: 12px;
    flex: 1;
  }
  body:not([data-experience-page="dizly"]) .phone-more {
    display: grid;
    place-items: center;
    border: 1px solid var(--ui-line);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ui-raised);
    color: var(--ui-text);
    font-size: 17px;
    letter-spacing: 2px;
  }
  body:not([data-experience-page="dizly"]) > .footer {
    display: none;
  }
  body:not([data-experience-page="dizly"]) .platform-back-lane:not([hidden]) {
    flex: 0 0 32px;
    height: 32px;
    padding: 0 16px;
    width: 100%;
    margin: 0;
  }
  body:not([data-experience-page="dizly"]) .platform-back {
    min-height: 32px;
    padding: 0 5px;
    font-size: 10px;
  }
  body:not([data-experience-page="dizly"]) #main {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Home is a four-service launcher, rather than a long repeated sales page. */
  body[data-experience-page="home"] #main {
    overflow: hidden;
  }
  .experience-home {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 14px 12px;
  }
  .experience-home .premium-hero {
    padding: 0;
    background: none;
    overflow: visible;
    flex: 0 0 auto;
    min-height: 0;
    border: 0;
  }
  .experience-home .premium-hero-grid {
    display: block;
    padding: 14px 0 12px;
    width: 100%;
    min-height: 0;
  }
  .experience-home .premium-hero-copy {
    padding: 0;
  }
  body .experience-home .premium-hero h1 {
    font-size: clamp(23px, 5.8vw, 32px);
    line-height: 1.4;
    margin: 0;
    max-width: 100%;
  }
  .experience-home .premium-hero h1 em {
    display: inline;
  }
  .experience-home
    :is(
      .premium-eyebrow,
      .premium-lead,
      .premium-primary,
      .premium-proof,
      .premium-stage,
      .hero-bottom-line,
      .hero-orbit,
      .experience-journey,
      .premium-contact,
      .premium-section-heading
    ) {
    display: none;
  }
  .experience-home .premium-experiences {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .experience-home .gallery-scenes {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .experience-home .experience-card {
    margin: 0;
    min-height: 0;
    height: 100%;
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    grid-column: auto;
    background: #17171e;
  }
  body .experience-home .experience-card .experience-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    position: relative;
    overflow: hidden;
  }
  .experience-home
    :is(
      .scene-description,
      .scene-features,
      .scene-eyebrow,
      .scene-number,
      .scene-note,
      .scene-phone,
      .diz-scene-orbit,
      .diz-scene-caption,
      .web-browser-bar,
      .web-scene-word,
      .table-label,
      .menu-trial
    ) {
    display: none;
  }
  .experience-home
    :is(.diz-scene-art, .pos-scene-art, .menu-scene-art, .web-scene-art) {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    transform: none;
    border-radius: 0;
  }
  .experience-home .tile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transform: none;
  }
  .experience-home .experience-tile:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #080c15f5, transparent 95%);
    pointer-events: none;
    z-index: 1;
  }
  .experience-home :is(.scene-copy, .pos-scene-heading) {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    padding: 14px;
    width: 100%;
    height: 100%;
    gap: 8px;
    margin: 0;
  }
  .experience-home .pos-scene-heading > div {
    width: 100%;
  }
  body .experience-home .experience-card h3 {
    font-size: clamp(17px, 4.4vw, 22px);
    line-height: 1.4;
    color: white;
    margin: 0;
  }
  body .experience-home .scene-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    min-height: 28px;
    font-size: 10px;
    color: #ffffffcc;
  }
  /* Menu: one compact identity, category rail and fixed primary navigation. */
  body[data-experience-page="menu"] #main {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body[data-experience-page="menu"] #main > .workspace-top {
    display: none;
  }
  body[data-experience-page="menu"]
    #main
    > :is(.menu-offer-wrap, .wrap:has(> .service-cta)) {
    display: none;
  }
  body[data-experience-page="menu"] .menu-page {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 0 10px 8px;
    margin: 0;
  }
  body[data-experience-page="menu"] .menu-page > .menu-gallery {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
  }
  body[data-experience-page="menu"] .menu-page .dining-hero {
    height: 130px;
    min-height: 130px;
    flex: 0 0 130px;
    padding: 14px;
  }
  body[data-experience-page="menu"] .menu-page .dining-hero-top {
    padding: 0;
  }
  body[data-experience-page="menu"] .menu-page .menu-hero-tools {
    display: none;
  }
  body[data-experience-page="menu"] .menu-page .dining-identity {
    padding: 14px 0 0;
    margin: 0;
  }
  body[data-experience-page="menu"] .menu-page .dining-identity h1 {
    font-size: 20px;
    line-height: 1.3;
  }
  body[data-experience-page="menu"] .menu-page .dining-identity h1 br {
    display: none;
  }
  body[data-experience-page="menu"]
    .menu-page
    :is(
      .dining-kicker,
      .dining-identity > p,
      .menu-explore,
      .menu-cover-caption,
      .menu-small-label,
      .menu-search-row > div,
      .dining-endnote
    ) {
    display: none;
  }
  body[data-experience-page="menu"] .menu-page .dining-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 12px;
  }
  body[data-experience-page="menu"] .menu-page .menu-category-deck {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -12px;
    padding: 8px 10px;
    background: var(--ui-panel);
  }
  body[data-experience-page="menu"] .menu-page .menu-categories {
    gap: 8px;
    padding: 0;
  }
  body[data-experience-page="menu"] .menu-page .menu-category-photo {
    width: 38px;
    height: 38px;
  }
  body[data-experience-page="menu"] .menu-page .menu-category {
    min-width: 56px;
    padding: 0;
    font-size: 9px;
  }
  body[data-experience-page="menu"] .menu-page .menu-search-row {
    padding: 6px 0;
    margin: 0;
    display: block;
  }
  body[data-experience-page="menu"] .menu-page .dining-search {
    width: 100%;
  }
  body[data-experience-page="menu"] .menu-page .menu-bottom-nav {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    flex: 0 0 60px;
    min-height: 60px;
    padding: 3px;
    box-shadow: 0 -1px 0 var(--ui-line);
  }
  body[data-experience-page="menu"]
    .menu-page
    .menu-bottom-nav
    > :is(a, button) {
    min-height: 54px;
    font-size: 9px;
    padding: 4px;
  }
  body[data-experience-page="menu"] .menu-onboarding {
    flex: 1;
    min-height: 0;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: 0;
  }
  body[data-experience-page="menu"] .menu-onboarding-art {
    display: none;
  }
  body[data-experience-page="menu"] .menu-onboarding h1 {
    font-size: 29px;
  }
  body[data-experience-page="menu"] .mobile-switch {
    padding: 0 12px 6px;
  }
  body[data-experience-page="menu"] .menu-studio-dashboard {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 0 10px 8px;
    margin: 0;
    display: flex;
  }
  body[data-experience-page="menu"] .menu-studio-dashboard .editor {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  body[data-experience-page="menu"] .editor-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px;
  }
  body[data-experience-page="menu"] .editor-tabs {
    flex-shrink: 0;
    padding: 6px;
  }
  body[data-experience-page="menu"] .menu-editor-toolbar {
    display: none;
  }
  body[data-experience-page="menu"] .show-preview .editor {
    display: none;
  }
  body[data-experience-page="menu"] .show-preview .preview-column {
    display: flex;
    min-height: 0;
    width: 100%;
    flex: 1;
  }
  body[data-experience-page="menu"]
    .show-preview
    :is(.device-preview, #live-preview) {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    width: 100%;
  }
  body[data-experience-page="menu"] .show-preview .preview-caption {
    display: none;
  }
  /* Portrait cashier switches workspaces rather than stacking two long screens. */
  body[data-experience-page="pos"] #main {
    overflow: hidden;
  }
  body[data-experience-page="pos"] .pos-experience {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body[data-experience-page="pos"]
    :is(
      .pos-intro,
      .pos-orientation-hint,
      .terminal-stand,
      .desk-detail,
      .pos-afterword,
      .pos-contact
    ) {
    display: none;
  }
  body[data-experience-page="pos"] .terminal-desk {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 0 8px 8px;
    margin: 0;
  }
  body[data-experience-page="pos"] .terminal-stage {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 7px;
    border-radius: 19px;
  }
  body[data-experience-page="pos"] .terminal-glass {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
  }
  body[data-experience-page="pos"] .terminal-bezel-top {
    min-height: 27px;
    flex: 0 0 27px;
    font-size: 6px;
    padding: 0 4px;
  }
  body[data-experience-page="pos"] .terminal-bezel-bottom {
    flex: 0 0 23px;
    height: 23px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-toolbar {
    height: 48px;
    flex: 0 0 48px;
    padding: 4px 10px;
  }
  body[data-experience-page="pos"]
    #main
    .cashier-ui
    :is(
      .cashier-session,
      .terminal-restaurant small,
      .terminal-cart-jump,
      .cashier-tool-name,
      .terminal-restaurant b i
    ) {
    display: none;
  }
  body[data-experience-page="pos"]
    #main
    .cashier-ui
    .terminal-restaurant
    > span {
    height: 30px;
    width: 30px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-new {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 10px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-phone-tabs {
    display: flex;
    flex: 0 0 46px;
    gap: 4px;
    padding: 3px 8px;
    border-bottom: 1px solid var(--ui-line);
  }
  .cashier-phone-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-height: 40px;
    border-radius: 999px;
    font-size: 11px;
  }
  .cashier-phone-tabs button:last-child {
    flex: 0 0 44px;
  }
  .cashier-phone-tabs svg {
    height: 16px;
    width: 16px;
  }
  .cashier-phone-tabs [aria-pressed="true"] {
    background: var(--ui-tint);
    color: var(--ui-blue);
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-workspace {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-rail {
    display: none;
  }
  body[data-experience-page="pos"]
    #main
    .cashier-ui
    :is(.pos-catalog, .order-panel) {
    flex: 1;
    height: 100%;
    min-height: 0;
    border: 0;
  }
  body:not(.pos-wide)[data-experience-page="pos"]
    #main
    .cashier-ui[data-panel="catalog"]
    .order-panel,
  body:not(.pos-wide)[data-experience-page="pos"]
    #main
    .cashier-ui[data-panel="order"]
    .pos-catalog {
    display: none;
  }
  body[data-experience-page="pos"]
    #main
    .cashier-ui
    .cashier-catalog-heading
    > div {
    display: none;
  }
  body[data-experience-page="pos"] #main .cashier-ui .search {
    width: 100%;
    margin: 0;
  }
  body[data-experience-page="pos"] #main .cashier-ui .terminal-catalog-head {
    padding: 8px 10px 0;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-catalog-heading {
    margin-bottom: 6px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-categories {
    margin: 0;
    padding-bottom: 8px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .cashier-results {
    display: none;
  }
  body[data-experience-page="pos"] #main .cashier-ui .terminal-order-body {
    overflow: auto;
    min-height: 0;
  }
  body[data-experience-page="pos"] #main .cashier-ui .terminal-order-head {
    padding: 12px;
  }
  body[data-experience-page="pos"] #main .cashier-ui .terminal-checkout {
    padding: 8px 12px 10px;
  }
  body[data-experience-page="pos"]
    #main
    .cashier-ui
    .terminal-checkout
    > small {
    display: none;
  }
  body.pos-wide[data-experience-page="pos"]
    #main
    .cashier-ui
    .cashier-phone-tabs {
    display: none;
  }
  body.pos-wide[data-experience-page="pos"]
    #main
    .cashier-ui
    .cashier-workspace {
    display: grid;
  }
  body.pos-wide[data-experience-page="pos"] #main .cashier-ui .cashier-rail {
    display: flex;
  }
  body.pos-wide[data-experience-page="pos"] .terminal-stage {
    height: calc(100dvh - 16px);
    padding: 0 10px;
  }
  body.pos-rotated[data-experience-page="pos"] .terminal-stage {
    height: calc(100vw - 16px);
  }
  body.pos-wide[data-experience-page="pos"] #main .cashier-ui .cashier-toolbar {
    height: 44px;
    flex-basis: 44px;
  }
  body[data-experience-page="portfolio"] #main {
    overflow: hidden;
  }
  body[data-experience-page="portfolio"] .portfolio-intro {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    width: 100%;
  }
  body[data-experience-page="portfolio"]
    .portfolio-intro
    > :is(.eyebrow, .lead) {
    display: none;
  }
  body[data-experience-page="portfolio"] .portfolio-intro > h1 {
    font-size: 23px;
    margin: 0 0 8px;
  }
  body[data-experience-page="portfolio"] .portfolio-intro > h1 br {
    display: none;
  }
  body[data-experience-page="portfolio"] .portfolio-intro > .tabs {
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  body[data-experience-page="portfolio"] .portfolio-grid {
    flex: 1;
    min-height: 0;
    overflow: auto;
    align-content: start;
  }
  body[data-experience-page="portfolio"] #main > .wrap:has(.service-cta) {
    display: none;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  body[data-experience-page="home"] .experience-home {
    flex-direction: row;
    gap: 16px;
    padding-top: 8px;
  }
  .experience-home .premium-hero {
    flex: 0 0 26%;
    align-self: center;
  }
  body .experience-home .premium-hero h1 {
    font-size: 24px;
  }
  .experience-home .premium-hero-grid {
    padding: 0;
  }
  .experience-home .gallery-scenes {
    gap: 8px;
  }
  .experience-home :is(.scene-copy, .pos-scene-heading) {
    padding: 10px;
    gap: 2px;
  }
  body .experience-home .experience-card h3 {
    font-size: 16px;
  }
  body .experience-home .scene-action {
    min-height: 22px;
    font-size: 9px;
  }
}

@media (max-width: 700px),
  (max-height: 600px) and (max-width: 1400px) and (orientation: landscape) {
  #main .experience-home .gallery-scenes .experience-card {
    padding: 0;
    margin: 0;
    border-radius: 22px;
  }
  #main .experience-home .gallery-scenes .experience-card .experience-tile {
    height: 100%;
    min-height: 0;
    padding: 0;
    display: flex;
  }
  #main
    .experience-home
    .gallery-scenes
    .experience-card
    :is(.scene-copy, .pos-scene-heading) {
    width: 100%;
    padding: 14px;
    justify-content: flex-end;
    align-items: flex-start;
  }
  #main
    .experience-home
    .gallery-scenes
    .experience-card
    :is(.diz-scene-art, .pos-scene-art, .menu-scene-art, .web-scene-art) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  #main .experience-home .gallery-scenes .experience-card .tile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #main .experience-home .gallery-scenes .experience-card .scene-action {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    min-height: 28px;
    font-size: 10px;
    color: #ffffffbf;
  }
  #main .experience-home .gallery-scenes .experience-card .scene-action > span {
    width: 24px;
    height: 24px;
    background: none;
    color: white;
  }
  #main .experience-home .gallery-scenes .experience-card h3 {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
  }
}

body.pos-rotated[data-experience-page="pos"]
  #dialog[open]:not(.command-dialog) {
  inset: auto;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  width: min(520px, calc(100dvh - 24px));
  max-width: calc(100dvh - 24px);
  max-height: calc(100vw - 24px);
  transform: translate(-50%, -50%) rotate(90deg);
  overflow: auto;
  border-radius: 18px;
}
@media print {
  body.pos-rotated[data-experience-page="pos"]
    #dialog[open]:not(.command-dialog) {
    transform: none;
    max-height: none;
    max-width: none;
    position: static;
  }
}
.experience-home .experience-tile picture {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width:700px) {
  body[data-experience-page="menu"] #main:has(.orders-open) .mobile-switch { display:none; }
  body[data-experience-page="menu"] .orders-inbox-heading { margin-bottom:12px; gap:8px; }
  body[data-experience-page="menu"] .orders-inbox-heading .eyebrow { display:none; }
  body[data-experience-page="menu"] .orders-inbox-heading h2 { font-size:21px; margin:0; }
  body[data-experience-page="menu"] .orders-live { font-size:9px; }
  body[data-experience-page="menu"] .orders-stats { margin-bottom:10px; }
  body[data-experience-page="menu"] .orders-stats > div { padding:9px 5px; }
  body[data-experience-page="menu"] .orders-stats b { font-size:21px; }
  body[data-experience-page="menu"] .orders-stats span { font-size:9px; }
  body[data-experience-page="menu"] .orders-sandbox-note { font-size:10px; line-height:1.8; margin:8px 0; }
  body[data-experience-page="menu"] .orders-filters { margin-bottom:10px; }
  body[data-experience-page="menu"] .menu-order-card { padding:14px; }
}