/* =========================================================
   DEYNO — Design System
   Built to the Deyno Master Build Brief.
   Predominantly light. Burgundy is the anchor, not the field.
   ========================================================= */

/* =========================================================
   FONTS — self-hosted, SIL Open Font License 1.1
   Instrument Sans carries the whole site. Newsreader appears in
   italic on a handful of editorial lines and nowhere else.
   Licences ship alongside the files in assets/fonts/.
   Only the weights actually used are here: four files, ~76KB.
   ========================================================= */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand scale */
  --deyno-900: #3F0416;
  --deyno-800: #54051D;
  --deyno-700: #660622;
  --deyno-600: #780829;
  --deyno-500: #922044;
  --deyno-400: #B04B69;
  --deyno-300: #D18A9F;
  --deyno-200: #E6B9C6;
  --deyno-100: #F3DDE4;
  --deyno-50:  #FAF0F3;

  --deyno-primary:       #780829;
  /* the accent where it is TEXT on a surface. Same as the brand colour in
     light; lightened in dark, where #780829 on a dark ground is unreadable. */
  --accent-ink:          #780829;

  /* Values that must turn over with the theme but are not part of the
     palette proper — a translucent bar, a scene ground, an error field. */
  --header-bg:      rgba(252, 250, 248, 0.86);
  --premium-ground: #1A1417;
  --err-bg:         #FCEFF2;
  --err-border:     var(--deyno-200);
  --err-ink:        var(--deyno-primary-dark);
  --shadow-panel:
    0 1px 1px rgba(33, 26, 29, 0.026),
    0 10px 24px -16px rgba(33, 26, 29, 0.13),
    0 38px 66px -46px rgba(120, 8, 41, 0.20);
  --shadow-device:
    0 2px 4px rgba(33, 26, 29, 0.05),
    0 18px 36px -22px rgba(33, 26, 29, 0.22),
    0 56px 88px -56px rgba(120, 8, 41, 0.26);
  --deyno-primary-hover: #660622;
  --deyno-primary-dark:  #4F051B;
  --deyno-primary-deep:  #3F0416;

  /* Surfaces */
  --background:          #FCFAF8;
  --surface:             #FFFFFF;
  --surface-warm:        #F7F3F0;
  --surface-warm-strong: #F2ECE8;
  --neutral-strong:      #EAE2DD;
  --deyno-tint:          #FAF0F3;

  /* Text */
  --text-primary:   #211A1D;
  --text-secondary: #5B5255;
  --text-muted:     #6B6265;
  --text-subtle:    #776D70;

  /* Borders */
  --border-default:       #E6DEDA;
  --border-strong:        #D8CDCA;
  --border-burgundy-soft: #E8CCD5;
  --border-dark:          #763347;

  /* Premium accent — rare */
  --champagne-dark:  #896641;
  --champagne:       #B28A5D;
  --champagne-light: #D7BE9D;
  --champagne-soft:  #F2E7D9;

  /* Dark surfaces */
  --dark-section: #4F051B;
  --footer:       #3F0416;

  --text-on-dark:       #FFFDFC;
  --text-on-dark-muted: #EEDFE4;

  /* Type */
  /* Instrument Sans carries everything — headings, body, navigation, buttons
     and every product panel. Newsreader appears in italic on four editorial
     lines and nowhere else. */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-editorial: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Spacing */
  --gutter: 120px;
  --section-y: 96px;
  --section-y-lg: 132px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 240ms;
  --t-mid: 340ms;
  --t-slow: 900ms;

  /* Radii — one coherent family */
  --r-control: 10px;   /* buttons, inputs, small controls */
  --r-panel: 20px;     /* product panels, cards, media */
  --r-device: 40px;    /* phone shells */
  --r-pill: 999px;

  /* Widths */
  --max: 1440px;
  --headline-max: 960px;
  --copy-max: 580px;
}

@media (min-width: 1600px) { :root { --gutter: 150px; } }
@media (max-width: 1180px) { :root { --gutter: 64px; --section-y: 92px;  --section-y-lg: 118px; } }
@media (max-width: 760px)  { :root { --gutter: 24px; --section-y: 68px;  --section-y-lg: 84px;  } }

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--deyno-100); color: var(--deyno-primary-dark); }

:focus-visible {
  outline: 2px solid var(--deyno-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 999;
  background: var(--deyno-primary); color: #fff;
  padding: 12px 20px; border-radius: 6px;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- 3. LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.scene {
  position: relative;
  padding-block: var(--section-y);
}
.scene--lg { padding-block: var(--section-y-lg); }
.scene--flush { padding-block: 0; }

.bg-base   { background: var(--background); }
.bg-warm   { background: var(--surface-warm); }
.bg-strong { background: var(--surface-warm-strong); }
.bg-tint   { background: var(--deyno-tint); }
.bg-dark   { background: var(--dark-section); color: var(--text-on-dark); }
.bg-deep   { background: var(--deyno-primary-deep); color: var(--text-on-dark); }

.bg-dark .lead, .bg-deep .lead,
.bg-dark .body, .bg-deep .body { color: var(--text-on-dark-muted); }
.bg-dark .eyebrow, .bg-deep .eyebrow { color: var(--deyno-300); }

/* ---------- 4. TYPOGRAPHY ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 26px;
}

.display, .h1, .h2, .h3 {
  font-weight: 500;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 0.99;
  letter-spacing: -0.032em;
  max-width: var(--headline-max);
}
.h1 {
  font-size: clamp(42px, 5.2vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.028em;
  max-width: var(--headline-max);
}
.h2 {
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.024em;
  max-width: var(--headline-max);
}
.h3 {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.h4 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.52;
  color: var(--text-secondary);
  max-width: var(--copy-max);
  margin: 26px 0 0;
  font-weight: 400;
}
.body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--copy-max);
  margin: 20px 0 0;
}
.editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
}
.tight { max-width: 460px; }
.center { text-align: center; margin-inline: auto; }
.center .lead, .center .body { margin-inline: auto; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-control);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--deyno-primary); color: #fff; }
.btn--primary:hover { background: var(--deyno-primary-hover); }
.btn--primary:active { background: var(--deyno-800); }

.btn--secondary {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}
.btn--secondary:hover { background: var(--deyno-tint); }

.btn--on-dark { background: var(--text-on-dark); color: var(--deyno-primary); }
.btn--on-dark:hover { background: #F3E9E5; }

.btn--ghost-dark {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(255,253,252,0.34);
}
.btn--ghost-dark:hover { border-color: rgba(255,253,252,0.7); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.center .btn-row, .btn-row.center { justify-content: center; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
  margin-top: 34px;
  transition: gap var(--t-fast) var(--ease);
}
.textlink .arw { transition: transform var(--t-fast) var(--ease); }
.textlink:hover .arw { transform: translateX(4px); }
.bg-dark .textlink, .bg-deep .textlink { color: var(--text-on-dark); }

/* ---------- 6. HEADER / NAV ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-solid {
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border-default);
}
.header__inner {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.logo { color: var(--accent-ink); display: block; }
.logo svg { width: 128px; height: auto; }
.header.on-dark:not(.is-solid) .logo { color: var(--text-on-dark); }
.header.on-dark:not(.is-solid) .nav__link { color: var(--text-on-dark); }
.header.on-dark:not(.is-solid) .burger span { background: var(--text-on-dark); }

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
}
.nav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  padding-block: 6px;
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--accent-ink); }
.nav__link.is-active::after { transform: scaleX(1); }
.header.on-dark:not(.is-solid) .nav__link.is-active { color: var(--text-on-dark); }

.header .btn { padding: 12px 24px; font-size: 14px; }
.header.on-dark:not(.is-solid) .btn--primary { background: var(--text-on-dark); color: var(--deyno-primary); }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer;
  margin-left: auto;
}
.burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobilenav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--background);
  padding: 108px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  /* short phones: the panel must scroll, or the CTA at the bottom
     becomes unreachable in landscape and on small devices */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              visibility var(--t-mid);
}
.mobilenav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobilenav__list { list-style: none; margin: 0; padding: 0; }
.mobilenav__list li { border-bottom: 1px solid var(--border-default); }
.mobilenav__list a {
  display: block;
  padding: 22px 0;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.022em;
}
.mobilenav__list a.is-active { color: var(--accent-ink); }
.mobilenav__foot { margin-top: auto; padding-top: 36px; }
.mobilenav__foot .btn { width: 100%; }

@media (max-width: 980px) {
  .nav, .header__inner > .btn { display: none; }
  .burger { display: flex; }
  .header__inner { height: 68px; }
  .logo svg { width: 110px; }
}

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* small viewport height: ignores collapsing chrome */
  display: flex;
  align-items: center;
  background: var(--surface-warm);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 3; width: 100%; padding-block: 140px 120px; }
.hero__copy { max-width: 560px; }
.hero .display { max-width: 12ch; font-size: clamp(46px, 5.4vw, 82px); }
.hero__lead { max-width: 470px; }
.hero__brandline {
  margin-top: 54px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

/* Cinematic environment — deliberate tonal composition, not a stock collage.
   Replace .hero__media background-image with real restaurant photography. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(1100px 700px at 78% 18%, rgba(120,8,41,0.10), transparent 62%),
    radial-gradient(760px 620px at 96% 82%, rgba(178,138,93,0.16), transparent 66%),
    linear-gradient(180deg, var(--surface-warm) 0%, var(--background) 100%);
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-photo, none);
  background-size: cover;
  background-position: center;
  opacity: var(--hero-photo-opacity, 0);
}
.hero__stage {
  position: relative;
  width: 100%;
  margin-top: 52px;
}
.hero__stage .ui { width: 100%; }

@media (min-width: 981px) {
  /* Two real columns. The copy and the product each own their own horizontal
     territory, so the supporting line can never run underneath the panel, and
     the panel is never clipped by the right edge of the viewport. */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(30px, 4vw, 64px);
  }
  .hero__stage {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    z-index: 2;
  }
  .hero__stage .ui--hero {
    width: 100%;
    /* barely there: if you notice the shadow it is too strong, and the
       panel starts reading as a floating SaaS dashboard card */
    box-shadow: 0 18px 44px -34px rgba(33, 26, 29, 0.16);
  }
  .hero__copy { max-width: 560px; }
  /* sized to the column it now lives in, so the headline breaks into two
     confident lines instead of one word per line */
  .hero .display { font-size: clamp(42px, 3.5vw, 60px); max-width: min(13ch, 100%); }
  .hero__lead { max-width: none; }
  .hero__brandline { margin-top: 40px; }
  /* the panel is taller than the dining grid: anchor the figures to the base
     so the middle column reads as a full screen, not a half-empty one */
  .pos--hero .pos__main { display: flex; flex-direction: column; }
  .pos--hero .pos__stat { margin-top: auto; padding-top: 24px; }
}
/* Between 981 and 1180 the panel is too narrow for three POS columns —
   drop the nav rail rather than squeeze all three. */
@media (min-width: 981px) and (max-width: 1179px) {
  .hero__inner { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .hero .display { font-size: clamp(38px, 4.2vw, 48px); }
  .hero__brandline { margin-top: 34px; }
  .pos--hero .pos__rail { display: none; }
  .pos.pos--hero { grid-template-columns: minmax(0, 1fr) 168px; min-height: 360px; }
  .pos--hero .pos__aside { padding: 18px 15px; }
  .pos--hero .pos__tables { gap: 7px; }
  .pos--hero .pos__table { font-size: 11px; }
  .pos--hero .pos__table small { font-size: 8px; }
  .pos--hero .pos__line { font-size: 11.5px; padding: 7px 0; }
  .pos--hero .pos__stat { gap: 16px; }
  .pos--hero .pos__stat b { font-size: 19px; }
  .pos--hero .pos__stat small { font-size: 9.5px; letter-spacing: 0.05em; }
}
@media (min-width: 1180px) and (max-width: 1359px) {
  /* three POS columns fit again here, but the table labels are still tight */
  .pos--hero .pos__tables { gap: 8px; }
  .pos--hero .pos__table small { font-size: 8.5px; letter-spacing: 0.02em; }
}
@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero__inner { padding-block: 124px 80px; }
  .hero__copy { max-width: none; }
}

/* ---------- 8. STICKY STORY (ECOSYSTEM / JOURNEY) ---------- */
.story { position: relative; }
.story__sticky {
  position: sticky;
  top: 0;
  /* clear the fixed header, with room to breathe under it */
  padding-top: 100px;
  padding-bottom: 20px;
  height: 100vh;
  height: 100svh;
  display: flex;
  /* Centred with `align-items: center`, a child taller than the box loses its
     top to `overflow: hidden` — and the heading is at the top. Auto margins
     centre the same way when there is room and fall back to top-aligned when
     there is not, so nothing is ever cut off above the fold. */
  align-items: flex-start;
  overflow: hidden;
}
.story__sticky > * { margin-block: auto; }
.story__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: 72px;
  align-items: center;
  width: 100%;
}
.story__stage { position: relative; height: min(62vh, 560px); }
.story__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
.story__layer.is-in { opacity: 1; transform: none; }
.story__layer.is-out { opacity: 0; transform: translateY(-18px) scale(0.99); }

