/* ==========================================================================
   /ravintoloille — the pitch, in direction B.

   Loaded AFTER landing.css, which it inherits from rather than replaces: the
   hero, the stat block, the audience mockups and the pricing rows all still
   come from there. This file moves that page onto the white ground and adds
   the two sections the all-in-one argument needed — what the system does, and
   what you have to buy to run it.
   ========================================================================== */

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

/* The hero's demo panel and the audience mockups were drawn against semolina.
   On white they need their own edge, or they float. */
.hero__demo,
.mockup {
  border-radius: var(--b-radius-lg);
  box-shadow: var(--b-shadow);
}

.feature,
.audience,
.pricing {
  background: var(--b-raised);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius-lg);
  box-shadow: var(--b-shadow);
}

/* --- All in one ----------------------------------------------------------- */

.allinone { padding: 4rem 0 1rem; }
.allinone__lede { margin-bottom: 2rem; }

.allinone__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.allinone__card {
  padding: 1.5rem;
  background: var(--b-raised);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius-lg);
  box-shadow: var(--b-shadow);
}

.allinone__name {
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.allinone__body { color: var(--ink-soft); font-size: var(--step-0); }

/* --- The kit -------------------------------------------------------------- */

/*
  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.
*/
.kit { padding: 4rem 0 1rem; }

.kit__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

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

.kit__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;
}

.kit__name { font-size: var(--step-1); font-weight: 650; margin-bottom: 0.35rem; }
.kit__body { color: var(--ink-soft); font-size: var(--step--1); }

/* --- Pricing -------------------------------------------------------------- */

/*
  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.
*/
.pricing__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--b-line);
}

.pricing__row:last-child { border-bottom: 0; }

.pricing__what { font-weight: 650; }

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

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

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

@media (min-width: 48rem) {
  .pricing__row { grid-template-columns: 12rem auto minmax(0, 1fr); }
  .pricing__figure { order: 2; text-align: left; }
  .pricing__note { grid-column: auto; order: 3; }
}