/* Content pages of qrok.uz (uzqr, tips, pricing). Same tokens as the landing page:
   ishkor teal on a cool grey ground, Unbounded for headings, Golos Text for the rest. */
:root {
  --ground: #F2F5F4; --card: #FFFFFF; --line: #D2DDDB; --line-soft: #E4EBEA;
  --ink: #0E1A1C; --dim: #5C7072; --faint: #8A9A9B;
  --accent: #12787E; --accent-soft: #12787E14; --accent-ink: #FFFFFF;
  --walk: #B4530F; --walk-soft: #B4530F14;
  --yes: #1F7A2E; --yes-bg: #E5F4E7; --no: #B42318; --no-bg: #FBE8E6; --part: #8A5A00; --part-bg: #FFF3D6;
  --shadow: 0 1px 2px rgba(14, 26, 28, .05), 0 18px 50px -28px rgba(14, 26, 28, .4);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #08100F; --card: #101A1A; --line: #213130; --line-soft: #1A2626;
    --ink: #E6EEEC; --dim: #8CA3A2; --faint: #6A8180;
    --accent: #43B0AE; --accent-soft: #43B0AE1c; --accent-ink: #052120;
    --walk: #E8935A; --walk-soft: #E8935A1c;
    --yes: #7FD38C; --yes-bg: #173A20; --no: #F28B82; --no-bg: #3D1C1A; --part: #E9C46A; --part-bg: #3A3016;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 20px 55px -30px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}

* { box-sizing: border-box }
html { background: var(--ground) }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 16px/1.6 "Golos Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(60% 45% at 50% 0%, var(--accent-soft), transparent 70%);
  background-repeat: no-repeat;
}
.wrap { max-width: 760px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) 18px calc(48px + env(safe-area-inset-bottom, 0px)) }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0 26px }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 600 18px/1 "Unbounded", "Golos Text", sans-serif; color: var(--ink); text-decoration: none }
.brand .logo { width: 28px; height: 28px; flex: none; display: block }
.brand .tick { color: var(--accent) }

h1 { font: 600 clamp(26px, 5vw, 34px)/1.18 "Unbounded", "Golos Text", sans-serif; margin: 0 0 14px; letter-spacing: -.01em; text-wrap: balance }
h2 { font: 600 clamp(19px, 3.4vw, 23px)/1.25 "Unbounded", "Golos Text", sans-serif; margin: 0 0 12px; text-wrap: balance }
.lede { font-size: clamp(17px, 2.4vw, 19px); color: var(--dim); margin: 0 0 8px }
section { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 22px 24px; margin: 22px 0 0 }
section p { margin: 0 0 12px }
section p:last-child { margin-bottom: 0 }
ul, ol { margin: 0 0 12px; padding-left: 22px }
li { margin: 0 0 8px }
b { font-weight: 600 }

.steps { list-style: none; counter-reset: s; padding: 0 }
/* The number sits in the gutter, so a step's bold title and its text flow as one paragraph. */
.steps li { counter-increment: s; position: relative; padding-left: 40px; min-height: 28px; margin-bottom: 12px }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 14px;
}

/* The list only: the section that holds it is also class="faq" and keeps its own gap. */
dl.faq { margin: 0 }
.faq dt { font-weight: 600; margin-top: 14px }
.faq dt:first-child { margin-top: 0 }
.faq dd { margin: 4px 0 0; color: var(--dim) }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px;
  border-radius: 12px; background: var(--accent); color: var(--accent-ink);
  font: 600 17px/1 "Golos Text", sans-serif; text-decoration: none; border: 0; cursor: pointer;
}
.btn:hover { filter: brightness(1.06) }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 15px }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent) }
.cta { margin: 18px 0 0 }

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 }
/* Text right after the cards keeps its distance from their border. */
.prices + p, .prices + ul { margin-top: 16px }
.price { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 6px; align-content: start }
.price.pick { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent) }
.price b { font: 600 17px/1.2 "Unbounded", "Golos Text", sans-serif }
/* A card with a «more» link at its foot: the link stretches over the whole card (::after), so a tap
   anywhere on it opens the page. */