.story__steps { list-style: none; margin: 34px 0 0; padding: 0; }
.story .h2 { font-size: clamp(32px, 3.4vw, 52px); }
.story__steps li {
  padding: 10px 0 10px 24px;
  border-left: 1.5px solid var(--border-default);
  color: var(--text-subtle);
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.story__steps li.is-active {
  color: var(--text-primary);
  border-left-color: var(--accent-ink);
}
.bg-dark .story__steps li { color: rgba(238,223,228,0.42); border-left-color: rgba(255,253,252,0.16); }
.bg-dark .story__steps li.is-active { color: var(--text-on-dark); border-left-color: var(--champagne); }

.story__word {
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1;
}
.story__end {
  text-align: center;
  padding-block: 64px 0;
}

@media (max-width: 980px) {
  .story { height: auto !important; padding-block: var(--section-y); }
  .story__sticky { position: static; height: auto; padding: 0; overflow: visible; }
  .story__grid { grid-template-columns: 1fr; gap: 36px; }
  /* Sticky storytelling is too heavy on small screens.
     The stages become a horizontal, snap-scrolling sequence instead. */
  .story__stage {
    height: auto;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .story__stage::-webkit-scrollbar { display: none; }
  .story__layer {
    position: relative;
    opacity: 1;
    transform: none;
    flex: 0 0 84%;
    scroll-snap-align: center;
    align-items: flex-start;
  }
  .story__layer + .story__layer { margin-top: 0; }
  .story__layer.is-out { opacity: 1; transform: none; }
  .story__layer > * { width: 100%; }
  .story__stage .phone { width: 236px; }
  .story__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
  .story__steps li {
    border-left: 0;
    padding: 7px 13px;
    border: 1px solid var(--border-default);
    border-radius: 20px;
    font-size: 14px;
  }
  .story__steps li.is-active {
    border-color: var(--border-burgundy-soft);
    background: var(--deyno-tint);
    color: var(--accent-ink);
  }
}

/* ---------- 8b. ECOSYSTEM COMPOSITION ---------- */
.eco__head { text-align: center; max-width: 780px; margin: 0 auto; }
.eco__head .h2, .eco__head .lead { margin-inline: auto; }
/* This block is pinned between the header and the fold, so its vertical cost
   is measured against the window height as well as its width — otherwise a
   short laptop screen loses the heading off the top or the captions off the
   bottom. */
.eco__head .h2 { font-size: clamp(24px, min(2.7vw, 3.7vh), 40px); }
.eco__head .lead { margin-top: clamp(9px, 1.5vh, 16px); font-size: clamp(14px, 1.75vh, 17px); }
.eco__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  align-items: end;
  margin-top: clamp(16px, 3vh, 38px);
  position: relative;
}
.eco__rule {
  position: absolute;
  left: 12%; right: 12%;
  bottom: -34px;
  height: 1px;
  background: var(--border-default);
  transform-origin: center;
}
.js .eco__rule { transform: scaleX(0); }
.eco__row.is-linked .eco__rule { transform: scaleX(1); }
/* Position and opacity are written by JS from scroll progress, so no
   transition here — the movement IS the scroll. Without JS the row simply
   sits in its finished state. */
.eco__item {
  will-change: transform, opacity;
  transform-origin: center bottom;
}
.js .eco__item { opacity: 0; }
.eco__item.is-in { opacity: 1; }
.eco__cap {
  margin-top: 20px;
  text-align: center;
}
.eco__cap span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
}
.eco__cap b {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.eco__stagehold { display: flex; align-items: flex-end; justify-content: center; min-height: clamp(160px, 25vh, 288px); }
.eco__connect {
  text-align: center;
  margin-top: 46px;
  font-size: 15px;
  color: var(--text-muted);
}
.js .eco__connect { opacity: 0; }
.eco__row.is-linked ~ .eco__connect { opacity: 1; }

/* Compact POS used inside the ecosystem composition */
.pos.pos--compact { grid-template-columns: 1fr; min-height: 0; }
.pos.pos--compact .pos__rail {
  display: flex; gap: 6px; overflow: hidden;
  border-right: 0; border-bottom: 1px solid var(--border-default);
  padding: 11px 12px;
}
.pos.pos--compact .pos__railitem { font-size: 11.5px; padding: 6px 9px; white-space: nowrap; }
.pos.pos--compact .pos__main { padding: 16px; }
.pos.pos--compact .pos__tables { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.pos.pos--compact .pos__table { font-size: 11px; }
.pos.pos--compact .pos__table small { font-size: 8.5px; }
.pos.pos--compact .pos__stat { margin-top: 16px; gap: 18px; }
.pos.pos--compact .pos__stat b { font-size: 18px; }

@media (max-width: 900px) {
  .eco__row { grid-template-columns: 1fr; gap: 44px; margin-top: 40px; }
  .eco__rule { display: none; }
  .js .eco__item { opacity: 1; }
  .eco__item { transform: none !important; }
  .js .eco__connect { opacity: 1; }
  .eco__stagehold { min-height: 0; }
  .eco__connect { opacity: 1; }
}

/* ---------- 8c. DINING JOURNEY CHAIN ----------
   The seven stages sit on one chain and slide through a window
   automatically. No long scroll section — the motion is its own. */
.chain { margin-top: 34px; }

.chain__viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;          /* horizontal drag is ours, vertical scrolls */
  -webkit-user-select: none;
          user-select: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* soften the edges so slides enter and leave rather than being cut */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.chain.is-dragging .chain__viewport { cursor: grabbing; }
.chain.is-dragging .chain__track { transition: none; }
.chain.is-dragging .chain__slide { transition: none; }

.chain__track {
  display: flex;
  gap: 26px;
  align-items: center;
  will-change: transform;
  transition: transform 620ms var(--ease);
}

.chain__slide {
  flex: 0 0 clamp(240px, 25vw, 330px);
  height: 306px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.34;
  transform: scale(0.9);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.chain__slide.is-current { opacity: 1; transform: scale(1); }

.chain__slide > * { width: 100%; }
.chain__slide, .chain__slide * { -webkit-user-drag: none; }
.chain__slide .phone { width: 186px; }
.chain__slide .search { padding: 18px; }
.chain__slide .rcard__body { padding: 14px 16px 16px; }

.chain__word {
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* The chain itself ---------------------------------------------------- */
.chain__links {
  position: relative;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.chain__rail, .chain__fill {
  position: absolute;
  top: 5px;
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 1px;
}
.chain__rail { background: var(--border-default); }
.chain__fill {
  background: var(--deyno-primary);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 620ms var(--ease);
}

.chain__link { display: flex; }
.chain__btn {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0 4px;
  cursor: pointer;
}
.chain__node {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--background);
  border: 1.5px solid var(--border-strong);
  transition: background-color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
.chain__btn:hover .chain__node { border-color: var(--accent-ink); }
.chain__link.is-done .chain__node { background: var(--deyno-300); border-color: var(--deyno-300); }
.chain__link.is-current .chain__node {
  background: var(--deyno-primary);
  border-color: var(--accent-ink);
  transform: scale(1.45);
}
.chain__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-subtle);
  transition: color var(--t-mid) var(--ease);
  white-space: nowrap;
}
.chain__link.is-done .chain__label { color: var(--text-secondary); }
.chain__link.is-current .chain__label { color: var(--text-primary); font-weight: 600; }

.chain__close { margin-top: 32px; }

@media (max-width: 760px) {
  .chain__slide { flex-basis: 74vw; height: 306px; }
  .chain__label { font-size: 10px; }
  .chain__links { margin-top: 34px; }
  .chain__btn { gap: 9px; padding: 0 2px; }
}
@media (max-width: 420px) {
  .chain__label { font-size: 8.5px; letter-spacing: -0.01em; }
}

@media (prefers-reduced-motion: reduce) {
  .chain__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    cursor: auto;
    touch-action: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .chain__track { transform: none !important; }
  .chain__slide { opacity: 1; transform: none; scroll-snap-align: center; }
}

/* ---------- 9. ECOSYSTEM LABELS ---------- */
.ecolabels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-default);
}
.ecolabel__k {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 8px;
}
.ecolabel__v { font-size: 17px; font-weight: 500; color: var(--text-primary); }
@media (max-width: 700px) {
  .ecolabels { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- 10. PRODUCT SCENES ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
.split--wide-right { grid-template-columns: 0.82fr 1.18fr; }
.split--wide-left  { grid-template-columns: 1.18fr 0.82fr; }
.split__media { position: relative; }
@media (max-width: 980px) {
  /* minmax(0,1fr), not 1fr: a plain 1fr track cannot shrink below the
     min-content of its widest child, which pushes the page sideways. */
  .split, .split--wide-right, .split--wide-left {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .split > * { min-width: 0; }
  .split--flip .split__copy { order: -1; }
}

/* ---------- 11. PRODUCT UI — POS ---------- */
.ui {
  border-radius: var(--r-panel);
  background: var(--surface);
  border: 1px solid var(--border-default);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(33,26,29,0.03);
}
.ui__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-warm);
}
.ui__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.ui__title {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pos { display: grid; grid-template-columns: 128px minmax(0, 1fr) 190px; min-height: 400px; }
.pos > * { min-width: 0; }
.pos__rail {
  border-right: 1px solid var(--border-default);
  padding: 18px 14px;
  background: var(--surface-warm);
}
.pos__railitem {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 9px 10px;
  border-radius: 6px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pos__railitem.is-on { background: var(--deyno-tint); color: var(--accent-ink); font-weight: 600; }
.pos__main { padding: 20px; }
.pos__tables { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.pos__table {
  aspect-ratio: 1 / 0.82;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--surface-warm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.pos__table small { font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.72; }
.pos__table.is-seated { background: var(--deyno-tint); border-color: var(--border-burgundy-soft); color: var(--accent-ink); }
.pos__table.is-hot { background: var(--deyno-primary); border-color: var(--accent-ink); color: #fff; }
.pos__aside { border-left: 1px solid var(--border-default); padding: 20px 18px; }
.pos__line {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 9px 0;
  border-bottom: 1px dashed var(--border-default);
  color: var(--text-secondary);
}
.pos__line span:last-child { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pos__total {
  display: flex; justify-content: space-between;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border-strong);
  font-size: 15px; font-weight: 600;
}
.pos__total span:last-child { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pos__stat { display: flex; gap: 26px; margin-top: 20px; }
.pos__stat div { flex: 1; }
.pos__stat b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pos__stat small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }

@media (max-width: 720px) {
  .pos { grid-template-columns: 1fr; min-height: 0; }
  .pos__rail { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-default); }
  .pos__railitem { white-space: nowrap; }
  .pos__aside { border-left: 0; border-top: 1px solid var(--border-default); }
  .pos__tables { grid-template-columns: repeat(3, 1fr); }
}

/* Homepage product scenes are a summary, not the full story — the detail
   lives on the Products page, so the panel here runs shorter. */
.pos.pos--brief { min-height: 296px; }
.pos.pos--brief .pos__rail { padding: 14px 12px; }
.pos.pos--brief .pos__railitem { padding: 7px 10px; font-size: 12px; }
.pos.pos--brief .pos__main { padding: 18px; }
.pos.pos--brief .pos__aside { padding: 18px 16px; }
.pos.pos--brief .pos__stat { margin-top: 14px; }
.pos.pos--brief .pos__stat b { font-size: 19px; }
.pos.pos--brief .pos__table { aspect-ratio: 1 / 0.52; }
.pos.pos--brief .pos__line { padding: 7px 0; }

/* ---------- 12. PRODUCT UI — PHONE / QR ---------- */
.phone {
  width: 300px;
  max-width: 78vw;
  aspect-ratio: 300 / 616;
  border-radius: var(--r-device);
  padding: 11px;
  background: #211A1D;
  box-shadow: 0 24px 60px rgba(33,26,29,0.16);
  position: relative;
  margin-inline: auto;
}
.phone--brief { width: 236px; }
.eco__phone { width: 212px; }
.phone__screen {
  height: 100%;
  border-radius: 30px;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.phone__notch {
  position: absolute; top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 5px; border-radius: 4px;
  background: rgba(255,255,255,0.34);
  z-index: 4;
}
.phone__view {
  position: absolute; inset: 0;
  padding: 42px 18px 18px;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.phone__view.is-on { opacity: 1; visibility: visible; transform: none; }
.phone__head {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600;
}
.phone__h { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 14px; }
.phone__row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--border-default);
}
.phone__row b { font-size: 13.5px; font-weight: 600; display: block; }
.phone__row small { font-size: 11.5px; color: var(--text-muted); }
.phone__row i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.phone__cta {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  background: var(--deyno-primary); color: #fff;
  border-radius: var(--r-control); padding: 13px;
  text-align: center; font-size: 13.5px; font-weight: 600;
}
.phone__pill {
  display: inline-block; margin: 0 6px 6px 0;
  padding: 7px 12px; border-radius: 20px;
  border: 1px solid var(--border-default);
  font-size: 12px; color: var(--text-secondary);
}
.phone__pill.is-on { background: var(--deyno-tint); border-color: var(--border-burgundy-soft); color: var(--accent-ink); font-weight: 600; }
.phone__ok {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 14px; text-align: center; padding-bottom: 40px;
}
.phone__ok .tick {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--deyno-tint); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
}
.phone__tabs {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.phone__tab {
  border: 1px solid var(--border-default);
  background: transparent;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.phone__tab.is-on { background: var(--deyno-primary); border-color: var(--accent-ink); color: #fff; }

/* ---------- 13. PRODUCT UI — DINING / DISCOVERY ---------- */
.rcard {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-default);
}
.rcard__img {
  aspect-ratio: 16 / 9;
  position: relative;
  background:
    linear-gradient(140deg, var(--deyno-800) 0%, var(--deyno-600) 46%, var(--champagne-dark) 100%);
}
.rcard__img::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}
.rcard__img[data-tone="2"] { background: linear-gradient(140deg, #2E2226 0%, var(--deyno-700) 60%, #8E5F44 100%); }
.rcard__img[data-tone="3"] { background: linear-gradient(140deg, var(--champagne-dark) 0%, #6B4A34 55%, var(--deyno-800) 100%); }
.rcard__badge {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  background: rgba(255,253,252,0.92);
  color: var(--deyno-primary);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px;
}
.rcard__body { padding: 18px 18px 20px; }
.rcard__name { font-size: 19px; font-weight: 600; letter-spacing: -0.018em; }
.rcard__meta { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
.rcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-default);
}
.rcard__avail { font-size: 12.5px; color: var(--text-secondary); }
.rcard__avail b { color: var(--text-primary); }
.rcard__btn {
  font-size: 13px; font-weight: 600; color: #fff;
  background: var(--deyno-primary);
  padding: 10px 18px; border-radius: var(--r-control);
  min-height: 40px; display: inline-flex; align-items: center;
}

.search {
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel);
  padding: 22px;
}
.search__label { font-size: 13px; color: var(--text-muted); }
.search__field {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 15px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  font-size: 16px; color: var(--text-primary);
  background: var(--background);
}
.search__caret {
  display: inline-block; width: 1.5px; height: 19px;
  background: var(--deyno-primary);
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.search__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.search__tag {
  padding: 8px 14px; border-radius: 22px;
  border: 1px solid var(--border-default);
  font-size: 13px; color: var(--text-secondary);
  background: var(--background);
  opacity: 0; transform: translateY(6px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.is-revealed .search__tag { opacity: 1; transform: none; }
.is-revealed .search__tag:nth-child(1) { transition-delay: 120ms; }
.is-revealed .search__tag:nth-child(2) { transition-delay: 200ms; }
.is-revealed .search__tag:nth-child(3) { transition-delay: 280ms; }
.is-revealed .search__tag:nth-child(4) { transition-delay: 360ms; }
.is-revealed .search__tag:nth-child(5) { transition-delay: 440ms; }

/* ---------- 14. PREMIUM DINING ---------- */
.premium {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--premium-ground);
  color: var(--text-on-dark);
  overflow: hidden;
}
.premium__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 620px at 22% 32%, rgba(120,8,41,0.42), transparent 66%),
    radial-gradient(760px 560px at 84% 76%, rgba(178,138,93,0.26), transparent 68%),
    var(--premium-ground);
}
.premium__bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--premium-photo, none);
  background-size: cover; background-position: center;
  opacity: var(--premium-photo-opacity, 0);
}
.premium__inner { position: relative; z-index: 2; text-align: center; }
.premium .h1 { margin-inline: auto; }
.premium__line {
  margin: 34px auto 0;
  max-width: 620px;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.45;
  color: var(--text-on-dark-muted);
}
.premium__words {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  justify-content: center;
  margin-top: 40px;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(19px, 2vw, 26px);
  color: var(--champagne-light);
}

/* ---------- 15. PARTNERS ---------- */
.partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 64px;
}
@media (max-width: 900px) { .partners { grid-template-columns: 1fr; } }
.partner__img {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-panel);
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--deyno-800), var(--deyno-600) 58%, var(--champagne-dark));
}
.partner__img[data-tone="2"] { background: linear-gradient(160deg, #2A1F23, var(--deyno-700) 55%, #93664A); }
.partner__img[data-tone="3"] { background: linear-gradient(160deg, var(--champagne-dark), #5E4231 50%, var(--deyno-900)); }
.partner__img::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}
.partner__name {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  color: var(--text-on-dark);
  font-size: 20px; font-weight: 600; letter-spacing: 0.02em;
}
.partner__name small {
  display: block; font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,253,252,0.72); margin-top: 4px;
}
.partner__note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- 16. FEATURE LISTS (inner pages) ---------- */
.deflist { margin-top: 70px; border-top: 1px solid var(--border-default); }
.deflist__row {
  display: grid;
  grid-template-columns: 0.38fr 0.62fr;
  gap: 48px;
  padding: 38px 0;
  border-bottom: 1px solid var(--border-default);
  align-items: start;
}
.deflist__row .h4 { letter-spacing: -0.015em; }
.deflist__row p { margin: 0; color: var(--text-secondary); font-size: 16.5px; line-height: 1.62; max-width: 620px; }
@media (max-width: 820px) {
  .deflist__row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
}

.numbered { counter-reset: n; margin-top: 70px; }
.numbered__row {
  counter-increment: n;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 28px;
  padding: 32px 0;
  border-top: 1px solid var(--border-default);
  align-items: start;
}
.numbered__row::before {
  content: counter(n, decimal-leading-zero);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  padding-top: 5px;
}
@media (max-width: 700px) { .numbered__row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- 17. FORMS ---------- */
.form { display: grid; gap: 20px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  padding: 14px 15px;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--deyno-100);
}
.field input:invalid:not(:placeholder-shown) { border-color: var(--deyno-500); }
.form__note { font-size: 13px; color: var(--text-muted); margin: 0; }
.form__ok {
  display: none;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--deyno-tint);
  border: 1px solid var(--border-burgundy-soft);
  color: var(--accent-ink);
  font-size: 15px; font-weight: 500;
}
.form__ok.is-on { display: block; }

.form__err {
  display: none;
  padding: 16px 18px;
  border-radius: var(--r-control);
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  color: var(--err-ink);
  font-size: 15px;
}
.form__err.is-on { display: block; }

/* honeypot: off-screen for people, present for bots */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contactcard {
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel);
  padding: 28px;
  background: var(--surface);
}
.contactcard + .contactcard { margin-top: 18px; }
.contactcard .h4 { margin-bottom: 8px; }
.contactcard p { margin: 0; color: var(--text-secondary); font-size: 15.5px; }

/* ---------- 18. PAGE HEAD (inner pages) ---------- */
.pagehead {
  padding-block: 190px 96px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-default);
}
@media (max-width: 760px) { .pagehead { padding-block: 140px 64px; } }

/* ---------- 18b. LEGAL PAGES ---------- */
.legal { max-width: 720px; }
.legal .h3 { margin: 52px 0 14px; }
.legal .h3:first-of-type { margin-top: 0; }
.legal p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-secondary);
}
.legal__note {
  padding: 18px 20px;
  margin-bottom: 48px;
  background: var(--deyno-tint);
  border: 1px solid var(--border-burgundy-soft);
  border-radius: var(--r-control);
  color: var(--text-primary);
  font-size: 15.5px;
}
.legal__link {
  color: var(--accent-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--border-burgundy-soft);
}
.legal__link:hover { border-bottom-color: var(--accent-ink); }

/* ---------- 19. FOOTER ---------- */
.footer {
  background: var(--footer);
  color: var(--text-on-dark);
  padding-block: 84px 34px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
}
.footer__brand .logo { color: var(--text-on-dark); }
.footer__brand p {
  margin: 22px 0 0;
  color: var(--text-on-dark-muted);
  font-size: 15px;
  max-width: 300px;
  line-height: 1.6;
}
.footer h5 {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--deyno-300);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer ul a {
  font-size: 14.5px;
  color: var(--text-on-dark-muted);
  transition: color var(--t-fast) var(--ease);
}
.footer ul a:hover { color: var(--text-on-dark); }
.footer__bot {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,253,252,0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(238,223,228,0.66);
}
.footer__bot a:hover { color: var(--text-on-dark); }
@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------- 19b. HOVER & FOCUS ----------
   Calm, short, single-property moves. Real links and buttons get a pointer
   cursor and a lift; simulated product UI gets feedback without a pointer,
   so nothing pretends to be clickable that isn't. */

a[href], button, .btn, .phone__tab { cursor: pointer; }

/* Buttons ------------------------------------------------------------- */
.btn {
  transform: translateY(0);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 90ms; }
.btn--primary:hover { box-shadow: 0 6px 18px rgba(120, 8, 41, 0.22); }
.btn--on-dark:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); }
.btn--secondary:hover { box-shadow: 0 4px 14px rgba(120, 8, 41, 0.10); }

/* Logo ---------------------------------------------------------------- */
.logo { transition: opacity var(--t-fast) var(--ease); }
.logo:hover { opacity: 0.72; }

/* Text links ---------------------------------------------------------- */
.textlink:hover { color: var(--deyno-primary-hover); }
.bg-dark .textlink:hover, .bg-deep .textlink:hover { color: var(--deyno-200); }

