/* ==========================================================================
   /ravintoloille — the pitch.

   Rewritten 2026-09-05 (owner: *"looks odd"*, and it did). The page used to
   load `landing.css` and then this file, which meant two design systems on one
   page: the first drew the kitchen-ticket motif in dark cards with ember rules,
   the second painted direction B's white over the top and re-declared half the
   same selectors. `.hero__demo` was styled in one file and `.herodemo` in the
   other, and both were on the page.

   So: **one stylesheet, and `landing.css` is gone.** Everything here is
   direction B's tokens — the `--b-*` block in `app.css` — with exactly one
   deliberate exception. The stage is dark, because the product's working
   screens are dark: a visitor looking at the kitchen board should be looking at
   what a kitchen board looks like, not at a marketing rendition of one.

   Class prefixes are `p*` (phero, psec, pcard, pkit, pprice, pclose) and
   `stage*`. Nothing here is shared with another page, and nothing on another
   page reaches in.
   ========================================================================== */

body { background: var(--b-ground); }

/*
  This page sets its own rhythm.

  A marketing page is read at arm's length in one pass, and the 4rem gaps the
  app's furniture uses read as a form rather than as an argument. One variable,
  so the vertical spacing is decided once instead of six times.
*/
.phero,
.stage,
.pstats,
.psec,
.pclose { --pgap: clamp(3.5rem, 8vw, 6.5rem); }

/* --- Hero ------------------------------------------------------------------ */

/*
  Centred, and narrow.

  The old hero was a two-column grid with copy on the left and the demo on the
  right, which gave the headline about forty characters of width and the demo a
  column too narrow to show anything in. The stage below needs the whole page,
  so the hero stops competing for it: three centred lines and two buttons.
*/
.phero {
  padding: clamp(2rem, 6vw, 4.5rem) 0 0;
  text-align: center;
}

.phero__eyebrow {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.phero__title {
  margin: 0.8rem auto 0;
  max-width: 16ch;
  font-size: var(--step-5);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.phero__sub {
  margin: 1.1rem auto 0;
  max-width: 44ch;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: balance;
}

.phero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2rem;
}

.phero__note {
  margin: 1.1rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --- The stage ------------------------------------------------------------- */

/*
  The one dark thing on a white page, and it is dark on purpose: the till, the
  kitchen board and the driver's queue are dark in the product, so a screen
  claiming to be one of them has to be. It also does the job the old page needed
  four separate dark panels to attempt — there is one dark shape here, not five.
*/
.stage {
  margin-top: var(--pgap);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  background: var(--night);
  border-radius: var(--b-radius-lg);
  box-shadow: var(--b-shadow-lift);
  color: #f2ece7;
}

.stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stage__intro { min-width: 0; }

.stage__badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--b-radius-pill);
  background: var(--ember);
  color: #1a1614;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stage__title {
  margin: 0.55rem 0 0;
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.025em;
  color: #fff;
}

.stage__sub {
  margin: 0.35rem 0 0;
  font-size: var(--step-0);
  color: #b9aca3;
}

/* Quiet: nothing on the demo is destructive, so the reset is furniture. */
.stage__reset {
  flex: none;
  --btn-bg: transparent;
  --btn-fg: #cdbfb6;
  border-color: #372c26;
  min-height: 2.4rem;
  padding: 0.45rem 0.95rem;
  font-size: var(--step--1);
}