.price:has(.more) { position: relative; transition: border-color .15s }
.price:has(.more):hover { border-color: var(--accent) }
.price .more { margin-top: 2px; font-weight: 600; font-size: 14.5px; color: var(--accent); text-decoration: none }
.price .more::after { content: ""; position: absolute; inset: 0; border-radius: 14px }
.price .more:focus-visible { outline: none }
.price:has(.more:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
.price .sum { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums }
.price span { color: var(--dim); font-size: 14.5px }

a { color: var(--accent) }

/* The footer (templates/partials/footer.hbs): four columns of links, two on a phone. */
.foot { color: var(--dim); font-size: 14px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line) }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px }
.foot-title { margin: 0 0 6px; font-weight: 600; color: var(--ink) }
.foot-col ul { list-style: none; margin: 0; padding: 0 }
.foot-col li { margin: 0; line-height: 1.35 }
.foot-col li > a { display: inline-block; padding: 4px 0 }
.foot-col li:not(:has(a)) { padding: 4px 0; color: var(--faint) }
.foot a { color: var(--dim); text-decoration: none }
.foot a:hover { color: var(--accent); text-decoration: underline }
.foot a[aria-current="page"] { color: var(--ink) }
.foot-brand { margin: 22px 0 0; text-align: center; font-size: 13px }
.foot-brand a { color: var(--faint) }
@media (max-width: 720px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* «What next» at the end of a guide, and the lists of articles (/help/, /partners/): cards
   that link on. */
.next-links, .help-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px }
.help-list { margin: 0 0 12px }
.help-list:last-child { margin-bottom: 0 }
.next-links a, .help-list a { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none }
.next-links a:hover, .help-list a:hover { border-color: var(--accent); background: var(--accent-soft) }
.next-links b, .help-list b { color: var(--accent); font-size: 16px; line-height: 1.3 }
.next-links b::after, .help-list b::after { content: "\00a0→" }
.next-links span, .help-list span { color: var(--dim); font-size: 14.5px; line-height: 1.45 }

/* «What the numbers say» (home, /tips/): the personal demos' figures with their sources. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin: 4px 0 0 }
.stat { border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px }
.stat b { font: 600 28px/1.05 "Unbounded", "Golos Text", sans-serif; color: var(--accent); letter-spacing: -.01em }
.stat span { font-size: 14.5px; line-height: 1.45 }
.stat i { font: 500 11.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; font-style: normal; color: var(--dim); margin-top: auto }
.stat i a, .quote cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line) }
.stat i a:hover, .quote cite a:hover { color: var(--accent); text-decoration-color: currentColor }
.quote { margin: 18px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); font-size: 17px; line-height: 1.55 }
.quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--dim) }

/* A product card on the home page: text and one phone screenshot side by side, stacked on a phone. */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px 24px; align-items: center }
.feature-shot { margin: 0 }
.feature-shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff }
@media (max-width: 560px) {
  .feature { grid-template-columns: minmax(0, 1fr) }
  .feature-shot { max-width: 240px; justify-self: center }
}

.head-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto }

/* The site header (templates/partials/topbar.hbs): wider than the text column, so the five
   sections, the languages and the button fit on one line on a laptop. */
.site-head { max-width: 1080px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) 18px 0 }
.site-head + .wrap { padding-top: 0 }
.site-head .topbar { position: relative }
.nav { flex: 1 1 auto; min-width: 0 }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px }
.nav-list > li { margin: 0; position: relative }
.nav-drop > summary, .nav-top {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 10px;
  color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none;
}
.nav-drop > summary::-webkit-details-marker { display: none }
.nav-drop > summary::after { content: ""; width: 6px; height: 6px; margin: 0 1px 3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .55 }
.nav-drop[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg) }
.nav-drop > summary:hover, .nav-top:hover, .nav-drop[open] > summary { background: var(--accent-soft) }
.nav-top[aria-current="page"], .nav-drop > summary.here { color: var(--accent) }
.nav a:focus-visible, .nav-drop > summary:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.nav-sub { list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 260px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow) }
.nav-sub li { margin: 0 }
.nav-sub a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink); font-size: 15px; line-height: 1.35; text-decoration: none }
.nav-sub a:hover { background: var(--accent-soft) }
.nav-sub a[aria-current="page"] { color: var(--accent); font-weight: 600 }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer }
html.nav-open .nav-toggle { border-color: var(--accent); color: var(--accent) }
/* Narrow laptops and tablets: the short button label leaves room for the sections. */
@media (max-width: 1000px) {
  .site-head .head-links .btn .long { display: none }
  .site-head .head-links .btn .short { display: inline }
  .nav-drop > summary, .nav-top { padding: 0 8px; font-size: 14.5px }
  .site-head .head-links { gap: 10px }
}
/* Phones: brand, languages, the button and «Menu» in one row; the sections open under it
   as one list, each a tap to unfold. Without the script the list simply stays open. */