/* Footer links -------------------------------------------------------- */
.footer ul a {
  display: inline-block;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer ul a:hover { transform: translateX(3px); }
.footer__bot a { transition: color var(--t-fast) var(--ease); }

/* Menu button --------------------------------------------------------- */
.burger:hover span { background: var(--deyno-primary); }
.header.on-dark:not(.is-solid) .burger:hover span { background: var(--deyno-200); }

/* Restaurant cards ---------------------------------------------------- */
.rcard {
  transition: border-color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.rcard__img { overflow: hidden; }
.rcard__img::after {
  transition: transform 620ms var(--ease);
}
.rcard:hover {
  transform: translateY(-4px);
  border-color: var(--border-burgundy-soft);
  box-shadow: 0 14px 34px rgba(33, 26, 29, 0.08);
}
.rcard:hover .rcard__img::after { transform: scale(1.045); }
.rcard__btn { transition: background-color var(--t-fast) var(--ease); }
.rcard:hover .rcard__btn { background: var(--deyno-primary-hover); }

/* Partner tiles ------------------------------------------------------- */
.partner__img { transition: transform var(--t-mid) var(--ease); }
.partner__img::after { transition: transform 700ms var(--ease); }
.partner__name { transition: transform var(--t-mid) var(--ease); }
.partner__img:hover { transform: translateY(-4px); }
.partner__img:hover::after { transform: scale(1.05); }
.partner__img:hover .partner__name { transform: translateY(-3px); }

/* Contact cards ------------------------------------------------------- */
.contactcard {
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.contactcard:hover { border-color: var(--border-burgundy-soft); transform: translateY(-2px); }

/* DeynoQR tabs -------------------------------------------------------- */
.phone__tab { transform: translateY(0); }
.phone__tab:hover { border-color: var(--accent-ink); color: var(--accent-ink); transform: translateY(-2px); }
.phone__tab.is-on:hover { color: #fff; background: var(--deyno-primary-hover); border-color: var(--deyno-primary-hover); }

/* Simulated product UI — feedback, but no pointer cursor --------------- */
.pos__railitem:hover { background: var(--surface); color: var(--text-primary); }
.pos__railitem.is-on:hover { background: var(--deyno-tint); color: var(--accent-ink); }
.pos__table { transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease), transform var(--t-fast) var(--ease); }
.pos__table:hover { transform: translateY(-2px); border-color: var(--border-burgundy-soft); }
.phone__pill { transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.phone__pill:hover { border-color: var(--border-burgundy-soft); color: var(--accent-ink); }
.search__tag { transition-property: opacity, transform, background-color, border-color, color; }
.search__tag:hover { border-color: var(--border-burgundy-soft); color: var(--accent-ink); background: var(--deyno-tint); }

/* Form controls ------------------------------------------------------- */
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-dark); }

/* Keyboard parity: anything that lifts on hover lifts on focus too ----- */
.btn:focus-visible, .phone__tab:focus-visible { transform: translateY(-2px); }

/* Coarse pointers have no hover — never leave a stuck hover state ------ */
@media (hover: none) {
  .btn:hover, .phone__tab:hover, .rcard:hover, .partner__img:hover,
  .contactcard:hover, .pos__table:hover { transform: none; box-shadow: none; }
  .rcard:hover .rcard__img::after, .partner__img:hover::after { transform: none; }
  .footer ul a:hover { transform: none; }
}

/* ---------- 13b. DINING + DISCOVERY (merged scene) ---------- */
.dining__top { align-items: center; }
.dining__results {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 26px;
  align-items: start;
}
.rcard--lead .rcard__img { aspect-ratio: 21 / 9; }
.rcard--peek { opacity: 0.6; }
.rcard--peek .rcard__img { aspect-ratio: 16 / 10; }
/* the single result that sits under the search on the homepage */
.rcard--result { margin-top: 20px; }
.rcard--result .rcard__img { aspect-ratio: 21 / 7; }
.dining__line {
  margin: 56px 0 0;
  text-align: center;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

@media (max-width: 900px) {
  /* one restaurant as the hero object, the next peeking off the edge */
  .dining__results {
    grid-template-columns: 88% 42%;
    gap: 16px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .dining__results::-webkit-scrollbar { display: none; }
  .dining__results > * { scroll-snap-align: start; }
  .rcard--lead .rcard__img { aspect-ratio: 16 / 10; }
}

/* ---------- 21. MOBILE REBUILD ----------
   Small screens get their own states, not shrunken desktop ones. */
@media (max-width: 980px) {

  /* Navigation: large rows, generous targets */
  .header__inner { height: 72px; }
  .burger { width: 48px; height: 48px; }
  .mobilenav { padding-top: 104px; }
  .mobilenav__list a {
    padding: 20px 0;
    min-height: 60px;
    display: flex;
    align-items: center;
    font-size: 23px;
  }
  .mobilenav__group {
    padding: 18px 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-subtle);
  }
  .mobilenav__list .mobilenav__sub a {
    font-size: 19px;
    min-height: 52px;
    padding: 12px 0 12px 16px;
    color: var(--text-secondary);
  }
  .mobilenav__foot .btn { min-height: 56px; }

  /* Touch targets: 48px minimum, comfortable spacing */
  .btn { min-height: 52px; padding: 15px 26px; }
  .hero .btn, .btn-row .btn { min-height: 54px; flex: 1 1 auto; }
  .btn-row { gap: 12px; }
  .textlink { min-height: 48px; align-items: center; }
  .phone__tab { min-height: 46px; padding: 10px 18px; }
  .search__tag { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; }
  .chain__btn { min-height: 52px; justify-content: flex-start; padding-top: 2px; }
  .footer ul a { display: inline-flex; min-height: 44px; align-items: center; }
  .footer__bot a { display: inline-flex; min-height: 44px; align-items: center; }
  .footer__bot { gap: 4px 22px; }
  .header .logo, .footer__brand .logo { display: inline-flex; align-items: center; min-height: 48px; }

  /* Hero: headline, one CTA row, and a simplified POS crop */
  .hero__stage .ui--hero { border-radius: var(--r-panel); }
  .pos--hero .pos__hide-sm { display: none; }
  .pos--hero { grid-template-columns: 1fr; }
  .pos--hero .pos__main { padding: 20px; }
  .pos--hero .pos__tables { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
  .pos--hero .pos__table { font-size: 12.5px; }
  .pos--hero .pos__stat b { font-size: 24px; }
  .pos__h { font-size: 15px; }

  /* QR phone stays large — this product belongs on a phone */
  .phone { width: min(78vw, 360px); }

  /* Ecosystem: a sequential reveal, each product owning the screen */
  .eco__head .h2 { font-size: clamp(28px, 7vw, 38px); }
  .eco__row { gap: 56px; }
  .eco__item + .eco__item { position: relative; }
  .eco__item + .eco__item::before {
    content: "";
    position: absolute;
    top: -34px; left: 50%;
    width: 1px; height: 22px;
    background: var(--border-strong);
  }
  .eco__cap { margin-top: 18px; }
  .eco__cap b { font-size: 18px; }
  .eco__connect { margin-top: 44px; font-size: 16px; }
}

@media (max-width: 560px) {
  .pos--hero .pos__tables { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pos--hero .pos__table { aspect-ratio: 1 / 0.62; }
  .dining__results { grid-template-columns: 86% 40%; }
  .btn-row .btn { width: 100%; }
}

/* 320px is a real width, not an edge case */
/* not enough height for the tall nav rows */
@media (max-height: 700px) and (max-width: 980px) {
  .mobilenav { padding-top: 88px; }
  .mobilenav__list a { padding: 13px 0; min-height: 48px; font-size: 20px; }
  .mobilenav__list .mobilenav__sub a { min-height: 44px; padding: 9px 0 9px 16px; font-size: 17px; }
  .mobilenav__group { padding: 12px 0 4px; }
  .mobilenav__foot { padding-top: 24px; }
}

@media (max-width: 360px) {
  :root { --gutter: 18px; }
  .display { font-size: clamp(36px, 11vw, 44px); }
  .h1 { font-size: clamp(32px, 10vw, 42px); }
  .h2 { font-size: clamp(27px, 8.6vw, 34px); }
  .eco__head .h2 { font-size: clamp(24px, 8vw, 30px); }
  .chain__label { font-size: 8px; }
  .phone { width: min(82vw, 300px); }
  .pos__stat { gap: 14px; }
  .pos__stat b { font-size: 19px; }
  .dining__line { font-size: 22px; }
}

/* ---------- 20. REVEAL ---------- */
/* Reveals only hide themselves once JS is confirmed, so the page is never
   parked invisible for a reader (or a thumbnail) if scripts fail. */
.reveal {
  transition: opacity 820ms var(--ease), transform 820ms var(--ease);
  will-change: opacity, transform;
}
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .js .eco__item, .js .eco__connect { opacity: 1; }
  .eco__item { transform: none !important; }
  .js .eco__rule { transform: scaleX(1); }
  .btn:hover, .phone__tab:hover, .rcard:hover, .partner__img:hover,
  .contactcard:hover, .pos__table:hover, .footer ul a:hover { transform: none; }
  .rcard:hover .rcard__img::after, .partner__img:hover::after { transform: none; }
  .story { height: auto !important; }
  .story__layer { opacity: 1; transform: none; position: relative; }
  .story__sticky { position: static; height: auto; overflow: visible; }
  .story__grid { grid-template-columns: 1fr; }
  .story__stage { height: auto; }
  .story__layer + .story__layer { margin-top: 28px; }
  .search__tag { opacity: 1; transform: none; }
}

/* ---------- 22. CLOSING SCENE ----------
   The mood line and the call to action are one passage, not two screens. */
.premium--close { min-height: 0; padding-block: var(--section-y-lg); }
.premium__cta { margin-top: 44px; }
@media (max-width: 760px) {
  .premium__cta { margin-top: 34px; }
  .premium__cta .btn { flex: 1 1 100%; }
}

/* ---------- 23. TIGHTER SMALL-SCREEN RHYTHM ----------
   The page must not feel like a marathon on a phone. */
@media (max-width: 980px) {
  .hero__inner { padding-block: 100px 52px; }
  .hero__stage { margin-top: 30px; }
  .eco__row { gap: 26px; margin-top: 28px; }
  .eco__connect { margin-top: 30px; }
  .eco__head .lead { margin-top: 12px; }
  .story__end { padding-block: 40px 0; }
  .chain { margin-top: 24px; }
  .chain__close { margin-top: 24px; }
  .rcard--result { margin-top: 16px; }
}
@media (max-width: 760px) {
  /* the phone inside the ecosystem is a thumbnail there, not the product */
  .eco__phone { width: 178px; }
  .phone--brief { width: 212px; }
  .premium__words { margin-top: 30px; gap: 8px 24px; }
}

/* The ecosystem convergence is a pinned, scroll-driven animation. It needs a
   pane tall enough to hold the heading and the three product stages between
   the fixed header and the fold — so it only runs where such a pane exists.
   The old rule pinned it at every height with 64px of top padding, which hid
   the heading behind the header and cut the captions off the bottom.
   The scroll length lives here rather than in a style attribute so the short
   -screen rule below can take it away. */
/* The three-item row this section used to pin and animate has been removed,
   so there is nothing left to scroll through. Pinning it now would just be
   360px of dead scroll past a heading. It stands at its own height. */
@media (min-width: 981px) and (min-height: 881px) {
  [data-eco] { height: auto; }
  [data-eco] .story__sticky {
    position: static;
    height: auto;
    padding-top: var(--section-y, 96px);
    padding-bottom: var(--section-y, 96px);
    overflow: visible;
  }
}
/* Not enough headroom to pin: let the section stand at its natural height and
   stack normally. The script sees no travel and settles it in its finished
   state, so nothing is lost but the movement. */
@media (max-height: 880px) {
  [data-eco] { height: auto; }
  [data-eco] .story__sticky {
    position: static;
    height: auto;
    padding-top: var(--section-y, 96px);
    padding-bottom: var(--section-y, 96px);
    overflow: visible;
  }
}

/* =========================================================
   24. PREMIUM REFINEMENT
   Luxury reads as restraint: fewer things, smaller, further
   apart, with the detail sharpened rather than added to.
   ========================================================= */

/* ---- 24a. The product is an object on a page, not the page ----
   Every panel is capped and centred inside its column, so air —
   not interface — is what surrounds it. */
.split__media .ui,
.split__media .search,
.split__media .rcard {
  max-width: 560px;
  margin-inline: auto;
}
.split__media .search + .rcard { max-width: 560px; }

/* ---- 24b. Staged ground ----
   A panel with a flat drop shadow reads as a screenshot. A panel lit
   from behind and grounded with a soft contact shadow reads as an object. */
/* The glow is painted on the element itself, never on an oversized
   pseudo-element — anything wider than its parent pushes the page sideways. */
.split__media {
  position: relative;
  background: radial-gradient(122% 104% at 50% 48%, rgba(120, 8, 41, 0.06), transparent 72%);
}
.split__media > * { position: relative; z-index: 1; }

.ui, .rcard, .search { box-shadow: var(--shadow-panel); }
.phone { box-shadow: var(--shadow-device); }

/* ---- 24c. Smaller interface, sharper detail ----
   Every value below is a step down from the last version. Restraint is
   the whole point: the interface should be legible, never loud. */
.ui__bar { padding: 10px 14px; }
.ui__dot { width: 6.5px; height: 6.5px; }
.ui__title { font-size: 10.5px; letter-spacing: 0.09em; }

.pos { min-height: 348px; }
.pos__rail { padding: 15px 11px; }
.pos__railitem { font-size: 11.5px; padding: 7px 9px; border-radius: 5px; }
.pos__main { padding: 17px; }
.pos__tables { gap: 8px; margin-top: 12px; }
.pos__table { border-radius: 7px; font-size: 11px; gap: 2px; }
.pos__table small { font-size: 8.5px; letter-spacing: 0.05em; }
.pos__aside { padding: 17px 15px; }
.pos__line { font-size: 11.5px; padding: 8px 0; }
.pos__total { font-size: 13.5px; margin-top: 12px; padding-top: 12px; }
.pos__stat { gap: 22px; margin-top: 17px; }
.pos__stat b { font-size: 19px; }
.pos__stat small { font-size: 9.5px; letter-spacing: 0.1em; }
.pos__h { font-size: 15px; }

.phone__head { font-size: 9px; letter-spacing: 0.16em; }
.phone__h { font-size: 18px; margin: 5px 0 12px; }
.phone__row { padding: 10px 0; }
.phone__row b { font-size: 12.5px; }
.phone__row small { font-size: 10.5px; }
.phone__row i { font-size: 12px; }
.phone__cta { padding: 12px; font-size: 12.5px; }
.phone__pill { font-size: 11px; padding: 6px 11px; }
.phone__tab { font-size: 11.5px; padding: 7px 14px; }

.rcard__body { padding: 16px 16px 18px; }
.rcard__name { font-size: 17px; }
.rcard__meta { font-size: 12.5px; }
.rcard__avail { font-size: 11.5px; }
.rcard__btn { font-size: 12px; padding: 9px 16px; min-height: 38px; }
.rcard__badge { font-size: 9.5px; padding: 5px 9px; letter-spacing: 0.12em; }

.search { padding: 20px; }
.search__label { font-size: 12px; }
.search__field { padding: 13px 16px; font-size: 15px; }
.search__tag { font-size: 12px; padding: 7px 12px; }

/* The hero panel is the largest object on the site — it earns the most air. */
@media (min-width: 981px) {
  .hero__stage .ui--hero { max-width: 640px; margin-left: auto; }
}

/* ---- 24d. Typographic refinement ----
   The eyebrow gains a short champagne rule and wider tracking; the
   numerals lock to tabular so figures line up like a printed menu. */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--champagne);
  flex: 0 0 auto;
}
.center .eyebrow, .eyebrow.center, .eco__head .eyebrow { justify-content: center; }

.display, .h1, .h2 { font-weight: 500; }
.h3 { font-weight: 500; }

.lead {
  line-height: 1.58;
  color: var(--text-secondary);
}

/* figures should behave like typeset numbers everywhere, not like text */
.pos__stat b, .pos__line span:last-child, .pos__total span,
.phone__row i, .rcard__avail, .search__field {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- 24e. Hairline detail ----
   One champagne hairline, used only where a section turns. */
.premium__line { color: var(--text-on-dark-muted); }
.premium__words {
  position: relative;
  padding-top: 34px;
}
.premium__words::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
}

.eco__cap span { letter-spacing: 0.2em; font-size: 10px; }
.eco__cap b { font-size: 15px; margin-top: 6px; }
.eco__rule { background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent); }

/* ---- 24f. Motion: considered, not eager ---- */
:root { --t-mid: 400ms; --t-slow: 1050ms; }

/* ---- 24g. Buttons: quieter, more precise ---- */
.btn { padding: 14px 28px; font-size: 14.5px; letter-spacing: 0.005em; }
.btn--secondary { border-color: var(--border-strong); color: var(--text-primary); }
.btn--secondary:hover { border-color: var(--accent-ink); color: var(--accent-ink); background: transparent; }
.header .btn { padding: 11px 22px; font-size: 13.5px; }

/* ---- 24h. Small screens keep the same restraint ---- */
@media (max-width: 760px) {
  .eyebrow { font-size: 10.5px; letter-spacing: 0.2em; gap: 10px; }
  .eyebrow::before { width: 18px; }
  .split__media .ui, .split__media .search, .split__media .rcard { max-width: none; }
}

/* ---- 24i. Image placeholders: a dim room, not a brand swatch ----
   With no photography yet, these areas stand in for it. A full-saturation
   burgundy-to-bronze gradient reads as a colour swatch; a low, warm,
   desaturated tone with a single light source reads as a room at dinner —
   which is what will eventually sit here. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.rcard__img,
.partner__img {
  background:
    radial-gradient(118% 88% at 76% 8%, rgba(203, 166, 118, 0.20), transparent 58%),
    radial-gradient(90% 70% at 18% 96%, rgba(120, 8, 41, 0.26), transparent 62%),
    linear-gradient(158deg, #241B1F 0%, #382730 58%, #241C20 100%);
}
.rcard__img[data-tone="2"],
.partner__img[data-tone="2"] {
  background:
    radial-gradient(112% 84% at 22% 10%, rgba(203, 166, 118, 0.17), transparent 56%),
    radial-gradient(96% 74% at 88% 92%, rgba(120, 8, 41, 0.20), transparent 60%),
    linear-gradient(152deg, #1F1A1C 0%, #33262B 56%, #221B1E 100%);
}
.rcard__img[data-tone="3"],
.partner__img[data-tone="3"] {
  background:
    radial-gradient(120% 90% at 60% 6%, rgba(215, 190, 157, 0.20), transparent 60%),
    radial-gradient(90% 72% at 10% 90%, rgba(63, 4, 22, 0.34), transparent 64%),
    linear-gradient(164deg, #2A2124 0%, #3E2C31 52%, #262023 100%);
}

/* Fine grain over the tone. Without it a gradient reads as flat vector fill;
   with it the area reads as an image that simply has not arrived yet. */
.rcard__img::before,
.partner__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.055;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.rcard__img::after,
.partner__img::after { z-index: 2; }
.rcard__badge, .partner__name { z-index: 3; }

/* The badge stops being a solid chip and becomes a piece of glass. */
.rcard__badge {
  background: rgba(255, 253, 252, 0.14);
  backdrop-filter: blur(9px) saturate(140%);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  border: 1px solid rgba(255, 253, 252, 0.24);
  color: var(--text-on-dark);
  font-weight: 600;
}

/* ---- 24j. Drop the fake window chrome ----
   Three traffic-light dots make a panel look like a screenshot of an app.
   A single quiet label makes it look like the product. */
.ui__dot { display: none; }
.ui__title { margin-left: 0; }
.ui__bar { padding: 11px 16px; }

/* The hero panel should hug its content — an empty band inside a product
   panel reads as an unfinished screen, not as generous spacing. */
@media (min-width: 981px) {
  .pos.pos--hero { min-height: 0; }
  .pos--hero .pos__stat { margin-top: 20px; padding-top: 0; }
}

/* =========================================================
   25. PRODUCT STATUS
   The three products are not equally mature, and pretending
   otherwise sets a diner up to expect a table tonight. Stated
   quietly — a dot and a word, never a badge shouting for space.
   ========================================================= */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.status--now   { color: var(--accent-ink); }
.status--early { color: var(--champagne-dark); }
.status--soon  { color: var(--text-subtle); }

.bg-dark .status--now,   .bg-deep .status--now,
.premium .status--now    { color: var(--deyno-300); }
.bg-dark .status--early, .bg-deep .status--early,
.premium .status--early  { color: var(--champagne-light); }
.bg-dark .status--soon,  .bg-deep .status--soon,
.premium .status--soon   { color: rgba(238, 223, 228, 0.6); }

/* sits under a page headline, next to a sentence of context */
.statusline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}
.statusline .status { margin-right: 2px; }

/* the eyebrow already runs as a flex row with its champagne rule, so a
   status sitting beside it joins that row rather than starting a new one */
.eyebrow .status {
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--border-default);
}
.bg-dark .eyebrow .status, .bg-deep .eyebrow .status {
  border-left-color: rgba(255, 253, 252, 0.2);
}

/* one quiet line under the closing buttons, naming both audiences */
.premium__aside {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--text-on-dark-muted);
  opacity: 0.78;
}

/* Six nav items instead of five — below about 1100px the row needs to
   tighten or it wraps onto a second line and doubles the header height. */
/* Six nav items plus a CTA and the theme control — below ~1100px the row
   still needs to tighten a little or it wraps and doubles the header. */
@media (min-width: 981px) and (max-width: 1119px) {
  .nav { gap: 20px; }
  .nav__link { font-size: 14px; }
  .header .btn { padding: 11px 18px; font-size: 13px; }
  .logo svg, .logo img { width: 112px; }
}
@media (min-width: 1120px) and (max-width: 1319px) {
  .nav { gap: 27px; }
  .nav__link { font-size: 14.5px; }
}

/* Five footer columns need a little more room than four before they crowd */
@media (min-width: 901px) and (max-width: 1240px) {
  .footer__top { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; }
  .footer ul a { font-size: 14px; }
}

/* ---------- 26. DARK MODE TOKENS ---------- */
/* Declared in :root above first; only redefined here. */
/* The site opens light for everyone. Dark is something the visitor chooses,
   never something the operating system decides on their behalf — so there is
   no prefers-color-scheme block here, only the explicit stamp. */
:root { color-scheme: light; }
:root[data-deyno-theme="dark"] { color-scheme: dark; }

