/* ============================================================================
   Tablio · the marketing page
   ----------------------------------------------------------------------------
   scrollcraft.css is the floor: tokens, reset, focus rings, the reveal
   contract ([data-sc-in] / [data-sc-stagger]) and its reduced-motion rules.
   This file is the page.

   The page used to be set as a chaptered magazine feature — a display serif,
   drop caps, a folio in the margin, reserved photographic plates, and three
   scroll-jacked acts spanning about ten viewports between them. It read as a
   design piece about a product rather than as the product. What is here now is
   the same content, the same voice and the same brand, arranged the way a
   software company arranges it: a header, sections that scroll at the speed
   the reader chooses, and one entrance animation per section.

   Palette note, unchanged from the original and still true. The brand accent
   is #C96442 (src/design/tokens.ts). Measured on this page's paper ground it
   reaches 3.39:1, which is fine for display type and fails body text. So the
   PAGE accent is the same hue pushed one step deeper, #A8452A, which measures
   5.14:1 on paper and 5.91:1 as a ground under white. The product UI
   reproduced on this page keeps the application's exact values, because that
   is the product and it has to be accurate.
   ========================================================================== */

:root {
  --sc-canvas:     #F7F5EF;   /* the paper. Two grounds alternate, not six.  */
  --sc-surface:    #FFFFFF;
  --sc-ink:        #221F1A;
  --sc-ink-soft:   #5F594E;
  --sc-accent:     #A8452A;   /* brand hue at text contrast                  */
  --sc-accent-ink: #FFFFFF;

  /* One face, the application's own. The display serif is gone: it was the
     single loudest "magazine" signal on the page, and a grotesk set tight is
     what the reference direction actually asks for. */
  --sc-font-text:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-display: var(--sc-font-text);

  --sc-maxw:   76rem;
  --sc-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --sc-section: clamp(4rem, 7.5vw, 7.5rem);

  /* Rounder than paper, squarer than a pill. Matches the app's own scale:
     11px buttons, 16-18px cards. */
  --sc-r-sm: 6px; --sc-r-md: 10px; --sc-r-lg: 16px;

  --sc-shadow-color: 32 22% 22%;

  --rule:   color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --rule-2: color-mix(in oklab, var(--sc-ink) 9%, transparent);

  /* The header is sticky, so every in-page anchor has to clear it. */
  --hd-h: 4rem;
}

/* Lenis drives the window's own scroll position, so the browser's smooth
   behaviour would be a second animation fighting the first. page.js does
   anchor travel through Lenis; without JS, or under reduced motion, these
   jumps are instant, which is the correct fallback for both. */
html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--hd-h) + 1.25rem);
}
:target { scroll-margin-top: calc(var(--hd-h) + 1.25rem); }

/* Lenis' own stylesheet, inlined rather than served as a sixth asset. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body { font-weight: 400; background: var(--sc-canvas); }

/* --------------------------------------------------------- the reveal ----
   The engine's default is 14px over 620ms. Tuned here rather than in
   scrollcraft.css, which is a copied file: 18px is far enough to read as
   arriving and short enough that nothing has visibly moved by the time it is
   readable, and 560ms keeps a staggered group of four inside three quarters
   of a second end to end. */
[data-sc-in], [data-sc-stagger] > * {
  transform: translate3d(0, 18px, 0);
  transition-duration: 560ms;
}

/* ------------------------------------------------------------ typography --
   Headings are the product's own face at display sizes: tight tracking, a
   compact line box, and weight rather than italic doing the emphasis. */
.hero__title, .ch__title, .cta__title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}

/* ------------------------------------------------------------- the skip -- */
.skip {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------- buttons ----
   Two only. A filled clay button for the one action that matters on any given
   screen, and a hairline button for the alternative. No gradient, no pill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; text-decoration: none; cursor: pointer;
  font-family: inherit; font-weight: 700; letter-spacing: -0.005em;
  font-size: 0.9375rem; line-height: 1;
  padding: 0.8rem 1.2rem; border-radius: var(--sc-r-md);
  border: 1px solid transparent;
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.btn--primary {
  background: var(--sc-accent); color: var(--sc-accent-ink);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.18);
}
.btn--primary:hover { background: #8E3A22; }
.btn--ghost {
  background: var(--sc-surface); color: var(--sc-ink);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--sc-ink); }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.875rem; border-radius: var(--sc-r-sm); }
.btn--lg { padding: 0.95rem 1.5rem; font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════ HEADER ══
   Sticky rather than fixed, so it takes its own height out of the flow and
   nothing underneath needs a compensating pad. */
.site {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--sc-ease-out),
              background 200ms var(--sc-ease-out);
}
.site.is-stuck {
  border-bottom-color: var(--rule-2);
  background: color-mix(in oklab, var(--sc-canvas) 96%, transparent);
}
.site__inner {
  height: var(--hd-h);
  max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.site__brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--sc-ink); flex: none;
}