@media (max-width: 720px) {
  .site-head .topbar { flex-wrap: wrap; row-gap: 0 }
  .nav-toggle { display: inline-flex }
  .nav { order: 3; flex-basis: 100% }
  html.js .nav { display: none }
  html.js.nav-open .nav { display: block }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; margin-top: 12px; padding: 6px;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow) }
  .nav-drop > summary, .nav-top { min-height: 46px; font-size: 16px; justify-content: space-between; padding: 0 12px }
  .nav-sub { position: static; min-width: 0; padding: 0 0 6px 8px; border: 0; box-shadow: none; background: transparent }
  .nav-sub a { padding: 11px 12px; font-size: 15.5px }
}
.cta { display: flex; gap: 10px; flex-wrap: wrap }
.crumbs { margin: 0 0 10px; font-size: 14px; color: var(--faint) }
.crumbs a { color: var(--dim) }
.sources ul { font-size: 14.5px; color: var(--dim) }
.sources .note { font-size: 14px; color: var(--faint) }
.lang-links { display: inline-flex; gap: 2px; font-size: 13px; font-weight: 500 }
.lang-links a { padding: 4px 7px; border-radius: 7px; color: var(--dim); text-decoration: none }
.lang-links a:hover { color: var(--ink); background: var(--accent-soft) }
.lang-links a[aria-current="true"] { color: var(--accent); background: var(--accent-soft) }
/* Phones: brand, languages, the connect button and «Menu» on one row; the bot link lives in
   the menu and the footer. */
@media (max-width: 480px) {
  .topbar { gap: 8px }
  .site-head { padding-left: 14px; padding-right: 14px }
  .head-links, .site-head .head-links { gap: 6px; flex-wrap: nowrap }
  .head-links .btn.small { padding: 0 10px; font-size: 14px; min-height: 38px; white-space: nowrap }
  .nav-toggle { width: 38px; height: 38px }
  .brand { font-size: 16px; gap: 7px }
  .brand .logo { width: 24px; height: 24px }
  .lang-links a { padding: 4px 5px }
  .head-links .btn .long { display: none }
  .head-links .btn .short { display: inline }
}

.btn .short { display: none }

/* Tables in legal pages scroll inside their card, never the page. */
section table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 12px; font-size: 15px }
section th, section td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top }
section th { background: var(--accent-soft); font-weight: 600 }
.price .soon-note { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--dim); font-size: 14px }
.price .soon-note b { color: var(--accent); font-weight: 600; font-family: inherit; font-size: inherit }

/* ---------- /demo/: the slip and the live guest screens, side by side ---------- */
/* Bottoms aligned, so the two captions share a line whatever the heights above them. */
.demo-stage { display: flex; flex-wrap: wrap; gap: 22px 28px; justify-content: center; align-items: flex-end; margin: 18px 0 16px }
.demo-stage figure { margin: 0; display: grid; gap: 10px; justify-items: center; min-width: 0; max-width: 100% }
/* On a phone the demo phone is no wider than the cards under it (a flex item would otherwise
   keep its 408 px and stick out past them). */
.demo-phone { flex: 0 1 408px }
.demo-phone .phone { width: 100% }
.demo-stage figcaption { font-size: 13px; color: var(--dim); text-align: center; max-width: 30ch; text-wrap: balance }
/* Thermal paper stays white in the dark theme too: it is an object, not part of the page. */
/* The picture is the print area edge to edge; the padding is the paper's own margin, which
   the printer leaves and a screenshot of the render does not: 4 mm a side of 72 mm printed. */