:root[data-deyno-theme="dark"] {
  /* Surfaces — the light warm scale, inverted into maroon */
  --background:          #150D10;
  --surface:             #211519;
  --surface-warm:        #1C1215;
  --surface-warm-strong: #24171B;
  --neutral-strong:      #2E1D23;
  --deyno-tint:          #331522;

  /* Text */
  --text-primary:        #F8F2F1;
  --text-secondary:      #D2C4C7;
  --text-muted:          #A3959A;
  --text-subtle:         #8D7C80;

  /* Borders */
  --border-default:       #33232A;
  --border-strong:        #46323A;
  --border-burgundy-soft: #5C2B3C;
  --border-dark:          #7A4356;

  /* Brand. The fill lifts just enough to hold an edge against the
     ground; the ink lifts far enough to be read on it. */
  --deyno-primary:       #8E1033;
  --deyno-primary-hover: #A5183F;
  --deyno-primary-dark:  #6B0724;
  --accent-ink:          #E9A3B5;

  /* The two scenes that were already dark now sit deeper than the page,
     so the closing moment and the footer still read as their own places
     rather than dissolving into it. */
  --dark-section: #2B0A18;
  --footer:       #240814;

  --champagne-dark:  #C89B69;
  --champagne:       #D2AC7F;
  --champagne-light: #E3CBAA;
  --champagne-soft:  #2A1F16;

  --text-on-dark:       #FFFDFC;
  --text-on-dark-muted: #E6D4D9;

  /* Values that turn over but are not palette entries */
  --header-bg:      rgba(21, 13, 16, 0.88);
  --premium-ground: #1C0810;
  --err-bg:         #2E1219;
  --err-border:     #5C2B3C;
  --err-ink:        #F0B6C3;
  /* On a dark ground a dark shadow does nothing. Separation comes from the
     borders instead, plus a faint burgundy bloom so panels still sit on
     something rather than floating in flat black. */
  --shadow-panel:
    0 1px 1px rgba(0, 0, 0, 0.30),
    0 14px 30px -18px rgba(0, 0, 0, 0.55),
    0 40px 72px -48px rgba(142, 16, 51, 0.42);
  --shadow-device:
    0 2px 6px rgba(0, 0, 0, 0.40),
    0 20px 40px -22px rgba(0, 0, 0, 0.62),
    0 58px 92px -58px rgba(142, 16, 51, 0.50);
}

/* ---------- 27. THEME TOGGLE ----------
   One control, top right, next to the call to action. Both icons live in
   the button; CSS shows whichever names the theme you would switch TO, so
   the icon is a promise rather than a status readout. */
.themetoggle {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--r-control);
  color: var(--text-secondary);
  cursor: pointer;
  margin-left: 4px;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.themetoggle:hover {
  color: var(--accent-ink);
  border-color: var(--border-burgundy-soft);
  background: var(--deyno-tint);
}
.themetoggle svg { width: 17px; height: 17px; display: block; }
.themetoggle .i-moon { display: block; }
.themetoggle .i-sun  { display: none; }

/* in dark, offer the sun */
:root[data-deyno-theme="dark"] .themetoggle .i-moon { display: none; }
:root[data-deyno-theme="dark"] .themetoggle .i-sun  { display: block; }

/* over a dark hero before the header solidifies */
.header.on-dark:not(.is-solid) .themetoggle {
  color: var(--text-on-dark);
  border-color: rgba(255, 253, 252, 0.3);
}
.header.on-dark:not(.is-solid) .themetoggle:hover {
  background: rgba(255, 253, 252, 0.1);
  border-color: rgba(255, 253, 252, 0.6);
  color: var(--text-on-dark);
}

/* it stays on the bar at every width — a theme control hidden behind a
   hamburger is a theme control nobody finds */
@media (max-width: 980px) {
  .themetoggle { margin-left: auto; margin-right: 2px; }
  .burger { margin-left: 0; }
}

/* The wordmark ships as two fixed-colour files, so it cannot follow a token.
   Both sit in the anchor and the theme chooses — the burgundy mark on the
   dark ground measures about 1.6:1, which is no mark at all. */
.logo__dark { display: none; }
:root[data-deyno-theme="dark"] .logo__light { display: none; }
:root[data-deyno-theme="dark"] .logo__dark  { display: block; }
/* over a dark hero, before the header solidifies, the white mark wins
   in either theme */
.header.on-dark:not(.is-solid) .logo__light { display: none; }
.header.on-dark:not(.is-solid) .logo__dark  { display: block; }

/* ---------- 28. THEME HINT ----------
   A short label above the toggle on arrival, so the control is noticed
   rather than discovered. It waits for the visitor's attention — the
   moment the pointer moves, it starts its one-second exit. */
.themetoggle { position: relative; }

.themehint {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 3;
  padding: 7px 11px;
  border-radius: 6px;
  background: var(--text-primary);
  color: var(--background);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  box-shadow: 0 6px 18px -8px rgba(33, 26, 29, 0.4);
}
/* the little pointer up towards the button */
.themehint::before {
  content: "";
  position: absolute;
  right: 14px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 1px;
}
.themehint.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .themehint { transition: none; transform: none; }
}
/* on a narrow bar it must not run off the right edge */
@media (max-width: 400px) {
  .themehint { font-size: 11px; padding: 6px 9px; }
}

/* =========================================================
   29. DEYNOQR PAGE
   The clearest page on the site. Someone who has never heard
   of Deyno should understand the product from the numbered
   steps alone, without reading a paragraph.
   ========================================================= */
.qrhead .h1 { max-width: 16ch; }
.qrhead .lead { max-width: 54ch; }
.qrhead__note {
  margin: 26px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}

/* ---- numbered steps: the spine of the page ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 54px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.step {
  background: var(--surface);
  padding: 30px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--deyno-tint);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.step .h4 { margin: 0; }
.step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 980px) {
  .steps, .steps--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .steps, .steps--three { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 24px 20px 26px; }
}

/* ---- plain capability cards ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 52px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel);
  padding: 26px 24px 28px;
}
.card .h4 { margin: 0 0 10px; }
.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-secondary);
}
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* a denser definition list, for the five-things column */
.deflist--tight { margin-top: 34px; }
.deflist--tight .deflist__row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
.deflist--tight .deflist__row p { font-size: 15px; }

/* ---------- 30. QR HERO ----------
   The hero object is now the thing a guest actually holds, with the
   table code beside it — the whole product in one glance. */
.hero__stage--qr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
}
.phone--hero { width: clamp(230px, 21vw, 292px); margin-inline: 0; }

/* the table tent: a real object, not an icon */
.qrtag {
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel);
  padding: 20px 20px 22px;
  text-align: center;
  box-shadow: var(--shadow-panel);
  flex: 0 0 auto;
}
.qrtag__code {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  /* the code keeps its white plate in both themes — a scanner needs the
     contrast, and a printed table tent is white anyway */
  background: #FFFFFF;
  padding: 5px;
}
.qrtag__txt b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.qrtag__txt span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .hero__stage--qr { gap: 20px; }
  .phone--hero { width: min(58vw, 250px); }
  .qrtag { padding: 16px 16px 18px; }
  .qrtag__code { width: 76px; height: 76px; }
}
@media (max-width: 430px) {
  .hero__stage--qr { flex-direction: column; }
  .qrtag { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 18px; }
  .qrtag__code { margin: 0; width: 58px; height: 58px; }
}

/* the homepage QR moment: the four steps carry it, so the heading is centred
   and the row sits directly under it with nothing else competing */
.qrintro { text-align: center; max-width: 720px; margin: 0 auto; }
.qrintro .h2 { margin-inline: auto; font-size: clamp(28px, 3.2vw, 46px); }
.qrintro .eyebrow { justify-content: center; }
.qrintro .lead { margin-top: 16px; margin-inline: auto; }
.steps--home { margin-top: 46px; }

/* =========================================================
   31. QR SHOWCASE
   Four large panels, two to a row. Each one carries a real,
   full-size piece of the DeynoQR interface rather than a
   thumbnail — the interface is the argument, so it is drawn
   at a size you can actually read.
   ========================================================= */
.showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 52px;
}
.show {
  position: relative;
  background: var(--surface-warm);
  border: 1px solid var(--border-default);
  border-radius: 26px;
  padding: 38px 38px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.show__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--deyno-tint);
  color: var(--accent-ink);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.show__t {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.08;
  color: var(--text-primary);
}
.show__d {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 40ch;
}
.show__stage {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

@media (max-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .show { padding: 30px 26px 0; min-height: 0; }
}

/* ---- a phone that reads as a phone ---- */
.dev {
  width: 264px;
  flex: 0 0 auto;
  border-radius: 34px 34px 0 0;
  background: #1B1417;
  padding: 8px 8px 0;
  box-shadow: 0 -2px 0 rgba(255,255,255,0.06) inset,
              0 20px 44px -22px rgba(33, 26, 29, 0.5);
}
.dev__scr {
  background: var(--surface);
  border-radius: 27px 27px 0 0;
  padding: 0 0 18px;
  overflow: hidden;
}
/* status bar: the detail that makes a drawn phone read as a real one */
.dev__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dev__island {
  width: 62px; height: 17px;
  border-radius: 20px;
  background: #1B1417;
}
.dev__sig { display: flex; align-items: center; gap: 4px; }
.dev__sig svg { width: 15px; height: 11px; display: block; color: var(--text-primary); }
.dev__body { padding: 6px 16px 0; }

.dev__brand {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-default);
}
.dev__brand small {
  display: block;
  font-size: 7.5px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 500;
}