.stage__reset:hover { --btn-fg: #fff; border-color: #55453c; }

/* --- The rail -------------------------------------------------------------- */

/*
  Five tabs, scrolled rather than wrapped. Wrapping puts two of them on a second
  line on a phone, and a second line of tabs reads as a second, lesser group —
  exactly the wrong thing to say about whichever two screens fall off the end.
*/
.stage__rail {
  display: flex;
  gap: 0.35rem;
  padding-bottom: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.stage__rail::-webkit-scrollbar { display: none; }

.stage__tab {
  flex: 1 0 auto;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--b-radius-pill);
  background: transparent;
  color: #a2938a;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.stage__tab:hover { color: #fff; background: #221a16; }

.stage__tab.is-on {
  background: #f2ece7;
  color: #16110f;
}

.stage__tab:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 2px; }

/*
  A floor under the screens, so the page does not jump by two hundred pixels
  when a four-lane board is swapped for a two-job queue.
*/
.stage__screens {
  margin-top: 0.85rem;
  min-height: 21rem;
}

.stage__cap {
  margin: 0.9rem 0 0;
  font-size: var(--step--1);
  color: #9a8c83;
  text-align: center;
}

/* --- Inside a screen ------------------------------------------------------- */

.sc {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .sc--customer,
  .sc--pos,
  .sc--driver { grid-template-columns: 1fr 1fr; }
  .sc--table  { grid-template-columns: minmax(0, 32rem); justify-content: center; }
  .sc--kds    { grid-template-columns: repeat(4, 1fr); }
}

.sc__col { min-width: 0; }

.sc__label {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b7d74;
}

/* Every panel inside a screen sits on the same slightly-lifted surface. */
.pos__menu,
.pos__basket,
.kds__ticket,
.drv__job,
.tbl__round,
.sc--customer .sc__side {
  background: var(--night-soft);
  border-radius: var(--b-radius);
}

/* --- The customer's page --------------------------------------------------- */

.sc--customer { align-items: center; }

.sc__pizza {
  position: relative;
  width: min(100%, 19rem);
  margin-inline: auto;
  aspect-ratio: 1;
  cursor: pointer;
  filter: drop-shadow(0 18px 26px rgb(0 0 0 / 45%));
  transition: transform 240ms cubic-bezier(0.34, 1.35, 0.64, 1);
}

.sc__pizza:hover,
.sc__pizza:focus-visible { transform: scale(1.04) rotate(-2deg); }
.sc__pizza:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 6px; }

.sc--customer .sc__side {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.sc__note {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.4;
  color: #e4dbd4;
}

/* --- The till -------------------------------------------------------------- */

.pos__menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.6rem;
}

.pos__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid #332822;
  border-radius: 10px;
  background: #2c231e;
  color: #f2ece7;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.pos__item:hover { background: #3a2e27; }
.pos__item:active { transform: translateY(1px); }
.pos__item:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 2px; }