.demo-slip img { display: block; width: 250px; height: auto; background: #fff; border-radius: 3px; padding: 18px 14px 10px; box-sizing: content-box;
  box-shadow: 0 1px 2px rgba(14, 26, 28, .12), 0 14px 34px -18px rgba(14, 26, 28, .55) }
/* 390 px inside the bezel: the width of a real phone. Narrower, and the guest screens are
   shown at a size they never run at — card numbers clip, buttons spill. */
.phone { width: 408px; max-width: 100%; border-radius: 40px; padding: 9px; background: #15201F;
  box-shadow: 0 1px 2px rgba(14, 26, 28, .2), 0 22px 50px -24px rgba(14, 26, 28, .7) }
.phone iframe { display: block; width: 100%; height: 760px; border: 0; border-radius: 31px; background: #fff }
.demo-stage.one .phone iframe { height: 640px }
/* The bill paid by its top code: stills of the guest's payment apps, three in a row; on a phone
   they scroll sideways rather than shrink past reading. */
.demo-apps { display: flex; gap: 18px; justify-content: center; margin: 18px 0 16px; padding: 4px 2px 14px; overflow-x: auto; scroll-snap-type: x mandatory }
.demo-apps figure { margin: 0; flex: 0 0 214px; display: grid; gap: 10px; justify-items: center; scroll-snap-align: center }
.demo-apps .phone { width: 214px; border-radius: 30px; padding: 6px }
.demo-apps .phone img { display: block; width: 100%; height: auto; border-radius: 25px }
.demo-apps figcaption { font-size: 13px; color: var(--dim); text-align: center }
@media (max-width: 720px) { .demo-apps { justify-content: flex-start } }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }
/* The home page's live phone, a size down beside the slip on a wide screen: scaled, so the
   screen inside still lays out at a real phone's 390 px (2026-10-07). Not `zoom`: Safari shrank
   the frame and left the page inside at full size. The negative margins give back the space
   the unscaled 408 × 778 box would hold (×0.8 → 326.4 × 622.4). */
@media (min-width: 561px) {
  .home .demo-phone { flex: 0 0 326.4px; justify-items: start }
  .home .demo-phone .phone { width: 408px; max-width: none; transform: scale(.8); transform-origin: 0 0; margin: 0 -81.6px -155.6px 0 }
  .home .demo-phone figcaption { justify-self: center }
}
@media (max-width: 460px) { .phone { border-radius: 30px; padding: 7px } .phone iframe { border-radius: 23px; height: 700px } .demo-stage.one .phone iframe { height: 620px } }

/* /no-pos/: the paper bill and the waiter's two screens. Paper and phones are objects: they keep
   their own colours in the dark theme, like the thermal slip above. The phone screens copy the
   waiter page (src/me.js) at 250 px, in the demo venue's colours. */