/* a menu row with a picture slot */
.dish { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-default); }
.dish__txt { flex: 1 1 auto; min-width: 0; }
.dish__n { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.dish__m {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dish__p { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* the picture slot: a warm tonal panel until real food photography exists,
   set through --photo the same way every other image area on the site is */
.dish__img {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background:
    radial-gradient(88% 74% at 68% 22%, rgba(214, 178, 132, 0.55), transparent 64%),
    radial-gradient(70% 60% at 22% 84%, rgba(150, 62, 84, 0.28), transparent 66%),
    linear-gradient(148deg, #EDE1D6 0%, #DFC8BC 52%, #E8DACD 100%);
  position: relative;
  overflow: hidden;
}
.dish__img::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}

/* the floating labels that sit over the device, as on the reference */
.pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text-primary);
  color: var(--background);
  border-radius: 40px;
  padding: 10px 8px 10px 16px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(33, 26, 29, 0.5);
  z-index: 2;
}
.pill i {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--background);
  color: var(--text-primary);
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.pill--a { left: -6px;  bottom: 128px; }
.pill--b { right: -10px; bottom: 214px; }
.pill--c { right: 6px;  bottom: 56px; background: var(--deyno-primary); color: #fff; }
.pill--c i { background: #fff; color: var(--deyno-primary); }

/* ---- the bill panel, drawn at full size like the reference ---- */
.bill {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--border-default);
  border-bottom: 0;
  padding: 22px 22px 26px;
  box-shadow: 0 20px 44px -26px rgba(33, 26, 29, 0.4);
}
.bill__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  color: var(--text-primary);
}
.bill__row + .bill__row { border-top: 1px solid var(--border-default); }
.bill__q {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.bill__n { flex: 1 1 auto; font-weight: 500; }
.bill__v { font-weight: 600; font-variant-numeric: tabular-nums; }
.bill__tot {
  margin-top: 14px; padding-top: 18px;
  border-top: 1px solid var(--border-strong);
  display: flex; align-items: baseline; justify-content: space-between;
}
.bill__tot b { font-size: 17px; font-weight: 600; }
.bill__tot span { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bill__note { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.bill__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.bill__b {
  border-radius: 10px;
  padding: 13px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.bill__b--ghost { background: var(--deyno-tint); color: var(--accent-ink); }
.bill__b--solid { background: var(--deyno-primary); color: #fff; }

/* ---- the table tent, drawn large ---- */
.tent {
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
  padding: 30px 38px 44px;
  text-align: center;
  box-shadow: 0 20px 44px -26px rgba(33, 26, 29, 0.4);
}
.tent__code {
  display: block;
  width: 152px; height: 152px;
  margin: 0 auto 16px;
  background: #FFFFFF;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 7px;
}
.tent__t { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.tent__s {
  margin-top: 5px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.scanframe { position: relative; }
.scanframe span {
  position: absolute;
  width: 26px; height: 26px;
  border: 2.5px solid var(--deyno-primary);
}
.scanframe span:nth-child(1) { top: -14px; left: -18px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.scanframe span:nth-child(2) { top: -14px; right: -18px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.scanframe span:nth-child(3) { bottom: 26px; left: -18px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.scanframe span:nth-child(4) { bottom: 26px; right: -18px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

@media (max-width: 900px) {
  .dev { width: 240px; }
  .pill { font-size: 12px; padding: 8px 7px 8px 13px; }
  .pill--a { left: 0; bottom: 118px; }
  .pill--b { right: 0; bottom: 196px; }
}
@media (max-width: 420px) {
  .show { padding: 26px 18px 0; border-radius: 20px; }
  .dev { width: 216px; }
  .pill--a, .pill--b, .pill--c { display: none; }   /* nothing overlaps the screen on a phone */
}

/* =========================================================
   32 · ANCHOR OFFSET
   The header is fixed, so a section jumped to from a link would
   otherwise start underneath it. Section padding covers most of
   the gap; this guarantees the heading clears the bar.
   ========================================================= */
#deynoqr { scroll-margin-top: 84px; }

/* =========================================================
   33 · DEYNOQR PANEL INTERIORS
   Each panel shows the moment it describes, drawn large
   enough to read: the camera's own view of the code, one
   dish with its add button, the order with its prices, and
   the ways the bill can be settled.
   ========================================================= */

/* ---- 1 · the camera's view ---- */
.cam {
  width: 100%;
  max-width: 320px;
  border-radius: 26px 26px 0 0;
  background: #14100F;
  padding: 10px 10px 0;
  box-shadow: 0 22px 46px -24px rgba(20, 16, 15, 0.6);
}
.cam__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 10px;
  color: rgba(255, 255, 255, 0.62);
}
.cam__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #E0563F;
  box-shadow: 0 0 0 4px rgba(224, 86, 63, 0.18);
}
.cam__flash { width: 16px; height: 16px; display: block; }

/* the frame the lens is looking through: a dark table, lit in the middle */
.cam__view {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(58% 42% at 50% 44%, rgba(255, 246, 232, 0.30), transparent 72%),
    radial-gradient(120% 80% at 50% 118%, rgba(120, 8, 41, 0.30), transparent 70%),
    linear-gradient(168deg, #2A2124 0%, #1B1518 58%, #241A1E 100%);
}
/* the printed card on the table, seen at a slight angle */
.cam__card {
  position: relative;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 16px 16px 12px;
  transform: perspective(680px) rotateX(11deg) rotateZ(-1.4deg);
  box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.6);
}
.cam__code { display: block; width: 150px; height: 150px; }
.cam__label {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2A2124;
}
/* the viewfinder brackets */
.cam__b {
  position: absolute;
  width: 30px; height: 30px;
  border: 2.5px solid rgba(255, 255, 255, 0.9);
}
.cam__b--tl { top: 16%; left: 12%; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.cam__b--tr { top: 16%; right: 12%; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.cam__b--bl { bottom: 26%; left: 12%; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.cam__b--br { bottom: 26%; right: 12%; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
/* the sweep that says the code is being read */
.cam__line {
  position: absolute;
  left: 12%; right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 214, 0.95), transparent);
  box-shadow: 0 0 14px 2px rgba(255, 210, 180, 0.45);
  animation: camsweep 2.8s var(--ease, cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes camsweep {
  0%, 100% { top: 18%; opacity: 0; }
  12%      { opacity: 1; }
  50%      { top: 70%; opacity: 1; }
  62%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cam__line { animation: none; top: 44%; }
}
.cam__hint {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(20, 16, 15, 0.72);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 40px;
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}

/* ---- 2 · one dish, ready to add ---- */
.prod { padding: 14px 0 4px; }
.prod__img {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(88% 74% at 68% 22%, rgba(214, 178, 132, 0.55), transparent 64%),
    radial-gradient(70% 60% at 22% 84%, rgba(150, 62, 84, 0.28), transparent 66%),
    linear-gradient(148deg, #EDE1D6 0%, #DFC8BC 52%, #E8DACD 100%);
}
.prod__img::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}
.prod__tags { display: flex; gap: 6px; margin-top: 11px; }
.tag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-warm);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  padding: 3px 8px;
}
.tag--veg { color: #2F6B45; border-color: rgba(47, 107, 69, 0.32); }
.prod__n {
  margin-top: 9px;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}
.prod__m { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.prod__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.prod__price {
  font-size: 17px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.prod__price s { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 5px; }
.prod__add {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--deyno-primary);
  color: #fff;
  border-radius: 40px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 600;
}
.prod__add i {
  font-style: normal; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
/* the next dish, half in view, so it reads as a list that continues */
.peek {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border-default);
}
.peek__img {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: linear-gradient(148deg, #EDE1D6 0%, #E2CDBE 100%);
}
.peek__txt { flex: 1 1 auto; min-width: 0; }
.peek__txt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.peek__txt span { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.peek__add {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--deyno-primary);
  color: var(--deyno-primary);
  font-size: 15px; font-weight: 500; line-height: 1;
}

/* ---- 3 · the order, with its prices ---- */
.line {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-default);
}
.line__img {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: linear-gradient(148deg, #EDE1D6 0%, #E2CDBE 100%);
}
.line__txt { flex: 1 1 auto; min-width: 0; }
.line__txt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.line__txt span { font-size: 10.5px; color: var(--text-muted); }
.line__q {
  flex: 0 0 auto;
  min-width: 24px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--surface-warm);
  border: 1px solid var(--border-default);
  font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.line__v {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: right;
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.line--sum { border-bottom: 0; padding-top: 14px; }
.line__v--big { font-size: 17px; }

/* ---- 4 · the ways to settle ---- */
.pay {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--border-default);
  border-bottom: 0;
  padding: 22px 22px 26px;
  box-shadow: 0 20px 44px -26px rgba(33, 26, 29, 0.4);
}
.pay__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}
.pay__head span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pay__head b {
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pay__sum { padding: 12px 0 4px; }
.pay__sum > div {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.pay__off { color: #2F6B45 !important; }
.pay__tot {
  margin-top: 6px; padding-top: 10px !important;
  border-top: 1px solid var(--border-default);
  font-weight: 600;
  color: var(--text-primary) !important;
}
.pay__label {
  margin: 14px 0 9px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.pay__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.way {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 10px 11px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
}
.way i { display: inline-flex; flex: 0 0 auto; }
.way i svg { width: 17px; height: 17px; display: block; }
/* the radio at the end of the row */
.way em {
  margin-left: auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong, var(--border-default));
}
.way--on {
  border-color: var(--deyno-primary);
  background: var(--deyno-tint);
  color: var(--accent-ink);
}
.way--on em {
  border-color: var(--deyno-primary);
  background:
    radial-gradient(circle at 50% 50%, var(--deyno-primary) 0 42%, transparent 43%);
}
.pay__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

@media (max-width: 420px) {
  .cam { max-width: 100%; }
  .cam__code { width: 124px; height: 124px; }
  .pay__ways { grid-template-columns: 1fr; }
  /* the order rows carry four columns; at 216px the dish names broke over
     three lines and the prices lost their column, so the phone gets the
     width the panel can actually spare */
  .dev { width: 100%; max-width: 268px; }
  .line { gap: 8px; }
  .line__img { width: 32px; height: 32px; }
  .line__txt b { font-size: 12px; }
  .line__txt span { display: none; }
  .line__v { min-width: 34px; }
}

/* The one green on the page has to be re-picked for dark, where the light
   theme's forest tone falls under the contrast floor. */
:root[data-deyno-theme="dark"] .pay__off { color: #7FCB9B !important; }
:root[data-deyno-theme="dark"] .tag--veg { color: #7FCB9B; border-color: rgba(127, 203, 155, 0.34); }

/* =========================================================
   34 · DEYNO POS PANELS
   Same panel language as DeynoQR: each step of the service
   drawn at a size you can read, rather than described.
   ========================================================= */
.show--wide { grid-column: 1 / -1; }
.show--wide .show__d { max-width: 62ch; }

/* ---- 1 · the till: floor plan beside the open order ---- */
.till {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 20px 44px -26px rgba(33, 26, 29, 0.4);
}
.till__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-default);
}
.till__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong, var(--border-default)); }
.till__ttl {
  margin-left: 8px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.till__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 14px; }
.floor { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: start; }
.floor__t {
  border: 1px solid var(--border-default);
  border-radius: 9px;
  padding: 9px 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--surface-warm);
}
.floor__t small {
  display: block;
  margin-top: 2px;
  font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.floor__t.is-seated { color: var(--text-primary); border-color: var(--border-strong, var(--border-default)); }
.floor__t.is-hot {
  color: #fff;
  background: var(--deyno-primary);
  border-color: var(--deyno-primary);
}
.pad { border-left: 1px solid var(--border-default); padding-left: 14px; }
.pad__h {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-default);
}
.pad__h span { font-size: 10px; font-weight: 500; color: var(--text-muted); }
.pad__r, .pad__t {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.pad__r b, .pad__t b { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pad__t {
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--border-default);
  font-size: 12.5px; font-weight: 600;
  color: var(--text-primary);
}
.pad__t b { font-size: 15px; }

/* ---- 2 · kitchen tickets ---- */
.tickets { position: relative; width: 100%; max-width: 300px; padding-top: 18px; }
.tick {
  /* the front slip is positioned too, or the absolute one behind it would
     paint on top and hide the ticket this panel is actually about */
  position: relative;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 14px 16px 16px;
  box-shadow: 0 18px 36px -22px rgba(33, 26, 29, 0.45);
}
/* the ticket behind, so the pass reads as a queue and not a single slip */
.tick--back {
  position: absolute;
  top: 0; left: 16px; right: -14px;
  transform: rotate(2.4deg);
  opacity: 0.62;
  padding-bottom: 26px;
}
.tick__h {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-strong, var(--border-default));
}
.tick__h b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.tick__h span { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tick__tag {
  display: inline-block;
  margin: 9px 0 2px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--deyno-tint);
  border-radius: 4px;
  padding: 3px 7px;
}
.tick__r {
  padding: 7px 0;
  font-size: 12.5px; font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
}
.tick__r em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--deyno-primary);
}
.tick__r--muted { color: var(--text-muted); }
.tick__r--muted em { color: var(--text-muted); }
.tick__f {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 11px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.tick__f b {
  color: #fff;
  background: var(--deyno-primary);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.12em;
}

/* ---- 5 · the report ---- */
.rep {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 22px 24px 26px;
  box-shadow: 0 20px 44px -26px rgba(33, 26, 29, 0.4);
}
.rep__ttl {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.rep__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-default);
}
.rep__stats b {
  display: block;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rep__stats small {
  display: block; margin-top: 3px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.rep__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; }
.rep__legend {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  align-items: end;
  height: 128px;
}
.bars span {
  position: relative;
  display: block;
  height: var(--h);
  border-radius: 6px 6px 0 0;
  background: var(--deyno-tint);
  border: 1px solid var(--border-default);
  border-bottom: 0;
}
.bars .is-peak { background: var(--deyno-primary); border-color: var(--deyno-primary); }
.bars em {
  position: absolute;
  left: 0; right: 0; bottom: -19px;
  text-align: center;
  font-style: normal;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.rep__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}
.rep__row b { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rep__row--tot {
  border-bottom: 0;
  margin-top: 4px; padding-top: 11px;
  border-top: 1px solid var(--border-default);
  font-weight: 600;
  color: var(--text-primary);
}

/* ---- the capability grid under the panels ---- */
.caps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.cap {
  background: var(--surface-warm);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 20px 20px 22px;
}
.cap__i {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--deyno-tint);
  color: var(--accent-ink);
  margin-bottom: 13px;
}
.cap__i svg { width: 19px; height: 19px; display: block; }
.cap b {
  display: block;
  font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.cap span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.caps__foot {
  margin: 30px 0 0;
  text-align: center;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--text-secondary);
}

@media (max-width: 1000px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rep__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .rep__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .till__body { grid-template-columns: minmax(0, 1fr); }
  .pad { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-default); padding-top: 12px; }
  .caps { grid-template-columns: minmax(0, 1fr); }
  .rep { padding: 20px 18px 24px; }
  .tick--back { display: none; }
  .tickets { padding-top: 0; }
}

/* Six service names under six bars collide once the chart is phone-width, so
   below that the labels fall back to the two-letter form each one carries. */
@media (max-width: 640px) {
  .bars { gap: 6px; }
  .bars em { font-size: 0; }
  .bars em::after { content: attr(data-s); font-size: 9.5px; letter-spacing: 0.06em; }
}

/* =========================================================
   35 · DEYNO DINING PANELS
   The guest's side of the same four steps: finding the place,
   reading the real menu, holding the table, and the evening.
   ========================================================= */

/* ---- 1 · discovery ---- */
.seek {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--border-default);
  border-radius: 40px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-warm);
}
.seek__i { display: inline-flex; flex: 0 0 auto; }
.seek__i svg { width: 14px; height: 14px; display: block; }
.seek__c {
  margin: 14px 0 8px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.moods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mood {
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: 40px;
  padding: 5px 10px;
}
.mood--on {
  background: var(--deyno-primary);
  border-color: var(--deyno-primary);
  color: #fff;
  font-weight: 600;
}
.res {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-default);
}
.res:last-child { border-bottom: 0; }
.res__img {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(84% 70% at 70% 20%, rgba(214, 178, 132, 0.5), transparent 64%),
    linear-gradient(150deg, #EBDFD4 0%, #DCC6B8 100%);
}
.res__img::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}
.res__t { min-width: 0; }
.res__t b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.res__t span { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.res__meta { font-variant-numeric: tabular-nums; }

/* ---- 2 · the restaurant page ---- */
.venue { padding-top: 12px; }
.venue__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(70% 90% at 26% 14%, rgba(255, 226, 196, 0.6), transparent 62%),
    radial-gradient(80% 70% at 84% 92%, rgba(120, 8, 41, 0.24), transparent 66%),
    linear-gradient(154deg, #E8D9CC 0%, #D9C0B2 58%, #E6D6C8 100%);
}
.venue__img::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}
.venue__n { margin-top: 11px; font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--text-primary); }
.venue__m { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.tabs { display: flex; gap: 16px; margin: 12px 0 4px; border-bottom: 1px solid var(--border-default); }
.tab {
  padding-bottom: 8px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab--on { color: var(--text-primary); border-bottom-color: var(--deyno-primary); }
.vrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 0;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}
.vrow b { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.vexp {
  margin-top: 12px;
  border: 1px solid var(--deyno-primary);
  background: var(--deyno-tint);
  border-radius: 11px;
  padding: 11px 13px;
}
.vexp b { display: block; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.vexp span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--accent-ink); opacity: 0.78; }

/* ---- 3 · the booking sheet ---- */
.book { padding: 14px 0 4px; }
.book__f {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
  color: var(--text-muted);
}
.book__f b { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.slot {
  text-align: center;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 9px 4px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.slot--on { background: var(--deyno-primary); border-color: var(--deyno-primary); color: #fff; }
.slot--off { color: var(--text-muted); text-decoration: line-through; opacity: 0.6; }

/* ---- 4 · the reservation pass ---- */
.pass {
  width: 100%;
  max-width: 330px;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 20px 44px -26px rgba(33, 26, 29, 0.4);
  overflow: hidden;
}
.pass__top { padding: 20px 22px 18px; background: var(--deyno-tint); }
.pass__tag {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: var(--deyno-primary);
  border-radius: 4px;
  padding: 3px 8px;
}
.pass__n { margin-top: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.016em; color: var(--accent-ink); }
.pass__m { margin-top: 3px; font-size: 11.5px; color: var(--accent-ink); opacity: 0.8; font-variant-numeric: tabular-nums; }
/* the perforation, so it reads as a ticket and not another card */
.pass__rip {
  position: relative;
  height: 16px;
  background: var(--deyno-tint);
  border-bottom: 1px dashed var(--deyno-primary);
}
.pass__rip i {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface-warm);
  transform: translateY(-50%);
}
.pass__rip i:first-child { left: -8px; }
.pass__rip i:last-child { right: -8px; }
.pass__bot { padding: 16px 22px 24px; }
.pass__g {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 7px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.pass__g b { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pass__rate {
  margin-top: 10px; padding-top: 13px;
  border-top: 1px solid var(--border-default);
  font-size: 12px;
  color: var(--text-secondary);
}
.stars { display: flex; gap: 5px; margin-top: 8px; color: var(--deyno-primary); }
.stars svg { width: 18px; height: 18px; display: block; }
.stars svg:nth-child(-n+4) { fill: currentColor; }
.stars svg:last-child { opacity: 0.35; }
.pass__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }

@media (max-width: 420px) {
  .pass { max-width: 100%; }
  .pass__btns { grid-template-columns: 1fr; }
}

/* =========================================================
   36 · PICTURE SLOTS
   Every image area used to be a soft gradient, which read as a
   blur rather than as a picture. Each slot now carries drawn
   artwork — a plated dish or a dining room — so the mock-ups
   show something recognisable at any size. Real photography
   drops in over the top through --photo, exactly as before.
   ========================================================= */
.dish__img,
.prod__img,
.peek__img,
.line__img { --art: url("../img/ph-dish.svg"); }
.res__img,
.venue__img,
.rcard__img,
.partner__img,
.rr__img,
.xp__img,
.pv__hero { --art: url("../img/ph-venue.svg"); }

.dish__img, .prod__img, .peek__img, .line__img,
.res__img, .venue__img, .rcard__img, .partner__img {
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* the peek and line thumbnails had no ::after layer of their own */
.peek__img, .line__img { position: relative; overflow: hidden; }

/* These two carry white text directly on the picture — a badge and a caption.
   With a flat burgundy panel behind them that was safe; with artwork behind
   them it is not, so the picture gets a scrim and the text keeps its footing
   whatever ends up in the slot. */
.rcard__img::before,
.partner__img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(26, 20, 23, 0.64) 0%,
    rgba(26, 20, 23, 0.16) 38%,
    rgba(26, 20, 23, 0.30) 68%,
    rgba(26, 20, 23, 0.74) 100%);
}

/* =========================================================
   37 · DEYNO DINING — PICTURES CHANGING IN THE FRAME
   The handset is pinned; scrolling swaps the picture on its
   screen, one to the next, the way flicking through a tab
   does. Nothing listens to the wheel and nothing is prevented
   — the scroll stays the visitor's.
   ========================================================= */
.pstory {
  width: 100%;
  display: grid;
  /* the buttons are their own cell so they can sit under the copy on a wide
     screen and under the phone on a narrow one */
  grid-template-columns: minmax(300px, 1fr) auto;
  grid-template-areas:
    "copy  stage"
    "btns  stage";
  grid-template-rows: auto auto;
  align-content: center;
  gap: 26px 60px;
}
.pstory__copy { grid-area: copy; max-width: 44ch; }
.pstory__stage { grid-area: stage; align-self: center; }
.pstory__btns {
  grid-area: btns;
  margin: 0;
  /* The row is a flex container sitting in a tall grid row, so the two
     buttons were stretching to fill it — 158px tall blocks. Hold them at
     their own height. */
  align-items: flex-start;
  align-content: flex-start;
}
.pstory__stage { display: flex; justify-content: center; }

.pdev {
  /* Scaled up from 296px. The whole handset grows in proportion — width and
     screen height together — so it is a bigger phone, not a wider one. */
  width: 460px;
  flex: 0 0 auto;
  border-radius: 40px;
  background: #1B1417;
  padding: 9px;
  /* The screen inside is a fixed size, so the ten app screens always fit and
     never need trimming. What changes with the window is the whole handset:
     it scales down, the way a real phone photographed smaller does. The
     negative margin pulls the layout box in to match, since a transform
     leaves the original box behind. */
  --pscale: 1;
  transform: scale(var(--pscale));
  transform-origin: center center;
  margin-block: calc((var(--pscale) - 1) * var(--pdev-half, 308px));
  box-shadow: 0 -2px 0 rgba(255,255,255,0.06) inset,
              0 34px 60px -30px rgba(33, 26, 29, 0.55);
}
.pdev__status {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
  border-radius: 32px 32px 0 0;
  padding: 12px 20px 7px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* the screen: one picture at a time, stacked */
.pscreen {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  /* 520px is the tallest fixed-content screen (487px) plus air. Anything more
     and the short screens sit in a pool of empty white. */
  height: 520px;
}
.pslide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  background: var(--surface);
  will-change: opacity, transform;
}
/* without JS the first picture simply stays up */
.pslide.is-on { opacity: 1; }

/* where you are in the set */
.pdots {
  display: flex;
  justify-content: center;
  gap: 6px;
  background: var(--surface);
  border-radius: 0 0 32px 32px;
  padding: 14px 8px 18px;
}
.pdots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-strong, var(--border-default));
  transition: background-color var(--t-fast, .18s) var(--ease), width var(--t-fast, .18s) var(--ease);
}
.pdots i.is-on { width: 18px; border-radius: 4px; background: var(--deyno-primary); }

/* Enough scroll to change through the set without holding the page hostage to
   one section. Pinned wherever there is height for it, phones included: the
   scroll is never intercepted, so a visitor keeps full control of it either
   way. */
@media (min-height: 520px) {
  /* Two screens of scroll changed all ten screens, which was brisk enough to
     feel like a flick rather than a look. Four gives each screen a longer
     hold and a slower change — the scroll is still entirely the visitor's. */
  [data-phonestory] { height: 400vh; }
  [data-phonestory] .story__sticky { height: 100svh; padding-top: 100px; }
}
/* How much of the handset fits between the header and the fold. A shorter
   window gets a smaller phone rather than losing it altogether. */
@media (max-height: 860px) { .pdev { --pscale: 0.94; } }
@media (max-height: 800px) { .pdev { --pscale: 0.88; } }
@media (max-height: 740px) { .pdev { --pscale: 0.80; } }
@media (max-height: 680px) { .pdev { --pscale: 0.72; } }
@media (max-height: 620px) { .pdev { --pscale: 0.64; } }
@media (max-height: 570px) { .pdev { --pscale: 0.56; } }
/* On a phone the same story runs in one column, with everything trimmed to
   fit between the header and the fold. */
@media (max-width: 980px) and (min-height: 520px) {
  /* The story sections are unpinned wholesale on narrow screens further up
     this file — `.story { height: auto !important }` and a static pane. This
     one wants both back, and the height needs the same !important to get past
     that rule: without it the section was barely taller than the window, so
     the ten screens went by in a couple of centimetres of scroll. */
  [data-phonestory] { height: 400vh !important; }
  [data-phonestory] .story__sticky {
    position: sticky;
    top: 0;
    overflow: hidden;
    padding-top: 78px;
    padding-bottom: 12px;
  }
  .pstory {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "stage" "btns";
    gap: 16px;
    justify-items: center;
    text-align: center;
  }
  .pstory__copy { max-width: 36ch; }
  .pstory__copy .lead { display: none; }
  .pstory__copy .h2 { font-size: clamp(23px, 6.2vw, 34px); }
  /* the two buttons are set full-width by the small-screen rules further up;
     inside a pinned pane that costs a second row of height the fold does not
     have, so here they sit side by side at their own width */
  .pstory__btns { gap: 8px; justify-content: center; flex-wrap: nowrap; }
  .pstory__btns .btn {
    width: auto; flex: 0 1 auto;
    padding: 10px 14px; font-size: 12.5px;
    white-space: nowrap;
  }
  .pdev { width: min(84vw, 296px); padding: 7px; border-radius: 34px; --pdev-half: 254px; }
  .pscreen { height: 410px; }
  .pdev__status { border-radius: 27px 27px 0 0; padding: 10px 16px 6px; font-size: 10.5px; }
  .pdots { border-radius: 0 0 27px 27px; padding: 11px 8px 14px; }
}

/* One column and a short window together: trim the space around the copy so
   the buttons still land above the fold. */
@media (max-width: 980px) and (max-height: 680px) and (min-height: 520px) {
  [data-phonestory] .story__sticky { padding-top: 62px; padding-bottom: 8px; }
  .pstory { gap: 10px; }
  .pstory__copy .h2 { font-size: clamp(19px, 5.2vw, 26px); }
  .pstory__copy .eyebrow { margin-bottom: 4px; }
  .pstory__btns .btn { padding: 8px 12px; font-size: 12px; }
}

/* No height to pin in, or motion turned down: the section stands at its own
   height and the pictures simply stack. */
@media (max-height: 519px), (prefers-reduced-motion: reduce) {
  /* !important, because the narrow-screen block above has to use it to get
     past the wholesale .story reset — and this has to get past that in turn. */
  [data-phonestory] { height: auto !important; }
  [data-phonestory] .story__sticky {
    position: static; height: auto; overflow: visible;
    padding-top: var(--section-y, 96px); padding-bottom: var(--section-y, 96px);
  }
  .pstory { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "btns"; gap: 34px; }
  .pdev {
    width: min(100%, 380px); border-radius: 0; background: none; padding: 0; box-shadow: none;
    --pscale: 1; transform: none; margin-block: 0;
  }
  .pdev__status, .pdots { display: none; }
  .pscreen { height: auto !important; overflow: visible; background: none; display: grid; gap: 14px; }
  .pslide {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    border: 1px solid var(--border-default);
    border-radius: 14px;
    overflow: hidden;
  }
  
}

/* =========================================================
   38 · THE TEN APP SCREENS INSIDE THE HANDSET
   The slides used to be flat SVG pictures, which meant they
   could not use the site's own typeface — an external SVG
   cannot see an @font-face declared on the page. They are
   built out of real elements instead, from the same parts as
   the DeynoQR panels, so a price on the phone is set in
   Instrument Sans exactly like a price anywhere else.
   ========================================================= */
.pap {
  height: 100%;
  padding: 14px 16px 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.pap > * { flex: 0 0 auto; }

/* the small header every screen opens with */
.ptop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}
.ptop b { font-size: 14px; font-weight: 600; letter-spacing: -0.012em; color: var(--text-primary); }
.ptop span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--text-muted); white-space: nowrap;
}
.ptop span svg { width: 11px; height: 11px; display: block; color: var(--deyno-primary); }

/* the one action on the screen */
.pcta {
  display: block;
  margin-top: auto;
  border-radius: 10px;
  background: var(--deyno-primary);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  text-align: center;
  padding: 11px 12px;
}
.pnote { margin: 8px 0 0; font-size: 10px; color: var(--text-muted); text-align: center; }

/* a figure with its stars, and the same row used as a total */
.pbig {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 10px;
}
.pbig b { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pbig .stars { margin-top: 0; }
.pbig .stars svg { width: 13px; height: 13px; }
.pbig--sum { justify-content: space-between; border-top: 1px solid var(--border-strong, var(--border-default)); margin-top: 4px; }
.pbig--sum span { font-size: 12px; color: var(--text-muted); }
.pbig--sum b { font-size: 24px; }

/* how the ratings fall */
.dist { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dist span:first-child { width: 8px; }
.dist span:last-child { width: 26px; text-align: right; }
.dist i { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--surface-warm-strong); overflow: hidden; }
.dist em { display: block; height: 100%; border-radius: 3px; background: var(--deyno-primary); }

/* one written review */
.rev { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.rev__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rev__h b { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.rev__h span { font-size: 10px; color: var(--text-muted); }
.rev .stars { margin-top: 6px; }
.rev .stars svg { width: 12px; height: 12px; }
.rev p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-secondary); }

/* the photograph being posted */
.shot { position: relative; margin-top: 12px; }
.shot .dish__img {
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px solid var(--border-default);
}
.shot__b {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(26, 20, 23, 0.72);
  color: #fff;
  font-size: 10px; font-weight: 600;
  border-radius: 40px;
  padding: 5px 10px;
}
.shot__b svg { width: 12px; height: 12px; display: block; }
.fld {
  margin-top: 10px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 11px; line-height: 1.45;
  color: var(--text-secondary);
  background: var(--surface-warm);
}
.pap .stars { color: var(--deyno-primary); }

/* offers */
.ptag {
  display: inline-block;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: var(--deyno-primary);
  border-radius: 4px;
  padding: 3px 7px;
}
.ofr {
  margin-top: 12px;
  border: 1px solid var(--deyno-primary);
  background: var(--deyno-tint);
  border-radius: 12px;
  padding: 12px 13px;
}
.ofr > b { display: block; margin-top: 9px; font-size: 14px; font-weight: 600; letter-spacing: -0.014em; color: var(--accent-ink); }
.ofr__m { display: block; margin-top: 3px; font-size: 10.5px; color: var(--accent-ink); opacity: 0.8; }
.ofr__code {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px dashed var(--deyno-primary);
}
.ofr__code span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-ink); }
.ofr__code em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--deyno-primary); }
.ofr--sm {
  display: flex; align-items: center; gap: 11px;
  margin-top: 9px; padding: 9px 11px;
  border-color: var(--border-default);
  background: var(--surface-warm);
}
.ofr--sm .res__img { width: 40px; height: 40px; border-radius: 9px; }

/* a discount coming off the bill */
.vrow--off span, .vrow--off b { color: var(--deyno-primary); }

/* saving a place */
.hbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
}
.hbtn svg { width: 15px; height: 15px; display: block; }
.hbtn--on { color: var(--deyno-primary); }
.hbtn--lg { width: 38px; height: 38px; border: 1px solid var(--deyno-primary); background: var(--deyno-tint); }
.hbtn--lg svg { width: 19px; height: 19px; }
.fav__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.fav__h .venue__n { margin-top: 0; }
.toast {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px;
  border-radius: 10px;
  background: var(--deyno-primary);
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 9px 12px;
}
.toast svg { width: 13px; height: 13px; display: block; flex: 0 0 auto; }

/* why this one is being suggested */
.pwhy {
  margin: 10px 0 11px;
  font-size: 10.5px; font-weight: 600;
  color: var(--deyno-primary);
}

/* inside the handset the parts borrowed from the panels sit tighter:
   the screen is 250px of usable width, not a 380px panel. */
.pap .seek { margin-top: 10px; padding: 8px 12px; }
.pap .seek__c { margin: 11px 0 4px; }
.pap .moods { margin-top: 9px; }
.pap .res { padding: 7px 0; gap: 10px; }
.pap .res:last-child { border-bottom: 0; }
.pap .res__img { width: 42px; height: 42px; border-radius: 9px; }
.pap .res__t b { font-size: 12px; }
.pap .res__t span { font-size: 10px; }
.res__meta { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.pap .venue__img { margin-top: 2px; aspect-ratio: 2 / 1; }
.pap .venue__n { margin-top: 9px; font-size: 14px; }
.pap .tabs { margin: 10px 0 2px; }
.pap .vrow { padding: 7px 0; font-size: 11.5px; }
.pap .book { padding: 9px 0 4px; }
.pap .book__f { padding: 7px 0; }
.pap .vexp { margin-top: 10px; padding: 9px 11px; }
.pap .slots { margin-top: 2px; }
.pap .slot { padding: 8px 4px; }


/* Stacked (no room to pin, or motion turned down): the screens read
   as a column of cards rather than as one handset. */
@media (max-height: 519px), (prefers-reduced-motion: reduce) {
  .pap { height: auto; padding: 16px 18px 18px; }
  .pcta { margin-top: 16px; }
}

/* On the dark site the handset shell is nearly the colour of the page behind
   it, so the phone stops reading as a phone. Lift the shell and give it a
   hairline, the way the light theme's shadow does the same job. */
:root[data-deyno-theme="dark"] .pdev {
  background: #3A2A31;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10),
              0 -2px 0 rgba(255, 255, 255, 0.07) inset,
              0 34px 60px -30px rgba(0, 0, 0, 0.7);
}
:root[data-deyno-theme="dark"] .dist i { background: var(--neutral-strong); }

/* =========================================================
   39 · DEYNO POS — THE TILL
   The screen a floor manager actually stands in front of:
   the menu on the left as it is priced tonight, the order
   building on the right, payment at the bottom of it. Drawn
   in the site's own palette and typeface — the layout is the
   ordinary shape of a restaurant till, nothing is borrowed.
   ========================================================= */
.term {
  width: 100%;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 274px;
  height: 462px;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 26px 52px -34px rgba(33, 26, 29, 0.42);
  text-align: left;
}

/* ---- the rail ---- */
.tnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px 8px;
  background: var(--surface-warm-strong);
  border-right: 1px solid var(--border-default);
  overflow: hidden;
}
.tnav__brand {
  display: block;
  padding: 0 8px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
  font-size: 14px; font-weight: 600; letter-spacing: -0.014em;
  color: var(--deyno-primary);
}
.tnav__brand small {
  display: block;
  margin-top: 1px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
.tnav__i {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--text-secondary);
}
.tnav__i svg { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.tnav__i em {
  font-style: normal;
  font-size: 10.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tnav__i.is-on {
  background: var(--deyno-tint);
  color: var(--accent-ink);
}
.tnav__i.is-on em { font-weight: 600; }
.tnav__i.is-on::before {
  content: "";
  position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2.5px; border-radius: 2px;
  background: var(--deyno-primary);
}

/* ---- the menu side ---- */
.tmain {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 13px 16px 16px;
}
.ttop {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border-default);
}
.tmode { display: flex; gap: 4px; }
.tmode__b {
  border: 1px solid var(--border-default);
  border-radius: 40px;
  padding: 5px 11px;
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.tmode__b.is-on {
  background: var(--deyno-primary);
  border-color: var(--deyno-primary);
  color: #fff;
  font-weight: 600;
}
.tchip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--deyno-primary);
  background: var(--deyno-tint);
  border-radius: 40px;
  padding: 5px 11px;
  font-size: 11px; font-weight: 600;
  color: var(--accent-ink);
  white-space: nowrap;
}
.tchip em { font-style: normal; font-weight: 500; font-size: 10px; opacity: 0.75; }
.ttop__m {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tcat {
  display: flex; align-items: center; gap: 15px;
  margin-top: 2px;
  border-bottom: 1px solid var(--border-default);
}
.tcat__b {
  padding: 10px 0 8px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tcat__b.is-on { color: var(--text-primary); border-bottom-color: var(--deyno-primary); }
.tcat__nav { margin-left: auto; display: inline-flex; gap: 5px; flex: 0 0 auto; }
.tcat__nav svg {
  width: 20px; height: 20px;
  /* without this they are flex items that shrink, and a circle with a border
     squeezed horizontally reads as a thin oval rather than a button */
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  color: var(--text-muted);
  display: block;
}

.tgrid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 9px;
  margin-top: 13px;
}
.titem {
  display: flex;
  flex-direction: column;
  min-width: 0; min-height: 0;
  padding: 7px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--surface);
}
/* .dish__img is a fixed 62px square elsewhere; here the picture takes
   whatever the tile has left after the name and the price, so two rows of
   tiles always fit the till rather than an aspect ratio dictating the height */
.titem .titem__img {
  width: 100%; height: auto;
  flex: 1 1 auto;
  min-height: 30px;
  border-radius: 7px;
}
.titem b {
  display: block;
  margin-top: 7px;
  font-size: 11px; font-weight: 600; line-height: 1.28;
  color: var(--text-primary);
}
.titem__c {
  display: block;
  margin-top: 2px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.titem em {
  display: block;
  margin-top: auto;
  padding-top: 6px;
  font-style: normal;
  font-size: 12.5px; font-weight: 600;
  color: var(--deyno-primary);
  font-variant-numeric: tabular-nums;
}
/* already on the order */
.titem.is-picked { border-color: var(--deyno-primary); background: var(--deyno-tint); }
.titem.is-picked b { color: var(--accent-ink); }

/* ---- the order side ---- */
.tord {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 13px 15px 15px;
  background: var(--surface-warm);
  border-left: 1px solid var(--border-default);
}
.tord__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.tord__h span { font-size: 10.5px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tord__list { flex: 1 1 auto; min-height: 0; padding-top: 3px; }

.oline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-default);
}
.oline__n {
  font-size: 11.5px; font-weight: 500; line-height: 1.3;
  color: var(--text-primary);
}
.qty { display: inline-flex; align-items: center; gap: 5px; }
.qty i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface);
  font-style: normal;
  font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--text-secondary);
}
.qty b {
  min-width: 11px; text-align: center;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.oline__v {
  min-width: 30px; text-align: right;
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.oline__x { display: inline-flex; color: var(--text-muted); opacity: 0.65; }
.oline__x svg { width: 13px; height: 13px; display: block; }

.tsum { padding: 11px 0 3px; }
.tsum > div {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 3px 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.tsum__off span { color: var(--deyno-primary); }
.tsum__t {
  margin-top: 6px; padding-top: 9px;
  border-top: 1px solid var(--border-strong, var(--border-default));
}
.tsum__t span { font-size: 15px; font-weight: 600; color: var(--text-primary); }

.tacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 11px; }
.tacts__b {
  text-align: center;
  padding: 9px 4px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--surface);
  font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary);
}
.tpay {
  display: block;
  margin-top: 7px;
  text-align: center;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--deyno-primary);
  color: #fff;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- narrower windows: the rail loses its labels, then the whole
        till stacks into menu-above-order ---- */
@media (max-width: 1180px) {
  .term { grid-template-columns: 60px minmax(0, 1fr) 248px; }
  .tnav { align-items: center; padding: 14px 6px; }
  .tnav__i { justify-content: center; padding: 8px 6px; }
  .tnav__i em, .tnav__brand small { display: none; }
  .tnav__brand { padding: 0 0 12px; text-align: center; font-size: 12px; }
  .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .term { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
  /* The till is a fixed height on a wide screen, so the picture can take
     whatever the tile has spare. Here the till sizes to its content, there is
     no spare, and the picture collapsed to its minimum — a letterbox sliver of
     a photograph. Below this width it keeps its own shape and the tile grows. */
  .titem .titem__img { flex: 0 0 auto; aspect-ratio: 3 / 2; min-height: 0; }
  .tgrid { grid-auto-rows: auto; }
  .tmain { grid-column: 2; }
  .tord {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--border-default);
  }
  .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  /* At this width the five category tabs and the two arrows together are
     wider than the till, so the arrows were being cut off by its edge. The
     row scrolls by swipe instead, which is what the arrows stood for. */
  .tcat { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tcat::-webkit-scrollbar { display: none; }
  .tcat__nav { display: none; }
}
@media (max-width: 620px) {
  .term { grid-template-columns: minmax(0, 1fr); }
  .tnav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-default); padding: 8px; }
  .tnav__brand { display: none; }
  .tnav__i.is-on::before { top: auto; bottom: 0; left: 8px; right: 8px; width: auto; height: 2px; }
  .tmain { grid-column: 1; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttop { flex-wrap: wrap; }
  .ttop__m { display: none; }
}


/* Dark theme: --deyno-primary is a fill colour, not a type colour. On the dark
   surfaces of the till it lands around 1.8:1, so the brand mark and the prices
   take the readable ink instead, and the discount takes the same green the
   bill panel already uses for money coming off. */
:root[data-deyno-theme="dark"] .tnav__brand { color: var(--accent-ink); }
:root[data-deyno-theme="dark"] .titem em { color: var(--accent-ink); }
:root[data-deyno-theme="dark"] .tsum__off span { color: #7FCB9B; }

/* =========================================================
   40 · ONE DRAWING PER DISH
   Every picture slot used to carry the same plate, so a menu
   of eight items looked like the same thing eight times. Each
   dish now has its own drawing, matched to what the line
   actually says. These are illustrations, not photographs:
   when real photography arrives it drops straight over the
   top through --photo, and nothing here has to change.
   ========================================================= */
.dish--burrata   { --art: url("../img/ph-burrata.svg"); }
.dish--focaccia  { --art: url("../img/ph-focaccia.svg"); }
.dish--seabass   { --art: url("../img/ph-seabass.svg"); }
.dish--risotto   { --art: url("../img/ph-risotto.svg"); }
.dish--aubergine { --art: url("../img/ph-aubergine.svg"); }
.dish--delice    { --art: url("../img/ph-delice.svg"); }
.dish--wine      { --art: url("../img/ph-wine.svg"); }
.dish--water     { --art: url("../img/ph-water.svg"); }

/* The two bar items are upright objects, so they are drawn in a 3:2 frame
   and centred — they crop to a square thumbnail without losing the object. */

/* The peek and line thumbnails carry the drawing on their own background
   but never had a layer above it, so a photograph had nowhere to land and
   they kept showing the drawing while every other slot switched over. */
.peek__img::after,
.line__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
}

/* ---------------------------------------------------------
   REAL PHOTOGRAPHY
   All eight dishes now carry a photograph. Each sits on a layer
   OVER its drawing, so if a file is ever removed or fails to
   load the drawing underneath shows through rather than a gap.
   Replacements go in assets/img/food/ under the same names —
   see the README there.
   --------------------------------------------------------- */
   Each dish is declared TWICE on purpose. The first line is a plain JPEG a
   browser of any age understands; the second offers the same picture as WebP,
   about a quarter smaller, and is simply not understood by older browsers —
   which keep the line above it. Do not "tidy" the duplicates away.
   --------------------------------------------------------- */
.dish--burrata   { --photo: url("../img/food/burrata.jpg"); }
.dish--focaccia  { --photo: url("../img/food/focaccia.jpg"); }
.dish--seabass   { --photo: url("../img/food/seabass.jpg"); }
.dish--risotto   { --photo: url("../img/food/risotto.jpg"); }
.dish--aubergine { --photo: url("../img/food/aubergine.jpg"); }
.dish--delice    { --photo: url("../img/food/delice.jpg"); }
.dish--wine      { --photo: url("../img/food/wine.jpg"); }
.dish--water     { --photo: url("../img/food/water.jpg"); }

.dish--burrata   { --photo: image-set(url("../img/food/burrata.webp")   type("image/webp"), url("../img/food/burrata.jpg")   type("image/jpeg")); }
.dish--focaccia  { --photo: image-set(url("../img/food/focaccia.webp")  type("image/webp"), url("../img/food/focaccia.jpg")  type("image/jpeg")); }
.dish--seabass   { --photo: image-set(url("../img/food/seabass.webp")   type("image/webp"), url("../img/food/seabass.jpg")   type("image/jpeg")); }
.dish--risotto   { --photo: image-set(url("../img/food/risotto.webp")   type("image/webp"), url("../img/food/risotto.jpg")   type("image/jpeg")); }
.dish--aubergine { --photo: image-set(url("../img/food/aubergine.webp") type("image/webp"), url("../img/food/aubergine.jpg") type("image/jpeg")); }
.dish--delice    { --photo: image-set(url("../img/food/delice.webp")    type("image/webp"), url("../img/food/delice.jpg")    type("image/jpeg")); }
.dish--wine      { --photo: image-set(url("../img/food/wine.webp")      type("image/webp"), url("../img/food/wine.jpg")      type("image/jpeg")); }
.dish--water     { --photo: image-set(url("../img/food/water.webp")     type("image/webp"), url("../img/food/water.jpg")     type("image/jpeg")); }

/* =========================================================
   41 · HERO — THE COUNTER, DRAWN
   The till, the handheld and the code on the table, in one
   picture. Drawn rather than photographed: it is Deyno's own
   interface, it stays sharp at any size, and it costs the
   page nothing but markup.
   ========================================================= */
.hero__stage--pos {
  position: relative;
  display: block;
  padding-bottom: 46px;
  /* The handheld gets a lane of its own on the right. Left to overlap
     whatever space happened to be spare, it sat on top of the till's total
     and Pay button at most window widths. */
  padding-right: clamp(112px, 12.5vw, 148px);
}

/* ---- the counter terminal ---- */
.cterm { width: 100%; max-width: 560px; margin: 0 auto 0 0; }
.cterm__screen {
  aspect-ratio: 4 / 3;
  background: #171013;
  border-radius: 20px;
  padding: 11px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset,
              0 34px 60px -32px rgba(33, 26, 29, 0.6);
}
.cterm__neck {
  width: 16%; height: 30px;
  margin: 0 auto;
  background: linear-gradient(180deg, #241A1E, #1B1417);
}
.cterm__foot {
  width: 44%; height: 15px;
  margin: 0 auto;
  border-radius: 3px 3px 14px 14px;
  background: linear-gradient(180deg, #211A1D, #140F11);
  box-shadow: 0 16px 26px -18px rgba(33, 26, 29, 0.7);
}

/* ---- the interface on it ---- */
.hpos {
  height: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 94px;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
}
.hrail {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 9px 0;
  background: var(--surface-warm-strong);
  border-right: 1px solid var(--border-default);
}
.hrail__b {
  width: 13px; height: 13px;
  border-radius: 4px;
  background: var(--border-strong, var(--border-default));
  opacity: 0.55;
}
.hrail__b.is-on { background: var(--deyno-primary); opacity: 1; }

.hmain { min-width: 0; padding: 9px 10px; display: flex; flex-direction: column; }
.htabs { display: flex; gap: 10px; border-bottom: 1px solid var(--border-default); }
.htabs span {
  padding-bottom: 6px;
  font-size: 9px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.htabs .is-on { color: var(--text-primary); border-bottom-color: var(--deyno-primary); }

.hgrid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.htile {
  min-width: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  padding: 4px;
  background: var(--surface);
}
.htile .htile__img {
  display: block;
  width: 100%; height: auto;
  /* the tile stretches to its grid row; if the picture does not take the
     spare height the price is pushed to the floor and the tile reads as a
     mostly empty box with a caption stranded at the top */
  flex: 1 1 auto;
  min-height: 26px;
  border-radius: 4px;
}
.htile b {
  display: block;
  margin-top: 4px;
  font-size: 7.5px; font-weight: 600; line-height: 1.25;
  color: var(--text-primary);
  overflow: hidden;
}
.htile em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 8.5px; font-weight: 700;
  color: var(--deyno-primary);
  font-variant-numeric: tabular-nums;
}

.hord {
  display: flex; flex-direction: column;
  padding: 9px 9px 10px;
  background: var(--surface-warm);
  border-left: 1px solid var(--border-default);
}
.hord__h {
  margin: 0 0 6px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.hord__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 7.5px;
  color: var(--text-secondary);
}
.hord__r b { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hord__t {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: auto; padding-top: 7px;
  font-size: 8px;
  color: var(--text-muted);
}
.hord__t b { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hpay {
  display: block;
  margin-top: 7px;
  border-radius: 5px;
  background: var(--deyno-primary);
  color: #fff;
  text-align: center;
  padding: 5px 6px;
  font-size: 8.5px; font-weight: 600;
}

/* ---- the handheld, in front of the counter ---- */
.hhand {
  position: absolute;
  right: 0; bottom: 0;
  width: clamp(104px, 12vw, 138px);
}
.hhand__print {
  height: 26%;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #2A2025, #171013);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px;
  box-shadow: 0 -2px 0 rgba(255,255,255,0.05) inset;
}
.hhand__print i {
  display: block;
  width: 72%; height: 7px;
  border-radius: 2px 2px 0 0;
  background: #F6F1EA;
  box-shadow: 0 -3px 0 #EDE6DC;
}
.hhand__screen {
  background: var(--surface);
  border: 4px solid #171013;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 5px;
  box-shadow: 0 22px 34px -22px rgba(33, 26, 29, 0.6);
}
.hhand__bar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 6px; font-weight: 700;
  color: var(--text-muted);
  padding: 0 1px 4px;
}
.hhand__sig { width: 14px; height: 4px; border-radius: 2px; background: var(--border-default); }
.hchips { display: flex; gap: 3px; }
.hchips span {
  flex: 1 1 auto;
  text-align: center;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  padding: 2px 0;
  font-size: 6px; font-weight: 600;
  color: var(--text-secondary);
}
.hchips .is-on { background: var(--deyno-primary); border-color: var(--deyno-primary); color: #fff; }
.hgrid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.htile--sm { padding: 3px; border-radius: 5px; }
.htile--sm b { font-size: 6px; margin-top: 3px; }
.htile--sm em { font-size: 7px; margin-top: 1px; }
.hhand__tot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 5px; padding-top: 4px;
  border-top: 1px solid var(--border-default);
  font-size: 6.5px;
  color: var(--text-muted);
}
.hhand__tot b { font-size: 9px; font-weight: 600; color: var(--text-primary); }
.hpay--wide { margin-top: 4px; font-size: 7px; padding: 4px; }

/* ---- the table code, small, at the other side ---- */
.hero__stage--pos .qrtag {
  position: absolute;
  left: 0; bottom: 0;
  display: flex; align-items: center; gap: 11px;
  text-align: left;
  padding: 11px 14px;
}
.hero__stage--pos .qrtag__code { width: 50px; height: 50px; margin: 0; }
.hero__stage--pos .qrtag__txt b { font-size: 12px; }
.hero__stage--pos .qrtag__txt span { font-size: 9px; letter-spacing: 0.1em; }

/* Narrow: the three objects stop overlapping and sit in a column, so nothing
   is squeezed under anything else. */
@media (max-width: 720px) {
  .hero__stage--pos { padding-bottom: 0; padding-right: 0; }
  .cterm { width: 100%; }
  .hhand, .hero__stage--pos .qrtag { position: static; }
  .hero__stage--pos {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "term term" "hand code";
    align-items: end;
    gap: 18px 16px;
  }
  .cterm { grid-area: term; }
  .hhand { grid-area: hand; width: clamp(96px, 26vw, 124px); }
  .hero__stage--pos .qrtag { grid-area: code; }
}
@media (max-width: 430px) {
  .hero__stage--pos .qrtag__code { width: 42px; height: 42px; }
  .hero__stage--pos .qrtag { padding: 10px 12px; gap: 9px; }
  .hero__stage--pos .qrtag__txt b { font-size: 11px; }
}

/* ---------------------------------------------------------
   42 · HERO BUTTONS SIDE BY SIDE ON A PHONE
   Below 560px every .btn-row button is set full-width, which
   stacks the hero's two calls to action and pushes the second
   one a long way down the first screen. The hero's pair share
   one row instead, at equal width.
   --------------------------------------------------------- */
@media (max-width: 560px) {
  .hero__copy .btn-row { flex-wrap: nowrap; gap: 10px; }
  .hero__copy .btn-row .btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
    font-size: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 374px) {
  .hero__copy .btn-row { gap: 8px; }
  .hero__copy .btn-row .btn { padding-inline: 9px; font-size: 13px; }
}

/* Below about 350px three columns of tiles leaves roughly 60px for a dish
   name, which clips mid-word, and the second row runs past the bottom of the
   screen. Two wider columns and four dishes instead. */
@media (max-width: 355px) {
  /* a slightly squarer screen as well, or two rows of tiles plus the tab bar
     still run past the bottom of a 4:3 one at this width */
  .cterm__screen { aspect-ratio: 5 / 4; }
  .hmain .hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hmain .hgrid .htile:nth-child(n+5) { display: none; }
  .hmain .htile b { font-size: 8px; }
  .hpos { grid-template-columns: 24px minmax(0, 1fr) 86px; }
  .htabs { gap: 8px; }
  .htabs span { font-size: 8.5px; padding-bottom: 5px; }
  .hmain { padding: 7px 8px; }
  .hord { padding: 7px 7px 8px; }
  .hmain .hgrid { gap: 5px; margin-top: 6px; }
  .hmain .htile { padding: 3px; }
}

/* =========================================================
   43 · HERO — THE PRODUCT PHOTOGRAPH
   The terminal is a supplied image rather than a drawing.
   It carries its own light background, so it sits on a plate
   of the page's own surface colour and keeps a rounded edge
   in both themes instead of butting a white rectangle up
   against a warm one.
   ========================================================= */
.hero__stage--shot { position: relative; display: block; }
.hero__shot {
  width: 100%;
  height: auto;
  max-width: 620px;
  margin: 0 auto;
  border-radius: var(--r-panel, 18px);
  background: #F4F2EF;
  box-shadow: 0 30px 60px -34px rgba(33, 26, 29, 0.5);
}
/* the table code overlaps the bottom-left corner, so the picture still
   carries the whole system rather than only the counter */
.hero__stage--shot .qrtag {
  position: absolute;
  left: 0;
  bottom: -18px;
  display: flex; align-items: center; gap: 11px;
  text-align: left;
  padding: 11px 14px;
}
.hero__stage--shot .qrtag__code { width: 50px; height: 50px; margin: 0; }
.hero__stage--shot .qrtag__txt b { font-size: 12px; }
.hero__stage--shot .qrtag__txt span { font-size: 9px; letter-spacing: 0.1em; }

@media (max-width: 980px) {
  .hero__shot { max-width: 100%; }
}
@media (max-width: 560px) {
  .hero__stage--shot .qrtag {
    position: static;
    margin-top: 16px;
    width: max-content;
    max-width: 100%;
  }
  .hero__stage--shot .qrtag__code { width: 44px; height: 44px; }
}

/* =========================================================
   44 · DEYNOQR — SCAN, ORDER, PAY AS ONE LINE
   The three moments on a single continuous stroke, so the
   section opens with the journey before the four panels take
   it apart. The curve is an SVG that scales with the column;
   the labels are HTML pinned to the dots by percentage, so
   they keep a sensible reading size at every width instead of
   shrinking with the drawing.
   ========================================================= */
.qrpath {
  position: relative;
  color: var(--deyno-primary);
  margin: 42px auto 0;
  max-width: 980px;
}
.qrpath__svg { width: 100%; height: auto; display: block; overflow: visible; }
.qrpath__dot { fill: var(--deyno-primary); }

.qrpath__t {
  position: absolute;
  white-space: nowrap;
  font-size: clamp(13px, 2.1vw, 26px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
}
/* each label hangs off its own dot: 300,72 · 560,186 · 928,78 in a 980x250 box */
.qrpath__t--scan  { left: 30.6%; top: 28.8%; transform: translate(-50%, -180%); }
.qrpath__t--order { left: 57.1%; top: 74.4%; transform: translate(-50%, 95%); }
.qrpath__t--pay   { left: 94.7%; top: 31.2%; transform: translate(-88%, -180%); }

/* drawn on as the section arrives, the way a hand would draw it. The dash
   length is the path's own measured length, so it draws exactly once. */
.qrpath__line { stroke-dasharray: 957; stroke-dashoffset: 957; }
.qrpath.is-revealed .qrpath__line {
  animation: qrdraw 1.5s var(--ease, cubic-bezier(.4,0,.2,1)) forwards;
}
.qrpath__dot, .qrpath__t { opacity: 0; }
.qrpath.is-revealed .qrpath__dot,
.qrpath.is-revealed .qrpath__t { animation: qrpop .45s var(--ease, cubic-bezier(.4,0,.2,1)) forwards; }
.qrpath.is-revealed .qrpath__dot:nth-of-type(1),
.qrpath.is-revealed .qrpath__t--scan  { animation-delay: .42s; }
.qrpath.is-revealed .qrpath__dot:nth-of-type(2),
.qrpath.is-revealed .qrpath__t--order { animation-delay: .86s; }
.qrpath.is-revealed .qrpath__dot:nth-of-type(3),
.qrpath.is-revealed .qrpath__t--pay   { animation-delay: 1.3s; }
@keyframes qrdraw { to { stroke-dashoffset: 0; } }
@keyframes qrpop { from { opacity: 0; } to { opacity: 1; } }

/* On a phone the curve is the same shape, just smaller. The dots are set in
   larger user units so they do not vanish once the drawing has shrunk. */
@media (max-width: 700px) {
  .qrpath { margin-top: 30px; }
  .qrpath__dot { r: 13px; }
  .qrpath__t { letter-spacing: 0.09em; }
  .qrpath__t--scan  { transform: translate(-50%, -150%); }
  .qrpath__t--order { transform: translate(-50%, 70%); }
  .qrpath__t--pay   { transform: translate(-88%, -150%); }
}

/* motion turned down: the finished line, no drawing */
@media (prefers-reduced-motion: reduce) {
  .qrpath__line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .qrpath__dot, .qrpath__t { opacity: 1; }
  .qrpath.is-revealed .qrpath__line,
  .qrpath.is-revealed .qrpath__dot,
  .qrpath.is-revealed .qrpath__t { animation: none; }
}

/* ---------------------------------------------------------
   45 · DEYNOQR — THE ROUTE BETWEEN THE STEPS ON A PHONE
   Side by side the four panels read as a set. Stacked, they
   read as four unrelated cards, so a dashed route joins them
   the way a map joins two points. It is a grid item of its
   own, which is why it can sit between the cards at all: the
   panels clip their own overflow, so a pseudo-element hanging
   below one would simply be cut off.
   --------------------------------------------------------- */
.qrlink { display: none; }

@media (max-width: 900px) {
  .qrlink {
    display: block;
    justify-self: center;
    color: var(--deyno-primary);
    opacity: 0.68;
  }
  .qrlink svg { display: block; width: 28px; height: 72px; }
  /* the connector is a row of its own, so the gap either side of it is
     enough on its own — the cards do not also need to be far apart. Scoped
     to this section: the POS showcase stacks too but has no connectors, and
     tightening its rows would just cramp it. */
  #deynoqr .showcase { row-gap: 10px; }
}
@media (max-width: 430px) {
  .qrlink svg { height: 58px; }
}
@media (prefers-reduced-motion: no-preference) {
  .qrlink { transition: opacity 600ms var(--ease); }
}

/* =========================================================
   46 · DEYNO POS — BEYOND THE TILL
   The six panels show the service flow; these blocks answer
   what else the system handles, what it connects to and how
   a restaurant sees it. Built as editorial rows rather than a
   wall of small cards: the category is crowded with 20-card
   SaaS grids and the point here is that each group is a real
   part of the operation, not an icon.
   ========================================================= */
.bey { margin-top: clamp(56px, 7vw, 96px); }
.bey__head { max-width: 44ch; }
.bey__head .h3 { margin-top: 8px; }
.bey__list {
  list-style: none;
  margin: clamp(24px, 3vw, 38px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 4vw, 64px);
}
.bey__r {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--border-default);
}
.bey__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--deyno-tint);
  color: var(--deyno-primary);
}
.bey__i svg { width: 19px; height: 19px; display: block; }
.bey__t b {
  display: block;
  font-size: 17px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--text-primary);
}
.bey__t em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.bey__t p {
  margin: 10px 0 0;
  font-size: 14.5px; line-height: 1.62;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* ---- what it connects to: categories, not borrowed logos ---- */
.wire {
  margin-top: clamp(52px, 6vw, 84px);
  padding-top: clamp(38px, 4vw, 56px);
  border-top: 1px solid var(--border-default);
}
.wire__head { max-width: 62ch; }
.wire__head .lead { margin-top: 12px; font-size: 15.5px; }
.wire__list {
  list-style: none;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.wire__c {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--surface-warm);
}
.wire__c b {
  display: block;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--deyno-primary);
}
.wire__c span {
  display: block;
  margin-top: 7px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary);
}