.pos__item-name  { font-size: var(--step--1); font-weight: 650; }
.pos__item-price { font-size: var(--step--1); color: #a2938a; }

.pos__basket {
  padding: 0.8rem;
  min-height: 8.5rem;
}

.pos__empty { margin: 0; color: #8b7d74; font-size: var(--step--1); }

.pos__line,
.tbl__line {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.35rem 0;
  font-size: var(--step--1);
}

.pos__qty  { color: #a2938a; }
.pos__name { color: #f2ece7; min-width: 0; }
.pos__sum  { color: #e4dbd4; }

.pos__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid #332822;
  font-weight: 700;
}

.pos__total-sum { font-size: var(--step-2); letter-spacing: -0.02em; }

.pos__tenders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.pos__tenders .btn { --btn-bg: #2c231e; --btn-fg: #f2ece7; border-color: #3a2e27; }
.pos__tenders .btn--primary { --btn-bg: var(--brand); --btn-fg: #fff; border-color: transparent; }
.pos__tenders .btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pos__done {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--b-radius);
  background: rgb(122 168 50 / 14%);
  border: 1px solid rgb(122 168 50 / 35%);
  color: #d6e8bb;
  font-size: var(--step--1);
}

/* The line that carries the argument: a counter sale joins the same queue. */
.pos__sent { color: #a9c47f; }

/* --- The kitchen board ----------------------------------------------------- */

.kds__lane { min-width: 0; }

.kds__lanehd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #2c231e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b7d74;
}

.kds__count { color: #cdbfb6; }
.kds__empty { margin: 0.4rem 0 0; color: #5f544d; font-size: var(--step--1); }

.kds__ticket {
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--ember);
}

/* A lighter green than --basil (#2f6d4f), which is chosen for white grounds and
   goes muddy against the stage's near-black. */
.kds__ticket.is-ready { border-left-color: #7aa832; }

.kds__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.kds__no   { color: #fff; font-weight: 700; font-size: var(--step--1); }
.kds__mins { color: var(--ember); font-size: var(--step--1); }

.kds__item {
  margin: 0.4rem 0 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: #cdbfb6;
}

.kds__item b { color: #fff; }
.kds__item i { color: #a2938a; font-style: normal; }

/*
  Where the ticket came from. Three of these on one board is the whole pitch, so
  they are the only coloured thing on a ticket that is not the timer.
*/
.chip {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--b-radius-pill);
  background: #3a2f29;
  color: #d9cec6;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.chip--table    { background: #2f3f1c; color: #cfe3a8; }
.chip--delivery { background: rgb(255 122 26 / 18%); color: #ffbe8a; }

.kds__go {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.45rem 0;
  border: 0;
  border-radius: 8px;
  background: #3a2f29;
  color: #fff;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  cursor: pointer;
  transition: background 120ms ease;
}

.kds__go:hover { background: var(--ember); color: #1a1614; }
.kds__go:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 2px; }
.kds__go--out { background: rgb(122 168 50 / 22%); }

/* --- The driver ------------------------------------------------------------ */

/*
  A drawn map rather than a live one: the real driver screen fetches tiles from
  OpenStreetMap with a named User-Agent under their tile policy, and a marketing
  page pulling a few thousand tiles a day off a charity's servers to decorate
  itself is not a thing to ship.
*/
.drv__map {
  position: relative;
  min-height: 12rem;
  border-radius: var(--b-radius);
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, #241c18 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, #241c18 0 1px, transparent 1px 30px),
    #1b1512;
}

.drv__map::after {
  /* One road, so the grid reads as a town rather than as graph paper. */
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 52%;
  height: 10px;
  background: #2b221d;
  transform: rotate(-8deg);
}

.drv__pin,
.drv__shop {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  z-index: 1;
}

.drv__pin--a { left: 26%; top: 30%; background: var(--ember); box-shadow: 0 0 0 6px rgb(255 122 26 / 20%); }
.drv__pin--b { left: 63%; top: 62%; background: var(--ember); box-shadow: 0 0 0 6px rgb(255 122 26 / 20%); }
.drv__shop   { left: 45%; top: 45%; background: #f2ece7; box-shadow: 0 0 0 6px rgb(242 236 231 / 16%); }

.drv__job {
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.6rem;
}

.drv__job.is-done { opacity: 0.55; }

.drv__dist { color: #a2938a; font-size: var(--step--1); }

.drv__addr {
  margin: 0.45rem 0 0;
  font-size: var(--step-0);
  font-weight: 650;
  color: #f2ece7;
}

.drv__cash {
  margin: 0.3rem 0 0;
  font-size: var(--step--1);
  color: #cfe3a8;
}

.drv__state {
  margin: 0.6rem 0 0;
  font-size: var(--step--1);
  font-weight: 650;
  color: #a9c47f;
}

.drv__go { width: 100%; margin-top: 0.7rem; min-height: 2.5rem; }

.drv__route {
  margin: 0.9rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid #3a2f29;
  font-size: var(--step--1);
  color: #9a8c83;
}

/* --- One table's evening --------------------------------------------------- */

.tbl__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.tbl__name {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #fff;
}

.tbl__head .chip { margin-top: 0; }

.tbl__round {
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.5rem;
}

.tbl__roundno {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b7d74;
}

.tbl__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.tbl__acts .btn { --btn-bg: #2c231e; --btn-fg: #f2ece7; border-color: #3a2e27; }
.tbl__acts .btn--primary { --btn-bg: var(--brand); --btn-fg: #fff; border-color: transparent; }

.tbl__closed {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--b-radius);
  background: rgb(122 168 50 / 14%);
  border: 1px solid rgb(122 168 50 / 35%);
  color: #d6e8bb;
  font-size: var(--step--1);
  font-weight: 650;
  text-align: center;
}

/* --- Platform numbers ------------------------------------------------------ */

.pstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-top: var(--pgap);
  padding: 1.75rem;
  background: var(--b-sunken);
  border-radius: var(--b-radius-lg);
}

.pstats__item { text-align: center; }

.pstats__num {
  display: block;
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.pstats__label {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --- The argument, in sections --------------------------------------------- */

.psec { margin-top: var(--pgap); }

/*
  The heading sits above its cards rather than beside them, and it is allowed to
  be big. Six repetitions of small-bold-noun over grey paragraph is what the old
  page did, and it is why nothing on it had a shape.
*/
.psec__head { max-width: 46ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.psec__title {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.psec__sub {
  margin: 0.6rem 0 0;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

/*
  Bordered cells rather than one divided panel.

  The panel was tried first — gap: 1px over a `--b-line` ground, which draws
  hairlines between the cards for free — and it is the better-looking of the two
  right up until a section has four cards in a three-column row. The fourth
  leaves an empty cell, and in a seamless panel an empty cell is a grey hole
  with a border round it: the section reads as unfinished rather than as
  four things. These sections have three, four and five cards, so that case is
  the rule and not the exception.

  A hairline on each card costs the seam and never leaves a hole. Border, not
  shadow: five shadowed white cards on a white ground is five shadows doing the
  work one border does, and on a wide screen it reads as scattered.
*/
.psec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.pcard {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--b-raised);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius);
}

.pcard__name {
  margin: 0 0 0.45rem;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.pcard__body {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- What you need --------------------------------------------------------- */

/*
  Numbered, because the answer to "what do I have to buy" is a countable list
  and its shortness is the argument. A bullet list would hide that there are
  exactly three things.
*/
.pkit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 48rem) { .pkit__list { grid-template-columns: repeat(3, 1fr); } }

.pkit__item { display: flex; gap: 1rem; align-items: flex-start; }

.pkit__num {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--b-sunken);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 700;
}

.pkit__app {
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem;
  border-radius: var(--b-radius);
  background: var(--b-sunken);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- Price ----------------------------------------------------------------- */

.pprice__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  Three columns on a wide screen: what it is, what it costs, and why. The figure
  is the only mono on this page that is not a heading — a price is printed
  matter, and tabular numerals keep the three of them aligned.
*/
.pprice__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--b-line);
}

.pprice__row:first-child { border-top: 1px solid var(--b-line); }

/*
  *Kuukausimaksu* is one word and the row's first column is what the figure
  leaves it — 134 px on a 320 px phone against the 146 the word wants, so it was
  being clipped. Same treatment as the headings in `app.css`, and for the same
  reason: this language writes single words where English writes three.
*/
.pprice__what {
  font-weight: 650;
  font-size: var(--step-1);
  overflow-wrap: break-word;
  hyphens: auto;
}

.pprice__figure {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}

.pprice__note {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

@media (min-width: 48rem) {
  /*
    `7rem` for the figure is 112 px and *"30 € / kk"* wants 122, so the price —
    the one number this page is arguing about — sat ten pixels inside the note
    beside it (2026-09-05 audit). `auto` takes exactly what the longest of the
    three needs and leaves the rest to the note, which is the column that can
    afford to lose it.
  */
  .pprice__row { grid-template-columns: minmax(0, 14rem) auto minmax(0, 1fr); }
  .pprice__figure { order: 2; text-align: left; }
  .pprice__note { grid-column: auto; order: 3; }
}

.pprice__vat {
  margin-top: 1.25rem;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

/*
  The billing terms, spelled out on the page that sells the thing.

  A tick rather than a bullet: every one of these is a term stated up front, not
  a list of restrictions.
*/
.pprice__terms {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 48rem) { .pprice__terms { grid-template-columns: 1fr 1fr; gap: 0.7rem 2.5rem; } }

.pprice__terms li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

.pprice__terms li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 0.42rem;
  height: 0.22rem;
  border-left: 2px solid var(--basil);
  border-bottom: 2px solid var(--basil);
  transform: rotate(-45deg);
}

/* --- The close ------------------------------------------------------------- */

/*
  The page has finished its argument, so the last screen is one sentence and one
  button, and the button is the biggest thing on it.
*/
.pclose {
  margin-top: var(--pgap);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border-radius: var(--b-radius-lg);
  background: var(--b-sunken);
  text-align: center;
}

.pclose__title {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.pclose__sub {
  margin: 0.7rem auto 1.75rem;
  max-width: 48ch;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

.pclose .btn { min-width: min(22rem, 100%); }

/* --- Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sc__pizza,
  .pos__item,
  .stage__tab,
  .kds__go { transition: none; }

  .sc__pizza:hover,
  .sc__pizza:focus-visible { transform: none; }
}