.nopos { gap: 22px 16px }
.nopos figcaption { max-width: 210px }
.nopos figure { flex: 0 0 auto }
/* Three in a row on a wide page: the drawings scale down together, text stays proportional. */
@media (min-width: 720px) { .nopos .pad, .nopos .mphone { zoom: .8 } }
.pad { width: 232px; padding: 16px 16px 18px 30px; background: #FFFDF5; color: #243B7A; border-radius: 3px;
  font: 500 19px/28px "Caveat", "Segoe Print", cursive; text-align: left;
  background-image: linear-gradient(90deg, transparent 21px, #E8A0A0 21px, #E8A0A0 22px, transparent 22px),
    repeating-linear-gradient(#FFFDF5 0 27px, #C9D8EC 27px 28px);
  box-shadow: 0 1px 2px rgba(14, 26, 28, .12), 0 14px 34px -18px rgba(14, 26, 28, .55); transform: rotate(-1.2deg) }
.pad b { display: block; font-weight: 600; font-size: 23px }
.pad i { display: block; font-style: normal }
.pad ul { list-style: none; margin: 0; padding: 0 }
.pad li span:last-child, .pad p span:last-child { white-space: nowrap }
.pad li, .pad p { display: flex; justify-content: space-between; gap: 8px; margin: 0 }
.pad p { font-weight: 600; font-size: 22px; border-top: 2px solid #243B7A; margin-top: 6px }
.mphone { width: 262px; border-radius: 34px; padding: 7px; background: #15201F;
  box-shadow: 0 1px 2px rgba(14, 26, 28, .2), 0 22px 50px -24px rgba(14, 26, 28, .7) }
.ms { --b: #1E2A4A; --d: #6B7280; --l: #DDE2EA; height: 470px; overflow: hidden; border-radius: 27px; background: #EEF1F6; color: #111827;
  padding: 16px 12px; font: 400 12px/1.4 "Golos Text", sans-serif; text-align: left }
.ms-head { text-align: center; padding: 4px 0 10px }
.ms-head b { display: block; font-size: 15px }
.ms-head span { color: var(--d); font-size: 11px }
.ms-card { background: #fff; border-radius: 13px; padding: 12px }
.ms-card h3 { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; font-family: inherit }
.ms-card p { margin: 0 0 9px; color: var(--d); font-size: 11px }
.ms-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px }
.ms-in { height: 38px; border: 1px solid var(--l); border-radius: 10px; padding: 0 10px; display: flex; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums }
.ms-in.strong { font-weight: 600; border-color: var(--b) }
.ms-btn { display: flex; align-items: center; justify-content: center; height: 38px; margin-top: 8px; border-radius: 10px; background: var(--b); color: #fff; font-weight: 600 }
.ms-recent { list-style: none; margin: 10px 0 0; padding: 0 }
.ms-recent li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 0; border-top: 1px solid var(--l) }
.ms-recent b { font-variant-numeric: tabular-nums; margin-right: 5px }
.ms-recent i { font-style: normal; color: var(--d); font-size: 10.5px }
.ms-recent em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 999px; background: #1C7F4621; color: #1C7F46; white-space: nowrap }
.ms.code { background: #fff; text-align: center; display: grid; justify-items: center; align-content: start; gap: 6px; padding-top: 18px }
.ms-top b { display: block; font-size: 13px }
.ms-top span { color: var(--d); font-size: 11px; font-variant-numeric: tabular-nums }
.ms-sum { font: 700 25px/1.1 "Golos Text", sans-serif; font-variant-numeric: tabular-nums }
.ms-sum small { font-size: 12px; font-weight: 500; color: var(--d) }
.ms.code > img { width: 180px; height: 180px; display: block }
.ms-scan { margin: 0; color: var(--d); font-size: 10.5px; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: left }
.ms-scan > span:last-child { max-width: 24ch }
.ms-apps { display: flex; flex-direction: column; gap: 3px; flex: none }
.ms-apps img { width: 20px; height: 20px; border-radius: 5px; display: block; box-shadow: 0 0 0 1px rgba(26, 22, 20, .08) }
.ms-wait { padding: 5px 11px; border-radius: 999px; background: #EEF1F6; color: var(--d); font-weight: 600; font-size: 11px }
.ms-tips { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; margin-top: 4px; padding: 8px; border-radius: 12px; background: #EEF1F6; text-align: left }
.ms-tips img { width: 64px; height: 64px; display: block }
.ms-tips b { font-size: 12px }
.ms-cam { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--d); font-size: 10.5px }
.ms-cam svg { flex: none }

/* Help pages (/help/waiter/, /help/poster/): code tiles, phrases to say, Poster screenshots. */
.codes, .modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 4px 0 0 }
.codes > div, .modes > div { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px }
.codes b, .modes b { display: block; margin-bottom: 6px }
.codes span { color: var(--dim); font-size: 15px }
.modes b { font-size: 17px }
.modes p { margin: 0 0 8px; color: var(--dim); font-size: 15px }
.modes p:last-child { margin: 0; color: var(--ink) }
.say { margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 17px }
.say + .say { margin-top: 8px }
.note { padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; margin: 12px 0 0 }
code.cmd { font: 500 15px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--ground); border: 1px solid var(--line-soft); padding: 1px 6px; border-radius: 6px; white-space: nowrap }
.shot { margin: 12px 0 4px; display: grid; gap: 6px }
.shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line) }
.shot figcaption { font-size: 14px; color: var(--dim) }
.path { font-weight: 600 }
.toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0; font-size: 15px }
@media print {
  .topbar .head-links, .nav, .foot, .next { display: none }
  section { box-shadow: none; break-inside: avoid }
}