/* ---- early-stage trust: the process, since there is no proof yet ---- */
.fit {
  margin-top: clamp(52px, 6vw, 84px);
  padding-top: clamp(38px, 4vw, 56px);
  border-top: 1px solid var(--border-default);
}
.fit__head { max-width: 62ch; }
.fit__head .lead { margin-top: 12px; font-size: 15.5px; }
.fit__list {
  list-style: none;
  counter-reset: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.fit__s { display: block; }
.fit__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--deyno-primary);
  color: #fff;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fit__s b {
  display: block;
  margin-top: 14px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.fit__d {
  display: block;
  margin-top: 7px;
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- one call to action, at the end of the journey ---- */
.demo {
  margin-top: clamp(52px, 6vw, 84px);
  padding: clamp(34px, 4vw, 52px) clamp(24px, 4vw, 56px);
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel, 20px);
  background: var(--deyno-tint);
  text-align: center;
}
.demo .h3 { color: var(--accent-ink); }
.demo .lead {
  margin: 12px auto 0;
  max-width: 56ch;
  font-size: 15.5px;
  color: var(--accent-ink);
  opacity: 0.86;
}
.demo .btn-row { margin-top: 24px; }

@media (max-width: 860px) {
  .bey__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bey__r { padding: 20px 0; gap: 13px; }
  .bey__i { width: 34px; height: 34px; }
  .bey__t b { font-size: 16px; }
  .bey__t p { font-size: 14px; }
  .wire__list { grid-template-columns: minmax(0, 1fr); }
  .demo { padding: 28px 20px; }
}