.site__nav { display: flex; gap: clamp(0.9rem, 2vw, 1.75rem); margin-right: auto; }
.site__nav a {
  font-size: 0.875rem; font-weight: 600; color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.site__nav a:hover { color: var(--sc-ink); }

.site__actions { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.site__login {
  font-size: 0.875rem; font-weight: 700; color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.site__login:hover { color: var(--sc-accent); }

/* Reading position, as a hairline rather than as a chapter name. */
.site__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; pointer-events: none;
}
.site__progress i {
  display: block; height: 100%; background: var(--sc-accent);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ------------------------------------------------------------ the logo ----
   `public/tablio-logos/tablio-logo-dark.png` is not trimmed: the lockup is
   1557x382 sitting on a 2031x774 canvas at (263,212), so about a quarter of
   the file is transparent margin. Sized naively that indents the logo from
   whatever edge it is aligned to and inflates the row it sits in.

   So `--cap` is the height of the *visible* artwork, and the numbers below
   scale the file and pull its own padding back out of the layout box:

     height        774 / 382 =  2.0262
     margin-top   -212 / 382 = -0.5550     margin-right  -211 / 382 = -0.5524
     margin-left  -263 / 382 = -0.6885     margin-bottom -180 / 382 = -0.4712

   Those pixel figures are the master art in `design-source/logos/`. The file
   actually served is that art scaled to 640x244 — 281 kB down to 55 kB, for
   something this page never draws wider than about 98 px. Scaling is
   proportional, so every ratio above survives it untouched.

   Re-derive them if the art is ever re-exported — measure the alpha bounds on
   the master, divide every edge by the artwork's height, and keep `height` as
   canvas-height / artwork-height. Nothing is clipped: the margins only stop
   the transparent border taking up space. */
.brandmark {
  --cap: 1.15rem;
  display: block; width: auto; max-width: none;
  height: calc(var(--cap) * 2.0262);
  margin: calc(var(--cap) * -0.5550) calc(var(--cap) * -0.5524)
          calc(var(--cap) * -0.4712) calc(var(--cap) * -0.6885);
}
.brandmark--head { --cap: 1.15rem; }
.brandmark--foot { --cap: 0.95rem; }

/* ═════════════════════════════════════════════════════════════ SECTIONS ══
   `.ch` is a section. Two paper grounds alternate down the page and one dark
   ground carries analytics; every section that changes --sc-ink restates
   `color` on the same subtree, because `color` inherits as a computed value
   and redefining the token alone re-inks nothing. */
.ch {
  position: relative;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  padding-block: var(--sc-section);
}
.ch--hero     { --sc-canvas: #F7F5EF; }
.ch--room     { --sc-canvas: #FDFCF9; }
.ch--how      { --sc-canvas: #F7F5EF; }
.ch--menu     { --sc-canvas: #FDFCF9; }
.ch--brand    { --sc-canvas: #F7F5EF; }
.ch--code     { --sc-canvas: #FDFCF9; }
.ch--features { --sc-canvas: #F7F5EF; }
.ch--price    { --sc-canvas: #FDFCF9; }
.ch--cta      { --sc-canvas: #F7F5EF; }

.ch--dark {
  --sc-canvas:   #201E1A;
  --sc-ink:      #EDE8DC;
  --sc-ink-soft: #ABA294;
  --sc-accent:   #E08A66;   /* second stop: same hue, 6.34:1 on this ground */
  --sc-surface:  #2A2723;
  --rule:   color-mix(in oklab, var(--sc-ink) 22%, transparent);
  --rule-2: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  color: var(--sc-ink);
  letter-spacing: 0.004em;
}
.ch--dark p { line-height: 1.68; }

.wrap {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
}

/* section heads */
.ch__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ch__head--flush { margin-bottom: var(--sc-5); }
.ch__head--split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem); align-items: end;
}
.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sc-accent);
  margin: 0 0 var(--sc-3) !important; max-width: none !important;
}
.ch__title { font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.9rem); }
.ch__head--wide .ch__title { max-width: 20ch; }
.ch__lede {
  font-size: 1rem; line-height: 1.65; color: var(--sc-ink-soft);
  max-width: 46ch; margin: 0 !important;
}

.ch p { margin: 0 0 var(--sc-4); max-width: 58ch; line-height: 1.62; }
.ch p:last-child { margin-bottom: 0; }

/* The one lead paragraph a section may open on. It replaces the drop cap,
   which was the other magazine device on the page. */
.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55; color: var(--sc-ink);
}
.pull {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.36; color: var(--sc-ink); max-width: 28ch;
  border-top: 1px solid var(--rule); padding-top: var(--sc-4);
  margin-top: var(--sc-6);
  letter-spacing: -0.015em; font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════ HERO ══ */
.ch--hero { padding-block: clamp(3rem, 7vh, 5.5rem) clamp(4rem, 9vw, 8rem); }
.hero__wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__title {
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.1rem);
  letter-spacing: -0.035em; line-height: 1.02;
  max-width: 15ch;
}
.hero__deck {
  margin: var(--sc-5) 0 0 !important; max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  line-height: 1.6; color: var(--sc-ink-soft);
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
.hero__meta {
  margin: var(--sc-5) 0 0 !important; max-width: 44ch;
  font-size: 0.8125rem; line-height: 1.6; color: var(--sc-ink-soft);
}

/* --- the product visual --------------------------------------------------
   A phone showing the menu, and the printed card that opens it, with the
   relationship between the two drawn once and stated in the caption. It is
   the product rather than an illustration of it: the same classes as the live
   preview below. */
.hero__visual {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center; align-items: end;
  column-gap: var(--scan-gap);
  --scan-gap: clamp(1.25rem, 3vw, 2.75rem);
}
.hero__phone { min-width: 0; }

/* The card sits low and to the left of the phone, the way it sits on a table
   in front of one. A grid column rather than an absolute box: the gap between
   the two is then a real thing the connector can be drawn across, at every
   width, instead of a number that happens to work at one. */
.scan {
  /* Ahead of the phone in the grid, behind it in the document: the phone is
     the subject and reads first to a screen reader, and the printed card is
     what the eye meets first travelling left to right. */
  order: -1;
  width: clamp(7.5rem, 11vw, 9.5rem); margin: 0 0 clamp(1rem, 5vh, 3.5rem);
}
.scan__card {
  position: relative;
  background: #FCFAF3; color: #262319;
  padding: 0.85rem 0.8rem 0.7rem; text-align: center;
  border-radius: var(--sc-r-sm);
  border: 1px solid rgba(38,35,25,.08);
  box-shadow:
    0 1px 2px hsl(var(--sc-shadow-color) / 0.12),
    0 16px 32px -18px hsl(var(--sc-shadow-color) / 0.38);
}
.scan__name {
  display: block; font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.55rem;
}
.scan__qr { display: block; width: 72%; height: auto; margin: 0 auto; color: #262319; }
.scan__note {
  display: block; margin-top: 0.55rem; font-size: 0.5625rem;
  letter-spacing: 0.05em; opacity: .7;
}
/* card to phone, drawn flat and inside the gap the grid holds open */
.scan__link {
  position: absolute; top: 50%; left: 100%;
  width: calc(var(--scan-gap) - 5px); height: 1px;
  background: repeating-linear-gradient(to right,
    color-mix(in oklab, var(--sc-ink) 28%, transparent) 0 4px, transparent 4px 8px);
}
.scan__link::after {
  content: ""; position: absolute; right: 0; top: -3.5px;
  border: 4px solid transparent; border-left-color: var(--sc-accent);
}
.scan__cap {
  margin: var(--sc-3) 0 0 !important; max-width: none !important;
  font-size: 0.75rem; line-height: 1.5; color: var(--sc-ink-soft);
}

/* ════════════════════════════════════════════════════════════ THE PROBLEM ══ */
.room__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.room__note {
  border-top: 2px solid var(--sc-ink); padding-top: var(--sc-4);
}
.room__note h3 {
  margin: 0 0 var(--sc-3); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.room__note p {
  max-width: none; margin: 0;
  font-size: 0.875rem; line-height: 1.6; color: var(--sc-ink-soft);
}

/* ══════════════════════════════════════════════════════════ HOW IT WORKS ══ */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.step { border-top: 1px solid var(--rule); padding-top: var(--sc-4); }
.step__num {
  display: block; font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.1em; color: var(--sc-accent);
  font-variant-numeric: tabular-nums; margin-bottom: var(--sc-3);
}
.step h3 {
  margin: 0 0 0.4rem; font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -0.015em;
}
.step p {
  margin: 0; max-width: none;
  font-size: 0.875rem; line-height: 1.6; color: var(--sc-ink-soft);
}
.how__after {
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  max-width: 62ch !important;
  font-size: 1rem; line-height: 1.65; color: var(--sc-ink-soft);
}
.how__after b { color: var(--sc-ink); font-weight: 700; }

/* ═════════════════════════════════════════════════════════ THE PRODUCT ══ */
.menu__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

/* --- the product surfaces. Values from src/design/tokens.ts. -------------
   Prefixed with .ui / .phone so these beat the `.ch p` prose rule above:
   two classes outrank one class and a type selector. */
.ui {
  background: #fff; border: 1px solid rgba(60,50,40,.08);
  border-radius: 18px; overflow: hidden;
  font-family: var(--sc-font-text); color: #2A2722;
  box-shadow:
    0 1px 2px hsl(var(--sc-shadow-color) / 0.08),
    0 18px 40px -24px hsl(var(--sc-shadow-color) / 0.28);
}
.ui__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 15px 18px; border-bottom: 1px solid rgba(60,50,40,.08);
  background: #FBFAF6;
}
.ui__crumb { font-size: 14px; font-weight: 800; letter-spacing: -.3px; }
.ui__count { font-size: 12px; color: #9A958A; font-weight: 600; }

.ui__catbar { display: flex; gap: 6px; padding: 13px 18px 0; flex-wrap: wrap; list-style: none; margin: 0; }
.ui__cat {
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(60,50,40,.12);
  background: #fff; color: #6B665C; font-size: 12px; font-weight: 700;
}
.ui__cat.is-on { background: #C96442; border-color: #C96442; color: #fff; }

.ui__rows { list-style: none; margin: 0; padding: 10px 10px 4px; }
.ui__row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 8px; border-radius: 12px;
  border-bottom: 1px solid rgba(60,50,40,.06);
}
.ui__row:last-child { border-bottom: 0; }
.ui__grip { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 10px; flex: none; }
.ui__grip i { width: 3px; height: 3px; border-radius: 50%; background: rgba(60,50,40,.26); }
.ui__thumb { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.ui__rowMain { flex: 1; min-width: 0; }
.ui__rowMain b { display: block; font-size: 13.5px; font-weight: 700; }
.ui__rowMain i {
  display: block; font-style: normal; font-size: 11.5px; color: #9A958A;
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui__badges { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.bd { font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.bd--gold  { background: rgba(201,162,39,.2);  color: #9c7c12; }
.bd--sage  { background: rgba(106,138,91,.18); color: #56753f; }
.bd--plain { background: rgba(60,50,40,.07);   color: #9A958A; }
.ui__price { font-size: 14px; font-weight: 800; flex: none; }

.ui__row.is-live { background: #FBFAF6; }
.ui__row.is-off .ui__thumb,
.ui__row.is-off .ui__rowMain,
.ui__row.is-off .ui__price { opacity: .42; }
.ui .ui__hint {
  margin: 0; padding: 0 18px 15px; font-size: 11.5px; line-height: 1.4;
  color: #9A958A; max-width: none;
}
.ui__caption {
  margin: var(--sc-4) 0 0 !important; font-size: 0.8125rem; line-height: 1.55;
  color: var(--sc-ink-soft); max-width: 46ch !important;
}

/* the toggle, from src/components/Toggle.tsx */
.tgl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 2px; flex: none;
}
.tgl__track {
  width: 38px; height: 22px; border-radius: 999px; background: rgba(60,50,40,.18);
  padding: 3px; display: block;
  transition: background var(--sc-d-base) var(--sc-ease-out);
}
.tgl__knob {
  display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(40,30,20,.3);
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.tgl[aria-checked="true"] .tgl__track { background: #C96442; }
.tgl[aria-checked="true"] .tgl__knob { transform: translateX(16px); }
.tgl__label { font-size: 10px; font-weight: 700; color: #9A958A; }
.tgl:active .tgl__track { transform: translateY(1px); }

/* ═════════════════════════════════════════════════════════════ BRANDING ══ */
.brand__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.brand__lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5; margin-bottom: var(--sc-4); max-width: 30ch;
}
.brand__body { font-size: 0.9375rem; line-height: 1.65; color: var(--sc-ink-soft); }

.brand__demo {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center;
}

/* the phone */
.phone { flex: none; }
.phone__shell {
  width: clamp(14rem, 19vw, 16.5rem); aspect-ratio: 9 / 18.4;
  background: #17150F; border-radius: 40px; padding: 8px;
  box-shadow:
    0 2px 4px hsl(var(--sc-shadow-color) / 0.16),
    0 32px 60px -30px hsl(var(--sc-shadow-color) / 0.42),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%; border-radius: 33px; overflow: hidden;
  background: var(--mp-bg, #FBF7F0); color: var(--mp-text, #2E2A24);
  font-family: var(--sc-font-text);
  display: flex; flex-direction: column;
  transition: background 420ms var(--sc-ease-out), color 420ms var(--sc-ease-out);
}
.mp__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 20px 4px; font-size: 10px; font-weight: 700; flex: none;
}
.mp__sig { width: 22px; height: 8px; background: currentColor; opacity: .5; border-radius: 2px; }
.mp__cover {
  height: 62px; margin-bottom: -20px; flex: none;
  background: var(--mp-cover, linear-gradient(135deg, #C97B53, #7A8B6F));
  transition: background 420ms var(--sc-ease-out);
}
.mp__headrow { display: flex; align-items: flex-end; gap: 8px; padding: 0 14px; position: relative; z-index: 2; flex: none; }
.mp__logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--mp-primary, #C97B53); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  border: 2px solid var(--mp-card, #fff);
  transition: background 420ms var(--sc-ease-out), border-color 420ms var(--sc-ease-out);
}
.mp__open {
  margin-bottom: 3px; padding: 3px 7px; border-radius: 999px;
  background: rgba(106,138,91,.16); color: #5a7a4d;
  font-size: 8.5px; font-weight: 700;
}
.mp__title { padding: 9px 14px 0; flex: none; }
.phone .mp__title h3, .phone .mp__title .mp__name {
  margin: 0; max-width: none; font-size: 15px; font-weight: 800;
  line-height: 1.2; letter-spacing: -.4px;
}
.phone .mp__cuisine {
  margin: 2px 0 0; max-width: none; font-size: 8.5px; line-height: 1.3;
  font-weight: 600; color: var(--mp-muted, rgba(46,42,36,.6));
}
.phone .mp__desc {
  margin: 5px 0 0; max-width: none; font-size: 8.5px; line-height: 1.45;
  color: var(--mp-muted, rgba(46,42,36,.6));
}
.mp__actions { display: flex; gap: 5px; padding: 9px 14px 0; flex: none; }
.mp__actions > span {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px; font-size: 8px; font-weight: 700;
  background: var(--mp-card, #fff); color: inherit;
  border: 1px solid var(--mp-border, rgba(46,42,36,.1));
  border-radius: var(--mp-btnr, 999px);
  transition: background 420ms var(--sc-ease-out), border-radius 420ms var(--sc-ease-out);
}
.mp__ico { width: 11px; height: 11px; border-radius: 3px; background: var(--mp-primary, #C97B53); opacity: .85; display: block; flex: none; }
.mp__ico[data-ico="search"] { width: 10px; height: 10px; border-radius: 50%; background: none; border: 1.6px solid var(--mp-muted, #999); }
.mp__search {
  margin: 9px 14px 0; padding: 8px 10px; display: flex; align-items: center; gap: 7px;
  background: var(--mp-card, #fff); border: 1px solid var(--mp-border, rgba(46,42,36,.1));
  border-radius: 11px; font-size: 9px; color: var(--mp-muted, rgba(46,42,36,.6)); flex: none;
  transition: background 420ms var(--sc-ease-out);
}
.mp__pills { display: flex; gap: 5px; padding: 11px 14px 4px; overflow: hidden; flex: none; }
.mp__pills span {
  padding: 5px 9px; border-radius: var(--mp-pillr, 999px); font-size: 8.5px; font-weight: 700;
  background: var(--mp-chip, rgba(46,42,36,.05)); color: var(--mp-text, #2E2A24);
  white-space: nowrap; flex: none;
  transition: background 420ms var(--sc-ease-out), color 420ms var(--sc-ease-out), border-radius 420ms var(--sc-ease-out);
}
.mp__pills span.is-on { background: var(--mp-primary, #C97B53); color: var(--mp-oncolor, #fff); }
.mp__items { list-style: none; margin: 0; padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.phone__screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(to top, var(--mp-bg, #FBF7F0), transparent);
  pointer-events: none;
  transition: background 420ms var(--sc-ease-out);
}
.mp__items li {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px;
  background: var(--mp-cardbg, #fff); border: 1px solid var(--mp-cardborder, rgba(46,42,36,.06));
  border-radius: 12px; box-shadow: var(--mp-cardshadow, 0 1px 3px rgba(40,30,20,.05));
  transition: background 420ms var(--sc-ease-out), border-color 420ms var(--sc-ease-out);
}
.mp__img { width: 40px; height: 40px; border-radius: var(--mp-imgr, 10px); flex: none; transition: border-radius 420ms var(--sc-ease-out); }
.mp__itemMain { flex: 1; min-width: 0; }
.mp__itemMain b { display: block; font-size: 10px; font-weight: 700; }
.mp__itemMain i {
  font-style: normal; font-size: 8px; line-height: 1.4; margin-top: 2px;
  color: var(--mp-muted, rgba(46,42,36,.6));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mp__price {
  font-size: 10px; font-weight: var(--mp-priceweight, 800); flex: none;
  color: var(--mp-pricecolor, inherit);
  background: var(--mp-pricebg, transparent); padding: var(--mp-pricepad, 0);
  border-radius: var(--mp-pricer, 0);
}

/* the control strip */
.ctrl { display: grid; gap: var(--sc-5); align-content: center; min-width: 0; }
.ctrl__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.ctrl__set legend {
  padding: 0 0 var(--sc-3); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.ctrl__row { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sw, .seg {
  font-family: inherit; cursor: pointer; text-align: left;
  border: 1px solid var(--rule-2); background: #fff;
  border-radius: var(--sc-r-sm); color: var(--sc-ink-soft);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.sw { display: flex; align-items: center; gap: 8px; padding: 8px 9px; min-width: 0; }
.sw__cols { display: flex; flex: none; }
.sw__cols i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff; margin-left: -5px; }
.sw__cols i:first-child { margin-left: 0; }
.sw__name { font-size: 12px; font-weight: 600; min-width: 0; white-space: nowrap; }
.seg { padding: 9px 10px; font-size: 12px; font-weight: 600; }
.sw:hover, .seg:hover { border-color: var(--rule); }
.sw.is-on, .seg.is-on {
  border-color: var(--sc-accent); background: #FBEFE9;
  color: #8E3A22; font-weight: 700;
}
.ctrl .ctrl__note {
  margin: 0; max-width: 34ch;
  font-size: 0.8125rem; line-height: 1.55; color: var(--sc-ink-soft);
}

/* ════════════════════════════════════════════════════════════ QR CODES ══ */
.codes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.qrc {
  background: var(--sc-surface); border: 1px solid var(--rule-2);
  border-radius: var(--sc-r-lg);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column;
}
.qrc__code {
  width: 4.5rem; height: 4.5rem; padding: 7px; background: #fff;
  border: 1px solid var(--rule-2); border-radius: var(--sc-r-sm);
  color: #2A2722; margin-bottom: var(--sc-5);
}
.qrc__code svg { width: 100%; height: 100%; }
.qrc h3 { margin: 0 0 0.3rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.qrc__url {
  margin: 0 0 var(--sc-3) !important; font-size: 0.75rem; letter-spacing: 0.01em;
  color: var(--sc-accent); font-weight: 600; overflow-wrap: anywhere;
}
.qrc p { font-size: 0.875rem; line-height: 1.6; color: var(--sc-ink-soft); margin: 0; max-width: none; }

.codes__end {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule); padding-top: var(--sc-5);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem); align-items: start;
}
/* Placed rather than auto-flowed: three children in two columns puts the
   second paragraph back under the heading, which reads as a stray note. */
.codes__end h3 {
  grid-column: 1; margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
}
.codes__end p {
  grid-column: 2;
  font-size: 0.9375rem; line-height: 1.65; color: var(--sc-ink-soft); max-width: 52ch;
}
.codes__meta { font-size: 0.8125rem !important; margin-top: var(--sc-4); }

/* ════════════════════════════════════════════════════════ CAPABILITIES ══ */
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.card {
  background: var(--sc-surface); border: 1px solid var(--rule-2);
  border-radius: var(--sc-r-lg); padding: clamp(1.25rem, 2vw, 1.6rem);
}
.card h3 {
  margin: 0 0 0.45rem; font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -0.015em;
}
.card p { margin: 0; max-width: none; font-size: 0.875rem; line-height: 1.6; color: var(--sc-ink-soft); }

/* ═══════════════════════════════════════════════════════════ ANALYTICS ══ */
.dark__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.ui--dashboard { background: #FAF9F5; }
.ui__bar--dash { background: #fff; }
.empty {
  margin: 18px; padding: 30px 20px; border-radius: 12px;
  background: #FBFAF6; border: 1px dashed rgba(60,50,40,.18);
  text-align: center;
}
.ui .empty__title { margin: 0 0 6px; max-width: none; font-size: 13px; line-height: 1.3; font-weight: 700; color: #6B665C; }
.ui .empty__body { margin: 0 auto 10px; max-width: 30ch; font-size: 12px; line-height: 1.45; color: #9A958A; }
/* The brand terracotta at its text weight, not its button weight. #C96442 is
   the fill behind white button text, where it is fine; as 12.5px type it
   measured 3.73:1 here, under the 4.5:1 AA asks of normal text. #A8452A is the
   same hue already darkened for text — it is what --sc-accent holds on a light
   ground — and it scores 5.66:1 on this card.
   Written out rather than as var(--sc-accent) on purpose: this mock sits inside
   .ch--dark, where that token flips to the light #E08A66 meant for the dark
   ground. The card underneath stays #FBFAF6, so the token would read 2.51:1. */
.empty__link { font-size: 12.5px; font-weight: 700; color: #A8452A; }
.ui__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(60,50,40,.08); border-top: 1px solid rgba(60,50,40,.08); }
.ui__stats div { background: #fff; padding: 14px 15px; }
.ui__stats span { display: block; font-size: 11.5px; font-weight: 700; color: #6B665C; }
.ui__stats b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -1px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.ui__stats i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: #B0AB9F; margin-top: 2px; }
.ch--dark .ui__caption { color: var(--sc-ink-soft); }

/* ═════════════════════════════════════════════════════════════ PRICING ══
   A rate card. Three columns of type on one sheet, divided by hairlines —
   the recommended plan is marked with its own stock and a rule over it, and
   its button is the only filled one. */
.terms {
  display: flex; align-items: baseline; gap: var(--sc-3);
  margin-bottom: var(--sc-5);
}
.terms__opt {
  appearance: none; background: none; border: 0; padding: 0.2rem 0;
  font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--sc-ink-soft); cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.terms__opt i {
  font-style: normal; font-weight: 600; font-size: 0.75rem;
  color: var(--sc-ink-soft); margin-left: 0.3rem;
}
.terms__opt:hover { color: var(--sc-ink); }
.terms__opt.is-on { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.terms__opt.is-on i { color: var(--sc-accent); }
.terms__sep { width: 1px; align-self: stretch; background: var(--rule-2); }

.tariff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tariff__col {
  padding: var(--sc-5) clamp(1rem, 2.4vw, 2.25rem) var(--sc-5);
  border-left: 1px solid var(--rule-2);
  display: flex; flex-direction: column;
}
.tariff__col:first-child { border-left: 0; padding-left: 0; }
.tariff__col:last-child { padding-right: 0; }

.tariff__col--pick {
  background: #F7F5EF;
  box-shadow: inset 0 3px 0 var(--sc-accent);
  border-left-color: transparent;
  border-radius: 0 0 var(--sc-r-md) var(--sc-r-md);
}
.tariff__col--pick + .tariff__col { border-left-color: transparent; }

.tariff__tag {
  margin: 0 0 var(--sc-3) !important; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft);
  max-width: none !important;
}
.tariff__tag--pick { color: var(--sc-accent); }
.tariff__name {
  margin: 0; font-weight: 700;
  font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.025em;
}
.tariff__price {
  margin: var(--sc-2) 0 var(--sc-5) !important;
  display: flex; align-items: baseline; gap: 0.25rem; max-width: none !important;
}
.tariff__price span {
  font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.9rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.tariff__price i {
  font-style: normal; font-size: 0.8125rem; font-weight: 600; color: var(--sc-ink-soft);
}

.tariff__list { list-style: none; margin: 0 0 var(--sc-6); padding: 0; flex: 1; }
.tariff__list li {
  position: relative; padding-left: 1.05rem; margin-bottom: 0.5rem;
  font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink);
}
/* a printed tariff rules its inclusions, it does not tick them */
.tariff__list li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 0.5rem; height: 1px; background: var(--sc-accent);
}
.tariff__pick { align-self: flex-start; }

.price__note {
  margin: clamp(2rem, 4vw, 3rem) 0 0 !important; padding-top: var(--sc-4);
  border-top: 1px solid var(--rule-2);
  font-size: 0.8125rem; line-height: 1.65; color: var(--sc-ink-soft);
  max-width: 76ch !important;
}
.price__note a { color: var(--sc-accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════ FINAL CTA ══ */
.ch--cta { border-top: 1px solid var(--rule-2); }
.cta__wrap { max-width: 44rem; text-align: center; }
.cta__title { font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.9rem); }
.cta__body {
  margin: var(--sc-4) auto 0 !important; max-width: 48ch;
  font-size: 1rem; line-height: 1.65; color: var(--sc-ink-soft);
}
.cta__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* ══════════════════════════════════════════════════════════════ FOOTER ══ */
.foot {
  background: #EFEBE0; color: var(--sc-ink);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.foot__imprint {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.foot__imprint dl { margin: 0; }
.foot__imprint dt {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sc-accent); margin-bottom: var(--sc-3);
}
.foot__imprint dd { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--sc-ink-soft); }
.foot__imprint a { color: var(--sc-ink); text-decoration-color: var(--rule); }

.foot__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sc-5); border-top: 1px solid var(--rule-2);
  font-size: 0.8125rem; font-weight: 600;
}
.foot__brand { display: inline-flex; align-items: center; }
.foot__links {
  margin-left: auto; display: flex; flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 2.4vw, 1.75rem);
}
.foot__links a { color: var(--sc-ink-soft); text-decoration: none; }
.foot__links a:hover { color: var(--sc-accent); text-decoration: underline; }


/* ══════════════════════════════════════════════════════════ responsive ══ */

/* --------------------------------------------------------------- laptop -- */
@media (max-width: 1180px) {
  .hero__wrap { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .brand__demo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ctrl { width: 100%; max-width: 28rem; }
  .ctrl .ctrl__note { max-width: none; }
  .phone__shell { width: clamp(13rem, 22vw, 15.5rem); }
}

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 960 ---- */
@media (max-width: 960px) {
  .ch__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sc-4); }
  .room__grid, .menu__grid, .dark__grid, .brand__wrap,
  .codes__end { grid-template-columns: minmax(0, 1fr); }
  /* One column, so the explicit placement above would conjure a second. */
  .codes__end h3, .codes__end p { grid-column: 1; }
  .codes { grid-template-columns: minmax(0, 1fr); }
  .menu__text { order: -1; }
  .foot__imprint { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Hero: the copy takes the whole upper frame, the product visual follows,
     and the card sits beside the phone in the reading direction rather than
     overlapping it. */
  .hero__wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 3rem); }
  .hero__title { max-width: 18ch; }
  .hero__visual {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center; align-items: start;
    row-gap: var(--sc-5);
  }
  /* Card first, phone second: top to bottom now reads the way left to right
     did on a wide screen — you scan the printed thing, and the menu opens. */
  .scan {
    order: -1; width: 100%; max-width: 24rem; margin: 0;
    display: flex; align-items: center; gap: 0.9rem;
  }
  .scan__card { width: 6.75rem; flex: none; }
  .scan__link { display: none; }
  .scan__cap { margin: 0 !important; font-size: 0.875rem; }

  /* A three-plan grid does not fit here. The rate card becomes what a compact
     printed tariff is: one line per plan, the price ranged right, and the
     inclusions set as a run-on list. Nothing is dropped. */
  .tariff { grid-template-columns: minmax(0, 1fr); }
  .tariff__col {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; column-gap: var(--sc-4);
    padding: var(--sc-4) 0; border-left: 0;
    border-top: 1px solid var(--rule-2);
  }
  .tariff__col:first-child { border-top: 0; }
  .tariff__col--pick {
    background: none; box-shadow: none; border-radius: 0;
    border-top: 2px solid var(--sc-accent);
  }
  .tariff__name { grid-column: 1; grid-row: 1; }
  .tariff__price { grid-column: 2; grid-row: 1; margin: 0 !important; }
  .tariff__price span { font-size: 1.6rem; }
  .tariff__tag { grid-column: 1 / -1; grid-row: 2; margin: 0.2rem 0 0.6rem !important; }
  .tariff__list {
    grid-column: 1 / -1; grid-row: 3; margin: 0 0 var(--sc-4);
    display: flex; flex-wrap: wrap; column-gap: 0.3rem;
  }
  .tariff__list li { padding-left: 0; margin-bottom: 0.15rem; font-size: 0.8125rem; color: var(--sc-ink-soft); }
  .tariff__list li::before { content: none; }
  .tariff__list li:not(:last-child)::after { content: ","; }
  .tariff__pick { grid-column: 1 / -1; grid-row: 4; }
}

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 760px) {
  :root { --hd-h: 3.5rem; }

  /* Two of the three nav links stand down; Pricing is the one a visitor on a
     phone actually reaches for, and the primary action is beside it. */
  .site__nav a { display: none; }
  .site__nav a.site__keep { display: inline; }
  .site__nav { margin-right: auto; }
  .site__login { display: none; }

  .steps { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }

  .hero__title { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 2.9rem); max-width: 16ch; }
  .hero__deck { font-size: 1rem; }
  .hero__cta { gap: 0.6rem; }
  .hero__cta .btn { flex: 1 1 auto; min-width: 0; }
  .cta__actions .btn { flex: 1 1 auto; }

  .phone__shell { width: min(15rem, 62vw); border-radius: 34px; padding: 7px; }
  .phone__screen { border-radius: 28px; }
  .brand__demo { gap: var(--sc-5); }
  .ctrl__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .foot__imprint { grid-template-columns: minmax(0, 1fr); }
  .foot__links { margin-left: 0; flex-basis: 100%; }

  /* touch targets */
  .sw, .seg, .tgl, .terms__opt { min-height: 44px; }
}


/* ═════════════════════════════════════════════════════ reduced motion ═══
   scrollcraft.css drops the reveal's translation and shortens it. What is
   left here is the page's own transitions: the live preview re-themes
   instantly rather than crossfading, and the progress hairline does not
   animate. page.js does not start Lenis at all in this mode.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Restated, not inherited: scrollcraft.css drops the rise in its own
     reduced-motion block, but the tuning above is in a later stylesheet at
     equal specificity and would otherwise put it back. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 200ms; }

  .phone__screen, .phone__screen::after, .mp__cover, .mp__logo, .mp__pills span,
  .mp__items li, .mp__actions > span, .mp__search, .mp__img { transition: none; }
  .site, .site__progress i { transition: none; }
  .btn, .sw, .seg, .terms__opt, .site__nav a, .site__login { transition: none; }
}