/* The landing page (templates/home.hbs): the same cards, a bigger opening. */
.home .hero { padding: 18px 0 6px }
.home .eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) }
.home h1 { font-size: clamp(30px, 6.4vw, 46px); line-height: 1.1; margin-bottom: 16px }
.home .hero .lede { font-size: clamp(17px, 2.6vw, 20px); max-width: 60ch }
.home .hero .cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0 }
/* The first section is the live pre-bill and guest screen: no card around it. */
.home .wrap > section:first-of-type { background: transparent; border: 0; box-shadow: none; padding: 0 }
.home .wrap > section:first-of-type .demo-stage { margin-top: 26px }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin: 4px 0 0 }
.points > div { border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0 }
/* The check hangs left of the title; the title wraps tight and balanced, the text under it
   starts where the title does. */
.points b { font-size: 16px; line-height: 1.3; text-wrap: balance; display: flex; align-items: flex-start; gap: 8px }
.points b::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat }
.points span { color: var(--dim); font-size: 14.5px; line-height: 1.5; padding-left: 26px }
.pos { display: grid; gap: 10px; margin: 4px 0 0 }
.pos > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft) }
.pos > div:first-child { border-top: 0; padding-top: 0 }
.pos b { font-size: 16px }
.pos span { color: var(--dim); font-size: 14.5px; grid-column: 1 }
.pos .chip { grid-column: 2; grid-row: 1 / span 2; text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap }
.pos .chip.wait { background: var(--line-soft); color: var(--dim) }

/* Phone screenshots in a row (help pages): swipe sideways on a narrow screen. */
.shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -4px 4px; padding: 4px 4px 10px; -webkit-overflow-scrolling: touch }
.shots figure { flex: 0 0 min(220px, 62vw); margin: 0; scroll-snap-align: start; display: grid; gap: 8px; align-content: start }
.shots img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--line); background: #fff }
.shots video { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--line); background: #fff }
.clip { position: relative }
/* The two clips centred in the card; auto margins (not justify-content) so that on a narrow
   screen, where they scroll sideways, the first one is not pushed off the left edge. */
.clips figure:first-child { margin-left: auto }
.clips figure:last-child { margin-right: auto }
.clip .play { position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75); background: rgba(20, 17, 14, .34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(20, 17, 14, .25); cursor: pointer; transition: opacity .2s, transform .2s }
.clip .play svg { width: 34px; height: 34px; margin-left: 5px; fill: #fff }
.clip .play:hover { transform: scale(1.05) }
.clip .play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px }
.clip.playing .play { opacity: 0; pointer-events: none }
/* /help/click/: the guest's path as one wide picture each, scrolled sideways on a phone. */
.paths { display: grid; gap: 12px; overflow-x: auto; margin: 10px -4px 4px; padding: 4px 4px 10px; -webkit-overflow-scrolling: touch }
.paths img { display: block; height: 250px; width: auto; max-width: none; border-radius: 14px; border: 1px solid var(--line); background: #fff }
.shots figcaption { font-size: 13.5px; color: var(--dim); line-height: 1.4 }
.shots figcaption b { color: var(--ink) }
/* Crops of our own Mini App pages: a phone-width UI at a size its text stays readable. */
.shots.wide figure { flex-basis: min(300px, 78vw) }
/* One desktop screenshot across the column (the uzqr.uz cabinet), tapped open at full size. */
.shot { margin: 14px 0 6px; display: grid; gap: 8px }
.shot a { display: block }
.shot img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); background: #fff }
.shot figcaption { font-size: 13.5px; color: var(--dim); line-height: 1.4 }
.shot figcaption b { color: var(--ink) }
/* The screenshot viewer (zoom.js): the picture fitted to the screen over a dark veil. */
.zoom { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; display: none; place-items: center; cursor: zoom-out }
.zoom[open] { display: grid }
.zoom::backdrop { background: rgba(8, 14, 13, .88) }
.zoom img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); width: auto; height: auto; display: block; border-radius: 10px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .45) }
.zoom-close { position: fixed; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 40px; cursor: pointer }
.zoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px }
html.zoomed { overflow: hidden }
.hint-small { color: var(--faint); font-size: 13px; margin: 6px 0 0 }