/* Dark theme: --deyno-primary is a fill, not a type colour. On the dark card
   behind them these category labels land at about 1.98:1. Same fix as the
   till's prices — the readable ink instead. */
:root[data-deyno-theme="dark"] .wire__c b { color: var(--accent-ink); }

/* =========================================================
   47 · DEYNOQR — THE FOUR STEPS, STAGGERED
   The four panels read as a numbered walkthrough: a large
   outlined numeral, the interface above, the words below,
   and alternate items dropped down the page so the eye zigzags
   through them instead of scanning a grid of equal boxes.
   The card chrome comes off — the mock-up sits in its own
   tinted frame and the text sits on the page, which is what
   gives the sequence its air.
   ========================================================= */
@media (min-width: 901px) {
  .showcase--steps {
    column-gap: clamp(40px, 5vw, 88px);
    row-gap: clamp(24px, 2.4vw, 40px);
    align-items: start;
  }
  /* The zigzag: every second panel starts lower. nth-of-type, not nth-child —
     the mobile route connectors are siblings in this grid, so by child index
     the panels are all odd and nothing ever matched. They are spans and the
     panels are divs, so counting by type gets the panels 1-2-3-4. */
  .showcase--steps > div.show:nth-of-type(even) { margin-top: clamp(28px, 3.4vw, 58px); }
}

.showcase--steps > .show {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* the words first, the interface under them */
.showcase--steps .show__stage {
  margin-top: clamp(22px, 2.6vw, 34px);
  padding: clamp(22px, 3vw, 38px) clamp(18px, 2.4vw, 34px);
  background: var(--surface-warm);
  border: 1px solid var(--border-default);
  border-radius: 22px;
  align-items: center;
  overflow: hidden;
}

/* the numeral: drawn as an outline, large, at the head of each step */
.showcase--steps .show__n {
  width: auto; height: auto;
  /* it is a grid item now, so it would stretch the column and centre its own
     glyph. Pin it to the start so the numeral lines up with the words. */
  justify-self: start;
  margin: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--deyno-primary);
  text-stroke: 2px var(--deyno-primary);
}
/* Safari and Firefox both support -webkit-text-stroke, but if a browser ever
   does not, transparent text would vanish entirely. Paint it back. */
@supports not ((-webkit-text-stroke: 2px red) or (text-stroke: 2px red)) {
  .showcase--steps .show__n { color: var(--deyno-primary); }
}
/* In dark mode --deyno-primary is a deep wine that all but disappears against
   the near-black page — measured 2.07:1. The lighter accent ink is what the
   rest of the site uses for type on dark, so the numerals take it too. */
:root[data-deyno-theme="dark"] .showcase--steps .show__n {
  -webkit-text-stroke-color: var(--accent-ink);
  text-stroke: 2px var(--accent-ink);
}
@supports not ((-webkit-text-stroke: 2px red) or (text-stroke: 2px red)) {
  :root[data-deyno-theme="dark"] .showcase--steps .show__n { color: var(--accent-ink); }
}

/* The phones are drawn bottomless on purpose: in the old card layout they
   bled off the bottom edge. Here the frame has padding under them, so that
   flat edge floats mid-frame and reads as a picture that got cut. Close the
   devices off — round the bottom corners, give the screen a little floor and
   add the home indicator — so each one is a whole phone sitting in the frame. */
.showcase--steps .show__stage .dev {
  border-radius: 34px;
  padding: 8px;
}
.showcase--steps .show__stage .dev__scr {
  border-radius: 27px;
  padding-bottom: 10px;
}
.showcase--steps .show__stage .dev__scr::after {
  content: "";
  display: block;
  width: 96px; height: 4px;
  margin: 12px auto 2px;
  border-radius: 4px;
  background: var(--text-primary);
  opacity: 0.24;
}

.showcase--steps .show__t { margin-top: 12px; }
.showcase--steps .show__d { margin-top: 12px; max-width: 46ch; }

@media (max-width: 900px) {
  .showcase--steps > .show { gap: 0; }
  .showcase--steps .show__stage { margin-top: 18px; padding: 20px 16px; border-radius: 18px; }
  .showcase--steps .show__n { font-size: clamp(44px, 13vw, 62px); }
  .showcase--steps .show__t { margin-top: 8px; }
}

/* =========================================================
   48 · DEYNO POS — EVERY CAPABILITY, ONE TILE EACH
   Replaces the old "Beyond the till" list and the "Built to
   connect" row. A plain four-across grid: a tinted icon
   square, the name of the part, and one line saying what it
   does. Nothing claimed here that the page did not already
   claim — the layout changed, not the promises.
   ========================================================= */
.kit { margin-top: clamp(56px, 7vw, 104px); }

.kit__head { max-width: 62ch; margin: 0 0 clamp(28px, 3.4vw, 48px); }
.kit__head .h3 { margin: 10px 0 0; }
.kit__head .lead { margin-top: 14px; }

.kit__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.kit__c {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
}

.kit__i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--deyno-tint);
  color: var(--accent-ink);
}
.kit__i svg { width: 21px; height: 21px; display: block; }

.kit__t { min-width: 0; }
.kit__t b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--text-primary);
  line-height: 1.28;
}
.kit__t span {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--text-secondary);
}

/* the one capability that is not shipped yet reads as such */
.kit__c--soon { border-style: dashed; }

@media (max-width: 1100px) { .kit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .kit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On a phone the index goes four across. There is no room beside an icon for
   a line of explanation at that width, so the tile stacks — icon over name —
   and the description is dropped rather than squeezed to two words a line.
   Twenty capabilities is five rows of four. */
@media (max-width: 560px) {
  .kit__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .kit__c {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 5px 11px;
    border-radius: 13px;
  }
  .kit__i { width: 32px; height: 32px; border-radius: 9px; }
  .kit__i svg { width: 17px; height: 17px; }
  .kit__t b {
    font-size: 10.5px;
    line-height: 1.22;
    letter-spacing: -0.002em;
    /* break a long name only when it genuinely cannot fit — `anywhere` was
       splitting Reconciliation mid-word when it had room to sit whole */
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .kit__t span { display: none; }
}

/* =========================================================
   49 · DEYNO POS — OUTCOMES, THE ORDER FLOW, GROUPED INDEX
   The section used to open on a feature showcase. It now
   opens on what the thing is for, then follows one order the
   whole way through the restaurant, and only lists the full
   capability set once the story has been told.
   ========================================================= */

/* ---- what it is for, three ways ---- */
.out {
  list-style: none;
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 42px);
}
.out__c {
  padding-top: 20px;
  border-top: 2px solid var(--deyno-primary);
}
.out__c b {
  display: block;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text-primary);
}
.out__c span {
  display: block;
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
@media (max-width: 820px) { .out { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---- one order, stop by stop ---- */
.flow { margin-top: clamp(48px, 6vw, 86px); }
.flow__h {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}
.flow__l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* the column gap is where the arrows live */
  column-gap: var(--flow-gap, clamp(22px, 2.4vw, 38px));
  row-gap: clamp(30px, 3vw, 44px);
}
.flow__s {
  position: relative;
  padding: clamp(14px, 1.4vw, 19px) clamp(12px, 1.2vw, 17px) clamp(15px, 1.5vw, 20px);
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
}
/* the arrow from each stop to the next, drawn in the gap between the boxes */
.flow__s::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--flow-gap, clamp(22px, 2.4vw, 38px)) / -2);
  width: 8px; height: 8px;
  border-top: 2px solid var(--deyno-primary);
  border-right: 2px solid var(--deyno-primary);
  transform: translate(50%, -50%) rotate(45deg);
}
.flow__s:last-child::after { content: none; }
.flow__s b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.flow__s span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
/* Fewer columns: the arrow at the end of a row would point into nothing, so
   it is dropped there and the eye picks up again on the next row. */
@media (max-width: 1100px) {
  .flow__l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow__s:nth-child(4n)::after { content: none; }
}
@media (max-width: 760px) {
  .flow__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__s:nth-child(4n)::after { content: ""; }
  .flow__s:nth-child(2n)::after { content: none; }
}
/* On a phone the chain runs down the page, so the arrows turn with it. */
@media (max-width: 460px) {
  .flow__l { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .flow__s { padding: 14px 16px 15px; }
  .flow__s::after,
  .flow__s:nth-child(2n)::after,
  .flow__s:nth-child(4n)::after { content: ""; }
  .flow__s::after {
    top: auto; right: auto;
    bottom: -13px; left: 50%;
    transform: translate(-50%, 50%) rotate(135deg);
  }
  .flow__s:last-child::after { content: none; }
}

/* ---- the capability index: one grid, uniform tiles ----
   The six headed groups are gone. Twenty tiles across four columns is five
   exact rows with no ragged end, and grid-auto-rows: 1fr makes every tile the
   height of the tallest in the set, so the whole block reads as one field
   rather than six blocks of different weights. */
.kit__grid { grid-auto-rows: 1fr; }

/* =========================================================
   50 · KOT & KITCHEN — THE PASS, WITH THE TICKETS OVER IT
   The photograph sets the scene; Deyno's own tickets sit on
   top of it so the product, not the picture, is what the
   visitor reads as the interface. The screen in the photo is
   a kitchen, not a claim about what Deyno's display looks
   like — Deyno's ticket card is the thing being shown.
   ========================================================= */
.kscene {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-warm);
}
.kscene__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Panels 2 and 3 sit side by side in one row. Each now holds the photograph
   alone — the Deyno screen mock-ups that used to sit under them were removed,
   so the picture is the whole stage. */
.kscene { background: none; border-radius: 0; }
.kscene__img { border-radius: 14px; }

/* =========================================================
   51 · TABLES & ORDERS — THE FLOOR, BESIDE THE SCREEN
   Side by side rather than overlaid, so it does not read as
   the same composition as the kitchen panel above it: the
   photograph is the room, the Deyno screen beside it is the
   product. The handheld in the photograph is a waiter's
   device, not a claim about what Deyno's handheld looks like.
   ========================================================= */
.fscene { display: block; }
.fscene__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* the handheld sits centre-left and a little low in the frame; hold that
     rather than the middle, so the crop never loses the screen */
  object-position: 44% 58%;
  border-radius: 18px;
}

.fscene__img { border-radius: 14px; }

/* =========================================================
   52 · DEYNO DINING — THE JOURNEY AS ONE RECORDED LOOP
   Was a drawn SVG of ten screens sliding upward. It is now a
   sixteen-second video of the app being USED: real dish
   photography, and every change on screen caused by a visible
   tap — a card, a tab, a dish, a time, Confirm. Recorded off a
   deterministic timeline, so it is frame-exact rather than
   whatever the browser felt like rendering that day.
   ========================================================= */
#deynodining .pstory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  grid-template-areas: "copy stage" "btns stage";
  align-items: center;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 26px;
}
#deynodining .pstory__stage { display: flex; justify-content: center; }
.pjourney {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  /* the recording carries its own warm ivory ground; the same colour sits
     behind it so nothing flashes while the first frame decodes */
  background: var(--surface-warm, #F7F3F0);
  object-fit: cover;
}
@media (max-width: 900px) {
  #deynodining .pstory {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "stage" "btns";
    row-gap: 28px;
    justify-items: center;
    text-align: center;
  }
  #deynodining .pstory__copy { max-width: 40ch; }
  .pjourney { max-width: min(100%, 460px); }
}
/* Motion turned down: a <video> ignores the media query, so it is paused in
   script instead (see the pjourney block in index.html) and the poster — the
   home screen — is what stays on show. */

/* =========================================================
   53 · THE TILL'S MENU PICTURES
   They used to be sized by whatever space the tile had left
   after the name and the price, with a 30px floor — which in
   a till that had run out of room meant a sliver of a
   photograph rather than a picture of a dish. They hold their
   own 3:2 shape now and crop to fill it, and the till sizes
   to its content instead of a fixed height so nothing clips.
   ========================================================= */
.term { height: auto; }
.tgrid { grid-auto-rows: auto; }
.titem .titem__img {
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  object-fit: cover;
}
.titem .dish__img { background-size: cover; background-position: center; }

/* =========================================================
   55 · REACH US — FLOATING CALL AND WHATSAPP BUTTONS
   Fixed bottom-right on every page. Below the mobile nav in
   the stack (that panel is opaque and full-screen, so it
   covers these rather than fighting them) and clear of the
   iOS home indicator.
   ========================================================= */
.reach {
  position: fixed;
  z-index: 90;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.reach__b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  width: 54px;
  padding: 0;
  border-radius: 27px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(33, 26, 29, 0.45),
              0 2px 6px -2px rgba(33, 26, 29, 0.3);
  overflow: hidden;
  transition: width var(--t-mid, .3s) var(--ease, ease),
              gap var(--t-mid, .3s) var(--ease, ease),
              padding var(--t-mid, .3s) var(--ease, ease),
              transform var(--t-fast, .2s) var(--ease, ease),
              box-shadow var(--t-fast, .2s) var(--ease, ease);
}
.reach__b svg {
  flex: 0 0 auto;
  width: 24px; height: 24px;
}
/* The label is there for a pointer; it is why the pill grows on hover. It has
   to collapse to no width at rest — opacity alone still reserves the space,
   which pushed the icon out of a 54px circle with overflow hidden and left
   two blank discs on the screen. */
.reach__t {
  flex: 0 0 auto;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  opacity: 0;
  transition: max-width var(--t-mid, .3s) var(--ease, ease),
              margin-left var(--t-mid, .3s) var(--ease, ease),
              opacity var(--t-fast, .2s) var(--ease, ease);
}

.reach__b--call { background: var(--deyno-primary); }
.reach__b--wa   { background: #25D366; }

@media (hover: hover) and (pointer: fine) {
  .reach__b:hover, .reach__b:focus-visible {
    width: auto;
    padding: 0 22px;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -10px rgba(33, 26, 29, 0.5),
                0 2px 6px -2px rgba(33, 26, 29, 0.32);
  }
  .reach__b:hover .reach__t, .reach__b:focus-visible .reach__t {
    max-width: 160px;
    margin-left: 11px;
    opacity: 1;
  }
}
/* Touch: no hover to expand the pill, so the label never shows and the
   circle stays a circle. The aria-label carries the meaning. */
@media (hover: none) {
  .reach__t { display: none; }
}

.reach__b:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .reach { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); gap: 10px; }
  .reach__b { height: 50px; width: 50px; border-radius: 25px; }
  .reach__b svg { width: 22px; height: 22px; margin-left: 14px; margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .reach__b { transition: none; }
}

/* While the mobile menu is open the buttons would sit under an opaque panel
   anyway, but hiding them keeps them out of the tab order. The script sets
   .is-locked on <body> when the panel opens. */
body.is-locked .reach { display: none; }

/* =========================================================
   56 · THE NUMBER, PINNED IN THE HEADER
   Sits between the nav and the Partner button, so it reads as
   a way to reach us rather than as another navigation item.
   The header is a flex row with a fixed gap; the number is
   the first thing to give up its digits when the row runs out
   of width, and the last thing to disappear entirely.
   ========================================================= */
.hcall {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--t-fast, .2s) var(--ease, ease),
              color var(--t-fast, .2s) var(--ease, ease),
              background-color var(--t-fast, .2s) var(--ease, ease);
}
.hcall svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent-ink); }
.hcall:hover {
  border-color: var(--border-burgundy-soft, var(--accent-ink));
  color: var(--accent-ink);
  background: var(--deyno-tint);
}
.hcall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* over a dark hero, before the header goes solid */
.header.on-dark:not(.is-solid) .hcall { color: var(--text-on-dark); border-color: rgba(255,255,255,0.3); }
.header.on-dark:not(.is-solid) .hcall svg { color: var(--text-on-dark); }

/* 1180 and under the row is tight: keep the icon, drop the digits */
@media (max-width: 1180px) {
  .hcall { padding: 9px; gap: 0; }
  .hcall span { display: none; }
}
/* the burger takes over here, and the number lives in the mobile menu instead */
@media (max-width: 980px) {
  .hcall { display: none; }
}

/* the same number at the foot of the mobile menu, where the header cannot show it */
.mncall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-decoration: none;
}
.mncall svg { width: 18px; height: 18px; color: var(--accent-ink); }

/* =========================================================
   57 · THE NUMBERS, PINNED BOTTOM RIGHT
   Two rows in one card, fixed so they stay put through the
   whole scroll. The plain number dials; the WhatsApp one
   opens WhatsApp. Each row is its own link and its own tap
   target — the card itself is only a group. This replaced the
   two round buttons that used to sit here: same two actions,
   but the numbers are visible rather than hidden behind an
   icon, so there was no reason to show both.
   ========================================================= */
.floatnum {
  position: fixed;
  z-index: 90;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border-default);
  box-shadow: 0 14px 30px -12px rgba(33, 26, 29, 0.4),
              0 2px 6px -2px rgba(33, 26, 29, 0.22);
}
.floatnum__r {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 13px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color var(--t-fast, .2s) var(--ease, ease);
}
.floatnum__r:hover { background: var(--surface-warm); }
.floatnum__r:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.floatnum__i {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: #fff;
}
.floatnum__i svg { width: 17px; height: 17px; display: block; }
.floatnum__i--call { background: var(--deyno-primary); }
.floatnum__i--wa   { background: #25D366; }

.floatnum__t { display: flex; flex-direction: column; line-height: 1.15; }
.floatnum__t small {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.floatnum__t b {
  margin-top: 3px;
  font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .floatnum {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 16px;
  }
  .floatnum__r { padding: 5px 12px 5px 5px; gap: 9px; }
  .floatnum__i { width: 30px; height: 30px; }
  .floatnum__i svg { width: 15px; height: 15px; }
  .floatnum__t small { font-size: 9px; }
  .floatnum__t b { margin-top: 2px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) { .floatnum__r { transition: none; } }
body.is-locked .floatnum { display: none; }

/* =========================================================
   58 · FOOTER — THE COMPANY DETAILS
   A band under the four link columns and above the copyright
   line: who the entity is, where it is, the email, and every
   telephone number. All of them dial.
   ========================================================= */
.footer__co {
  display: grid;
  grid-template-columns: 1.5fr 1fr 2fr;
  gap: 40px;
  margin-top: clamp(36px, 4vw, 54px);
  padding-top: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer__co h5 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.footer__co p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}
.footer__co ul { list-style: none; margin: 0; padding: 0; }
.footer__co li { margin-bottom: 8px; }
.footer__co a {
  font-size: 14.5px;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.footer__co a:hover { color: var(--text-on-dark); text-decoration: underline; }

/* six numbers read as a block, not a long column */
.footer__co__b--tel ul {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 1000px) {
  .footer__co { grid-template-columns: 1fr 1fr; }
  .footer__co__b--tel { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .footer__co { grid-template-columns: 1fr; gap: 30px; }
  .footer__co__b--tel ul { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 420px) {
  .footer__co__b--tel ul { grid-template-columns: max-content; }
}

/* =========================================================
   59 · THE BILL, PHOTOGRAPHED
   The Bill panel's drawn mock-up gives way to the rendered
   scene. The panel keeps its own heading and copy, so the
   image is cropped to the composition alone.
   ========================================================= */
.billshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* =========================================================
   60 · THE PRODUCT PHOTOGRAPHS
   Eight supplied Deyno POS renders. Every one keeps its own
   proportion — nothing is cropped, only resized — so where a
   tall picture sits beside text, it is the LAYOUT that makes
   them meet: the picture is sized to the text it stands next
   to, or moved beside content tall enough to match it.

   Each photo band joins a neighbour of the same colour. Two
   sections' padding stacked there made a 192px hole, so the
   shared side carries no padding of its own.
   ========================================================= */

/* ---- the ecosystem, photographed: a continuation of the warm
       story above it, so it adds no top padding of its own ---- */
.ecoshot { padding-top: 0; }
.ecoshot__fig { margin: 0; }
.ecoshot__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel, 18px);
  background: var(--surface-warm, #F7F3F0);
}
.ecoshot__cap {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

/* ---- the tall counter shot, beside the capability grid ----
   It used to stand beside the four-line introduction and left
   ~490px of empty space next to it. The grid is the tall thing
   on this page, so that is what it pairs with. */
.kit__shot { margin: 0; }
.kit__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel, 18px);
  background: var(--surface-warm, #F7F3F0);
}
@media (min-width: 901px) {
  /* Two across, ten exact rows: the tiles keep the width their text needs (four
     across beside the picture squeezed them to ~200px and the grid ballooned to
     916px), and the grid still ends square — no ragged last row. The picture is
     pinned, so as the tiles scroll past it stays level with whichever are on
     screen and the column beside them never reads as empty. */
  .kit__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 390px);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }
  .kit__body .kit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit__shot { position: sticky; top: clamp(84px, 11vh, 112px); }
}
@media (max-width: 900px) {
  .kit__shot { max-width: 340px; margin: clamp(28px, 6vw, 40px) auto 0; }
}

/* ---- the product family: the products page's opening picture.
       It shares the page heading's warm ground, so it starts right
       under the heading instead of after a second band of padding. ---- */
.famshot { padding-top: 0; }
.famshot__fig { margin: 0; }
.famshot__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 960px;
  margin-inline: 0;            /* the heading above is left-aligned: so is this */
  border-radius: var(--r-panel, 18px);
  background: var(--surface, #fff);
}
.famshot__cap {
  margin-top: 16px;
  max-width: 960px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: left;
}

/* ---- the hardware block (products page) ---- */
.hw__head { max-width: 58ch; }
.hw__head .h2 { margin-top: 10px; }
.hw__head .lead { margin-top: 14px; }

.hw__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(32px, 4vw, 52px);
  align-items: start;
}
.hw__card { margin: 0; }
.hw__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel, 18px);
  background: var(--surface, #fff);
}
.hw__card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}
.hw__card figcaption b { font-size: 15px; color: var(--text-primary); }
.hw__card figcaption span { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 760px) {
  .hw__grid { grid-template-columns: minmax(0, 1fr); }
}

/* the kiosk: portrait beside its own copy. The four peripherals are a 2×2
   grid rather than a short list, so the copy column carries real height
   next to the picture instead of a few lines floating in the middle of it */
.hw__kiosk {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
}
.hw__kioskfig { margin: 0; }
.hw__kioskfig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel, 18px);
  background: var(--surface, #fff);
}
.hw__kioskcopy .h3 { margin-top: 10px; }
.hw__kioskcopy .lead { margin-top: 12px; }
.hw__specs {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hw__specs li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-default);
  border-radius: 14px;
}
.hw__si {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--deyno-50, #FAF0F3);
  color: var(--deyno-primary);
}
.hw__si svg { width: 21px; height: 21px; display: block; }
.hw__specs b {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--text-primary);
}
@media (max-width: 860px) {
  .hw__kiosk { grid-template-columns: minmax(0, 1fr); }
  .hw__kioskfig { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 420px) {
  .hw__specs li { padding: 16px 14px; gap: 11px; }
  .hw__specs b { font-size: 13.5px; }
}

/* ---- the connected hardware, beside the whole services list ----
   It used to sit inside the Operate row only: one picture, far right, with a
   gap before it and four empty right-hand halves in the rows below. It now
   stands beside all five, pinned so it travels with them as they scroll. */
.svc__shot { margin: 0; }
.svc__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel, 18px);
  background: var(--surface, #fff);
}
@media (min-width: 901px) {
  .svc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 460px);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
    margin-top: 70px;
  }
  .svc .numbered { margin-top: 0; }
  .svc__shot { position: sticky; top: clamp(84px, 11vh, 112px); }
}
@media (max-width: 900px) {
  .svc__shot { margin-top: clamp(28px, 6vw, 40px); max-width: 520px; }
}

/* ---- the hero photograph ----
   The café shot is square where the old terminal was 4:3, so at the old
   620px cap it stood ~280px taller than the headline. Shrinking it inside the
   old 62% column then left a ~250px empty band between headline and picture.
   So the column is now exactly the picture's width and the copy takes the
   rest: level with the copy, no gap in the middle, nothing cropped. */
@media (min-width: 1180px) {
  .hero__inner:has(.hero__stage--shot) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  }
}
@media (min-width: 981px) and (max-width: 1179px) {
  .hero__inner:has(.hero__stage--shot) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  }
}
@media (min-width: 981px) {
  .hero__stage--shot .hero__shot { max-width: 100%; margin: 0; }
}

/* the heading and the family photo now read as one block — no rule between them */
.pagehead:has(+ .famshot) { border-bottom: 0; }