/* /phone-orders/: the same order taken two ways, as a route. Each step says where the waiter is
   (table, register) or that they cross the hall (dashed, in the walk colour); the short lane on
   the right is the point. Stacked on a phone. */
.flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 18px; align-items: start }
@media (max-width: 640px) { .flow { grid-template-columns: minmax(0, 1fr) } }
.lane { border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; background: var(--ground); min-width: 0 }
.lane.new { border-color: var(--accent); background: var(--accent-soft) }
.lane h3 { margin: 0; font-size: 16px; line-height: 1.3 }
.lane .sub { margin: 2px 0 12px; color: var(--dim); font-size: 13.5px }
.route { list-style: none; margin: 0; padding: 0 }
.route li { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 0 0 12px }
.route li::before { content: ""; position: absolute; left: 32px; top: 22px; bottom: 0; border-left: 2px solid var(--line) }
.route li:last-child { padding-bottom: 0 }
.route li:last-child::before { content: none }
.route .at { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; padding: 2px 4px; border-radius: 999px;
  font: 600 10.5px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; background: var(--card); border: 1px solid var(--line); color: var(--ink); position: relative; z-index: 1 }
.lane.new .route .at { border-color: var(--accent); color: var(--accent) }
.route .tx { font-size: 14.5px; line-height: 1.4; padding-top: 1px }
.route li.walk .at { border-style: dashed; border-color: var(--walk); color: var(--walk); background: var(--walk-soft) }
.route li.walk .at svg { width: 13px; height: 13px; fill: currentColor }
.route li.walk .tx { color: var(--dim); font-style: italic }
.route li.walk::before, .route li:has(+ li.walk)::before { border-left-style: dashed; border-left-color: var(--walk) }
.route li.miss .tx b { color: var(--walk) }
.lane .sum { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--dim) }
.lane .sum b { color: var(--ink) }
.lane.new .sum b { color: var(--accent) }
/* How long a step takes, at the right edge: a rough figure, said so under the scheme. */
.route .t { padding-top: 3px; font: 500 12px/1.3 "IBM Plex Mono", ui-monospace, monospace; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums }
.route li.walk .t { color: var(--walk) }
.lane .total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line) }
.lane .total span { font-size: 13.5px; color: var(--dim) }
.lane .total b { font: 600 20px/1.1 "Unbounded", "Golos Text", sans-serif; color: var(--ink); white-space: nowrap }
.lane.new .total b { color: var(--accent) }
.lane .total + .sum { margin-top: 6px; padding-top: 0; border-top: 0 }
.flow-note { margin: -6px 0 0; font-size: 12.5px; color: var(--faint) }

/* /phone-orders/ «Как это выглядит»: whole screens of the app in a phone's bezel, three a row;
   on a phone the row scrolls sideways rather than shrinking the screens past reading. */
.screens { display: grid; grid-template-columns: repeat(3, 214px); justify-content: center; gap: 24px 22px; margin: 16px 0 6px }
.screens figure { margin: 0; display: grid; gap: 10px; justify-items: center; align-content: start }
.screens .phone { width: 214px; border-radius: 30px; padding: 6px }
.screens .phone img { display: block; width: 100%; height: auto; border-radius: 25px }
.screens figcaption { font-size: 13px; line-height: 1.45; color: var(--dim); text-align: center; max-width: 27ch; text-wrap: balance }
.screens figcaption b { color: var(--ink) }
@media (max-width: 760px) {
  .screens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start; padding: 4px 2px 14px }
  .screens figure { flex: 0 0 214px; scroll-snap-align: center }
}

/* /pricing/ «Что умеет»: each answer coloured — yes green, no red, partly (paid, partial, an error
   only) amber; «not described» stays plain, it is a gap in the docs, not an answer. */
section table.matrix tbody th { font-weight: 500 }
section table.matrix thead small { display: block; font-weight: 400; font-size: 12.5px; color: var(--dim) }
section table.matrix td.y { background: var(--yes-bg); color: var(--yes) }
section table.matrix td.n { background: var(--no-bg); color: var(--no) }
section table.matrix td.p { background: var(--part-bg); color: var(--part) }
section table.matrix td.u { color: var(--faint) }