/* Self-hosted so the site never waits on another company's server,
   and so no visitor's browser is asked to talk to one. */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/lora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/lora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   The Main Course: marketing site
   1. Tokens, reset, type, layout primitives
   --------------------------------------------------------------------------
   Design notes (why this looks the way it does)

   AUDIENCE. Restaurant owners who do not use a laptop day to day, often
   reading on a phone, often over 50. Three consequences run through the whole
   sheet: nothing is smaller than 15px and body copy is 18px, every pressable
   thing is at least 52px tall, and there is no jargon anywhere in the copy.

   COLOUR. The accent is the platform's own `petrol` ramp, copied verbatim from
   its tailwind.config.ts. It is a custom hue (h207) chosen so it can never be
   mistaken for red/emerald/blue, which mean delete/success/info inside the
   product (amber meant warning there until 2026-09-07 and no longer appears
   on either surface; since 2026-09-14 an error message or a field filled in
   wrong is petrol too, here and in the app), and so it stays out of the warm half of the wheel that
   belongs to the restaurant's own brand colours. Petrol is used for buttons,
   rules, glyphs, links and one deep band, never as a wash.

   GROUND. Sections alternate between white and one step of warm grey that runs
   off both edges of the screen. That "band" idea is lifted from the platform's
   dashboard, where a change of ground, not a horizontal line, is what
   separates one thing from the next. There are almost no grey lines here.

   MOTION. transform and opacity, like the product itself; the only other
   thing that ever transitions is the colour of a chip or a switch being
   chosen inside a drawing, which repaints a few pixels and moves nothing.
   Everything has an explicit resting state so `prefers-reduced-motion` can
   switch the whole system off without leaving anything invisible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* The platform's petrol ramp, verbatim. Re-hueing is safe; re-laddering the
     lightness is not: each stop's contrast is a property of the stop. */
  --petrol-50:  #edfafc;
  --petrol-100: #d9f3f7;
  --petrol-200: #b8e7ee;
  --petrol-300: #8fd2db;
  --petrol-400: #5ab5c1;
  --petrol-500: #289aa7;
  --petrol-600: #04818e;
  --petrol-700: #036974;  /* primary button, clears 4.5:1 on white */
  --petrol-800: #04555e;
  --petrol-900: #02444b;
  --petrol-950: #00282d;

  /* Ink and paper. The ink carries a trace of the accent so black never looks
     like a different product bolted on. */
  --ink:        #0b1e22;
  --ink-2:      #33474b;   /* body copy */
  --ink-3:      #5d7175;   /* quiet labels, captions */
  --paper:      #ffffff;
  --paper-warm: #f7f6f3;   /* the band */
  --paper-deep: #f1efea;
  --line:       #e6e3dc;
  --line-soft:  #efedE7;

  /* Semantic, borrowed from the product so a screenshot and this page agree. */
  --good:   #047857;
  --good-bg:#ecfdf5;
  /* NO WARN COLOUR. Amber left the platform on 2026-09-07 at the owner's ask,
     and `--warn`/`--warn-bg`/`.chip-warn` went with it — they were declared
     here and used by nothing, which is how a colour comes back. If this page
     ever needs to picture a caution, take it from the product first. */

  /* Type */
  --font-display: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* A ladder, not a set of guesses. Fluid between a phone and a wide screen. */
  --t-hero:  clamp(2.75rem, 1.4rem + 3.9vw, 4.5rem);
  --t-h2:    clamp(2rem, 1.35rem + 2.3vw, 3.1rem);
  --t-h3:    clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem);
  --t-lead:  clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem);
  --t-body:  1.125rem;   /* 18 */
  --t-small: 1rem;       /* 16 */
  --t-micro: 0.9375rem;  /* 15: the floor. Nothing goes under it. */

  /* Space */
  --gut: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --measure: 1240px;
  --measure-narrow: 720px;
  /* A band's air above and below what it holds: 56px on a phone, 96px from
     about 1330px wide. It was 72px to 136px, sized for bands that carried a
     badge, a heading, a lead and a list of sentences. Once the words came off
     (1 to 4 October 2026) the same air around a heading and one picture read
     as empty: 272px of ground between one band's picture and the next band's
     heading (owner, 6 October 2026: "there is too much empty space, there has
     to be a balance between not too crowded and too much empty space"). */
  --sec-y: clamp(3.5rem, 2.25rem + 4.5vw, 6rem);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Shadows live on their own layer so hover can animate OPACITY rather than
     the shadow itself, because interpolating box-shadow repaints everything showing
     through the element. */
  --sh-1: 0 1px 2px rgba(11, 30, 34, 0.05), 0 4px 14px rgba(11, 30, 34, 0.05);
  --sh-2: 0 2px 6px rgba(11, 30, 34, 0.06), 0 18px 44px rgba(11, 30, 34, 0.11);
  --sh-3: 0 30px 70px rgba(2, 68, 75, 0.18);

  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* DARK WHERE THE VISITOR CHOOSES IT, ELSE WHERE THEIR DEVICE IS DARK (owner,
   18 October 2026: "build a", off the canvas "Website dark mode", then "add a
   button to go from light to dark mode"). Option A: the website wears the
   app's own dark, so the site and its pictures of the app share one ground,
   as they do in light. #0a0a0a is the app's ground, #111111 its panels, the
   stone ramp its inks and hairlines (app/layout.tsx, chrome.ts).

   Dark is the class `dark` on <html>, put there by every page's head before
   this file arrives: the visitor's own choice from the switch in the top bar
   (`.theme-btn`, and `.mnav-theme` in the phone's menu), kept as one word in
   their browser and forgotten again once it is their device's own, else their
   device's setting. Every colour the light theme states keeps its dark twin
   beside it, in a block at the foot of its own section asking for
   `:where(.dark)` (the way the app pairs each class with a `dark:` one).
   `:where()` weighs nothing, so a twin has its light rule's weight and wins by
   standing after it. What stays light in dark, because the app keeps it so: a
   restaurant's own website and its photographs, a guest's phone, the emails,
   and the petrol bands, which were already dark. On screen only: a page
   printed in dark prints light, since paper drops the dark grounds and would
   keep only pale words. README, "Dark mode"; lib/__tests__/marketing-dark.test.ts. */
@media screen {
  :root.dark {
    color-scheme: dark;
    --ink:        #f5f5f4;   /* stone-100, the app's dark ink */
    --ink-2:      #d6d3d1;   /* stone-300 */
    --ink-3:      #a8a29e;   /* stone-400 */
    --paper:      #111111;   /* the app's panel */
    --paper-warm: #0a0a0a;   /* the app's ground */
    --paper-deep: #161616;
    --line:       #292524;   /* stone-800 */
    --line-soft:  #24211f;

    /* On a dark ground a shadow is no edge at all, so these darken and the
       surfaces that wore them carry a hairline instead. */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
    --sh-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.6);
    --sh-3: 0 30px 70px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* Per CSS Overflow 3, `hidden` on one axis computes the other to `auto` and
     silently makes this a scroll container. `clip` is exempt. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

/* A whisper of grain. Warms the flat paper without becoming a texture. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--petrol-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-600); }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

hr { border: 0; height: 1px; background: var(--line); margin: 0; }

::selection { background: var(--petrol-200); color: var(--petrol-950); }

:focus-visible {
  outline: 3px solid var(--petrol-600);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Petrol-600 on the dark band's lighter corner is 1.9:1, which is not a focus
   ring, it is a rumour of one. Keyboard users get a white one there. */
.band-dark :focus-visible,
.band-dark.cta-band :focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--petrol-700);
  color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  z-index: 1;
}
.wrap-narrow { max-width: var(--measure-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
/* About two thirds of a band's air, and it came down with it. */
.section-tight { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem); }

/* The band. One step of grey that runs off both edges of the screen: the
   thing that separates one section from the next, instead of a rule. */
.band { background: var(--paper-warm); }
.band-deep { background: var(--paper-deep); }

.band-dark {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(120% 130% at 12% 0%, #06525c 0%, rgba(6, 82, 92, 0) 60%),
    radial-gradient(90% 120% at 100% 100%, #056473 0%, rgba(5, 100, 115, 0) 55%),
    var(--petrol-950);
  color: #cfe9ed;
}
.band-dark h2, .band-dark h3, .band-dark h4 { color: #fff; }
/* Links on the dark band go pale petrol, but a BUTTON is not a link: `.band-dark a`
   is one point more specific than `.btn-white`, so without the :not() every white
   pill on a dark band drew its label in #b8e7ee on #fff, which is 1.3:1 and
   effectively invisible. Two of those were the primary call to action. */
.band-dark a:not(.btn) { color: var(--petrol-200); }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--petrol-700);
  margin: 0;
}
.band-dark .eyebrow { color: var(--petrol-300); }

/* The eyebrow used to draw a 26px bar before its text. Inline and immediately
   in front of words, it read as a long dash rather than as a rule, so it is
   gone. inline-flex and the gap stay: they cost nothing with one child and
   keep the label's baseline behaviour identical. */

h1, .t-hero { font-size: var(--t-hero); letter-spacing: -0.03em; line-height: 1.04; }
h2, .t-h2 { font-size: var(--t-h2); letter-spacing: -0.022em; }
h3, .t-h3 { font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.25; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40ch;
}
.band-dark .lead { color: #bcdde3; }

.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); }
.quiet { color: var(--ink-3); }
/* The dark band is a gradient, not a flat colour: it lightens to about #06525c
   in two corners. Every value on it is checked against THAT, not against the
   #00282d underneath, because the corner is where the quiet text actually sits.
   This one was #8fb9c1 and measured 4.2:1 there. */
.band-dark .quiet { color: #a3c9d0; }
.strong-ink { color: var(--ink); font-weight: 600; }

/* An arrow glyph is drawn on the maths axis, about the middle of the LOWERCASE
   x-height. Put one in a line of uppercase and it sits visibly low. This lifts
   it to the optical middle of the caps. */
.arrow-mid { display: inline-block; transform: translateY(-0.08em); }

/* The 2px rule that opens a block. Straight out of the product's own flat
   grammar, where a heavy short rule opens each section instead of a card. */
/* The short bar that sat above every section heading has gone the same way.
   Only the auth pages keep a rule, and theirs runs the full width of the
   column, so it reads as a masthead line and not as a dash. */

.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem); }
.sec-head .lead { margin-top: 1.1rem; max-width: 46ch; }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head-center .rule { margin-inline: auto; transform-origin: center; }
.sec-head-center .lead { margin-inline: auto; }

/* Dark: petrol-700 is 2.6:1 on the dark ground, so words in petrol go to
   petrol-300, as the app's do (`dark:text-petrol-300`). A petrol FILL keeps
   petrol-700 under white words in both, like the app's primary button. */
@media screen {
  :where(.dark) a { color: var(--petrol-300); }
  :where(.dark) a:hover { color: var(--petrol-200); }
  :where(.dark) :focus-visible { outline-color: var(--petrol-400); }
  :where(.dark) .eyebrow { color: var(--petrol-300); }
}

/* --------------------------------------------------------------------------
   Motion system
   --------------------------------------------------------------------------
   One class does the reveal, one variable does the stagger. Everything below
   animates transform/opacity only and has a resting state that is correct
   even if the observer never fires.

   THE HIDDEN HALF IS SCOPED TO `.js`, which an inline script in the head puts
   on <html>. A reveal animation is the one kind of decoration that can hide a
   page permanently: with scripting off, an unscoped `opacity: 0` leaves a
   restaurant owner reading a blank band and no way to know there was anything
   in it. So nothing here starts hidden unless something is definitely going to
   un-hide it.
   -------------------------------------------------------------------------- */

.rise, .rise-l, .rise-r {
  transition:
    opacity 0.7s var(--ease-out) calc(var(--d, 0) * 85ms),
    transform 0.9s var(--ease-out) calc(var(--d, 0) * 85ms);
}
.rise-scale {
  transition:
    opacity 0.8s var(--ease-out) calc(var(--d, 0) * 85ms),
    transform 1s var(--ease-out) calc(var(--d, 0) * 85ms);
}

/* `will-change` only while the element is still waiting. Left on permanently
   it holds a compositing layer per element for the life of the page. */
.js .rise:not(.in), .js .rise-l:not(.in), .js .rise-r:not(.in), .js .rise-scale:not(.in) {
  will-change: transform, opacity;
}

.js .rise { opacity: 0; transform: translate3d(0, 26px, 0); }
.js .rise-l { opacity: 0; transform: translate3d(-30px, 0, 0); }
.js .rise-r { opacity: 0; transform: translate3d(30px, 0, 0); }
.js .rise-scale { opacity: 0; transform: scale(0.955) translate3d(0, 18px, 0); }

.rise.in, .rise-l.in, .rise-r.in, .rise-scale.in { opacity: 1; transform: none; }

/* The rule draws itself in. */
.rule-draw { transition: transform 0.75s var(--ease-out) calc(var(--d, 0) * 85ms); }
.js .rule-draw { transform: scaleX(0); }
.rule-draw.in { transform: scaleX(1); }

/* Words that arrive line by line. Each line is its own overflow window, so the
   text rises out of nothing rather than fading through the paper. */
.lines { display: block; }
.lines .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.lines .ln > span {
  display: block;
  transition: transform 1s var(--ease-out) calc(var(--d, 0) * 110ms);
}
.js .lines .ln > span { transform: translate3d(0, 105%, 0); }
.lines.in .ln > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Anything whose visible state is PRODUCED by its motion needs an explicit
     resting state, not just `animation: none`. */
  .rise, .rise-l, .rise-r, .rise-scale { opacity: 1 !important; transform: none !important; }
  .rule-draw { transform: scaleX(1) !important; }
  .lines .ln > span { transform: none !important; }
  .breathe, .sheen { animation: none !important; }
}
/* ==========================================================================
   2. Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons, big enough for a thumb on a phone in a busy kitchen, and no
   bigger than their words.

   EVERY BUTTON IS THE TOP BAR'S SHAPE (owner, 5 October 2026: "some buttons
   have too much empty space ... i like the buttons at the top of the page
   with log in and start free but i dont like the buttons on the homepage for
   example in the hero banner"). The bar's pair is 48px around 16px words with
   1.3em of room either side; the hero's was 64px around 19px words with
   1.77em, 34px of empty pill each side of "Start free". So the padding and
   the height are written in em: a box three times the words' size, 1.3em
   either side, never under the 52px a thumb needs. A size is only a font
   size (`.btn-lg`): give a button its own padding or height and the empty
   space comes back.
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: max(52px, 3em);
  padding: 0.65em 1.3em;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.22s var(--spring), color 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-primary { background: var(--petrol-700); color: #fff; }
.btn-primary:hover { color: #fff; }
/* Depth as a separate layer, so hover animates opacity and never repaints a
   shadow through everything behind it. */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 10px 26px rgba(3, 105, 116, 0.38);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.btn-primary:hover::before { opacity: 1; }
/* A slow sheen travelling across the primary call to action. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-primary:hover::after { animation: sheen 0.9s var(--ease-out); }
@keyframes sheen { to { transform: translateX(120%); } }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line);
}
.btn-ghost:hover { color: var(--petrol-800); box-shadow: inset 0 0 0 2px var(--petrol-300); }

.btn-soft { background: var(--petrol-50); color: var(--petrol-800); box-shadow: inset 0 0 0 1px var(--petrol-200); }
.btn-soft:hover { color: var(--petrol-900); background: var(--petrol-100); }

.btn-white, .btn-white:hover, .band-dark .btn-white { background: #fff; color: var(--petrol-900); }

.btn-on-dark, .btn-on-dark:hover, .band-dark .btn-on-dark { background: transparent; color: #fff; }
.btn-on-dark { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34); }
.btn-on-dark:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }

.btn-lg { font-size: 1.1875rem; }
.btn-block { width: 100%; }

.btn .arw { transition: transform 0.3s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* A plain text link that behaves like a button target. */
.tlink {
  display: inline-flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--petrol-700);
  text-decoration: none;
  min-height: 44px;
}
/* Its arrow, and the one at the end of each phone-menu row, is DRAWN: the
   sprite's #i-arrow as a mask, painted in a colour of the link's own. Never the
   "→" character: neither face here carries it (their latin cut stops short of
   U+2190 to U+2192), so the reader's machine drew it from whatever font it had,
   small and below the middle of the words (owner, 2026-10-15: "the arrow ... is
   not centered vertically").

   It is set from the words' BASELINE, never centred on their line. Where a
   line's middle falls depends on how each engine rounds the text into it: the
   auth pages' footer put a centred arrow 0.04px above the middle of the
   capitals in Chromium and 0.9px above it in LibreWolf, and a phone-menu row
   1.05px above in both. The baseline and the capitals' height (`cap`) are the
   font's own. So the row aligns on the baseline (wrapping, so that its one line
   can still be centred, `align-content`), the arrow's box stands on it taking no
   height in the row (`margin-top` gives its height back), and `top` lowers it
   until its middle is the middle of the capitals. The `em` line before each
   `cap` line is the same figure in Plus Jakarta Sans (capitals 0.745em tall),
   for a browser that does not know `cap`. */
:root {
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E");
}
.tlink::after {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: -1.1em;
  position: relative;
  top: 0.1775em;
  top: calc(0.55em - 0.5cap);
  background-color: currentColor;
  -webkit-mask: var(--arrow-right) center / contain no-repeat;
  mask: var(--arrow-right) center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.tlink:hover::after { transform: translateX(5px); }

/* Dark: the quiet button keeps an edge you can see. `--line` is stone-800 in
   dark, 1.4:1 on the ground, so its edge is the app's stone-700. */
@media screen {
  :where(.dark) .btn-ghost { box-shadow: inset 0 0 0 2px #44403c; }
  :where(.dark) .btn-ghost:hover { color: var(--petrol-200); box-shadow: inset 0 0 0 2px var(--petrol-400); }
  :where(.dark) .tlink { color: var(--petrol-300); }
}

/* --------------------------------------------------------------------------
   Chips and small marks
   -------------------------------------------------------------------------- */

.tick {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--petrol-50);
  color: var(--petrol-700);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--petrol-200);
}
.tick svg { width: 14px; height: 14px; }
.band-dark .tick { background: rgba(255,255,255,0.1); color: var(--petrol-200); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

.cross { background: #fff; color: #a8b4b6; box-shadow: inset 0 0 0 1px var(--line); }

/* Checklists */
.checks { list-style: none; display: grid; gap: 0.85rem; }
.checks li { display: flex; gap: 0.8rem; align-items: flex-start; }
.checks li > span:last-child { padding-top: 0.1rem; }

@media screen {
  :where(.dark) .tick { background: rgba(0, 40, 45, 0.6); color: var(--petrol-300); box-shadow: inset 0 0 0 1px var(--petrol-800); }
  :where(.dark) .cross { background: var(--paper); color: #57534e; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  transition: transform 0.35s var(--ease-out);
  isolation: isolate;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--sh-2);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.card-hover:hover { transform: translateY(-5px); }
.card-hover:hover::before { opacity: 1; }

.card h3 { margin-bottom: 0.65rem; }
.card p { color: var(--ink-2); }

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--petrol-50), var(--petrol-100));
  color: var(--petrol-700);
  box-shadow: inset 0 0 0 1px var(--petrol-200);
  margin-bottom: 1.1rem;
}
.icon-badge svg { width: 24px; height: 24px; }

/* Dark: a petrol wash is the app's `dark:bg-petrol-950/40` over a
   `petrol-800` edge, its glyph petrol-200. */
@media screen {
  :where(.dark) .card { background: var(--paper); }
  :where(.dark) .icon-badge {
    background: linear-gradient(160deg, rgba(4, 85, 94, 0.45), rgba(0, 40, 45, 0.7));
    color: var(--petrol-200);
    box-shadow: inset 0 0 0 1px var(--petrol-800);
  }
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.topbar.stuck::after { opacity: 1; }

.topbar-in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 76px;
}

/* The gap and the tag's own padding are 10px, the lockup's own tile-to-words
   gap. They were 13.6px beside the raster; see `.brand-tag` for where the
   room went. */
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; margin-right: auto; }
.brand:hover { color: inherit; }

/* THE PLATFORM'S LOCKUP, DRAWN THE WAY THE APPLICATION DRAWS IT (owner,
   2 October 2026: "logo on the marketing page needs to be the same as on the
   platform").

   This was a picture: the raster wordmark the owner picked in August
   (`assets/img/logo.png`, ground removed). The application stopped rendering
   that file on 13 September, when its log-in screens took the app bar's
   lockup instead ("the logo from the top of the dashboard or builder looks
   much better"), and this site kept it, so a visitor crossing into the
   product met a second mark. It is now the application's own recipe
   (`app/_components/brand-lockup.tsx`), measure for measure: the petrol tile
   (petrol-300 to petrol-600, an inset white ring at 25%, a 1px cast under it)
   holding the cloche (`#i-mark`, `brand-mark.tsx`'s three shapes) in
   petrol-950, beside "The Main Course" in three inks.

   EVERY MEASURE IS AN `em` OF `.lockup`'s OWN FONT-SIZE, so 1rem is the app
   bar's lockup to the pixel (a 28px tile with an 8px corner, a 17px mark,
   20px words, a 10px gap) and one figure scales all of it together. The ring
   and the cast stay in px, as the app's `ring-1` and `shadow-sm` do at both
   of its sizes. `app/__tests__/brand-lockup.test.tsx` holds these rules
   against the component, so the two cannot come apart again.

   THE WORDS ARE IN THE APP'S FACE, the system sans, never this site's Plus
   Jakarta Sans. The app's own log-in screens stand under the marketing faces
   too, and hand the lockup back the system sans for exactly this reason: the
   lockup was approved in it.

   THE INKS ARE THE APP'S `paper` GROUND, the one it uses for this website's
   own documents (`/privacy`, `/terms`): "The" petrol-600, "Main" this site's
   ink, "Course" petrol-700, each clearing AA on white and on `--paper-warm`.
   The drawings of the app bar further down (`.wk-brand`) take its `bar`
   ground's stone-900 "Main" instead, because what they draw is the app.

   The hover is the app bar's too: the tile grows to 105% and nothing else
   moves (the global reduced-motion rule takes the 200ms away, as the app's
   `motion-reduce:transition-none` does). */
.lockup {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.625em;
  font-size: 1rem;
}
.lockup-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75em;
  height: 1.75em;
  border-radius: 0.5em;
  background-image: linear-gradient(to bottom right, var(--petrol-300), var(--petrol-600));
  color: var(--petrol-950);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.lockup-tile svg { width: 1.0625em; height: 1.0625em; }
.brand:hover .lockup-tile { transform: scale(1.05); }
.lockup-words {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--petrol-600);
}
.lockup-words b { font-weight: 600; color: var(--ink); }
.lockup-words b + b { color: var(--petrol-700); }

/* The positioning line, which used to sit under the product's name inside
   `.brand-name` and now stands beside the lockup. It is deliberately KEPT rather
   than dropped with the wordmark it hung off: it is copy about the business, not
   part of the mark.

   It carries a rule on its left because without one two pieces of type sit side
   by side with nothing saying which is the name and which is the description.

   ITS TWO LINES ARE BROKEN IN THE MARKUP, NOT BY A WIDTH (2 October 2026). It
   was `max-width: 11em`, which did set it as WEBSITES FOR / RESTAURANTS but left
   the box 128px wide around a 114px line, and the row needed those 15px when
   the raster became the app's lockup: the lockup is words in the visitor's own
   system face, 213px in the widest one measured (DejaVu Sans) against the
   raster's 190, and the bar's row tops out at 1160px however wide the screen.
   A `<br>` and `nowrap` make the box exactly its longer line in any face, and
   can never break it over three (7.5em once did: 49px of type in a 68px bar,
   which reads as text that did not fit rather than as a descriptor). With the
   10px gaps above, the widest face leaves the row 11px spare, as the raster
   did. */
.brand-tag {
  padding-left: 0.625rem;
  border-left: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--petrol-600);
}

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: 10px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--petrol-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.topbar-cta { display: flex; align-items: center; gap: 0.6rem; }
/* The shape every other button is drawn from (see Buttons): its padding is
   the base `.btn`'s em at 16px, 10.4px by 20.8px, so only the size is here. */
.topbar-cta .btn { min-height: 48px; font-size: var(--t-small); }

.burger {
  display: none;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  place-items: center;
  /* Packs the three bars into the middle of the 52px box. Without it the grid
     stretches its three rows to fill the box, the bars land 18px apart (the last
     one on the bottom edge), and the open state's 7px moves never meet, so the
     X drew as two separate strokes. 2px bar + 5px gap = the 7px those moves use. */
  align-content: center;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 76px 0 0;
  z-index: 99;
  background: #fff;
  padding: 1.5rem var(--gut) 3rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.35s var(--ease-out);
}
.mobile-nav.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav a.mnav {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a.mnav::after {
  content: "";
  flex: none;
  width: 1.2em;
  height: 1.2em;
  margin-top: -1.2em;
  position: relative;
  top: 0.2275em;
  top: calc(0.6em - 0.5cap);
  background-color: var(--petrol-600);
  -webkit-mask: var(--arrow-right) center / contain no-repeat;
  mask: var(--arrow-right) center / contain no-repeat;
}
.mobile-nav .btn-row { margin-top: 2rem; flex-direction: column; align-items: stretch; }

body.nav-open { overflow: hidden; }

/* Light or dark, the visitor's own choice (owner, 18 October 2026: "add a
   button to go from light to dark mode"; README, "Dark mode"). One SWITCH,
   on being dark, drawn twice: a round button beside "Log in" wherever the
   links stand in the bar, its moon pressing to dark and its sun back to
   light, and under that width a row of the phone's menu, named, with the
   site's own switch (`.agree`'s 46 by 26 track). Both carry `data-theme-switch`
   and are worked by main.js, so neither is drawn where that script never runs
   (`.js`): a press that did nothing would be a control that lies. */
.theme-btn {
  display: none;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.js .theme-btn { display: grid; }
.theme-btn:hover { color: var(--petrol-800); box-shadow: inset 0 0 0 2px var(--petrol-300); }
.theme-btn svg { width: 22px; height: 22px; }
.theme-sun { display: none; }
:where(.dark) .theme-sun { display: block; }
:where(.dark) .theme-moon { display: none; }

.mnav-theme {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 64px;
  padding: 0 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.js .mnav-theme { display: flex; }
.theme-sw {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 26px;
  padding: 3px;
  border-radius: 999px;
  background: #d6d3d1;
  transition: background-color 0.2s var(--ease);
}
.theme-sw::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s var(--ease);
}
[aria-checked="true"] > .theme-sw { background: var(--petrol-600); }
[aria-checked="true"] > .theme-sw::before { transform: translateX(20px); }

/* Dark: the bar is the app's own, #1b1b1c, and the lockup takes the app's
   dark inks on paper (brand-lockup.tsx: "The" petrol-300, "Main" stone-100
   through --ink, "Course" petrol-100). */
@media screen {
  :where(.dark) .topbar { background: rgba(27, 27, 28, 0.88); }
  :where(.dark) .lockup-words { color: var(--petrol-300); }
  :where(.dark) .lockup-words b + b { color: var(--petrol-100); }
  :where(.dark) .brand-tag { color: var(--petrol-300); }
  :where(.dark) .nav a::after { background: var(--petrol-400); }
  :where(.dark) .burger { background: var(--paper); box-shadow: inset 0 0 0 1px #44403c; }
  :where(.dark) .mobile-nav { background: var(--paper); }
  :where(.dark) .mobile-nav a.mnav::after { background-color: var(--petrol-300); }
  :where(.dark) .theme-btn { box-shadow: inset 0 0 0 2px #44403c; }
  :where(.dark) .theme-btn:hover { color: var(--petrol-200); box-shadow: inset 0 0 0 2px var(--petrol-400); }
  :where(.dark) .theme-sw { background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); }
}

/* --------------------------------------------------------------------------
   Image placeholders
   --------------------------------------------------------------------------
   Real photography is coming later. Until then every picture is a drawn panel
   that states what belongs there, so the layout is honest at every size rather
   than collapsing around a missing file.
   -------------------------------------------------------------------------- */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, var(--petrol-50) 0%, #f3f7f8 55%, var(--petrol-100) 100%);
  box-shadow: inset 0 0 0 1px rgba(4, 129, 142, 0.16);
  color: var(--petrol-700);
  min-height: 120px;
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(4, 129, 142, 0.055) 0 2px,
    transparent 2px 11px
  );
}
.ph-in { display: grid; justify-items: center; gap: 0.5rem; padding: 1rem; text-align: center; }
.ph-in svg { width: 30px; height: 30px; opacity: 0.7; }
/* No opacity on either of these. A placeholder caption is still text somebody
   has to read, and 0.7 of petrol-600 on a pale tint is 2.8:1. */
.ph-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--petrol-800);
}
.ph-note { font-size: var(--t-micro); color: var(--petrol-700); }

/* --------------------------------------------------------------------------
   Forms (log in / sign up, and anywhere else)
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.35rem; }
.field > label {
  display: block;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.field .hint { display: block; font-size: var(--t-micro); color: var(--ink-3); margin-top: 0.4rem; }

.input {
  width: 100%;
  min-height: 58px;
  padding: 0.9rem 1.05rem;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 1.0625rem;
  color: var(--ink);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
/* A placeholder is still something a person has to read before they can type
   over it. #9aa8aa was 2.5:1 on white; this is 4.6:1 and still clearly lighter
   than the value they enter. */
.input::placeholder { color: #67797c; opacity: 1; }
.input:hover { box-shadow: inset 0 0 0 1.5px #d4d0c8; }
.input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--petrol-600), 0 0 0 4px var(--petrol-100);
}
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--petrol-700); }

.err {
  display: none;
  margin-top: 0.45rem;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--petrol-800);
}
.err.on { display: block; }

/* Dark: the app's field, #111111 behind a stone-700 edge, its words
   stone-100 and its example stone-400. */
@media screen {
  :where(.dark) .input { background: var(--paper); box-shadow: inset 0 0 0 1.5px #44403c; }
  :where(.dark) .input::placeholder { color: #a8a29e; }
  :where(.dark) .input:hover { box-shadow: inset 0 0 0 1.5px #57534e; }
  :where(.dark) .input:focus { box-shadow: inset 0 0 0 2px var(--petrol-400), 0 0 0 4px rgba(90, 181, 193, 0.22); }
  :where(.dark) .input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--petrol-400); }
  :where(.dark) .err { color: var(--petrol-300); }
}

/* --------------------------------------------------------------------------
   The two legal documents (privacy.html, terms.html).

   Those pages are GENERATED from the product's single copy of the text —
   scripts/legal/build-marketing-pages.ts — so nothing about them is
   hand-written except the rules below. They borrow this site's own head, top
   bar and footer from faq.html at generation time, so only the document itself
   needs dressing.

   `.wrap-narrow` (720px) already sets the measure; this adds the vertical
   rhythm a long numbered document needs and a table that scrolls in its own box
   rather than widening the page.
   -------------------------------------------------------------------------- */

/* NOT `--t-hero` (up to 60px), which every other h1 on this site takes: a
   document is read rather than announced, and this is the product's own legal
   heading transcribed, so the two renderings open at the same size. */
.legal h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.35rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.legal .legal-standfirst {
  margin-top: 0.6rem;
  font-size: var(--t-body);
  color: var(--ink-3);
}
.legal .legal-meta { margin-top: 1.25rem; }

/* One 2px rule opening the document, the same weight the product's own page
   uses under its title. Nothing else on these pages is a line. */
.legal .legal-body {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid #d4d0c8;
  color: var(--ink-2);
}

.legal .legal-body h2 {
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
  margin-top: 2.75rem;
  scroll-margin-top: 5rem;   /* the top bar is sticky; a #section link must clear it */
}
.legal .legal-body h2:first-child { margin-top: 0; }

.legal .legal-body p { margin-top: 1rem; line-height: 1.65; }
.legal .legal-body ul {
  margin-top: 1rem;
  padding-left: 1.35rem;
  list-style: disc;
  line-height: 1.65;
}
.legal .legal-body li { margin-top: 0.6rem; }
.legal .legal-body strong { color: var(--ink); font-weight: 700; }

.legal .legal-table { margin-top: 1.5rem; overflow-x: auto; }
.legal .legal-table table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  text-align: left;
}
.legal .legal-table th {
  padding: 0 1.25rem 0.5rem 0;
  vertical-align: bottom;
  border-bottom: 2px solid #d4d0c8;
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--ink);
}
.legal .legal-table td {
  padding: 0.75rem 1.25rem 0.75rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-micro);
  line-height: 1.55;
}

@media screen {
  :where(.dark) .legal .legal-body { border-top-color: #44403c; }
  :where(.dark) .legal .legal-table th { border-bottom-color: #44403c; }
}

/* --------------------------------------------------------------------------
   The agreements on the sign-up screen: one SWITCH per document.

   The product carries the same two (`app/_components/auth-chrome.ts` →
   AUTH_SWITCH), and this is the pair kept in step with it — the log-in and
   sign-up screens here are the reference the product's were ported from, and
   the whole point of that reference is that it does not quietly fall behind.
   They were tick boxes until 2026-09-26, when the owner asked for none to be
   left anywhere on the platform.

   The app's own switch (`WalkSwitch`), to the pixel: a 46x26 track with 3px of
   padding and a 20px white knob that travels 20px by `transform`. Off, the
   track is the stone the app draws a switch off in; on, petrol. The focus ring
   and the fault edge are `.input`'s own, so an agreement still reads as one
   family with the boxes above it. The knob is the button's `::before`, so the
   switch is drawn with no markup of its own and still reads correctly with
   JavaScript off (it simply stays off).
   -------------------------------------------------------------------------- */

.agree { display: flex; align-items: flex-start; gap: 0.75rem; }
/* `* +` rather than `.agree +`: the message for the row above sits between the
   two, so an adjacent-sibling rule naming both rows matches neither once one of
   them is wrong — which is the only time anybody looks. */
.agree-group > * + .agree { margin-top: 0.75rem; }
.agree-group { margin-bottom: 1.35rem; }

.agree [role="switch"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 26px;
  /* Centred on the sentence's FIRST line, which is one line box of the form's
     type (18px at 1.65, 29.7px): half the difference from the 26px track. The
     px line is for a browser without `lh`. */
  margin: 2px 0 0;
  margin-top: calc((1lh - 26px) / 2);
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #d6d3d1;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  cursor: pointer;
}
.agree [role="switch"]::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s var(--ease);
}
.agree [role="switch"][aria-checked="true"] { background: var(--petrol-600); }
.agree [role="switch"][aria-checked="true"]::before { transform: translateX(20px); }
.agree [role="switch"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--petrol-600), 0 0 0 4px var(--petrol-100);
}
.agree [role="switch"][aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--petrol-700); }

/* A sentence to read, not a name for a box — so the body ink at the form's own
   size rather than `.field > label`'s bold, with the document's title inside it
   carrying the emphasis as a link. The words are part of the target. */
.agree > label {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}

/* On the sentence's own left edge (46px switch + the 0.75rem gap) — under the
   switch instead, the message reads as belonging to the row above it. */
.agree-err { margin-left: calc(46px + 0.75rem); }

/* The eye inside the password box: a 46px square 6px in from the box's right
   edge (6 + 46 = 52px in), and the box keeps 64px clear on that side so a
   revealed password never runs under it. It said "Show" / "Hide" in words
   until 2 October 2026; the app's own box changed the same day. */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 4rem; }
.pw-toggle {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--petrol-700);
  cursor: pointer;
}
.pw-toggle:hover { background: var(--petrol-50); }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle .pw-hide,
.pw-toggle.is-shown .pw-show { display: none; }
.pw-toggle.is-shown .pw-hide { display: block; }

.form-note {
  margin-top: 1.5rem;
  padding: 0.9rem 1.05rem;
  border-radius: 12px;
  background: var(--paper-warm);
  font-size: var(--t-micro);
  color: var(--ink-3);
}

/* Dark: the app's switch off is a dark track inside a light hairline
   (walk-controls.tsx, `dark:bg-black/[0.28] dark:ring-white/[0.16]`). */
@media screen {
  :where(.dark) .agree [role="switch"] { background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); }
  :where(.dark) .agree [role="switch"]:focus-visible { box-shadow: inset 0 0 0 2px var(--petrol-400), 0 0 0 4px rgba(90, 181, 193, 0.22); }
  :where(.dark) .pw-toggle { color: var(--petrol-300); }
  :where(.dark) .pw-toggle:hover { background: rgba(0, 40, 45, 0.6); }
}

/* --------------------------------------------------------------------------
   The contact page (contact.html)

   One card holding the form, as wide as a message is comfortable to write
   in, on the page's own ground. The boxes are the sign-up form's (`.field`,
   `.input`, `.err`); the message box is the same box, taller, and only ever
   grows downwards. What the door refuses is printed under its box in the
   form's quiet petrol, never red; a refusal that belongs to no box goes in
   `.form-note`, under the button.
   -------------------------------------------------------------------------- */

.contact-card {
  max-width: 38rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.contact-message {
  display: block;
  min-height: 12rem;
  resize: vertical;
  line-height: 1.55;
}
/* The hidden box a script fills and a person never sees: out of view, out of
   the tab order (`tabindex="-1"`) and out of what a screen reader reads
   (`aria-hidden`). Not `display: none`, which some scripts check for. */
.contact-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* A refusal that belongs to no box (a limit, a send that did not go) reads in
   the same quiet petrol as the boxes' own, never grey and never red. */
.contact-form .form-note { color: var(--petrol-800); font-weight: 600; }
.contact-privacy { margin-top: 1.25rem; text-align: center; }
.contact-sent { text-align: center; padding-block: 1rem; }
.contact-sent h2 { font-size: var(--t-h3); margin-bottom: 0.75rem; }
.contact-sent h2:focus { outline: none; }
.contact-sent p { color: var(--ink-2); overflow-wrap: anywhere; }

/* The check that a person is writing, where the operator has switched it on
   (the app's guest check). Its frame waits here unseen; on the rare press
   where Cloudflare wants the person to press its box, the layer shows a card
   over the page with the box and a way to give up. Cloudflare draws the box
   at a fixed size in CSS pixels, so the frame is sized in pixels by the
   script. */
.check-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.check-layer.on { opacity: 1; pointer-events: auto; }
.check-veil { position: absolute; inset: 0; background: rgba(11, 30, 34, 0.4); }
.check-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: min(22rem, 100%);
  min-width: 334px;
  max-height: 100%;
  overflow-y: auto;
  padding: 1rem;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
  text-align: center;
}
.check-card:focus { outline: none; }
.check-card h2 { font-size: var(--t-body); letter-spacing: 0; }
.check-card p { font-size: var(--t-small); color: var(--ink-3); }
.check-card iframe { display: block; border: 0; color-scheme: light; }
@media (max-width: 379px) {
  .check-card { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .check-layer { transition: none; }
}

/* Dark. The check's frame keeps `color-scheme: light`, so it stays see-through
   over the card; main.js asks the check for its dark theme instead. */
@media screen {
  :where(.dark) .contact-card, :where(.dark) .check-card { background: var(--paper); }
  :where(.dark) .contact-form .form-note { color: var(--petrol-300); }
  :where(.dark) .check-veil { background: rgba(0, 0, 0, 0.6); }
}

/* --------------------------------------------------------------------------
   Accordion (questions)
   -------------------------------------------------------------------------- */

.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 76px;
  padding: 1.1rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.acc-btn:hover { color: var(--petrol-700); }
.acc-sign {
  margin-left: auto;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--petrol-50);
  box-shadow: inset 0 0 0 1px var(--petrol-200);
  display: none;
  place-items: center;
  position: relative;
  transition: transform 0.4s var(--spring), background 0.3s var(--ease);
}
.acc-sign::before, .acc-sign::after {
  content: "";
  position: absolute;
  background: var(--petrol-700);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease);
}
.acc-sign::before { width: 13px; height: 2px; }
.acc-sign::after { width: 2px; height: 13px; }
.js .acc-sign { display: grid; }
.acc-btn[aria-expanded="true"] .acc-sign { transform: rotate(180deg); background: var(--petrol-700); }
.acc-btn[aria-expanded="true"] .acc-sign::before { background: #fff; }
.acc-btn[aria-expanded="true"] .acc-sign::after { transform: scaleY(0); opacity: 0; }

/* An answer is folded only once the script is there to unfold it (the `.js`
   class from the inline script in the <head>): with JavaScript off every
   answer is open, the sign that would open it is not drawn, and the buttons
   carry no aria-expanded until assets/js/main.js gives them one. */
.acc-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.js .acc-panel { grid-template-rows: 0fr; }
.acc-panel > div { overflow: hidden; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { padding-bottom: 1.6rem; max-width: 62ch; }
.acc-panel p + p { padding-top: 0; margin-top: -0.8rem; }

/* Dark. The open sign keeps its petrol-700 fill and white bar: those rules
   name the open button, so they outrank these. */
@media screen {
  :where(.dark) .acc-btn:hover { color: var(--petrol-300); }
  :where(.dark) .acc-sign { background: rgba(0, 40, 45, 0.6); box-shadow: inset 0 0 0 1px var(--petrol-800); }
  :where(.dark) .acc-sign::before, :where(.dark) .acc-sign::after { background: var(--petrol-300); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--paper-warm); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; }
.footer-grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
}
.footer .foot-h {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; display: grid; gap: 0.15rem; }
.footer ul a {
  flex-wrap: wrap;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
}
.footer ul a:hover { color: var(--petrol-700); }
.footer-base {
  margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-micro);
  color: var(--ink-3);
}

@media screen {
  :where(.dark) .footer ul a:hover { color: var(--petrol-300); }
}
/* ==========================================================================
   3. The picture system
   --------------------------------------------------------------------------
   THIS SITE SELLS WITH PICTURES, AND ALMOST EVERY PICTURE IS DRAWN IN HTML.
   The owner's brief (27 September 2026): "little text, a lot of visuals and
   animations". Screenshots of the product go stale the week a screen moves and
   cannot move themselves; a drawing in markup scales to any width without
   blurring, plays when it is seen, and says exactly as much as it is meant to.

   The exception is the proof. Two restaurants' real homepages, built by the
   product and cropped out of real screenshots, are photographs rather than
   drawings (assets/img/: Noir, Pancakes like nothing else). Nothing drawn
   here pretends to be one of those.

   Three rules every picture below keeps:

   - A PICTURE IS NOT TEXT TO READ. Each drawing is `aria-hidden` and carries
     its meaning in the words beside it, so its own type may go under the 15px
     floor the rest of the site keeps. The miniature websites always could.
   - IT SCALES AS ONE PIECE. A drawing is a size container, and everything
     inside it is measured in `em` off `--ui` (a share of the container's own
     width), so a phone drawn at 250px and the same phone at 330px are the same
     picture, not a reflowed one.
   - ITS RESTING STATE IS ITS FINISHED STATE. With JavaScript off, or motion
     reduced, a scene shows the end of its story (the reservation confirmed,
     the order ready). Only a page that is about to play it rewinds it first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives for the sections
   -------------------------------------------------------------------------- */

.grid-2 { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4.5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split-wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
.split-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split-art { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); }
.split-art-r { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); }
/* A phone beside a few lines (a guest booking on bookings.html, a card
   payment on ordering.html). Across the whole measure the phone stood alone
   in the middle of its half, 266px from the words it shows at 1440; as a
   pair at the centre, 163px apart, they read as one picture and its
   caption. */
.split-phone { grid-template-columns: minmax(0, 28rem) minmax(0, 27rem); justify-content: center; }

/* A title's second half set in petrol: the words the section is selling. */
.hl { color: var(--petrol-700); }
.band-dark .hl { color: var(--petrol-300); }

/* Benefits as short pills with an icon, never as sentences. The section's
   picture does the explaining; these are the words a skimmer takes away. */
.points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.points li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(11, 30, 34, 0.04);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.points li .pi {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--petrol-50);
  color: var(--petrol-700);
}
.points li .pi svg { width: 16px; height: 16px; }
.band-dark .points li {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #e6f5f7;
}
.band-dark .points li .pi { background: rgba(143, 210, 219, 0.16); color: var(--petrol-200); }

/* The same benefits as a two-column list of icon rows, where a section has
   room beside its picture and pills would wrap into a ragged block. An item
   is its title alone, on the middle of its icon. */
.feat-list { list-style: none; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat-list li { display: flex; gap: 0.8rem; align-items: center; }
/* A list of one (the photos section's, since 2026-10-04) takes the whole row
   rather than half of it, where it wrapped onto three lines. */
.feat-list li:only-child { grid-column: 1 / -1; }
/* A list holding a sentence (the homepage section's on features.html, since
   2026-10-05) puts one item to a row: two across, the sentence wrapped onto
   six lines at 1440 wide and nine at 1100. It wraps as a paragraph does, or
   its last line at 1440 is the one word "need". */
.feat-list.feat-list-stack { grid-template-columns: minmax(0, 1fr); }
.feat-list-stack b { text-wrap: pretty; }
.feat-list .fi {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--petrol-50), var(--petrol-100));
  box-shadow: inset 0 0 0 1px var(--petrol-200);
  color: var(--petrol-700);
}
.feat-list .fi svg { width: 20px; height: 20px; }
.feat-list b { display: block; color: var(--ink); font-size: 1.0625rem; line-height: 1.35; }
.band-dark .feat-list .fi { background: rgba(143, 210, 219, 0.14); box-shadow: inset 0 0 0 1px rgba(143, 210, 219, 0.28); color: var(--petrol-200); }
.band-dark .feat-list b { color: #fff; }

/* Dark. On the petrol bands these already had their own inks, and those
   rules name the band, so they still win there. */
@media screen {
  :where(.dark) .hl { color: var(--petrol-300); }
  :where(.dark) .points li { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
  :where(.dark) .points li .pi { background: rgba(0, 40, 45, 0.7); color: var(--petrol-300); }
  :where(.dark) .feat-list .fi {
    background: linear-gradient(160deg, rgba(4, 85, 94, 0.45), rgba(0, 40, 45, 0.7));
    box-shadow: inset 0 0 0 1px var(--petrol-800);
    color: var(--petrol-200);
  }
}

/* --------------------------------------------------------------------------
   Devices: a browser window, a phone, the product's own app window
   -------------------------------------------------------------------------- */

/* Every drawing is a size container; everything inside it is `em` off --ui,
   which is a share of the container's own width. See the header above. */
.ui { container-type: inline-size; position: relative; }
.ui-s { font-size: calc(100cqw / var(--ui-w, 30)); line-height: 1.35; }

.frame {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), var(--sh-2);
  overflow: hidden;
}
.frame-flat { transform: none; }
.frame-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: #f4f3ef;
  border-bottom: 1px solid var(--line);
}
.frame-dots { display: flex; gap: 6px; flex: none; }
.frame-dots i { width: 10px; height: 10px; border-radius: 999px; background: #dcd8cf; display: block; }
.frame-url {
  flex: 1;
  min-width: 0;
  max-width: 26rem;
  margin-inline: auto;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-3);
  overflow: hidden;
  white-space: nowrap;
}
.frame-url svg { width: 12px; height: 12px; flex: none; color: var(--good); }
.frame-url-ph { display: block; flex: 1; max-width: 150px; height: 7px; border-radius: 4px; background: var(--line); }

/* The phone, drawn face on the way the real one looks: a thin titanium band,
   a thin black glass border inside it, the screen with the island, and the
   buttons standing just proud of the band. Every part of the body is a
   fraction of the phone's own width (--u is a hundredth of it), never a pixel
   size. A fixed 9px border and a 22px island are what made the small phones
   look like toys with thick bezels: they stayed 9px and 22px while the phone
   shrank to 112px, so the border was 8% of the width and the island covered
   the restaurant's own bar. Its screen is the size container, so what is
   drawn on it scales with the phone and never reflows. 390 × 844 is the
   screen every phone drawing on this site is laid out for. */
.phone {
  --u: calc(var(--pw, 280px) / 100);
  position: relative;
  isolation: isolate;
  width: var(--pw, 280px);
  padding: calc(var(--u) * 2.9);
  border-radius: calc(var(--u) * 16);
  background: linear-gradient(90deg, #d6d1c8, #a7a298 10%, #8f8a81 50%, #a7a298 90%, #d6d1c8);
  box-shadow:
    0 0 0 0.5px rgba(60, 54, 44, 0.35),
    0 40px 70px -30px rgba(2, 40, 45, 0.55),
    0 16px 30px -18px rgba(2, 40, 45, 0.35);
}
/* The black glass, 1.1 units in from the edge, under the screen. It is a
   layer and not a border because a border's width is rounded to whole pixels,
   which on a small phone turned the band into a 1px line. */
.phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * 14.9);
  background: #050506;
}
/* The buttons: the action button and the two volume buttons on the left, the
   side button on the right, half a unit proud of the band. One box a unit
   wider than the phone, painted only where it stands outside it. */
.phone::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--u) * -0.5);
  pointer-events: none;
  background:
    linear-gradient(90deg, #8f8a81, #bdb8af) 0 calc(var(--u) * 27) / calc(var(--u) * 0.6) calc(var(--u) * 7.5),
    linear-gradient(90deg, #8f8a81, #bdb8af) 0 calc(var(--u) * 41) / calc(var(--u) * 0.6) calc(var(--u) * 14.5),
    linear-gradient(90deg, #8f8a81, #bdb8af) 0 calc(var(--u) * 59.5) / calc(var(--u) * 0.6) calc(var(--u) * 14.5),
    linear-gradient(270deg, #8f8a81, #bdb8af) 100% calc(var(--u) * 47) / calc(var(--u) * 0.6) calc(var(--u) * 23);
  background-repeat: no-repeat;
}
.phone-screen {
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: calc(var(--u) * 13.1);
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
}
/* The island: 126 × 37 on a 393-wide screen and 11 down from its top, as on
   the phone itself, measured off the screen's own width so it keeps its place
   over whatever the screen shows. */
.phone-screen::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 33.9%;
  width: 32.2%;
  aspect-ratio: 126 / 37;
  margin-top: 2.9%;
  border-radius: 999px;
  background: #000;
}
.phone-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone-screen .ui-s { --ui-w: 24; position: absolute; inset: 0; }
/* A website on a phone sits under the phone's own status bar, so the island
   never lands on the restaurant's bar. 13.7% is that bar's height on the phone
   itself (54 of 393). --sb is the bar's colour, read off the screenshot's
   own header. */
.phone-screen.sb { padding-top: 13.7%; background: var(--sb, #fff); }
.phone-screen.sb > img { height: auto; }
/* The status bar sits on the island's own line: the time centred in the space
   left of it, the signal, wi-fi and battery centred in the space right of it. */
.sbar {
  position: absolute;
  top: 2.9cqw;
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 32.2cqw 1fr;
  align-items: center;
  justify-items: center;
  height: 9.46cqw;
  font: 600 4.2cqw/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1c1917;
  --sbar-dim: rgba(28, 25, 23, 0.4);
}
/* Over a dark band the phone draws its status bar white. */
.sbar-light { color: #fff; --sbar-dim: rgba(255, 255, 255, 0.45); }
/* The right-hand group is one box: the four signal bars and the battery's cap
   are painted on it, the wi-fi and the battery are its two pseudo-elements. */
.sbar i {
  grid-column: 3;
  position: relative;
  width: 18.3cqw;
  height: 3.1cqw;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0.8cqw 1.1cqw,
    linear-gradient(currentColor, currentColor) 1.2cqw 100% / 0.8cqw 1.75cqw,
    linear-gradient(currentColor, currentColor) 2.4cqw 100% / 0.8cqw 2.4cqw,
    linear-gradient(currentColor, currentColor) 3.6cqw 100% / 0.8cqw 3.1cqw,
    linear-gradient(var(--sbar-dim), var(--sbar-dim)) 100% 50% / 0.35cqw 1.1cqw;
  background-repeat: no-repeat;
}
.sbar i::before {
  /* wi-fi: three bands of a quarter circle */
  content: "";
  position: absolute;
  left: 5.7cqw;
  bottom: 0;
  width: 4.38cqw;
  height: 3.1cqw;
  background: radial-gradient(circle at 50% 100%, currentColor 0.76cqw, transparent 0.76cqw 1.17cqw, currentColor 1.17cqw 1.93cqw, transparent 1.93cqw 2.34cqw, currentColor 2.34cqw 3.1cqw, transparent 3.1cqw);
  clip-path: polygon(50% 100%, 0 29.4%, 0 0, 100% 0, 100% 29.4%);
}
.sbar i::after {
  /* the battery, nearly full */
  content: "";
  position: absolute;
  top: 0;
  right: 0.5cqw;
  width: 6.4cqw;
  height: 3.1cqw;
  border-radius: 0.95cqw;
  box-shadow: inset 0 0 0 0.28cqw var(--sbar-dim);
  background: linear-gradient(currentColor, currentColor) 0.56cqw 50% / 4.6cqw 1.98cqw no-repeat;
}

/* The product's own window: a rounded box with a hairline and a soft
   shadow. What is drawn inside it is the app's own screen, white bar and all
   (`.wk-bar`, below). */
.appwin {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f4;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.1), var(--sh-2);
}
.appwin > .ui-s { --ui-w: 64; }

/* Dark. A browser window goes dark around a restaurant's page, which keeps
   its own colours, as the builder's preview does (its frame dark, the page
   not). The phone is hardware and its screen is the restaurant's: both stay.
   The app's window takes the sheet's dark ground, #111111; a drawing whose
   room is darker paints its own. A window keeps a light hairline, because a
   shadow is no edge on a dark ground. */
@media screen {
  :where(.dark) .frame { background: #111111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), var(--sh-2); }
  :where(.dark) .frame-bar { background: #1b1b1c; border-bottom-color: #292524; }
  :where(.dark) .frame-dots i { background: #3a3a3c; }
  :where(.dark) .frame-url { background: #1c1917; box-shadow: inset 0 0 0 1px #44403c; }
  :where(.dark) .frame-url svg { color: #34d399; }
  :where(.dark) .appwin { background: #111111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), var(--sh-2); }
}

/* --------------------------------------------------------------------------
   Floating notes: the little cards that pop over a picture
   -------------------------------------------------------------------------- */

.toast {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: max-content;
  max-width: 19rem;
  padding: 0.65rem 1rem 0.65rem 0.65rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(11, 30, 34, 0.07),
    0 24px 44px -22px rgba(2, 40, 45, 0.5),
    0 6px 14px -8px rgba(2, 40, 45, 0.18);
  color: var(--ink-2);
  text-align: left;
}
.toast .ti {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--petrol-50);
  color: var(--petrol-700);
}
.toast .ti svg { width: 19px; height: 19px; }
.toast .ti.ok { background: #e6f7ef; color: var(--good); }
.toast b { display: block; font-size: 0.9375rem; line-height: 1.25; color: var(--ink); }
.toast small { display: block; margin-top: 1px; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-3); }

/* A card that hangs over a picture arrives once and then stands still. Cards
   floated up and down on a loop until 16 October 2026 (owner: "i dont like the
   floating animations"), so do not give one a float back (README, "Nothing
   floats"). */

/* Dark: a note is a dark card with a light hairline, as a phone draws one. */
@media screen {
  :where(.dark) .toast {
    background: rgba(30, 30, 32, 0.97);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 24px 44px -22px rgba(0, 0, 0, 0.85),
      0 6px 14px -8px rgba(0, 0, 0, 0.5);
  }
  :where(.dark) .toast .ti { background: rgba(0, 40, 45, 0.7); color: var(--petrol-300); }
  :where(.dark) .toast .ti.ok { background: rgba(6, 78, 59, 0.5); color: #6ee7b7; }
}

/* --------------------------------------------------------------------------
   Scenes: a picture that tells a short story, then tells it again
   --------------------------------------------------------------------------
   A scene is a root with `data-scene` and `data-steps` (the pause before each
   step, in ms). assets/js/main.js adds `s1`, `s2`, … one after another while
   the scene is on screen, holds the last, fades the moving parts (`.rw`) and
   starts again. The CSS below each scene says what each step changes, always
   by transform or opacity.

   THE MARKUP CARRIES EVERY STEP CLASS ALREADY (`class="scene s1 s2 s3"`), so
   what the page shows before any script runs is the story's end. The script
   takes them off only when it is about to play, and never when motion is
   reduced.
   -------------------------------------------------------------------------- */

.scene .rw { transition: opacity 0.45s var(--ease); }
.scene.rewind .rw { opacity: 0; }
/* The frame between the end and the start again: nothing may animate while
   the steps come off, or the story plays backwards on screen. */
.scene.instant,
.scene.instant *,
.scene.instant *::before,
.scene.instant *::after { transition: none !important; }

/* Typing: a caret after the words while they arrive. */
.typed { white-space: pre-wrap; }
.scene.typing .typed.now::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* A finger press: a soft ring that grows out of a button when the story
   presses it. Drawn by the button's own ::after so no markup is spent on it. */
.press { position: relative; }
.press::after {
  content: "";
  position: absolute;
  inset: -0.25em;
  border-radius: inherit;
  box-shadow: 0 0 0 0.22em rgba(4, 129, 142, 0.35);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}
@keyframes pressring { 0% { opacity: 0; transform: scale(0.9); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }

/* ==========================================================================
   4. The home page
   ========================================================================== */

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

.hero {
  position: relative;
  padding-block: clamp(2.25rem, 1.25rem + 3.5vw, 4.25rem) clamp(3rem, 2rem + 3.5vw, 5.5rem);
  overflow: clip;
}

/* Two very large, very soft petrol clouds behind everything, painted once.
   They are the hero's only ground: a grid of dots over them (.hero-mesh) was
   taken off at the owner's ask on 2 October 2026. They drifted on a loop until
   16 October 2026 and now stand still, because nothing on this site floats
   (README, "Nothing floats"). */
.hero-glow { position: absolute; inset: -20% -10% auto; height: 130%; z-index: 0; pointer-events: none; }
.hero-glow i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.hero-glow i:nth-child(1) {
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  left: -8vw; top: 4vw;
  background: radial-gradient(circle, rgba(90, 181, 193, 0.55), rgba(90, 181, 193, 0) 70%);
}
.hero-glow i:nth-child(2) {
  width: 40vw; height: 40vw; min-width: 320px; min-height: 320px;
  right: -6vw; top: -6vw;
  background: radial-gradient(circle, rgba(184, 231, 238, 0.75), rgba(184, 231, 238, 0) 70%);
}
.hero-glow i:nth-child(3) {
  width: 30vw; height: 30vw; min-width: 260px; min-height: 260px;
  right: 18vw; bottom: 2vw;
  background: radial-gradient(circle, rgba(237, 250, 252, 0.9), rgba(237, 250, 252, 0) 70%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* The words column is measured from the headline, never taken as a share
     of the row: "built in under" is 6.13 times its font size in Lora, so at
     the 4.5rem the headline tops out at it needs 27.6rem. 30rem holds it
     with air, whatever the reader's own font size, since both are rem.
     MEASURE ANY NEW HEADLINE before changing either number. */
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 0.5rem + 3vw, 4rem);
  row-gap: 3rem;
  align-items: center;
}

.hero h1 { margin-block: 1.35rem 1.5rem; font-size: var(--t-hero); }

/* The last line carries a hand-drawn stroke under it. Each line of the
   headline is its own clipped window (the rise-in), so the last one is given
   the room below the baseline that the stroke needs, and takes it back from
   the paragraph under it. */
.hero h1 .ln:last-child { padding-bottom: 0.2em; margin-bottom: -0.14em; }
.hl-under { position: relative; display: inline-block; color: var(--petrol-700); white-space: nowrap; }
.hl-under::after {
  content: "";
  position: absolute;
  left: 0;
  right: -0.04em;
  bottom: -0.1em;
  height: 0.24em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17C70 8 160 4 296 10' fill='none' stroke='%235ab5c1' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left center;
  transition: transform 1s var(--ease-out) 0.85s;
}
.js .lines:not(.in) .hl-under::after { transform: scaleX(0); }

/* Dark: a page head's glow is deep petrol, not pale, which on a dark ground
   would be a haze. A glow over a petrol band keeps its light, at the band's
   own low strength, so the bands look the same in both. */
@media screen {
  :where(.dark) .page-head .hero-glow i:nth-child(1) { background: radial-gradient(circle, rgba(4, 129, 142, 0.5), rgba(4, 129, 142, 0) 70%); }
  :where(.dark) .page-head .hero-glow i:nth-child(2) { background: radial-gradient(circle, rgba(40, 154, 167, 0.32), rgba(40, 154, 167, 0) 70%); }
  :where(.dark) .page-head .hero-glow i:nth-child(3) { background: radial-gradient(circle, rgba(3, 105, 116, 0.3), rgba(3, 105, 116, 0) 70%); }
  :where(.dark) .hl-under { color: var(--petrol-300); }
}

.hero .lead { max-width: 33ch; }
.hero .btn-row { margin-top: 2.1rem; }

.hero-assur {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.7rem 1.6rem;
  list-style: none;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
}
.hero-assur li { display: flex; align-items: center; gap: 0.55rem; }
.hero-assur li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23036974' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5 10 17 18.5 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    var(--petrol-100);
}

/* The picture. The browser window takes the right-hand margin past the
   measure too, up to 8rem, so a wide screen is not wasted on nothing. */
.hero-stage { position: relative; padding: 2.75rem 0 3.25rem; }
@media (min-width: 1081px) {
  .hero-stage { margin-right: calc(-1 * clamp(0px, (100vw - var(--measure)) / 2 - 1rem, 8rem)); }
}

.hs-browser { position: relative; z-index: 1; border-radius: 18px; }
.hs-browser .frame-bar { padding: 0.5rem 0.7rem; }
.hs-browser .frame-dots i { width: 9px; height: 9px; }
.hs-browser .frame-url { max-width: 21rem; }

.hs-names { display: grid; min-width: 0; }
.hs-names > span {
  grid-area: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hs-names > span.on { opacity: 1; }

.hs-shots { position: relative; aspect-ratio: 1600 / 771; background: #1d1512; overflow: hidden; }
.hs-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 1.1s var(--ease), transform 6s linear;
}
.hs-shots img.on { opacity: 1; transform: scale(1); }
/* The café's picture is a little taller than the window: keep its buttons
   and lose the top of its bar's padding instead. */
.hs-shots img[data-slide="1"] { object-position: 50% 32%; }

.hs-phone { position: absolute; z-index: 2; right: -1.25rem; bottom: 0; }
.hs-phone .phone { --pw: clamp(140px, 11.5vw, 188px); }

.hs-toast { position: absolute; z-index: 3; }
.hs-t1 { top: 0.35rem; left: -1.75rem; }
.hs-t2 { bottom: 1.1rem; right: 11.5rem; }
/* Two columns and a window this narrow have room for three notes, not four. */
@media (min-width: 1081px) and (max-width: 1280px) { .hs-t3 { display: none; } }
.hs-t3 { bottom: 0.1rem; left: -1.25rem; }
.hs-t4 { top: -0.4rem; right: 14%; }

/* The notes arrive one by one after the window, when the page opens. */
.hs-toast { transition: opacity 0.6s var(--ease-out), transform 0.8s var(--spring); }
.hs-t1 { transition-delay: 1.1s; }
.hs-t2 { transition-delay: 1.45s; }
.hs-t3 { transition-delay: 1.8s; }
.hs-t4 { transition-delay: 2.15s; }
.js .hero-stage:not(.shown) .hs-toast { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.94); }

/* --------------------------------------------------------------------------
   How it works: four cards, four small films
   -------------------------------------------------------------------------- */

.how {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}
.how-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1.5rem;
  border-radius: 26px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.how-n {
  position: absolute;
  top: 1.3rem;
  left: 1.3rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--petrol-700);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(3, 105, 116, 0.6);
}
.how-card h3 { padding-inline: 0.8rem; font-size: 1.3125rem; }
.how-card p { padding-inline: 0.8rem; margin-top: 0.35rem; font-size: var(--t-small); color: var(--ink-3); line-height: 1.5; }
.how-t {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: auto 0.8rem 0;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--petrol-50);
  color: var(--petrol-800);
  font-size: var(--t-micro);
  font-weight: 700;
  transform: translateY(0.9rem);
}
.how-t svg { width: 16px; height: 16px; }
.how-card p { margin-bottom: 1rem; }

/* 1. The questions ----------------------------------------------------- */
.ask {
  position: absolute;
  inset: 4.3em 1.4em 1.1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85em;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ask-row { display: grid; gap: 0.35em; }
.ask-l { font-size: 0.7em; font-weight: 700; color: #6b7c80; }
.ask-in {
  display: flex;
  align-items: center;
  height: 2.3em;
  padding: 0 0.8em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e0d8, 0 0.15em 0.4em rgba(11, 30, 34, 0.05);
  font-size: 0.86em;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.ask-chips { display: flex; gap: 0.4em; }
.ask-chips i {
  position: relative;
  z-index: 0;
  padding: 0.45em 0.8em;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e0d8;
  font-style: normal;
  font-size: 0.76em;
  font-weight: 700;
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.ask-chips i::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--petrol-700);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.ask-chips i.pick { color: #fff; }
.ask-chips i.pick::before { opacity: 1; }
.sc-ask:not(.s2) .ask-chips i.pick { color: var(--ink-2); }
.sc-ask:not(.s2) .ask-chips i.pick::before { opacity: 0; }
.ask-two { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin-top: 0.15em; }
.ask-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.7em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e0d8;
  font-size: 0.74em;
  font-weight: 700;
  color: var(--ink);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--spring);
}
.ask-file > svg { width: 1.2em; height: 1.2em; color: #c2413b; }
.ask-file b { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 999px; background: #e6f7ef; color: var(--good); }
.ask-file b svg { width: 0.75em; height: 0.75em; }
.sc-ask:not(.s3) .ask-file { opacity: 0; transform: translateY(0.6em) scale(0.94); }
.ask-photos { display: flex; }
.ask-photos i {
  width: 2.3em;
  height: 2.3em;
  margin-left: -0.55em;
  border-radius: 0.55em;
  box-shadow: 0 0 0 0.15em #fff, 0 0.3em 0.6em -0.2em rgba(0, 0, 0, 0.3);
  background-size: cover;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--spring);
}
.ask-photos .ph1 { background: url(../img/site-pancakes.webp) 76% 100% / 772% auto; transform: rotate(-6deg); }
.ask-photos .ph2 { background: url(../img/site-pancakes.webp) 88% 14% / 440% auto; transition-delay: 0.12s; }
.ask-photos .ph3 { background: url(../img/screenshot-noir-home.jpg) 85% 64% / 533% auto; transform: rotate(6deg); transition-delay: 0.24s; }
.sc-ask:not(.s4) .ask-photos i { opacity: 0; transform: translateY(0.8em) scale(0.8); }

/* 2. The build --------------------------------------------------------- */
.mp {
  position: absolute;
  left: 1.5em;
  right: 1.5em;
  top: 4.3em;
  bottom: 3.4em;
  border-radius: 0.7em;
  background: #fffaf2;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 0.8em 1.6em -1em rgba(2, 40, 45, 0.4);
  overflow: hidden;
}
.mp > * { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out); }
.mp-bar { display: flex; align-items: center; gap: 0.5em; height: 1.9em; padding: 0 0.75em; background: #fbf4e1; }
.mp-logo { width: 1em; height: 1em; border-radius: 999px; background: #e3a05b; }
.mp-nav { display: flex; gap: 0.35em; margin-left: auto; }
.mp-nav i { display: block; width: 1.5em; height: 0.28em; border-radius: 9em; background: #cdbfae; }
.mp-cta { width: 2.5em; height: 0.95em; border-radius: 9em; background: #8c4b5b; }
.mp-hero {
  position: relative;
  height: 5.2em;
  background:
    linear-gradient(90deg, rgba(40, 24, 16, 0.72), rgba(40, 24, 16, 0.1)),
    url(../img/site-pancakes.webp) 100% 58% / 220% auto;
  padding: 0.85em 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.mp-h1, .mp-h2 { display: block; height: 0.55em; border-radius: 9em; background: #fff; }
.mp-h1 { width: 62%; }
.mp-h2 { width: 42%; opacity: 0.7; }
.mp-btns { display: flex; gap: 0.35em; margin-top: auto; }
.mp-btns i { display: block; width: 2.4em; height: 0.9em; border-radius: 9em; background: #8c4b5b; }
.mp-btns i + i { background: transparent; box-shadow: inset 0 0 0 0.08em #fff; }
.mp-text { display: grid; gap: 0.3em; padding: 0.65em 0.8em 0.5em; }
.mp-text i { display: block; height: 0.32em; border-radius: 9em; background: #e5ded2; }
.mp-text i:nth-child(1) { width: 40%; background: #8c4b5b; opacity: 0.6; }
.mp-text i:nth-child(3) { width: 78%; }
.mp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; padding: 0 0.8em 0.8em; }
.mp-cards i { display: block; height: 1.7em; border-radius: 0.35em; background: #efe7da; }
.sc-build:not(.s1) .mp-bar,
.sc-build:not(.s2) .mp-hero,
.sc-build:not(.s3) .mp-text,
.sc-build:not(.s4) .mp-cards { opacity: 0; transform: translateY(0.7em); }
.mp-prog { position: absolute; left: 1.5em; right: 1.5em; bottom: 1.25em; display: flex; align-items: center; gap: 0.6em; }
.mp-track { position: relative; flex: 1; height: 0.4em; border-radius: 9em; background: rgba(3, 105, 116, 0.14); overflow: hidden; }
.mp-track i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--petrol-500), var(--petrol-700));
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
  transition: transform 0.6s var(--ease-out);
}
.sc-build:not(.s5) { --p: 0.9; }
.sc-build:not(.s4) { --p: 0.7; }
.sc-build:not(.s3) { --p: 0.46; }
.sc-build:not(.s2) { --p: 0.24; }
.sc-build:not(.s1) { --p: 0.05; }
.mp-state { display: grid; font-size: 0.7em; font-weight: 800; color: var(--petrol-800); white-space: nowrap; }
.mp-state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.3em; transition: opacity 0.4s var(--ease); }
.mp-done { color: var(--good); }
.mp-done svg { width: 1.1em; height: 1.1em; }
.mp-busy { opacity: 0; }
.sc-build:not(.s5) .mp-busy { opacity: 1; }
.sc-build:not(.s5) .mp-done { opacity: 0; }

/* 3. Keep it up to date ------------------------------------------------- */
.keep {
  position: absolute;
  inset: 4.3em 1.5em 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.keep-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55em 0.75em;
  border-radius: 0.55em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e0d8;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--ink);
}
.keep-row:first-child { box-shadow: inset 0 0 0 1.5px var(--petrol-400), 0 0.4em 1em -0.6em rgba(3, 105, 116, 0.5); }
.keep-p { display: inline-flex; align-items: baseline; gap: 0.45em; font-variant-numeric: tabular-nums; font-weight: 800; }
.keep-p s { position: relative; text-decoration: none; color: var(--ink-3); font-weight: 600; }
.keep-p s::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 52%;
  height: 0.1em;
  background: currentColor;
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.keep-p b { color: var(--petrol-700); transition: opacity 0.4s var(--ease) 0.2s, transform 0.5s var(--spring) 0.2s; }
.sc-keep:not(.s1) .keep-p s::after { transform: scaleX(0); }
.sc-keep:not(.s1) .keep-p s { color: var(--ink); font-weight: 800; }
.sc-keep:not(.s1) .keep-p b { opacity: 0; transform: translateX(-0.4em); }
.keep-pages { display: flex; gap: 0.35em; margin-top: 0.35em; }
.keep-pages i {
  padding: 0.35em 0.7em;
  border-radius: 9em;
  background: var(--petrol-50);
  box-shadow: inset 0 0 0 1px var(--petrol-200);
  color: var(--petrol-800);
  font-style: normal;
  font-size: 0.7em;
  font-weight: 800;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--spring);
}
.keep-pages i:nth-child(2) { transition-delay: 0.15s; }
.keep-pages i:nth-child(3) { transition-delay: 0.3s; }
.sc-keep:not(.s2) .keep-pages i { opacity: 0; transform: scale(0.7); }
.keep-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: auto;
  color: var(--good);
  font-size: 0.74em;
  font-weight: 800;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out);
}
.keep-ok svg { width: 1.15em; height: 1.15em; }
.sc-keep:not(.s3) .keep-ok { opacity: 0; transform: translateY(0.4em); }

/* --------------------------------------------------------------------------
   Showcase: three homepages the product built
   -------------------------------------------------------------------------- */

.showcase { overflow: clip; }
.show {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 1.8vw, 2.25rem);
  align-items: start;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.show-item { margin: 0; }
.show-a, .show-c { margin-top: clamp(2rem, 1rem + 4vw, 5rem); }
.show-item .frame { border-radius: 14px; }
.show-item .frame-bar { padding: 0.45rem 0.65rem; }
.show-item .frame-dots i { width: 8px; height: 8px; }
.show-item img { display: block; width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; object-position: top center; }
.show-item figcaption { display: grid; justify-items: center; gap: 0.1rem; margin-top: 1rem; text-align: center; }
.show-item figcaption b { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--ink); }
.show-item figcaption span { font-size: var(--t-micro); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   The builder, drawn as the app draws it (features.html, twice): the white
   bar with the page tabs and the tools, the left panel (the restaurant, its
   two figures, the "Your steps" and "Chat" switch) and the preview in its
   browser frame. Copied from `app/(protected)/builder/[projectId]/page.tsx`,
   `page-tabs.tsx`, `journey-rail.tsx` and `add-page-popover.tsx`; one em is
   one of the app's rem, so every size here is the app's own read straight
   across. The bar is the week drawing's (`.wk-bar`).
   -------------------------------------------------------------------------- */

.bb {
  position: relative;
  overflow: hidden;
  background: #efeeec;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  text-align: left;
  color: #1c1917;
}
.bb-bar { justify-content: flex-start; gap: 0.75em; }
.bb-brand { flex: none; }
.bb-tabs { display: flex; align-items: center; gap: 0.375em; flex: 1; min-width: 0; }
.bb-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2105em;
  flex: none;
  height: 1.6842em;
  padding: 0 0.6316em;
  border: 1px solid transparent;
  border-radius: 0.4211em;
  font-size: 1.1875em;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #57534e;
}
.bb-tab svg { flex: none; width: 0.7368em; height: 0.7368em; }
.bb-tab.on { background: var(--petrol-700); font-weight: 600; color: #fff; }
.bb-tab.gh { border: 1px dashed #a8a8a8; color: #78716c; }
.bb-tools { display: flex; align-items: center; gap: 0.5em; flex: none; }
.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3158em;
  flex: none;
  height: 2.2105em;
  padding: 0 0.6316em;
  border: 1px solid #b7b7b7;
  border-radius: 0.4211em;
  background: #fff;
  font-size: 1.1875em;
  line-height: 1.4737;
  white-space: nowrap;
  color: #44403c;
}
.bb-btn svg { flex: none; width: 1.0526em; height: 1.0526em; }
.bb-part { font-weight: 500; }
.bb-part svg { width: 0.9474em; height: 0.9474em; }
.bb-btn .bb-dd { width: 0.8421em; height: 0.8421em; opacity: 0.7; }
.bb-vr { flex: none; width: 1px; height: 1.25em; background: #d6d3d1; }
/* The preview's device: computer or phone, the picked one a petrol thumb. */
.bb-dev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: none;
  width: 5.625em;
  height: 2.375em;
  padding: 0.25em;
  border: 1px solid #b7b7b7;
  border-radius: 0.5em;
  background: #fafaf9;
}
.bb-dev > span { display: grid; place-items: center; border-radius: 0.375em; color: #57534e; }
.bb-dev > .on { background: var(--petrol-700); color: #fff; box-shadow: 0 1px 2px rgba(2, 68, 75, 0.2); }
.bb-dev svg { width: 1em; height: 1em; }
.bb-dev > :first-child svg { width: 1.125em; height: 1.125em; }

.bb-room { position: absolute; inset: 3.5em 0 0; display: flex; gap: 1em; padding: 1em; }
.bb-side {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 23.75em;
  overflow: hidden;
  border: 1px solid #b7b7b7;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1.75em 3.5em -2.5em rgba(2, 68, 75, 0.3);
}
.bb-head { flex: none; padding: 1.25em 1em 1em; }
.bb-name { display: flex; align-items: flex-start; gap: 0.75em; }
.bb-name > b {
  flex: 1;
  min-width: 0;
  font-size: 1.75em;
  font-weight: 600;
  line-height: 1.2143;
  letter-spacing: -0.03em;
  color: #00282d;
}
.bb-fold { display: grid; place-items: center; flex: none; width: 2em; height: 2em; margin: 0.0625em -0.375em 0 0; color: #a3a3a3; }
.bb-fold svg { width: 1em; height: 1em; }
/* The two figures: the steps done, and the plan's changes used. */
.bb-reads { display: flex; align-items: center; column-gap: 1.125em; margin-top: 0.875em; }
.bb-read { display: flex; flex-direction: column; }
.bb-read > b { display: flex; font-size: 1.5625em; font-weight: 600; line-height: 1.28; color: #262626; }
.bb-read:first-child > b { color: #04555e; }
.bb-read > b > span:last-child { font-weight: 500; color: #737373; }
.bb-read small { font-size: 1.1875em; line-height: 1.2632; color: #737373; }
.bb-rule { flex: none; width: 1px; height: 3.1875em; background: #e5e5e5; }
.bb-sw { display: inline-grid; }
.bb-sw > span { grid-area: 1 / 1; transition: opacity 0.3s var(--ease); }
.bb-switch { flex: none; padding: 0.75em 1em 1.75em; border-bottom: 1px solid #b7b7b7; }
.bb-sx { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25em; padding: 0.25em; border-radius: 0.75em; background: #f5f5f5; }
.bb-sx > span {
  display: grid;
  place-items: center;
  height: 2em;
  border: 1px solid transparent;
  border-radius: 0.4211em;
  font-size: 1.1875em;
  font-weight: 500;
  line-height: 1.2632;
  color: #737373;
}
.bb-sx > .on { border-color: #b7b7b7; background: #fff; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06); font-weight: 600; color: #171717; }

/* The preview, in its browser frame. */
.bb-view {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #b7b7b7;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 2em 4em -2.75em rgba(2, 68, 75, 0.4);
}
.bb-chrome { display: flex; align-items: center; gap: 0.5em; flex: none; height: 3em; padding: 0 0.75em; border-bottom: 1px solid #f5f5f5; background: #fafaf9; }
.bb-nav { display: flex; flex: none; }
.bb-nav > span, .bb-kebab { display: grid; place-items: center; flex: none; width: 1.875em; height: 1.875em; color: #d4d4d4; }
.bb-nav > span:last-child, .bb-kebab { color: #a3a3a3; }
.bb-nav svg, .bb-kebab svg { width: 1.125em; height: 1.125em; }
.bb-addr {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 1;
  min-width: 0;
  height: 2.125em;
  padding: 0 0.625em 0 0.875em;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  background: #fff;
  color: #737373;
}
.bb-addr > svg { flex: none; width: 1em; height: 1em; }
.bb-addr > span { font-size: 1.1875em; line-height: 1.4737; white-space: nowrap; }
.bb-addr .bb-star { width: 1.0625em; height: 1.0625em; margin-left: auto; color: #a3a3a3; }
.bb-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Changing it: a sentence typed into the chat changes the page
   -------------------------------------------------------------------------- */

/* Drawn at 1440 by 712, the app's own room at that width. */
.sc-chat > .ui-s { --ui-w: 90; height: 44.5em; }
.sc-chat .bb-brand { width: 14.25em; }

/* The conversation: the bubbles stand at the foot of the log and are pushed
   up by each one that arrives, as the app's are. Each is two lines (a <br>,
   so every face breaks it in the same place), 76px, and 88px with its gap. */
.bb-log { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-height: 0; overflow: hidden; padding: 0.75em 1em; }
.bb-msgs { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75em; }
.bb-msg {
  width: 15.4737em;
  padding: 0.5263em 0.8421em;
  border-radius: 0.8421em;
  background: #f5f5f4;
  font-size: 1.1875em;
  line-height: 1.4737;
  white-space: nowrap;
  color: #1c1917;
  transform-origin: 0 100%;
  transition: opacity 0.4s var(--ease), transform 0.55s var(--spring);
}
.bb-msg.me { align-self: flex-end; background: #edfafc; color: #00282d; transform-origin: 100% 100%; }
.bb-work {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 2.5789em;
  padding: 0 0.8421em;
  border-top: 1px solid #b7b7b7;
  background: #fff;
  font-size: 1.1875em;
  line-height: 1.4737;
  color: #78716c;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.bb-comp { flex: none; padding: 0.75em; }
.bb-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25em;
  height: 3.375em;
  padding: 0.25em;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Typing in it: the petrol edge and its soft ring. */
.bb-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #289aa7, 0 0 0 2px rgba(40, 154, 167, 0.25);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.bb-in { position: relative; flex: 1; min-width: 0; align-self: stretch; font-size: 1.1875em; line-height: 1.4737; }
.bb-ph, .bb-tx { position: absolute; left: 0.8421em; right: 0.2105em; top: 50%; overflow: hidden; white-space: nowrap; transform: translateY(-50%); transition: opacity 0.25s var(--ease); }
.bb-ph { color: #78716c; }
/* The end of a long sentence stays in view while it is typed, as an input's
   does: right to left outside, the words left to right inside. */
.bb-tx { direction: rtl; text-align: left; opacity: 0; }
.bb-tx .typed { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.bb-send { position: relative; flex: none; width: 2.75em; height: 2.75em; border-radius: 999px; }
.bb-send > i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; transition: opacity 0.3s var(--ease); }
.bb-send > i:first-child { background: #f5f5f4; color: #44403c; opacity: 0.4; }
.bb-send > i + i { background: var(--petrol-700); color: #fff; opacity: 0; }
.bb-send svg { width: 1.25em; height: 1.25em; }

/* The restaurant's page, and the line the chat put on it: the page under the
   site's own bar is drawn twice, cut at the bar, so the part below can move
   down and uncover the new line, as the page does when it gains one. Where
   the line stands and how tall it is are fractions of the page's width, so
   the phone's narrower page keeps it in proportion. */
.sc-chat .bb-stage { background: #fcf6ef; }
.bb-top, .bb-rest { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; }
.bb-top { z-index: 3; clip-path: inset(0 0 90.54% 0); }
.bb-rest { z-index: 2; clip-path: inset(9.46% 0 0 0); transform: translateY(5.004%); transition: transform 0.7s var(--spring) 0.15s; }
.bb-band {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  margin-top: 6.3636%;
  aspect-ratio: 1010 / 34;
  background: #2b2118;
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #f4eddd;
}
.bb-busy {
  position: absolute;
  z-index: 4;
  top: 0.6316em;
  left: 50%;
  padding: 0.3158em 0.6316em;
  border: 1px solid #b8e7ee;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 1.1875em;
  font-weight: 500;
  line-height: 1.4737;
  white-space: nowrap;
  color: var(--petrol-700);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.sc-chat .bb-tabs, .sc-chat .bb-tools { transition: opacity 0.3s var(--ease); }
/* "Updated" with its Undo, at the foot of the window. */
.bb-undo {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 1em;
  display: flex;
  align-items: center;
  gap: 0.25em;
  height: 2.875em;
  padding: 0 0.25em 0 1em;
  border: 1px solid #44403c;
  border-radius: 999px;
  background: #1c1917;
  box-shadow: 0 0.625em 0.9375em -0.1875em rgba(0, 0, 0, 0.1), 0 0.25em 0.375em -0.25em rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  color: #fff;
  transform: translateX(-50%);
}
.bb-undo > span:first-child, .bb-undo > b { font-size: 1.1875em; line-height: 1.4737; }
.bb-undo > b { display: grid; place-items: center; height: 2.3158em; padding: 0 0.6316em; font-weight: 600; color: #8fd2db; }
.bb-x { display: grid; place-items: center; width: 2.75em; height: 2.75em; color: #a8a29e; }
.bb-x svg { width: 1.125em; height: 1.125em; }

/* The story: typed (s1), sent (s2), worked on (s3), done and on the page
   (s4), with its Undo (s5). Written as what each part looks like before its
   step; the markup carries every step, so the file is the last frame. */
.sc-chat.s1:not(.s2) .bb-pill::before, .sc-chat.s1:not(.s2) .bb-tx, .sc-chat.s1:not(.s2) .bb-send > i + i { opacity: 1; }
.sc-chat.s1:not(.s2) .bb-ph { opacity: 0; }
.sc-chat.play.s2 .bb-send::after { animation: pressring 0.7s var(--ease) both; }
.sc-chat .bb-msgs { transition: transform 0.55s var(--spring), opacity 0.45s var(--ease); }
.sc-chat:not(.s2) .bb-msgs { transform: translateY(11em); }
.sc-chat.s2:not(.s3) .bb-msgs { transform: translateY(5.5em); }
.sc-chat.s3:not(.s4) .bb-msgs { transform: translateY(2.4375em); }
.sc-chat:not(.s2) .m1, .sc-chat:not(.s4) .m2 { opacity: 0; transform: translateY(0.6em) scale(0.96); }
.sc-chat.s3:not(.s4) .bb-work, .sc-chat.s3:not(.s4) .bb-busy { opacity: 1; }
.sc-chat.s3:not(.s4) .bb-tabs { opacity: 0; }
.sc-chat.s3:not(.s4) .bb-tools { opacity: 0.4; }
.sc-chat:not(.s4) .bb-rest, .sc-chat.rewind .bb-rest { transform: none; transition-delay: 0s; }
.sc-chat .bb-read .u0 { opacity: 0; }
.sc-chat.s4 .bb-read .u1 { transition-delay: 0.25s; }
.sc-chat.rewind .bb-read .u1 { transition-delay: 0s; }
.sc-chat.rewind .bb-read .u0 { transition-delay: 0.25s; }
.sc-chat:not(.s4) .bb-read .u0, .sc-chat.rewind .bb-read .u0 { opacity: 1; }
.sc-chat:not(.s4) .bb-read .u1, .sc-chat.rewind .bb-read .u1 { opacity: 0; }
.sc-chat .bb-undo { transition: opacity 0.4s var(--ease) 0.3s, transform 0.55s var(--spring) 0.3s; }
.sc-chat.rewind .bb-undo { transition-delay: 0s; }
.sc-chat:not(.s5) .bb-undo { opacity: 0; transform: translate(-50%, 0.75em); }

.chat-stage { max-width: 1080px; margin-inline: auto; }

/* Dark: the builder as the app draws it in dark, value for value (read off
   the real builder, 18 October 2026): the room #0a0a0a, the panels #111111
   on stone-800 edges, the bar's tools white/6 inside white/15, the page tab
   a white/10 box, the chat's bubbles stone-800 and petrol-950/50. The page
   in the window is the restaurant's and keeps its colours, as in the app. */
@media screen {
  :where(.dark) .bb { background: #0a0a0a; color: #f5f5f4; }
  :where(.dark) .bb-tab { color: #a8a29e; }
  :where(.dark) .bb-tab.on { background: rgba(255, 255, 255, 0.1); color: #fff; }
  :where(.dark) .bb-tab.gh { border-color: rgba(255, 255, 255, 0.15); color: #a8a29e; }
  :where(.dark) .bb-btn { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: #d6d3d1; }
  :where(.dark) .bb-vr { background: rgba(255, 255, 255, 0.15); }
  :where(.dark) .bb-dev { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); }
  :where(.dark) .bb-dev > span { color: #d6d3d1; }
  :where(.dark) .bb-dev > .on { background: var(--petrol-600); }
  :where(.dark) .bb-side, :where(.dark) .bb-view {
    border-color: #292524;
    background: #111111;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  :where(.dark) .bb-name > b { color: var(--petrol-50); }
  :where(.dark) .bb-fold { color: #78716c; }
  :where(.dark) .bb-read > b { color: #e7e5e4; }
  :where(.dark) .bb-read:first-child > b { color: var(--petrol-200); }
  :where(.dark) .bb-read > b > span:last-child, :where(.dark) .bb-read small { color: #a8a29e; }
  :where(.dark) .bb-rule { background: #44403c; }
  :where(.dark) .bb-switch { border-bottom-color: #292524; }
  :where(.dark) .bb-sx { background: #292524; }
  :where(.dark) .bb-sx > span { color: #a8a29e; }
  :where(.dark) .bb-sx > .on { border-color: #57534e; background: #1c1917; box-shadow: none; color: #f5f5f4; }
  :where(.dark) .bb-chrome { border-bottom-color: #292524; background: #111111; }
  :where(.dark) .bb-nav > span { color: #44403c; }
  :where(.dark) .bb-nav > span:last-child, :where(.dark) .bb-kebab, :where(.dark) .bb-addr .bb-star { color: #57534e; }
  :where(.dark) .bb-addr { border-color: #44403c; background: #1c1917; color: #a8a29e; }
  :where(.dark) .bb-msg { background: #292524; color: #f5f5f4; }
  :where(.dark) .bb-msg.me { background: rgba(0, 40, 45, 0.5); color: var(--petrol-100); }
  :where(.dark) .bb-work { border-top-color: #292524; background: #111111; color: #a8a29e; }
  :where(.dark) .bb-pill { border-color: #44403c; background: #1c1917; }
  :where(.dark) .bb-ph { color: #a8a29e; }
  :where(.dark) .bb-send > i:first-child { background: #292524; color: #a8a29e; }
  :where(.dark) .bb-busy { border-color: var(--petrol-800); background: rgba(17, 17, 17, 0.95); color: var(--petrol-300); }
  :where(.dark) .bb-undo { border-color: #57534e; background: #292524; }
}

/* --------------------------------------------------------------------------
   The menu: read from the printed one, onto every page
   -------------------------------------------------------------------------- */

.sc-menu { position: relative; aspect-ratio: 44 / 25; }
.sc-menu .ui-s { position: absolute; inset: 0; --ui-w: 44; }
.menu-paper {
  position: absolute;
  left: 0.5em;
  top: 2.2em;
  width: 19em;
  padding: 1.5em 1.5em 1.7em;
  border-radius: 0.35em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 30%),
    #f8f1e3;
  box-shadow: 0 1.4em 2.6em -1.3em rgba(70, 45, 20, 0.55), 0 0 0 1px rgba(120, 90, 50, 0.14);
  transform: rotate(-4deg);
  font-family: var(--font-display);
  color: #3b2a1c;
  overflow: hidden;
}
.mpp-t {
  display: block;
  margin-bottom: 0.7em;
  text-align: center;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mpp-t2 { margin-top: 1em; }
.mpp-r { display: flex; align-items: baseline; gap: 0.35em; margin: 0.45em 0; font-size: 0.9em; }
.mpp-r i { flex: 1; border-bottom: 0.12em dotted rgba(59, 42, 28, 0.35); transform: translateY(-0.28em); }
.mpp-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3em;
  background: linear-gradient(180deg, rgba(40, 154, 167, 0), rgba(40, 154, 167, 0.2) 70%, rgba(40, 154, 167, 0.45));
  border-bottom: 0.14em solid var(--petrol-500);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.sc-menu.play.s1:not(.s6) .mpp-scan { opacity: 1; animation: scan 1.7s var(--ease) infinite alternate; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(15.5em); } }
.menu-read {
  position: absolute;
  right: 0.5em;
  top: 0.4em;
  width: 22.5em;
  padding: 1em;
  border-radius: 0.95em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 1.6em 3em -1.5em rgba(2, 40, 45, 0.5);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; margin-bottom: 0.6em; }
.mr-head span { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.92em; font-weight: 800; color: #1c1917; }
.mr-head svg { width: 1.15em; height: 1.15em; color: var(--petrol-600); }
.mr-head small { font-size: 0.7em; color: #78716c; }
.mr-rows { display: grid; gap: 0.4em; min-height: 11.6em; }
.mr {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.6em 0.75em;
  border-radius: 0.55em;
  box-shadow: inset 0 0 0 1px #e7e5e4;
  font-size: 0.84em;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--spring);
}
.mr-n { font-weight: 600; color: #1c1917; }
.mr-p { font-weight: 800; color: #1c1917; font-variant-numeric: tabular-nums; }
.sc-menu:not(.s2) .mr1,
.sc-menu:not(.s3) .mr2,
.sc-menu:not(.s4) .mr3,
.sc-menu:not(.s5) .mr4 { opacity: 0; transform: translateX(-0.8em); }
.mr-save {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  margin-top: 0.8em;
  border-radius: 0.6em;
  background: var(--petrol-700);
  color: #fff;
  font-size: 0.84em;
  font-weight: 800;
}
.sc-menu.play.s6 .mr-save::after { animation: pressring 0.8s var(--ease) both; }
.mr-toast { position: absolute; left: 6.5em; bottom: 0.3em; }
.sc-menu .mr-toast { transition: opacity 0.7s var(--ease-out) 0.3s, transform 0.9s var(--ease-out) 0.3s; }
.sc-menu:not(.s6) .mr-toast { opacity: 0; transform: translate3d(2em, 0, 0); }

/* The toast, drawn at the size of the picture it sits in (the page-level
   `.toast` is sized in rem for the hero). */
.utoast {
  display: flex;
  align-items: center;
  gap: 0.65em;
  width: max-content;
  padding: 0.65em 1em 0.65em 0.65em;
  border-radius: 0.95em;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(11, 30, 34, 0.07),
    0 1.3em 2.4em -1.2em rgba(2, 40, 45, 0.55),
    0 0.3em 0.8em -0.45em rgba(2, 40, 45, 0.2);
  font-family: var(--font-sans);
  text-align: left;
}
.utoast .ti { width: 2.2em; height: 2.2em; flex: none; display: grid; place-items: center; border-radius: 0.7em; background: var(--petrol-50); color: var(--petrol-700); }
.utoast .ti svg { width: 1.15em; height: 1.15em; }
.utoast .ti.ok { background: #e6f7ef; color: var(--good); }
.utoast b { display: block; font-size: 0.86em; line-height: 1.25; color: var(--ink); }
.utoast small { display: block; margin-top: 0.1em; font-size: 0.72em; line-height: 1.3; color: var(--ink-3); }
/* A note arrives at its step the way the landing page's note does: it slides
   in 2em from the right on --ease-out, 0.7s to show and 0.9s to land, and
   then stands still (owner, 16 October 2026). Two of them used to pop up with
   a bounce. When the film starts again each one fades at once, as before. */
.scene.rewind .utoast { transition: opacity 0.45s var(--ease); }

/* Dark. The printed menu is paper and stays paper. The app's "Your food menu"
   is its dark panel, each row the app's dark menu card (menu-rows-chrome.ts:
   #1c1c1c on a stone-700 edge). A note is dark, as `.toast` is. */
@media screen {
  :where(.dark) .menu-read { background: #111111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 1.6em 3em -1.5em rgba(0, 0, 0, 0.8); }
  :where(.dark) .mr-head span, :where(.dark) .mr-n, :where(.dark) .mr-p { color: #f5f5f4; }
  :where(.dark) .mr-head svg { color: var(--petrol-300); }
  :where(.dark) .mr-head small { color: #a8a29e; }
  :where(.dark) .mr { background: #1c1c1c; box-shadow: inset 0 0 0 1px #44403c; }
  :where(.dark) .utoast {
    background: rgb(30, 30, 32);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 1.3em 2.4em -1.2em rgba(0, 0, 0, 0.85),
      0 0.3em 0.8em -0.45em rgba(0, 0, 0, 0.5);
  }
  :where(.dark) .utoast .ti { background: rgba(0, 40, 45, 0.7); color: var(--petrol-300); }
  :where(.dark) .utoast .ti.ok { background: rgba(6, 78, 59, 0.5); color: #6ee7b7; }
}
/* --------------------------------------------------------------------------
   Reservations: a phone booking a table, the sheet it lands on
   -------------------------------------------------------------------------- */

/* The two films below (reservations, ordering) share one layout: a phone on
   the left, the restaurant's own screen on the right, an email between. The
   film is a container named `film` and picks its layout by its OWN width
   (the narrow one is after the ordering film, below), so a film in a half
   column is drawn as on a phone instead of shrunk. Its height is the
   drawing's, 40em of the 64 it is wide, so the narrow layout can hand it to
   the sheet.

   The window stands level with the phone: on its top and exactly as tall, so
   the two start and end on the same lines. A phone is (2 × 2.9 + 94.2 × 844 /
   390) hundredths of its width tall (`.phone`: a band 2.9 hundredths deep
   above and below a screen 94.2 hundredths wide and 844 / 390 as tall as
   wide), so this one, 17.5em wide, is 36.69em tall: change its `--pw` and the
   window's height together. The drawing in the window is at least as tall as
   the window (`min-height`), so the sheet (67.47em of its 80) and the board
   (about 54em of its 64) run on to its foot rather than stop short of it; under
   700px, where the window is as tall as its drawing, that `min-height` comes
   to nothing. Until 6 October 2026 the window stood 3.2em down: at 1440 it
   started 56px under the phone and ended 9px under it (the board, 38px).
   The email over the two stood 1.4em off the foot then; moving the window up
   put its top edge across the line "2 guests" on the sheet behind it, so it
   stands 2.1em off now. Over the sheet as it has been drawn since the evening
   of 17 October 2026, the whole week, it stands on the app's ground under the
   week, with no words behind it (nor on the board, either way). */
.duo { position: relative; max-width: 1120px; margin-inline: auto; container-name: film; }
.duo > .ui-s { position: relative; height: 40em; --ui-w: 64; }
.duo .phone { position: absolute; left: 2.5em; top: 0; z-index: 2; --pw: 17.5em; }
.duo .phone .ui-s { --ui-w: 18.5; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.duo .appwin { position: absolute; right: 0; top: 0; width: 41.5em; height: calc(17.5em * (2 * 2.9 + 94.2 * 844 / 390) / 100); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.duo .appwin > .ui-s { min-height: 100%; }
.duo .utoast { position: absolute; z-index: 3; left: 12.5em; bottom: 2.1em; font-size: 1.12em; }

/* The guest's phone: Noir's booking form, in Noir's colours. */
.bk { background: #fbf7f2; color: #2b1d18; }
.bk-head { display: flex; flex-direction: column; gap: 0.1em; padding: 3.4em 1.4em 0.9em; }
.bk-head b { font-family: var(--font-display); font-size: 1.7em; font-weight: 500; letter-spacing: 0.02em; line-height: 1.1; }
.bk-head span { font-size: 0.95em; font-weight: 700; color: #6e5d52; }
.bk-form, .bk-done { position: absolute; left: 1.4em; right: 1.4em; top: 7.8em; transition: opacity 0.45s var(--ease), transform 0.55s var(--ease-out); }
.bk-form { display: flex; flex-direction: column; gap: 0.45em; }
.bk-l { margin-top: 0.55em; font-size: 0.7em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8d7c71; }
.bk-chips { display: grid; gap: 0.4em; }
.bk-guests { grid-template-columns: repeat(6, 1fr); }
.bk-days { grid-template-columns: repeat(4, 1fr); }
.bk-times { grid-template-columns: repeat(3, 1fr); }
.bk-chips i {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e8ddd3;
  font-style: normal;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.1;
  transition: color 0.3s var(--ease);
}
.bk-days i { height: 3.2em; }
.bk-chips small { font-size: 0.72em; font-weight: 600; color: #8d7c71; transition: color 0.3s var(--ease); }
.bk-chips i::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #2b1d18;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.bk-chips .k-on { color: #fbf7f2; }
.bk-chips .k-on small { color: #d9ccc2; }
.bk-chips .k-on::before { opacity: 1; }
.sc-resv:not(.s1) .bk-guests .k-on,
.sc-resv:not(.s2) .bk-days .k-on,
.sc-resv:not(.s3) .bk-times .k-on { color: #2b1d18; }
.sc-resv:not(.s2) .bk-days .k-on small { color: #8d7c71; }
.sc-resv:not(.s1) .bk-guests .k-on::before,
.sc-resv:not(.s2) .bk-days .k-on::before,
.sc-resv:not(.s3) .bk-times .k-on::before { opacity: 0; }
.bk-field {
  display: flex;
  align-items: center;
  height: 2.6em;
  margin-top: 0.7em;
  padding: 0 0.85em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e8ddd3;
  font-size: 0.9em;
}
.bk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  margin-top: 0.55em;
  border-radius: 9em;
  background: #2b1d18;
  color: #fbf7f2;
  font-size: 0.95em;
  font-weight: 800;
  transition: opacity 0.3s var(--ease);
}
.sc-resv:not(.s3) .bk-btn { opacity: 0.4; }
.sc-resv.play.s4 .bk-btn::after { animation: pressring 0.7s var(--ease) both; }
.bk-done { display: flex; flex-direction: column; align-items: center; gap: 0.75em; text-align: center; }
.bk-pill { padding: 0.4em 0.95em; border-radius: 9em; background: #f0e6dc; color: #6b4f3f; font-size: 0.78em; font-weight: 800; }
.bk-big { font-family: var(--font-display); font-size: 1.8em; font-weight: 500; line-height: 1.15; }
.bk-sub { font-size: 0.9em; line-height: 1.5; color: #6e5d52; }
.bk-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: 0.75em 1.4em;
  border-radius: 0.75em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e8ddd3;
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.bk-code small { font-size: 0.58em; font-weight: 700; letter-spacing: 0.04em; color: #8d7c71; }
.bk-link { font-size: 0.8em; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
/* The form is on screen until the press, then the answer takes its place. */
.bk-form { opacity: 0; transform: translateX(-1.5em); }
.sc-resv:not(.s4) .bk-form { opacity: 1; transform: none; }
.bk-done { transition-delay: 0.35s; }
.sc-resv:not(.s4) .bk-done { opacity: 0; transform: translateX(1.5em); transition-delay: 0s; }

/* The restaurant's sheet: the app's reservation sheet as it is drawn from
   1280px up (app/(protected)/builder/[projectId]/reservations: shell.tsx,
   service-counter.tsx, week-clock.tsx, bookings-board.tsx,
   waiting-bookings.tsx and room.ts), laid out at a notional 1280px, the
   narrowest the app draws the whole week across, with one em for each of
   the app's rem. It is the week drawing's own screen ("The week, one screen"
   below, the same `.wk-*` markup, less the table taken by phone that only
   that story adds): the console (the way back, the restaurant and tonight's
   guests on the head tier; "This week", the arrows and the week's dates on
   the band, with the door to what waits for an answer and "Add a
   reservation" at its end), the seven heads, one line each, and one clock
   for the whole week. At 1280 Monday's head has room for "M…" only and
   Marchetti's card for "March…", as in the app.

   Until the evening of 17 October 2026 this window drew the sheet as the
   app draws it under 1280px, a panel for each night under the week's strip
   (laid out at 768, then 792). The owner, who reads the sheet on a
   computer, took that for the old sheet: *"the window under the phone is
   still old"*. The whole week across is what a restaurant sees at a desk.

   The window keeps the size it had, so the two films side by side still end
   level: it is the board's proportion (`.od-board`), 67.47em of the sheet's
   80 tall where the window is as tall as its drawing, and the phone's height
   where it stands beside the phone (`.duo`). The week ends a little over
   halfway down, and under it is the app's own ground (#f5f5f4, the
   window's), as on any screen taller than the week.

   The story, after the guest's press on the phone (s4): the reservation
   lands, waiting for an answer (s5: on the board, at the end of tonight's
   head and as the door beside "Add a reservation", and tonight's guests go
   from 12 to 16), the owner opens the list of everything waiting (s6),
   confirms it (s7, which is when the guest is emailed; under the list the
   door and tonight's count go, and the reservation takes the confirmed bar)
   and closes the list (s8). On the features page, where it stands beside
   the board, the press also zooms the sheet in to the board's scale (see
   `.film-pair`). */
.rv-sheet > .ui-s {
  --ui-w: 80;
  position: relative;
  height: calc(41.75em * 80 / 49.5);
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  text-align: left;
  color: #171717;
}
.rv-sheet svg { display: block; flex: none; }
.sc-resv .wk-door,
.sc-resv .wk-ask,
.sc-resv .rv-ada { transition: opacity 0.45s var(--ease), transform 0.55s var(--spring); }
.sc-resv:not(.s5) .rv-ada { opacity: 0; transform: translateY(-0.5em) scale(0.97); }
.sc-resv:not(.s5) .wk-door,
.sc-resv.s7 .wk-door { opacity: 0; transform: scale(0.94); }
.sc-resv:not(.s5) .wk-ask,
.sc-resv.s7 .wk-ask { opacity: 0; }
.sc-resv.play.s6 .wk-door::after { animation: pressring 0.7s var(--ease) both; }
/* Tonight's guests, 12 and then 16, stacked in one cell (`.wk-swap`); the
   rewind trades them back the same way rather than blinking. */
.sc-resv:not(.s5) .wk-swap > .g0,
.sc-resv.s5 .wk-swap > .g1 { opacity: 1; transition-delay: 0.18s; }
.sc-resv.rewind .wk-swap > .g1 { opacity: 0; transition-delay: 0s; }
.sc-resv.rewind .wk-swap > .g0 { opacity: 1; transition-delay: 0.18s; }
/* Confirmed: the row loses the wash of a reservation waiting for an answer
   and its bar turns the confirmed green, while the list says it is empty. */
.rv-ada .wk-r,
.rv-ada .wk-r::before { transition: background-color 0.3s var(--ease) 0.35s; }
.sc-resv.s7 .rv-ada .wk-r { background-color: #fff; }
.sc-resv.s7 .rv-ada .wk-r::before { background-color: #059669; }

/* The list of everything waiting for an answer, over the sheet: a scrim
   under the app bar and a sheet at the right, as the app draws it from 640px.
   It opens just after the press on the door, and closes just after the press
   on its "Done". */
.rv-scrim {
  position: absolute;
  inset: 3.5em 0 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s var(--ease) 0.3s;
}
.rv-list {
  position: absolute;
  z-index: 4;
  top: 4.5em;
  right: 0.75em;
  bottom: 0.75em;
  width: 24em;
  display: flex;
  flex-direction: column;
  border: 1px solid #b7b7b7;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 1.5625em 3.125em -0.75em rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.96) translateY(0.25em);
  transition: opacity 0.25s var(--ease) 0.3s, transform 0.3s var(--ease-out) 0.3s;
}
.sc-resv.s6:not(.s8) .rv-scrim { opacity: 1; }
.sc-resv.s6:not(.s8) .rv-list { opacity: 1; transform: none; }
.rv-lh { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75em; padding: 0.75em 1em; border-bottom: 1px solid #f5f5f5; }
.rv-lh b { display: block; font-size: 1.3125em; font-weight: 600; color: #171717; }
.rv-lh small { display: block; font-size: 1.1875em; color: #737373; }
.rv-x { display: grid; place-items: center; flex: none; width: 2.25em; height: 2.25em; border-radius: 0.5em; color: #737373; }
.rv-x svg { width: 1em; height: 1em; }
.rv-lb { position: relative; flex: 1; padding: 1em; }
.rv-gt { display: block; margin-bottom: 0.4211em; font-size: 1.1875em; line-height: 1.2632; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #737373; }
.rv-card { display: block; padding: 0.75em; border: 1px solid #b7b7b7; border-radius: 0.75em; }
.rv-c1 { display: flex; align-items: baseline; gap: 0.4211em; font-size: 1.1875em; color: #404040; }
.rv-c1 b { font-family: var(--font-mono); font-weight: 600; color: #171717; font-variant-numeric: tabular-nums; }
.rv-c2 { display: block; margin-top: 0.1053em; font-size: 1.1875em; text-align: right; color: #737373; }
.rv-c3 { display: block; margin-top: 0.1053em; font-size: 1.1875em; line-height: 1.4737; color: #404040; }
.rv-c4 { display: flex; gap: 0.5em; margin-top: 0.625em; }
.rv-ok, .rv-no { display: inline-flex; align-items: center; height: 1.8947em; padding: 0 0.8421em; border-radius: 0.4211em; font-size: 1.1875em; }
.rv-ok { background: var(--petrol-700); color: #fff; font-weight: 600; }
.rv-no { background: #fff; color: #404040; font-weight: 500; box-shadow: inset 0 0 0 1px #a8a8a8; }
.sc-resv.play.s7 .rv-ok::after { animation: pressring 0.7s var(--ease) both; }
/* Confirmed: the reservation leaves the list and the list says it is empty. */
.rv-none { position: absolute; top: 0.8421em; left: 0.8421em; right: 0.8421em; font-size: 1.1875em; line-height: 1.4737; color: #737373; }
.rv-grp, .rv-none { transition: opacity 0.3s var(--ease); }
.rv-none { opacity: 0; }
.sc-resv.s7 .rv-grp { opacity: 0; transition-delay: 0.35s; }
.sc-resv.s7 .rv-none { opacity: 1; transition-delay: 0.7s; }
/* "Done" at the foot (`waiting-bookings.tsx`): quiet while a reservation is
   waiting, filled once nothing is, and the press that closes the list. */
.rv-lf { display: flex; flex: none; justify-content: flex-end; padding: 0.75em 1em; border-top: 1px solid #f5f5f5; }
.rv-done { display: inline-grid; height: 2.75em; border-radius: 0.5em; }
.rv-done > i {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0 0.8421em;
  border: 1px solid #a8a8a8;
  border-radius: inherit;
  background: #fff;
  font-size: 1.1875em;
  font-style: normal;
  font-weight: 600;
  color: #404040;
  transition: opacity 0.3s var(--ease);
}
.rv-done > i + i { border-color: transparent; background: var(--petrol-700); color: #fff; }
.sc-resv.s7 .rv-done > i + i { transition-delay: 0.7s; }
.sc-resv:not(.s7) .rv-done > i + i { opacity: 0; }
.sc-resv.play.s8 .rv-done::after { animation: pressring 0.7s var(--ease) both; }

/* The guest is emailed the moment the reservation is confirmed. */
.sc-resv .rv-mail { transition: opacity 0.7s var(--ease-out) 0.6s, transform 0.9s var(--ease-out) 0.6s; }
.sc-resv:not(.s7) .rv-mail { opacity: 0; transform: translate3d(2em, 0, 0); }

/* Dark: the list of what waits as the app draws it in dark
   (waiting-bookings.tsx, read off the real one): #111111 inside a stone-700
   edge, its card on stone-800, "Turn down" and the quiet "Done" stone-200
   inside stone-700. The guest's phone is the restaurant's form and stays.
   The sheet's own parts are in "The week, one screen", below. */
@media screen {
  :where(.dark) .rv-sheet > .ui-s { color: #f5f5f4; }
  :where(.dark) .sc-resv.s7 .rv-ada .wk-r { background-color: #1c1917; }
  :where(.dark) .rv-list { border-color: #44403c; background: #111111; }
  :where(.dark) .rv-lh, :where(.dark) .rv-lf { border-color: #292524; }
  :where(.dark) .rv-lh b, :where(.dark) .rv-c1 b { color: #f5f5f4; }
  :where(.dark) .rv-lh small, :where(.dark) .rv-x, :where(.dark) .rv-gt, :where(.dark) .rv-c2, :where(.dark) .rv-none { color: #a8a29e; }
  :where(.dark) .rv-card { border-color: #292524; }
  :where(.dark) .rv-c1, :where(.dark) .rv-c3 { color: #d6d3d1; }
  :where(.dark) .rv-no { background: transparent; color: #e7e5e4; box-shadow: inset 0 0 0 1px #44403c; }
  :where(.dark) .rv-done > i { border-color: #44403c; background: #111111; color: #e7e5e4; }
}

/* --------------------------------------------------------------------------
   Online ordering: a basket on the phone, a ticket on the kitchen's board
   -------------------------------------------------------------------------- */

.shop { background: #faf6f1; color: #1f1a16; }
.sh-bar { display: flex; align-items: center; gap: 0.6em; padding: 3.3em 1.1em 0.8em; background: #f4eee2; }
/* The restaurant's own logo (`#i-pln` in the page's sprite), drawn from the
   live site's: two rings, "PLN" with a fifth of the inner ring clear on
   either side, the bowl above and the stack of pancakes below. The letters
   are shapes, never typed, so their margins are the same on every machine
   (owner, 2026-10-17: the typed "PLN" was "pretty much touching the outer
   circle"). It stands at 1.8 times its bar's type, the live site's own
   proportion on a phone. */
.sh-logo { flex: none; width: 1.8em; height: 1.8em; }
.sh-logo svg { display: block; width: 100%; height: 100%; }
.sh-bar b { font-family: var(--font-display); font-size: 0.98em; font-weight: 600; line-height: 1.15; }
.sh-menu, .sh-check, .sh-done { position: absolute; left: 0; right: 0; }
.sh-menu {
  top: 6.7em;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.8em 1em 5em;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.sc-ord:not(.s5) .sh-menu { opacity: 1; }
.sh-search {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2.5em;
  padding: 0 0.85em;
  border-radius: 0.65em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e6ded3;
  font-size: 0.84em;
  color: #7a6e63;
}
.sh-search svg { width: 1.05em; height: 1.05em; }
.sh-sec { margin-top: 0.35em; font-size: 0.68em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7a6e63; }
.sh-dish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.75em 0.85em;
  border-radius: 0.75em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ece4d9;
}
.sh-dish > span { display: flex; flex-direction: column; gap: 0.12em; min-width: 0; }
.sh-dish b { font-size: 0.88em; }
.sh-dish small { font-size: 0.7em; color: #7a6e63; }
.sh-dish em { margin-top: 0.15em; font-style: normal; font-size: 0.82em; font-weight: 800; }
.sh-add {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #d9cfc2;
}
.sh-add svg { width: 1em; height: 1em; }
.sh-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: #1f1a16;
  color: #fff;
  font-size: 0.85em;
  font-weight: 800;
  transition: opacity 0.3s var(--ease), transform 0.45s var(--spring);
}
.sc-ord:not(.s1) .d1 .sh-q, .sc-ord:not(.s2) .d2 .sh-q { opacity: 0; transform: scale(0.6); }
.sc-ord.play.s1:not(.s2) .d1 .sh-add::after, .sc-ord.play.s2:not(.s3) .d2 .sh-add::after { content: none; }
.sh-basket {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 1.3em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 3.1em;
  padding: 0 1em;
  border-radius: 0.75em;
  background: #1f1a16;
  color: #fff;
  font-size: 0.86em;
  font-weight: 800;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--spring);
}
.sc-ord:not(.s1) .sh-basket { opacity: 0; transform: translateY(130%); }
.sh-n { position: relative; display: grid; width: 1.8em; height: 1.8em; border-radius: 999px; background: rgba(255, 255, 255, 0.2); }
.sh-n > span, .sh-tot > span { grid-area: 1 / 1; place-self: center; transition: opacity 0.25s var(--ease); }
.sh-tot { display: grid; margin-left: auto; font-variant-numeric: tabular-nums; }
.sh-basket .v1 { opacity: 0; }
.sc-ord:not(.s2) .sh-basket .v1 { opacity: 1; }
.sc-ord:not(.s2) .sh-basket .v2 { opacity: 0; }
.sh-check {
  top: 6.7em;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 1.1em 1em 1.2em;
  border-radius: 1.2em 1.2em 0 0;
  background: #fff;
  box-shadow: 0 -1em 2em -1em rgba(31, 26, 22, 0.35);
  transform: translateY(105%);
  transition: transform 0.6s var(--ease-out);
}
.sc-ord.s3:not(.s5) .sh-check { transform: none; }
.sh-h { font-size: 1.02em; font-weight: 800; text-align: center; }
.sh-way { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.sh-way span, .sh-tips span {
  position: relative;
  z-index: 0;
  border-radius: 0.55em;
  box-shadow: inset 0 0 0 1px #d9cfc2;
  font-weight: 800;
}
.sh-way span { display: flex; flex-direction: column; padding: 0.55em 0.75em; font-size: 0.8em; }
.sh-way small { font-size: 0.85em; font-weight: 500; color: #7a6e63; }
.sh-way .k-on, .sh-tips .k-on { color: #fff; box-shadow: none; }
.sh-way .k-on small { color: rgba(255, 255, 255, 0.72); }
.sh-way span::before, .sh-tips span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #1f1a16;
  opacity: 0;
}
.sh-way .k-on::before, .sh-tips .k-on::before { opacity: 1; transition: opacity 0.3s var(--ease); }
.sh-lines { display: grid; gap: 0.3em; padding: 0.6em 0.75em; border-radius: 0.6em; box-shadow: inset 0 0 0 1px #ece4d9; font-size: 0.76em; }
.sh-lines span { display: flex; justify-content: space-between; gap: 0.5em; }
.sh-lines i { font-style: normal; }
.sh-tipline { transition: opacity 0.3s var(--ease); }
.sc-ord:not(.s4) .sh-tipline { opacity: 0; }
.sh-l { font-size: 0.66em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7a6e63; }
.sh-tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; }
.sh-tips span { padding: 0.6em 0; text-align: center; font-size: 0.74em; transition: color 0.3s var(--ease); }
.sc-ord:not(.s4) .sh-tips .k-on { color: #1f1a16; box-shadow: inset 0 0 0 1px #d9cfc2; }
.sc-ord:not(.s4) .sh-tips .k-on::before { opacity: 0; }
.sh-pay { font-size: 0.72em; color: #7a6e63; }
.sh-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.1em;
  margin-top: auto;
  padding: 0 1em;
  border-radius: 0.75em;
  background: #1f1a16;
  color: #fff;
  font-size: 0.86em;
  font-weight: 800;
}
.sh-place b { display: grid; font-variant-numeric: tabular-nums; }
.sh-place b > span { grid-area: 1 / 1; justify-self: end; transition: opacity 0.25s var(--ease); }
.sh-place .p1 { opacity: 0; }
.sc-ord:not(.s4) .sh-place .p1 { opacity: 1; }
.sc-ord:not(.s4) .sh-place .p2 { opacity: 0; }
.sc-ord.play.s5 .sh-place::after { animation: pressring 0.7s var(--ease) both; }
.sh-done {
  top: 7.9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  padding: 0 1.2em;
  text-align: center;
  transition: opacity 0.45s var(--ease) 0.4s, transform 0.55s var(--spring) 0.4s;
}
.sc-ord:not(.s5) .sh-done { opacity: 0; transform: translateY(0.8em); transition-delay: 0s; }
.sh-ok { display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 999px; background: #e6f7ef; color: var(--good); }
.sh-ok svg { width: 1.6em; height: 1.6em; }
.sh-done > b { font-size: 1.35em; }
.sh-sub { font-size: 0.84em; color: #7a6e63; }
.sh-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; width: 100%; margin-top: 0.5em; }
.sh-what {
  display: grid;
  gap: 0.35em;
  width: 100%;
  margin-top: 0.9em;
  padding: 0.8em 0.9em;
  border-radius: 0.7em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ece4d9;
  font-size: 0.8em;
  text-align: left;
}
.sh-what .sh-l { margin-bottom: 0.1em; font-size: 0.8em; }
.sh-what > span:not(.sh-l) { display: flex; justify-content: space-between; gap: 0.5em; }
.sh-what i { font-style: normal; }
.sh-tt { margin-top: 0.25em; padding-top: 0.45em; border-top: 1px solid #ece4d9; font-weight: 800; }
.sh-follow { font-size: 0.8em; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.sh-track span { position: relative; padding-top: 1em; font-size: 0.66em; font-weight: 700; color: #a2968a; transition: color 0.3s var(--ease); }
.sh-track span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.38em;
  border-radius: 9em;
  background: #e6ded3;
}
.sh-track span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.38em;
  border-radius: 9em;
  background: #1f1a16;
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.sh-track .k1, .sh-track .k2, .sh-track .k3 { color: #1f1a16; }
.sh-track .k4::after { transform: scaleX(0); }
.sc-ord:not(.s7) .sh-track .k2, .sc-ord:not(.s9) .sh-track .k3 { color: #a2968a; }
.sc-ord:not(.s7) .sh-track .k2::after, .sc-ord:not(.s9) .sh-track .k3::after { transform: scaleX(0); }

/* The kitchen's board, as the app draws it: both drawings of it (the board in
   this film, here and on features.html, and the one under "Every order on one
   board" on ordering.html) are the app's own orders room
   (app/(protected)/orders/[projectId], drawn by
   builder/[projectId]/orders/orders-board.tsx inside the analytics shell),
   with one em for each of the app's rem, the reservation sheet's method: a
   ticket's 19px line is 1.1875em and its 14px padding 0.875em. The app bar is
   the week drawing's own (`.wk-bar`). `--kb-gut` is the room's side gutter at
   the width each one is drawn at. */
.kb {
  --kb-gut: 1.5em;
  position: relative;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  text-align: left;
  color: #1c1917;
  background: linear-gradient(180deg, #f4f4f5 0%, #e9e9eb 45%, #d4d4d8 100%);
}
.kb svg { display: block; flex: none; }

/* The restaurant's name on a white tier, with the way back. */
.kb-tier {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.875em;
  padding: calc(0.875em + 1px) var(--kb-gut) 0.875em;
  background: #fff;
  box-shadow: inset 0 1px 0 #b7b7b7, 0 1px 3px rgba(12, 10, 9, 0.08), 0 0.75em 1.75em -1.125em rgba(12, 10, 9, 0.2);
}
.kb-back { display: grid; place-items: center; flex: none; width: 3.25em; height: 3.25em; border-radius: 0.75em; background: #fff; color: #292524; box-shadow: inset 0 0 0 1px #b7b7b7; }
.kb-back svg { width: 1.25em; height: 1.25em; }
.kb-title { font-size: 1.75em; line-height: 1.2857; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.kb-body { padding: 1.5em var(--kb-gut) 1.5em; }
.kb-eye { display: block; font-size: 1.1875em; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #737373; }

/* Today's figures, each a value over its noun, and the board's own controls. */
.kb-count {
  display: flex;
  align-items: stretch;
  margin-top: 1em;
  border-radius: 1em;
  background: #fff;
  color: var(--petrol-950);
  box-shadow: 0 0 0 1px #b7b7b7, 0 1px 2px rgba(28, 25, 23, 0.04), 0 1.75em 3.5em -2.5em rgba(2, 68, 75, 0.3);
}
.kb-fig { display: flex; flex: none; flex-direction: column; gap: 0.125em; padding: 1em; }
.kb-fig + .kb-fig { box-shadow: inset 1px 0 0 #e7e5e4; }
.kb-fig > b { font-size: 1.75em; line-height: 1.2857; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-fig > small { font-size: 1.1875em; line-height: 1.4737; color: #525252; white-space: nowrap; }
.kb-ctl { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 0.5em; padding: 1em; }
.kb-sound { display: flex; align-items: center; gap: 0.5263em; padding-right: 0.2105em; font-size: 1.1875em; line-height: 1.4737; font-weight: 500; color: #292524; white-space: nowrap; }
.kb-sound i { position: relative; width: 2.4211em; height: 1.3684em; border-radius: 999px; background: #d6d3d1; }
.kb-sound i::after { content: ""; position: absolute; top: 0.1579em; left: 0.1579em; width: 1.0526em; height: 1.0526em; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); }
.kb-btn { display: flex; align-items: center; height: 2.3158em; padding: 0 0.6316em; border-radius: 0.6316em; background: #fff; box-shadow: inset 0 0 0 1px #b7b7b7; font-size: 1.1875em; font-weight: 500; color: #292524; white-space: nowrap; }

/* Three columns of tickets, newest at the top of each. */
.kb-cols { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5em; margin-top: 1.5em; }
.kb-col { display: flex; min-width: 0; flex-direction: column; gap: 0.75em; }
.kb-ch { display: flex; align-items: center; gap: 0.5263em; padding: 0 0.1053em; font-size: 1.1875em; line-height: 1.4737; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #525252; white-space: nowrap; }
/* The count is every figure it takes, stacked: the grey one under, the one it
   changes to on top. Petrol only for what waits for you. */
.kb-n { display: inline-grid; font-style: normal; letter-spacing: 0; }
.kb-n > span {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  min-width: 1.3684em;
  height: 1.3684em;
  padding: 0 0.3158em;
  border-radius: 999px;
  background: #e5e5e5;
  color: #404040;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.25s var(--ease);
}
.kb-n > .on { background: var(--petrol-700); color: #fff; }
.kb-n > .n1 { opacity: 0; }

/* A ticket: its code and the day and time it came in, the time the guest
   chose if they chose one, the guest, how the food goes, every dish, then how
   it is paid over the total and the one press that moves it along. With no
   time chosen and no line that wraps it is 312.875px tall, which is what the
   tickets under it step down by when it lands on top of them. */
.kb-tk {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.875em;
  border: 1px solid #b7b7b7;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1.75em 3.5em -2.5em rgba(2, 68, 75, 0.3);
}
.kb-top { display: flex; align-items: baseline; gap: 0.4211em; height: 1.5789em; font-size: 1.1875em; line-height: 1.4737; }
.kb-code { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.025em; color: #525252; }
.kb-time { margin-left: auto; color: #737373; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A time the guest chose ("Wanted for Sat 25 Jul, 18:15"): the weekday, the
   date and the time whole, after a clock. One line at the width it is drawn
   at, as in the app, and kept to one where a phone draws the words a little
   wider than their size. */
.kb-want { display: flex; align-items: flex-start; gap: 0.3158em; font-size: 1.1875em; line-height: 1.4737; font-weight: 600; color: var(--petrol-800); white-space: nowrap; }
.kb-want > i { display: flex; flex: none; align-items: center; height: 1.4737em; }
.kb-want svg { width: 0.7368em; height: 0.7368em; }
.kb-want b { font-weight: inherit; }
.kb-name { font-size: 1.4375em; line-height: 1.3913; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-how { font-size: 1.1875em; line-height: 1.625; color: #57534e; }
.kb-lines { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3158em 0.5263em; padding-top: 0.5263em; border-top: 1px solid #b7b7b7; font-size: 1.1875em; line-height: 1.4737; }
.kb-lines i { font-style: normal; text-align: right; white-space: nowrap; color: #737373; font-variant-numeric: tabular-nums; }
.kb-foot { display: flex; flex-direction: column; gap: 0.25em; padding-top: 0.625em; border-top: 1px solid #b7b7b7; }
.kb-pay { font-size: 1.1875em; line-height: 1.4737; color: #57534e; }
.kb-row { position: relative; display: flex; align-items: center; gap: 0.625em; height: 2.625em; }
.kb-row > b { flex: 1; font-size: 1.1875em; font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-go { display: flex; align-items: center; height: 2.2105em; padding: 0 0.6316em; border-radius: 0.4211em; background: var(--petrol-700); color: #fff; font-size: 1.1875em; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(2, 68, 75, 0.2); }

/* The order the story follows: drawn over the columns, one column wide, at the
   top of the first, and moved along them. It lands at the top of each column
   because it is due soonest there: the board puts the order due soonest first
   (`dueSoonestFirst`), and the tickets it lands over are for a later time
   their guests chose. Its press is each label it takes,
   stacked at the right, so it is always as wide as its own words. A ticket
   waiting for you has a petrol edge, drawn over its grey one. */
.kb-mv { position: absolute; z-index: 2; top: 2.5em; left: 0; width: calc((100% - 3em) / 3); }
.kb-mv::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--petrol-600); opacity: 0; transition: opacity 0.3s var(--ease) 0.35s; pointer-events: none; }
.kb-gos > span { position: absolute; top: 0; right: 0; opacity: 0; transition: opacity 0.25s var(--ease) 0.6s; }
.kb-old { transition: transform 0.6s var(--ease-out) 0.35s; }

/* A figure that changes is both of its values, stacked: `o0` before the order
   and `o1` after it. */
.kb-sw { display: grid; justify-items: start; }
.kb-sw > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.18s var(--ease) 0.42s; }

/* What the kitchen finished today. */
.kb-done { margin-top: 1.5em; }
.kb-dh { display: block; padding: 0 0.1053em; font-size: 1.1875em; line-height: 1.4737; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #525252; }
.kb-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; margin-top: 0.75em; }
.kb-dr { display: flex; align-items: baseline; gap: 0.6316em; padding: 0.5263em 0.6316em; border: 1px solid #b7b7b7; border-radius: 0.6316em; font-size: 1.1875em; line-height: 1.4737; }
.kb-dr .kb-code { font-weight: 400; letter-spacing: 0; color: #737373; }
.kb-dr > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #292524; }
.kb-dr > b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* This film's board is drawn at 1024px, the narrowest the app keeps its
   three columns side by side, and shows its top. The order lands waiting for
   you (s6), is accepted onto Cooking (s7), started (s8) and made ready, onto
   On its way (s9), when the guest is emailed; each press is seen before the
   ticket moves. Its height is the sheet's proportion (41.75em of 49.5, the
   sheet's until the evening of 17 October 2026, which the sheet keeps as the
   whole week, 67.47em of its 80), so the two films side by side end level;
   that puts the foot under the "Takeaway" of the ticket that steps down, at
   every step of the story, never through a dish. */
.od-board > .ui-s { --ui-w: 64; height: calc(41.75em * 64 / 49.5); }
.sc-ord .kb-mv { transform: translateX(calc(200% + 3em)); transition: transform 0.75s var(--ease-out) 0.35s, opacity 0.4s var(--ease) 0.35s; }
.sc-ord:not(.s9) .kb-mv { transform: translateX(calc(100% + 1.5em)); }
.sc-ord:not(.s7) .kb-mv { transform: none; }
.sc-ord:not(.s6) .kb-mv { opacity: 0; transform: translateY(-0.75em) scale(0.97); }
.sc-ord.rewind .kb-mv { opacity: 0; transition-delay: 0s; }
.sc-ord.s6:not(.s7) .kb-mv::before { opacity: 1; }
.sc-ord.s7:not(.s9) .kb-col:nth-child(2) .kb-old,
.sc-ord.s9 .kb-col:nth-child(3) .kb-old { transform: translateY(20.3047em); }
.sc-ord.rewind .kb-col:nth-child(3) .kb-old { transform: none; transition-delay: 0s; }
.sc-ord.s6:not(.s7) .kb-col:nth-child(1) .n1,
.sc-ord.s7:not(.s9) .kb-col:nth-child(2) .n1,
.sc-ord.s9 .kb-col:nth-child(3) .n1 { opacity: 1; transition-delay: 0.6s; }
.sc-ord.rewind .kb-col:nth-child(3) .n1 { opacity: 0; transition-delay: 0s; }
.sc-ord:not(.s7) .kb-gos .g1,
.sc-ord.s7:not(.s8) .kb-gos .g2,
.sc-ord.s8:not(.s9) .kb-gos .g3,
.sc-ord.s9 .kb-gos .g4 { opacity: 1; transition-delay: 0.85s; }
.sc-ord.play.s7 .kb-gos .g1::after,
.sc-ord.play.s8 .kb-gos .g2::after,
.sc-ord.play.s9 .kb-gos .g3::after { animation: pressring 0.7s var(--ease) both; }
.sc-ord:not(.s6) .kb-sw > .o0,
.sc-ord.s6 .kb-sw > .o1 { opacity: 1; transition-delay: 0.6s; }
.sc-ord.rewind .kb-sw > .o1 { opacity: 0; transition-delay: 0s; }
.sc-ord.rewind .kb-sw > .o0 { opacity: 1; transition-delay: 0.18s; }
.sc-ord .od-mail { transition: opacity 0.7s var(--ease-out) 0.9s, transform 0.9s var(--ease-out) 0.9s; }
.sc-ord:not(.s9) .od-mail { opacity: 0; transform: translate3d(2em, 0, 0); transition-delay: 0s; }

/* A film narrower than 700px is drawn as on a phone rather than shrunk (under
   700px the wide one would be smaller than this one on a phone): the phone on
   top, the restaurant's screen under it, the email between, at most 470px
   wide. That is every phone, and each half of the pair on the features page.
   The screen is in flow here, so the film is exactly as tall as what it holds,
   whatever its sheet has in it, and the window as tall as its drawing (it is
   the phone's height only beside the phone). After both films' rules, which
   it overrides. */
@container film (max-width: 700px) {
  .duo > .ui-s { --ui-w: 32; max-width: 470px; height: auto; margin-inline: auto; padding-top: 33.5em; font-size: calc(min(100cqw, 470px) / var(--ui-w)); }
  .duo .phone { left: 50%; --pw: 15.5em; transform: translateX(-50%); }
  .duo .appwin { position: relative; top: auto; right: auto; width: auto; height: auto; }
  .duo .utoast { left: 50%; bottom: auto; top: 29.5em; font-size: 1em; }
  .rv-mail, .od-mail { transform: translateX(-50%); }
  .sc-resv:not(.s7) .rv-mail, .sc-ord:not(.s9) .od-mail { transform: translate3d(calc(-50% + 2em), 0, 0); }
}

/* Reservations and online ordering on the features page: the two films side
   by side, each with one line and the way to its own page, where it is drawn
   wide. The pair is ONE grid of eight pieces, each film's four in order
   (heading, line, film, button), poured down two columns of four shared rows
   (`grid-auto-flow: column`), so a heading that wraps in one column does not
   push its film below the other and the two phones, windows and buttons stand
   level. Until 6 October 2026 each film's four were a box sharing the rows
   through `subgrid`, and a browser without subgrid (Chrome before 117, where
   old Macs and Windows 7 stay) lays each box out alone: at 1440 the phones and
   windows stood 18px apart and the buttons 9px.

   A film is centred in its column (its phone over the middle of its window),
   so its heading, line and button are centred with it: the button at the
   column's left edge stood 39px outside the window above it. Only the four
   pieces are centred, never the drawings, whose words are set left, and a
   centred line is balanced as the headings are, so it does not end on two
   words. Under 1000px they stand one under the other (see Narrower screens),
   where the pair is as wide as each film, which is why it is a container. */
.film-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); justify-items: center; container-type: inline-size; container-name: pair; }
.film-pair > h2 { text-align: center; }
.film-pair > .lead { text-align: center; text-wrap: balance; }
.film-pair > .duo { width: 100%; margin-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
/* The two windows end level: side by side they are the same width, and the
   sheet and the board are drawn at one proportion (`.rv-sheet`: 80em wide and
   80 / 49.5 times 41.75em tall; `.od-board`: 64em wide and 64 / 49.5 times
   41.75em tall), so the two are the same height.
   Where the pair stands one film under the other and each is drawn wide
   (759 to 1000px), both windows are the phone's height instead (`.duo`), so
   they still end level. */
/* Side by side, the two screens stand at one scale (owner, 18 October 2026:
   *"the two screens of the interfaces are not scaled the same, the one for
   the reservations is zoomed out more which looks bad. maby add an animation
   where it starts off zoomed out and zoomes in"*). The sheet is drawn 80em
   wide, the app from 1280px, where it draws the week across, and the board
   64em, the app from 1024px, in windows of one width, so the sheet's words
   were four fifths of the board's. Here the sheet starts as the whole week
   and, once the guest presses "Book" (s4), zooms in by 80 / 64 towards its
   top right corner, where the reservation lands and the list opens, so from
   then on its em is the board's. It zooms back out while the story fades
   (`.rewind`), inside the 520ms the script gives that. Motion reduced or no
   script, it stands zoomed in, as the story's end.

   ONE number moves, `--rv-zoom`, from 0 to 1, registered so that it can be
   transitioned (a browser before Firefox 128 or Safari 16.4 cuts from one to
   the other). It scales the drawing, and it keeps the left of the bar and of
   the console at the window's left edge, as the app does at any width: the
   lockup, the way back, "Noir" and tonight's guests, "This week" and the
   week's dates move right by what the zoom takes off the left, the window's
   width less that width over the scale (in `cqw`, the window being the
   drawing's container: an em would be each piece's own). So the bar and the
   console read as the app's at the board's width, and only the week is cut:
   Monday, closed that week, and the times beside the rows go off the left,
   Tuesday to Sunday stay. Once zoomed, the list of what waits is as tall as
   the window, its foot a fifth of the drawing up, where the window's foot
   falls, so its "Done" stays in view. Only the pair: `bookings.html` draws
   the same film wide and alone, and keeps the whole week. */
@property --rv-zoom { syntax: "<number>"; inherits: true; initial-value: 0; }
.film-pair .sc-resv { --rv-zoom: 0; transition: --rv-zoom 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.film-pair .sc-resv.s4 { --rv-zoom: 1; }
.film-pair .sc-resv.rewind { --rv-zoom: 0; transition-duration: 0.4s; transition-delay: 0s; }
.film-pair .rv-sheet > .ui-s { transform: scale(calc(1 + var(--rv-zoom) / 4)); transform-origin: 100% 0; }
.film-pair .rv-sheet .wk-brand,
.film-pair .rv-sheet .wk-tier > :not(.wk-tabs),
.film-pair .rv-sheet .wk-week { transform: translateX(calc(100cqw - 100cqw / (1 + var(--rv-zoom) / 4))); }
.film-pair .sc-resv.s4 .rv-list { bottom: calc(20% + 0.75em); }

/* Dark: the kitchen's board as the app draws it in dark (OrdersBoard, read
   off the real room): the room #0a0a0a, its tier the bar's #1b1b1c, the
   day's figures on the dark petrol card, each ticket #111111 on a stone-800
   edge. The guest's basket on the phone is the restaurant's and stays. */
@media screen {
  :where(.dark) .kb { color: #f5f5f4; background: #0a0a0a; }
  :where(.dark) .kb-tier { background: #1b1b1c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17); }
  :where(.dark) .kb-back, :where(.dark) .kb-btn { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
  :where(.dark) .kb-eye, :where(.dark) .kb-ch, :where(.dark) .kb-code, :where(.dark) .kb-time, :where(.dark) .kb-how, :where(.dark) .kb-lines i, :where(.dark) .kb-pay, :where(.dark) .kb-dh, :where(.dark) .kb-dr .kb-code { color: #a8a29e; }
  :where(.dark) .kb-count {
    background: linear-gradient(180deg, #143238 0%, #0e2429 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(2, 68, 75, 0.25), 0 20px 40px -24px rgba(0, 0, 0, 0.75);
  }
  :where(.dark) .kb-fig + .kb-fig { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }
  :where(.dark) .kb-fig > small { color: rgba(255, 255, 255, 0.7); }
  :where(.dark) .kb-sound { color: #fff; }
  :where(.dark) .kb-sound i { background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); }
  :where(.dark) .kb-n > span { background: #44403c; color: #e7e5e4; }
  :where(.dark) .kb-tk { border-color: #292524; background: #111111; }
  :where(.dark) .kb-want { color: var(--petrol-300); }
  :where(.dark) .kb-lines, :where(.dark) .kb-foot { border-top-color: #292524; }
  :where(.dark) .kb-dr { border-color: #292524; }
  :where(.dark) .kb-dr > span:nth-child(2) { color: #e7e5e4; }
}

/* --------------------------------------------------------------------------
   Feature drawings: photos, the logo, languages, Google and AI, the
   figures, the web address
   -------------------------------------------------------------------------- */

.tile-art {
  position: relative;
  flex: 1 0 auto;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(184, 231, 238, 0.5), rgba(184, 231, 238, 0) 60%),
    linear-gradient(165deg, #f3fafb, #f5f3ee);
}
.tile-art > .ui-s { position: absolute; inset: 0; }
.sc-photos .ui-s, .sc-stats .ui-s { --ui-w: 40; }

/* The panels a drawing's screen sits on. */
.card-ui {
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 1em 2em -1.1em rgba(2, 40, 45, 0.4);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Photos ---------------------------------------------------------------- */
.ph-tray {
  position: absolute;
  left: 1.6em;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(3, 2.8em);
  gap: 0.45em;
  padding: 0.85em;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 1em 2em -1.1em rgba(2, 40, 45, 0.4);
  transform: translateY(-50%) rotate(-3deg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ph-tl { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4em; font-size: 0.7em; font-weight: 800; color: #1c1917; }
.ph-tl svg { width: 1.15em; height: 1.15em; color: var(--petrol-600); }
.pt { position: relative; aspect-ratio: 1; border-radius: 0.45em; transition: opacity 0.4s var(--ease), transform 0.5s var(--spring); }
.pt1 { background: url(../img/site-pancakes.webp) 76% 100% / 772% auto; }
.pt2 { background: url(../img/site-pancakes.webp) 88% 14% / 440% auto; }
.pt3 { background: url(../img/screenshot-noir-home.jpg) 85% 64% / 533% auto; }
.pt { opacity: 0.35; transform: scale(0.9); }
.sc-photos:not(.s1) .pt1, .sc-photos:not(.s2) .pt2, .sc-photos:not(.s3) .pt3 { opacity: 1; transform: none; }
.ph-page {
  position: absolute;
  right: 1.6em;
  top: 1.3em;
  bottom: 1.3em;
  width: 23.5em;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1.25fr 1fr;
  gap: 0.5em;
  padding: 0.8em;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 1em 2em -1.1em rgba(2, 40, 45, 0.4);
}
.ph-slot {
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
  background: repeating-linear-gradient(-45deg, #f0ede6 0 0.35em, #f7f5f0 0.35em 0.7em);
  box-shadow: inset 0 0 0 1px #e6e1d6;
}
.sl1 { grid-column: 1 / -1; }
.ph-slot > i { position: absolute; inset: 0; transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-out); }
.sl1 > i { background: url(../img/screenshot-noir-home.jpg) 100% 65% / 320% auto; }
.sl2 > i { background: url(../img/site-pancakes.webp) 76% 100% / 710% auto; }
.sl3 > i { background: url(../img/site-pancakes.webp) 100% 15% / 298% auto; }
.sl4 > i { background: url(../img/site-pancakes.webp) 86% 51% / 489% auto; }
.sc-photos:not(.s1) .sl1 > i, .sc-photos:not(.s2) .sl2 > i, .sc-photos:not(.s3) .sl3 > i, .sc-photos:not(.s4) .sl4 > i { opacity: 0; transform: scale(1.18); }
.ph-made {
  position: absolute;
  left: 0.4em;
  bottom: 0.4em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.6em;
  border-radius: 9em;
  background: rgba(255, 255, 255, 0.94);
  font-style: normal;
  font-size: 0.6em;
  font-weight: 800;
  color: var(--petrol-800);
  transition: opacity 0.4s var(--ease) 0.5s, transform 0.5s var(--spring) 0.5s;
}
.ph-made svg { width: 1.2em; height: 1.2em; }
.sc-photos:not(.s4) .ph-made { opacity: 0; transform: translateY(0.5em); transition-delay: 0s; }

/* Logo ------------------------------------------------------------------ */
.lg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; align-content: center; padding: 0 1.4em 1.6em; }
.lg-c {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 0.8em;
  background: radial-gradient(90% 90% at 30% 20%, #33241d, #1a120f);
  color: #f1e6d6;
  box-shadow: 0 0.9em 1.6em -0.9em rgba(0, 0, 0, 0.55);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--spring);
}
.lg-c::after {
  content: "";
  position: absolute;
  inset: -0.28em;
  border-radius: 1em;
  box-shadow: 0 0 0 0.2em var(--petrol-400);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.lg-word { display: inline-flex; align-items: center; gap: 0.12em; font-family: var(--font-display); font-size: 1.3em; font-weight: 500; }
.lg-word svg { width: 0.72em; height: 0.72em; color: #e3a766; }
.lg-mark { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 999px; box-shadow: inset 0 0 0 0.12em #f1e6d6; }
.lg-mark svg { width: 1.45em; height: 1.45em; color: #e3a766; }
.lg-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.7em;
  height: 3.7em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.1em #f1e6d6, 0 0 0 0.2em #1d1512, 0 0 0 0.28em rgba(241, 230, 214, 0.55);
}
.lg-badge b { font-family: var(--font-display); font-size: 0.95em; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.lg-badge small { font-size: 0.42em; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.8; }
.lg2::after { opacity: 1; }
.lg1, .lg3 { opacity: 0.55; }
.sc-logo:not(.s4) .lg2::after { opacity: 0; }
.sc-logo:not(.s4) .lg1, .sc-logo:not(.s4) .lg3 { opacity: 1; }
.sc-logo:not(.s1) .lg1, .sc-logo:not(.s2) .lg2, .sc-logo:not(.s3) .lg3 { opacity: 0; transform: scale(0.8) translateY(0.6em); }
.lg-kept {
  position: absolute;
  left: 50%;
  bottom: 2.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0.85em;
  border-radius: 9em;
  background: var(--petrol-700);
  color: #fff;
  font-size: 0.7em;
  font-weight: 800;
  transform: translateX(-50%);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--spring);
}
.lg-kept svg { width: 1.15em; height: 1.15em; }
.sc-logo:not(.s4) .lg-kept { opacity: 0; transform: translate(-50%, 0.5em); }

/* Languages ------------------------------------------------------------- */
.ln-page {
  position: absolute;
  inset: 1.4em 1.4em;
  overflow: hidden;
  border-radius: 0.9em;
  background:
    linear-gradient(180deg, rgba(20, 12, 9, 0.62), rgba(20, 12, 9, 0.82)),
    url(../img/screenshot-noir-home.jpg) 100% 60% / 330% auto;
  box-shadow: 0 1em 2em -1.1em rgba(2, 40, 45, 0.5);
  color: #f6eee6;
}
.ln-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.8em 0.95em; }
.ln-bar b { font-family: var(--font-display); font-size: 1em; font-weight: 500; letter-spacing: 0.04em; }
.ln-btn { display: inline-flex; align-items: center; gap: 0.3em; width: 3.6em; height: 1.8em; padding: 0 0.45em; border-radius: 9em; box-shadow: inset 0 0 0 1px rgba(246, 238, 230, 0.4); }
.ln-btn svg { width: 1em; height: 1em; }
.ln-stack { position: absolute; inset: 0; }
.ln-l { position: absolute; inset: 0; opacity: 0; }
.ln-l:first-child { opacity: 1; }
/* Each code stands in its language's own layer, over the button, centred in
   the 1.4em the button leaves beside its globe (3.6em less 0.45em of padding
   each side, the 1em globe and the 0.3em gap). Written in the bar's em, hence
   the / 0.72; the indent balances the spacing after the last letter. */
.ln-code { position: absolute; top: 1.72em; right: calc(1.4em / 0.72); width: calc(1.4em / 0.72); font-size: 0.72em; font-weight: 800; letter-spacing: 0.06em; line-height: 1.2; text-align: center; text-indent: 0.06em; }
.ln-h {
  position: absolute;
  left: 0.95em;
  right: 0.95em;
  top: 3.6em;
  font-family: var(--font-display);
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.2;
}
.ln-cta {
  position: absolute;
  left: 1.2em;
  bottom: 1.1em;
  padding: 0.45em 1em;
  border-radius: 9em;
  background: #f6eee6;
  color: #1d1512;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Seven languages, two seconds each, only while the tile is on screen. */
.sc-lang.play .ln-l { animation: lang 14s var(--ease) infinite both; }
.sc-lang.play .ln-l:nth-child(2) { animation-delay: 2s; }
.sc-lang.play .ln-l:nth-child(3) { animation-delay: 4s; }
.sc-lang.play .ln-l:nth-child(4) { animation-delay: 6s; }
.sc-lang.play .ln-l:nth-child(5) { animation-delay: 8s; }
.sc-lang.play .ln-l:nth-child(6) { animation-delay: 10s; }
.sc-lang.play .ln-l:nth-child(7) { animation-delay: 12s; }
@keyframes lang {
  0% { opacity: 0; transform: translateY(0.5em); }
  3%, 12% { opacity: 1; transform: none; }
  15%, 100% { opacity: 0; transform: translateY(-0.4em); }
}

/* Google and AI --------------------------------------------------------- */
.seo { position: absolute; inset: 1.5em 1.4em; display: flex; flex-direction: column; gap: 0.65em; padding: 1em; }
.seo-h { font-size: 0.8em; font-weight: 800; color: #1c1917; }
.seo-row { display: flex; align-items: center; gap: 0.6em; font-size: 0.76em; font-weight: 600; color: #292524; }
.sw { position: relative; flex: none; width: 2.4em; height: 1.35em; border-radius: 9em; background: #d6d3d1; }
.sw::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--petrol-600); transition: opacity 0.3s var(--ease); }
.sw::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0.17em;
  left: 0.17em;
  width: 1.01em;
  height: 1.01em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.3);
  transform: translateX(1.05em);
  transition: transform 0.35s var(--spring);
}
.sc-seo:not(.s1) .r1 .sw::after, .sc-seo:not(.s2) .r2 .sw::after, .sc-seo:not(.s3) .r3 .sw::after { opacity: 0; }
.sc-seo:not(.s1) .r1 .sw::before, .sc-seo:not(.s2) .r2 .sw::before, .sc-seo:not(.s3) .r3 .sw::before { transform: none; }
.seo-go { display: grid; place-items: center; height: 2.4em; margin-top: auto; border-radius: 0.6em; background: var(--petrol-700); color: #fff; font-size: 0.78em; font-weight: 800; transition: opacity 0.3s var(--ease); }
.sc-seo:not(.s3) .seo-go { opacity: 0.45; }
.sc-seo.play.s4 .seo-go::after { animation: pressring 0.8s var(--ease) both; }

/* See how it is doing ---------------------------------------------------
   The app's Analytics screen over a week, drawn as the app draws it (owner,
   9 October 2026: "build a", off a canvas of three). Every figure is a tile
   with its own chart (`glance.tsx`'s ChartTile), and each of a card's rows
   carries its bar under the name (its BarListCard, since that evening). The
   chart is `day-chart.tsx`'s: each bar 62% of
   its day, square at its foot, in one flat petrol; the busiest day's figure
   over the hairline its bar reaches, so no axis of figures runs up the side;
   the days under the rule. Until then the drawing was four bare figures over
   one unnamed chart with no days under it, which the app has never shown.
   Laid out at 40em, which is 640px at 1440, so a pixel of that canvas is a
   sixteenth of an em here. */
.stx {
  position: absolute;
  inset: 1.25em 1.375em;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.625em;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.st-t, .st-l {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 0.8em 1.6em -1em rgba(2, 40, 45, 0.35);
}
.st-t { padding: 0.6875em 0.8125em 0.5625em; }
.st-t > small { font-size: 0.6875em; line-height: 1.27; font-weight: 600; color: #57534e; }
.st-t > b { margin-top: 0.09em; font-size: 1.375em; line-height: 1.18; font-weight: 700; letter-spacing: -0.02em; color: #1c1917; }
/* The chart stands at the tile's foot, and never closer than half an em to its figure. */
.st-c { margin-top: auto; padding-top: 0.5em; }
.st-plot { position: relative; height: 3.875em; border-bottom: 1px solid #d6d3d1; }
.st-plot::before { content: ""; position: absolute; left: 0; right: 0; top: 0.75em; height: 1px; background: #e7e5e4; }
.st-plot > em {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  font-size: 0.594em;
  line-height: 1.16;
  color: #78716c;
  font-variant-numeric: tabular-nums;
}
.st-bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.75em;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.st-bars i {
  width: 8.857%; /* 62% of a seventh, centred in its day by space-around */
  height: calc(var(--h) * 100%);
  border-radius: 0.1875em 0.1875em 0 0;
  background: var(--petrol-600);
  transform-origin: bottom center;
}
/* Sunday is today, still going, and the app draws the day still going at a
   little under half its strength so it never reads as a quiet day
   (`CHART_BAR_GOING`, 9 October 2026). */
.st-bars i:last-child { opacity: 0.45; }
.st-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 0.25em; }
.st-days i { font-style: normal; text-align: center; font-size: 0.594em; line-height: 1.16; color: #78716c; }
.st-l { padding: 0.6875em 0.75em 0.625em; }
.st-l > b { font-size: 0.75em; line-height: 1.25; font-weight: 700; color: #1c1917; }
/* A card's row, as the app's list cards draw one since the evening of 9
   October 2026: the name and its figure on a line, and under them a thin bar
   on a track the row's width. It was a wash behind the name until then, which
   the app dropped because it read as a button and cut a long name in two. */
.st-r {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.375em;
  padding-bottom: 0.375em;
}
.st-l > b + .st-r { margin-top: 0.5em; }
.st-r + .st-r { margin-top: 0.4375em; }
/* The bar: the row's share of the first row, run out from its left end (s3). */
.st-r::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.1875em;
  width: calc(var(--w) * 100%);
  border-radius: 999px;
  background: var(--petrol-600);
  transform-origin: left center;
}
/* Its track, the row's whole width, behind the bar. */
.st-r::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1875em;
  border-radius: 999px;
  background: #e7e5e4;
}
.st-r > span, .st-r > em { position: relative; font-size: 0.656em; line-height: 1.24; }
.st-r > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #292524; }
.st-r > em { flex-shrink: 0; font-style: normal; font-weight: 700; color: #1c1917; font-variant-numeric: tabular-nums; }

/* The story: the figures count up (s1); each tile's bars stand up left to
   right, one tile after the next, its busiest day's figure and hairline
   arriving with them (s2), as the app's room sweeps them in; the cards' rows
   run out one after another (s3). Before the loop starts again the bars and
   the rows' bars fade, so they are never seen snapping back. */
.stx > :nth-child(2) { --t: 1; }
.stx > :nth-child(4) { --t: 2; }
.stx > :nth-child(5) { --t: 3; }
.stx > :nth-child(6) { --l: 1; }
.st-bars i:nth-child(2) { --n: 1; }
.st-bars i:nth-child(3) { --n: 2; }
.st-bars i:nth-child(4) { --n: 3; }
.st-bars i:nth-child(5) { --n: 4; }
.st-bars i:nth-child(6) { --n: 5; }
.st-bars i:nth-child(7) { --n: 6; }
.st-l > :nth-child(3) { --r: 1; }
.st-l > :nth-child(4) { --r: 2; }
.st-l > :nth-child(5) { --r: 3; }
.st-bars { transition: opacity 0.45s var(--ease); }
.st-bars i { transition: transform 0.7s var(--ease-out) calc(var(--t, 0) * 90ms + var(--n, 0) * 40ms); }
.st-plot::before, .st-plot > em { transition: opacity 0.45s var(--ease) calc(var(--t, 0) * 90ms); }
.st-r::before {
  transition:
    transform 0.8s var(--ease-out) calc(var(--l, 0) * 160ms + var(--r, 0) * 90ms),
    opacity 0.45s var(--ease);
}
.sc-stats:not(.s2) .st-bars i { transform: scaleY(0.04); }
.sc-stats:not(.s2) .st-plot::before, .sc-stats:not(.s2) .st-plot > em { opacity: 0; }
.sc-stats:not(.s3) .st-r::before { transform: scaleX(0); }
.sc-stats.rewind .st-bars,
.sc-stats.rewind .st-plot::before,
.sc-stats.rewind .st-plot > em,
.sc-stats.rewind .st-r::before { opacity: 0; }

/* Web address ----------------------------------------------------------- */
.dom { position: absolute; inset: 1.5em 1.4em; display: flex; flex-direction: column; gap: 0.7em; padding: 1em; }
.dom-url {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 2.3em;
  padding: 0 0.8em;
  border-radius: 9em;
  background: #f5f5f4;
  box-shadow: inset 0 0 0 1px #e7e5e4;
  font-size: 0.8em;
  font-weight: 600;
  color: #1c1917;
  white-space: nowrap;
  overflow: hidden;
}
.dom-lock { flex: none; width: 1.1em; height: 1.1em; color: var(--good); transition: opacity 0.35s var(--ease); }
.sc-dom:not(.s3) .dom-lock { opacity: 0.25; }
.dom-row { display: flex; align-items: center; gap: 0.45em; font-size: 0.76em; font-weight: 700; color: #292524; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out); }
.dom-row svg { width: 1.3em; height: 1.3em; padding: 0.22em; border-radius: 999px; background: #e6f7ef; color: var(--good); }
.sc-dom:not(.s2) .d1, .sc-dom:not(.s3) .d2, .sc-dom:not(.s4) .d3 { opacity: 0; transform: translateX(-0.5em); }
.dom-reg { margin-top: auto; padding-top: 0.6em; border-top: 1px solid #f0efed; font-size: 0.66em; line-height: 1.4; color: #78716c; }

/* Dark. What is the restaurant's stays as it is: the page the photos land on
   and its empty spots, the logos on their own grounds, Noir in seven
   languages. What is the app's takes its dark: the tray of photos, the two
   cards about getting found, and the Analytics tiles and lists as
   analytics-chrome.ts draws them (bars petrol-500, the chart's rule
   stone-700, a list's track stone-800, its words stone-200). */
@media screen {
  :where(.dark) .tile-art {
    background:
      radial-gradient(110% 80% at 100% 0%, rgba(4, 129, 142, 0.22), rgba(4, 129, 142, 0) 60%),
      linear-gradient(165deg, #0f1617, #0d0d0d);
  }
  :where(.dark) .card-ui, :where(.dark) .ph-tray, :where(.dark) .st-t, :where(.dark) .st-l {
    background: #111111;
    box-shadow: 0 0 0 1px #292524, 0 1em 2em -1.1em rgba(0, 0, 0, 0.8);
  }
  :where(.dark) .ph-tl, :where(.dark) .seo-h, :where(.dark) .st-t > b, :where(.dark) .st-l > b { color: #f5f5f4; }
  :where(.dark) .ph-tl svg { color: var(--petrol-300); }
  :where(.dark) .seo-row, :where(.dark) .dom-row, :where(.dark) .st-r > span, :where(.dark) .st-r > em { color: #e7e5e4; }
  :where(.dark) .sw { background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); }
  :where(.dark) .st-t > small, :where(.dark) .st-plot > em, :where(.dark) .st-days i { color: #a8a29e; }
  :where(.dark) .st-plot { border-bottom-color: #44403c; }
  :where(.dark) .st-plot::before { background: #292524; }
  :where(.dark) .st-bars i, :where(.dark) .st-r::before { background: var(--petrol-500); }
  :where(.dark) .st-r::after { background: #292524; }
  :where(.dark) .dom-url { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px #44403c; color: #f5f5f4; }
  :where(.dark) .dom-lock { color: #34d399; }
  :where(.dark) .dom-row svg { background: rgba(6, 78, 59, 0.5); color: #6ee7b7; }
  :where(.dark) .dom-reg { border-top-color: #292524; color: #a8a29e; }
}

/* --------------------------------------------------------------------------
   Made for owners: the words we use instead
   -------------------------------------------------------------------------- */

.jar {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.jar-h { margin-bottom: 1.1rem; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.jar-row { display: grid; gap: 0.2rem; padding: 0.9rem 0; border-top: 1px solid var(--line-soft); perspective: 600px; }
.jar-row s { position: relative; justify-self: start; text-decoration: none; font-size: var(--t-small); color: var(--ink-3); }
.jar-row s::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 55%;
  height: 2px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.jar-to {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  transform-origin: 50% 0%;
  transition: opacity 0.45s var(--ease) 0.2s, transform 0.6s var(--spring) 0.2s;
}
.sc-jar:not(.s1) .j1 s::after, .sc-jar:not(.s2) .j2 s::after, .sc-jar:not(.s3) .j3 s::after, .sc-jar:not(.s4) .j4 s::after { transform: scaleX(0); }
.sc-jar:not(.s1) .j1 .jar-to, .sc-jar:not(.s2) .j2 .jar-to, .sc-jar:not(.s3) .j3 .jar-to, .sc-jar:not(.s4) .j4 .jar-to { opacity: 0; transform: rotateX(-65deg) translateY(0.3em); transition-delay: 0s; }
/* ==========================================================================
   5. The other pages: features, reservations, ordering
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page heads
   -------------------------------------------------------------------------- */

.page-head { position: relative; padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem) clamp(2rem, 1.25rem + 2.5vw, 3rem); overflow: clip; }
/* The heading opens the head: the badge it once stood under is gone
   (2026-10-01), and so is the 1.1rem that made room for it. */
.page-head h1 { margin-block: 0 1.3rem; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); }
.page-head .lead { max-width: 48ch; }
.page-head .btn-row { margin-top: 2rem; }
.page-head-center .wrap { text-align: center; }
.page-head-center h1 { max-width: 19ch; margin-inline: auto; }
.page-head-center .lead { margin-inline: auto; }
.page-head-center .btn-row { justify-content: center; }
/* A page head that opens straight onto a picture keeps less air under it. */
.page-head-tight { padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* The questions page's six topics, as tiles, in one row where they fit. */
.jump {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 62rem;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
}
.jump a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 1.05rem 0.6rem 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.jump a:hover { color: var(--petrol-800); background: #fff; box-shadow: inset 0 0 0 1.5px var(--petrol-300), var(--sh-1); }
.jump .pi {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--petrol-50), var(--petrol-100));
  box-shadow: inset 0 0 0 1px var(--petrol-200);
  color: var(--petrol-700);
}
.jump .pi svg { width: 22px; height: 22px; }

@media screen {
  :where(.dark) .jump a { background: var(--paper); }
  :where(.dark) .jump a:hover { color: var(--petrol-200); background: #161616; box-shadow: inset 0 0 0 1.5px var(--petrol-400), var(--sh-1); }
  :where(.dark) .jump .pi {
    background: linear-gradient(160deg, rgba(4, 85, 94, 0.45), rgba(0, 40, 45, 0.7));
    box-shadow: inset 0 0 0 1px var(--petrol-800);
    color: var(--petrol-200);
  }
}

/* --------------------------------------------------------------------------
   Feature sections: a picture beside a few short lines
   -------------------------------------------------------------------------- */

.feature .lead { max-width: 40ch; }
.feature .feat-list { margin-top: 1.75rem; }
.feature h2 + .lead { margin-top: 1rem; }

/* The panel a tile's drawing sits on when it is not in the tile grid. */
.art-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(184, 231, 238, 0.55), rgba(184, 231, 238, 0) 60%),
    linear-gradient(165deg, #f3fafb, #f5f3ee);
  box-shadow: inset 0 0 0 1px var(--line);
}
.band .art-panel, .band-deep .art-panel { background: radial-gradient(110% 80% at 100% 0%, rgba(184, 231, 238, 0.6), rgba(184, 231, 238, 0) 60%), #fff; }
.art-panel > .tile-art { background: none; }
.art-wide .tile-art { aspect-ratio: 40 / 22; }
.art-single { max-width: 34rem; width: 100%; justify-self: center; }
.art-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.art-pair { position: relative; padding-bottom: 3.5rem; }
.art-float {
  position: absolute;
  right: -0.75rem;
  bottom: 0;
  width: 44%;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.art-float .tile-art { aspect-ratio: 5 / 3.6; }
.art-float .lg { padding-bottom: 2.2em; }
.art-float .lg-kept { bottom: 1.1em; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }

/* Dark: a picture's panel keeps its petrol corner, deep rather than pale. */
@media screen {
  :where(.dark) .art-panel {
    background:
      radial-gradient(110% 80% at 100% 0%, rgba(4, 129, 142, 0.22), rgba(4, 129, 142, 0) 60%),
      linear-gradient(165deg, #0f1617, #0d0d0d);
  }
  :where(.dark) .band .art-panel, :where(.dark) .band-deep .art-panel {
    background: radial-gradient(110% 80% at 100% 0%, rgba(4, 129, 142, 0.22), rgba(4, 129, 142, 0) 60%), var(--paper);
  }
}

/* --------------------------------------------------------------------------
   Building: the rest of the site, and a page added by its name
   -------------------------------------------------------------------------- */

/* The builder again (see "The builder, drawn as the app draws it"), cut to
   what this story needs at 1280 by 792: the bar's tabs and the preview's
   device, "Your steps" on the left, and the page shown on the phone. 1280 is
   the narrowest width at which the app shows "The Main Course" beside its
   tile (the owner, 2026-10-17: "the main course logo should be shown in
   full"), with the brand's own column from that width; at 1056, where this
   was drawn until then, the name and the six tabs did not fit the bar. The
   height puts the foot of "Your steps" between two steps in every frame. */
.sc-pages > .ui-s { --ui-w: 80; height: 49.5em; }
.sc-pages .bb-brand { width: 14.25em; }

/* A page not built yet is a dashed tab, and turns into a built one where it
   stands: both are drawn in one cell, which takes the built one's width. */
.bp-t { display: inline-grid; flex: none; }
.bp-t > .bb-tab { grid-area: 1 / 1; transition: opacity 0.35s var(--ease); }
.bp-t > :first-child { opacity: 0; }

/* The page added by its name. Its width is stated because "+ Add a page"
   slides along by exactly that and the bar's gap (the story, below). It is
   "Kids menu" as DejaVu Sans draws it, 145px at the app's 19px: a wide face
   system-ui can be, so a narrower one leaves a little room either side. */
.bp-new { width: 7.6316em; transition: opacity 0.4s var(--ease) 0.15s; }
.bp-add { transition: transform 0.55s var(--spring); }

/* "Add a page", open under its tab (`add-page-popover.tsx`). */
.bp-pop {
  position: absolute;
  z-index: 3;
  top: calc(100% + 0.5em);
  left: -1px;
  display: flex;
  flex-direction: column;
  width: 17.5em;
  padding: 0.875em;
  border: 1px solid #b7b7b7;
  border-radius: 0.75em;
  background: #fff;
  box-shadow: 0 1.25em 1.5625em -0.3125em rgba(0, 0, 0, 0.1), 0 0.5em 0.625em -0.375em rgba(0, 0, 0, 0.1);
  font-size: 0.8421em;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  color: #1c1917;
  transform-origin: 0 0;
}
.bp-pop > b { margin-bottom: 0.381em; padding-right: 1.3333em; font-size: 1.3125em; font-weight: 600; line-height: 1.5; }
.bp-px { position: absolute; top: 0.5625em; right: 0.5em; display: grid; place-items: center; width: 1.75em; height: 1.75em; color: #78716c; }
.bp-px svg { width: 1.125em; height: 1.125em; }
.bp-form { display: flex; gap: 0.5em; }
.bp-in { position: relative; flex: 1; min-width: 0; height: 2.625em; border: 1px solid #b7b7b7; border-radius: 0.5em; box-shadow: 0 0 0 1px #289aa7; }
.bp-ph, .bp-tx { position: absolute; left: 0.5263em; right: 0.5263em; top: 50%; overflow: hidden; font-size: 1.1875em; line-height: 1.5; white-space: nowrap; transform: translateY(-50%); }
.bp-ph { color: #78716c; }
.bp-tx .typed { white-space: nowrap; }
.bp-ok {
  display: grid;
  place-items: center;
  flex: none;
  height: 2.2105em;
  padding: 0 0.6316em;
  border: 1px solid transparent;
  border-radius: 0.4211em;
  background: var(--petrol-700);
  font-size: 1.1875em;
  font-weight: 600;
  color: #fff;
  transition: opacity 0.3s var(--ease) 0.35s;
}
.bp-pop > small { margin-top: 0.6842em; font-size: 1.1875em; font-weight: 500; line-height: 1.5; color: #78716c; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 0.375em; margin-top: 0.4375em; }
.bp-chips > span { display: grid; place-items: center; height: 2em; padding: 0 0.5263em; border: 1px solid #b7b7b7; border-radius: 999px; font-size: 1.1875em; color: #57534e; }

/* Your steps: each row's place is stated, so the step that finishes and the
   one that becomes "You are here" can trade places by transform alone. The
   line through the marks is one grey line with the done part laid over it in
   petrol, reaching down to the step in hand (`RowSpine`). */
.bp-list { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.bp-hl { position: absolute; left: 1em; right: 1em; border: 1px solid #d9f3f7; border-radius: 0.75em; background: #edfafc; transition: opacity 0.4s var(--ease), transform 0.55s var(--spring); }
.bp-hl1 { top: 7.25em; height: 7.125em; opacity: 0; }
.bp-hl2 { top: 10.5em; height: 10.25em; }
.bp-line { position: absolute; top: 2.1875em; left: 2.25em; width: 2px; height: 30em; background: #e5e5e5; }
.bp-line i { display: block; height: 9.75em; background: #04818e; transform-origin: 50% 0; transition: transform 0.7s var(--ease) 0.2s; }
.bp-row {
  position: absolute;
  left: 1em;
  right: 1em;
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  height: 3.125em;
  padding: 0.6875em 0.6875em 0;
  transition: transform 0.55s var(--spring);
}
.bp-r1 { top: 0.75em; }
.bp-r2 { top: 4em; }
.bp-r3 { top: 7.25em; }
.bp-r4 { top: 10.5em; }
.bp-r5 { top: 20.875em; }
.bp-r6 { top: 24.125em; }
.bp-r7 { top: 27.375em; }
.bp-r8 { top: 30.625em; }
.bp-mk { position: relative; z-index: 1; display: grid; flex: none; width: 1.25em; height: 1.25em; margin-top: 0.125em; }
.bp-mk > i { grid-area: 1 / 1; display: grid; place-items: center; border-radius: 999px; transition: opacity 0.35s var(--ease); }
.bp-mk .dn { background: #04818e; color: #fff; }
.bp-mk .dn svg { width: 0.6875em; height: 0.6875em; }
.bp-mk .cu { background: #fff; box-shadow: inset 0 0 0 2px #04818e; }
.bp-mk .cu::after { content: ""; width: 0.5em; height: 0.5em; border-radius: 999px; background: #04818e; }
.bp-mk .td { background: #fff; }
.bp-mk .td::after { content: ""; width: 0.625em; height: 0.625em; border-radius: 999px; box-shadow: inset 0 0 0 1px #a3a3a3; }
.bp-l { display: grid; min-width: 0; font-size: 1.1875em; line-height: 1.4737; white-space: nowrap; color: #737373; }
.bp-l > * { grid-area: 1 / 1; transition: opacity 0.35s var(--ease); }
.bp-l > b { font-weight: 600; color: #171717; }
.bp-r3 .cu, .bp-r3 .bp-l > b, .bp-r4 .td, .bp-r4 .bp-l > span { opacity: 0; }
/* The step's button, and under the next step its button and its decline. */
.bp-go, .bp-no {
  position: absolute;
  left: 3.1053em;
  right: 1.4211em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3158em;
  height: 2.3158em;
  font-size: 1.1875em;
  line-height: 1.4737;
  white-space: nowrap;
  transition: opacity 0.35s var(--ease);
}
.bp-go { border: 1px solid transparent; border-radius: 0.6316em; background: var(--petrol-700); box-shadow: 0 1px 2px rgba(2, 68, 75, 0.2); font-weight: 600; color: #fff; }
.bp-go svg { width: 0.7368em; height: 0.7368em; }
.bp-go1 { top: 9.1053em; opacity: 0; }
.bp-go2 { top: 11.8421em; transition-delay: 0.25s; }
.bp-no { top: 14.4737em; font-weight: 500; color: #737373; text-decoration: underline; text-decoration-color: #d4d4d4; text-underline-offset: 0.2105em; transition-delay: 0.3s; }

/* The page, on the phone: the device's top with its address, and the screen
   under it, standing on the stage's grey. */
.bp-view { background: radial-gradient(ellipse 72% 58% at 50% 42%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%), #e7e5e4; }
.bp-cap {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  width: 21.4375em;
  height: 7em;
  padding: 0.4375em 0.75em 0;
  border-radius: 1.75em 1.75em 0 0;
  background: #fafaf9;
  transform: translateX(-50%);
}
.bp-cap .bb-addr { padding: 0 0.875em; }
.bp-count { display: grid; place-items: center; flex: none; width: 1.875em; height: 1.875em; }
.bp-count b { display: grid; place-items: center; width: 1.2632em; height: 1.2632em; border: 2px solid #a3a3a3; border-radius: 0.3158em; font-size: 1.1875em; font-weight: 600; line-height: 1; color: #a3a3a3; }
.bp-screen {
  position: absolute;
  top: 3.5em;
  bottom: 0.5em;
  left: 50%;
  width: 21.4375em;
  overflow: hidden;
  border-radius: 1.75em;
  background: #fff;
  box-shadow: 0 1px 1px rgba(28, 25, 23, 0.05), 0 0.25em 0.75em rgba(28, 25, 23, 0.06);
  transform: translateX(-50%);
}
.bp-screen img { display: block; width: 100%; height: auto; }

/* What the pages are doing while they are built: a card over the page, one
   row a page with its own words and its own bar (`buildingOtherPages`). The
   app turns a ring beside the heading and pulses the dot of a page being
   written; here the words say it and the dot stands still. */
.bp-card {
  position: absolute;
  z-index: 2;
  top: 4em;
  left: 1em;
  right: 1em;
  display: flex;
  flex-direction: column;
  max-width: 42em; /* the app's `max-w-2xl`, centred over the stage */
  margin-inline: auto;
  padding: 1.25em 1.5em;
  border: 1px solid #b7b7b7;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.625em 0.9375em -0.1875em rgba(0, 0, 0, 0.1), 0 0.25em 0.375em -0.25em rgba(0, 0, 0, 0.1);
}
.bp-ch { margin-bottom: 0.6667em; font-size: 1.3125em; font-weight: 500; line-height: 1.375; white-space: nowrap; color: #1c1917; }
.bp-ch .bb-sw > span { opacity: 0; }
.bp-pg { display: grid; grid-template-columns: 1em minmax(0, 1fr) auto; align-items: center; column-gap: 0.625em; }
.bp-pg + .bp-pg { margin-top: 0.5em; }
.bp-pm { display: grid; place-items: center; width: 1em; height: 1em; }
.bp-pm > i { grid-area: 1 / 1; border-radius: 999px; transition: opacity 0.3s var(--ease); }
.bp-pm > i:first-child { width: 0.5em; height: 0.5em; background: var(--petrol-700); opacity: 0; }
.bp-pm > .ok { display: grid; place-items: center; width: 1em; height: 1em; background: #10b981; color: #fff; }
.bp-pm > .ok svg { width: 0.625em; height: 0.625em; }
.bp-pn { overflow: hidden; font-size: 1.25em; font-weight: 500; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; color: #292524; }
.bp-ps { display: grid; justify-items: end; font-size: 1.1875em; line-height: 1.4737; white-space: nowrap; color: #78716c; }
.bp-ps > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s var(--ease); }
.bp-ps > .d { opacity: 1; }
.bp-ps em { margin-right: 0.5263em; font-style: normal; font-weight: 500; color: #04818e; }
.bp-bar { grid-column: 1 / -1; height: 0.375em; margin-top: 0.375em; overflow: hidden; border-radius: 999px; background: #e7e5e4; }
.bp-bar > i { position: relative; display: block; height: 100%; background: var(--petrol-700); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(0.3, 0.7, 0.4, 1); }
.bp-bar > i::after { content: ""; position: absolute; inset: 0; background: #10b981; transition: opacity 0.3s var(--ease); }

/* The story: "Add my other pages" pressed (s1); the three pages written,
   Menu first (s2 to s5), each tab turning into a built one as its page is
   done, and the step finished, "You are here" moving on to Reservations;
   "Add a page" opened (s6), "Kids menu" typed (s7) and added (s8). Each rule
   says what a part looks like before its step, and the rewind takes the same
   rules back to the start before the story plays again. */
.sc-pages.play.s1 .bp-go1::after { animation: pressring 0.7s var(--ease) both; }
.sc-pages:not(.s5) .bp-go1, .sc-pages.rewind .bp-go1 { opacity: 1; }
.sc-pages.s2:not(.s5) .bp-go1 { opacity: 0.4; }
.sc-pages:not(.s5) .bp-go2, .sc-pages:not(.s5) .bp-no, .sc-pages.rewind .bp-go2, .sc-pages.rewind .bp-no { opacity: 0; transition-delay: 0s; }
.sc-pages:not(.s5) .bp-hl1, .sc-pages.rewind .bp-hl1 { opacity: 1; }
.sc-pages:not(.s5) .bp-hl2, .sc-pages.rewind .bp-hl2 { opacity: 0; transform: translateY(-3.25em); }
.sc-pages:not(.s5) .bp-line i, .sc-pages.rewind .bp-line i { transform: scaleY(0.6667); }
.sc-pages:not(.s5) .bp-r3 .cu, .sc-pages:not(.s5) .bp-r3 .bp-l > b, .sc-pages:not(.s5) .bp-r4 .td, .sc-pages:not(.s5) .bp-r4 .bp-l > span,
.sc-pages.rewind .bp-r3 .cu, .sc-pages.rewind .bp-r3 .bp-l > b, .sc-pages.rewind .bp-r4 .td, .sc-pages.rewind .bp-r4 .bp-l > span { opacity: 1; }
.sc-pages:not(.s5) .bp-r3 .dn, .sc-pages:not(.s5) .bp-r3 .bp-l > span, .sc-pages:not(.s5) .bp-r4 .cu, .sc-pages:not(.s5) .bp-r4 .bp-l > b,
.sc-pages.rewind .bp-r3 .dn, .sc-pages.rewind .bp-r3 .bp-l > span, .sc-pages.rewind .bp-r4 .cu, .sc-pages.rewind .bp-r4 .bp-l > b { opacity: 0; }
.sc-pages:not(.s5) .bp-r4, .sc-pages.rewind .bp-r4 { transform: translateY(4em); }
.sc-pages:not(.s5) .bp-r5, .sc-pages:not(.s5) .bp-r6, .sc-pages:not(.s5) .bp-r7, .sc-pages:not(.s5) .bp-r8,
.sc-pages.rewind .bp-r5, .sc-pages.rewind .bp-r6, .sc-pages.rewind .bp-r7, .sc-pages.rewind .bp-r8 { transform: translateY(-3.125em); }
.sc-pages .bb-read .u0 { opacity: 0; }
.sc-pages.s5 .bb-read .u1 { transition-delay: 0.25s; }
.sc-pages.rewind .bb-read .u1 { transition-delay: 0s; }
.sc-pages.rewind .bb-read .u0 { transition-delay: 0.25s; }
.sc-pages:not(.s5) .bb-read .u0, .sc-pages.rewind .bb-read .u0 { opacity: 1; }
.sc-pages:not(.s5) .bb-read .u1, .sc-pages.rewind .bb-read .u1 { opacity: 0; }

.sc-pages .bp-card { transition: opacity 0.35s var(--ease), transform 0.45s var(--spring); }
.sc-pages:not(.s2) .bp-card, .sc-pages.s6 .bp-card { opacity: 0; transform: translateY(-0.5em); }
.sc-pages:not(.s3) .bp-ch .c0, .sc-pages.s3:not(.s4) .bp-ch .c1, .sc-pages.s4:not(.s5) .bp-ch .c2, .sc-pages.s5 .bp-ch .c3 { opacity: 1; transition-delay: 0.2s; }
.sc-pages:not(.s3) .bp-p1 .w, .sc-pages:not(.s3) .bp-p2 .w, .sc-pages.s3:not(.s4) .bp-p2 .p,
.sc-pages:not(.s4) .bp-p3 .w, .sc-pages.s4:not(.s5) .bp-p3 .p { opacity: 1; }
.sc-pages:not(.s3) .bp-p1 .d, .sc-pages:not(.s4) .bp-p2 .d, .sc-pages:not(.s5) .bp-p3 .d { opacity: 0; }
.sc-pages:not(.s3) .bp-p1 .bp-pm > i:first-child, .sc-pages:not(.s4) .bp-p2 .bp-pm > i:first-child, .sc-pages:not(.s5) .bp-p3 .bp-pm > i:first-child { opacity: 1; }
.sc-pages:not(.s3) .bp-p1 .ok, .sc-pages:not(.s4) .bp-p2 .ok, .sc-pages:not(.s5) .bp-p3 .ok,
.sc-pages:not(.s3) .bp-p1 .bp-bar > i::after, .sc-pages:not(.s4) .bp-p2 .bp-bar > i::after, .sc-pages:not(.s5) .bp-p3 .bp-bar > i::after { opacity: 0; }
.sc-pages:not(.s2) .bp-bar > i { transform: scaleX(0.02); }
.sc-pages.s2:not(.s3) .bp-p1 .bp-bar > i { transform: scaleX(0.38); }
.sc-pages.s2:not(.s3) .bp-p2 .bp-bar > i { transform: scaleX(0.26); }
.sc-pages.s3:not(.s4) .bp-p2 .bp-bar > i { transform: scaleX(0.55); }
.sc-pages.s2:not(.s3) .bp-p3 .bp-bar > i { transform: scaleX(0.12); }
.sc-pages.s3:not(.s4) .bp-p3 .bp-bar > i { transform: scaleX(0.5); }
.sc-pages.s4:not(.s5) .bp-p3 .bp-bar > i { transform: scaleX(0.62); }

.sc-pages:not(.s3) .bp-t1 > :first-child, .sc-pages:not(.s4) .bp-t2 > :first-child, .sc-pages:not(.s5) .bp-t3 > :first-child, .sc-pages.rewind .bp-t > :first-child { opacity: 1; }
.sc-pages:not(.s3) .bp-t1 > :last-child, .sc-pages:not(.s4) .bp-t2 > :last-child, .sc-pages:not(.s5) .bp-t3 > :last-child, .sc-pages.rewind .bp-t > :last-child { opacity: 0; }

.sc-pages.play.s6 .bp-add::after { animation: pressring 0.7s var(--ease) both; }
.sc-pages .bp-pop { transition: opacity 0.3s var(--ease) 0.15s, transform 0.4s var(--spring) 0.15s; }
.sc-pages.s8 .bp-pop { transition-delay: 0.3s; }
.sc-pages:not(.s6) .bp-pop, .sc-pages.s8 .bp-pop { opacity: 0; transform: translateY(-0.375em) scale(0.98); }
.sc-pages:not(.s7) .bp-tx, .sc-pages.s7 .bp-ph { opacity: 0; }
.sc-pages:not(.s7) .bp-ok { opacity: 0.4; transition-delay: 0s; }
.sc-pages.play.s8 .bp-ok::after { animation: pressring 0.7s var(--ease) both; }
.sc-pages.s8 .bp-add { transition-delay: 0.3s; }
.sc-pages.s8 .bp-new { transition-delay: 0.45s; }
.sc-pages:not(.s8) .bp-new, .sc-pages.rewind .bp-new { opacity: 0; transition-delay: 0s; }
.sc-pages:not(.s8) .bp-add, .sc-pages.rewind .bp-add { transform: translateX(-7.9474em); }

/* Dark: the rail's steps as the builder draws them in dark (the line
   stone-700, its fill and a done dot petrol-400 with a dark tick, the step
   you are on petrol-950/40 inside petrol-900/60), the stage behind the phone
   #1c1c1c with no glow, the pop-up and the card the app's dark panel. The
   phone holds the restaurant's page and stays. The builder's own parts are
   in "The builder, drawn as the app draws it", above. */
@media screen {
  :where(.dark) .bp-pop { border-color: #44403c; background: #111111; color: #f5f5f4; }
  :where(.dark) .bp-px, :where(.dark) .bp-ph, :where(.dark) .bp-pop > small, :where(.dark) .bp-l, :where(.dark) .bp-ps { color: #a8a29e; }
  :where(.dark) .bp-in { border-color: #44403c; }
  :where(.dark) .bp-chips > span { border-color: #44403c; color: #d6d3d1; }
  :where(.dark) .bp-hl { border-color: rgba(2, 68, 75, 0.6); background: rgba(0, 40, 45, 0.4); }
  :where(.dark) .bp-line { background: #44403c; }
  :where(.dark) .bp-line i { background: var(--petrol-400); }
  :where(.dark) .bp-mk .dn { background: var(--petrol-400); color: #0c0a09; }
  :where(.dark) .bp-mk .cu { background: #1c1917; box-shadow: inset 0 0 0 2px var(--petrol-400); }
  :where(.dark) .bp-mk .cu::after { background: var(--petrol-400); }
  :where(.dark) .bp-mk .td { background: #111111; }
  :where(.dark) .bp-mk .td::after { box-shadow: inset 0 0 0 1px #78716c; }
  :where(.dark) .bp-l > b, :where(.dark) .bp-ch { color: #f5f5f4; }
  :where(.dark) .bp-no { color: #a8a29e; text-decoration-color: #57534e; }
  :where(.dark) .bp-view { background: #1c1c1c; }
  :where(.dark) .bp-cap { background: #111111; }
  :where(.dark) .bp-count b { border-color: #78716c; color: #a8a29e; }
  :where(.dark) .bp-card { border-color: #44403c; background: rgba(17, 17, 17, 0.95); }
  :where(.dark) .bp-pm > i:first-child { background: var(--petrol-400); }
  :where(.dark) .bp-pn { color: #e7e5e4; }
  :where(.dark) .bp-ps em { color: var(--petrol-300); }
  :where(.dark) .bp-bar { background: #292524; }
  :where(.dark) .bp-bar > i { background: var(--petrol-400); }
}

/* --------------------------------------------------------------------------
   The reservations and ordering pages: shared pieces
   -------------------------------------------------------------------------- */

.page-show { padding-block: clamp(2rem, 1.25rem + 3vw, 4rem); }
.art-phone { display: grid; place-items: center; }
.week-stage, .shop-stage { max-width: 1080px; margin-inline: auto; }
.points-center { justify-content: center; max-width: 60rem; margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) auto 0; }

/* --------------------------------------------------------------------------
   The Book a table button, opening the form over the page
   -------------------------------------------------------------------------- */

.bubs, .pays { position: relative; width: 100%; max-width: 27rem; aspect-ratio: 30 / 40; margin-inline: auto; }
.bubs > .ui-s, .pays > .ui-s { position: absolute; inset: 0; --ui-w: 30; }
.bub-phone, .pay-phone { position: absolute; left: 50%; top: 0; --pw: 18.5em; transform: translateX(-50%); }
.bub-pill {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 3%;
  display: inline-flex;
  align-items: center;
  gap: 2cqw;
  padding: 3.2cqw 4.8cqw;
  border-radius: 99px;
  background: #1c1917;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 4.3cqw;
  font-weight: 700;
  box-shadow: 0 3cqw 7cqw -2cqw rgba(0, 0, 0, 0.5);
  transition: opacity 0.4s var(--ease), transform 0.55s var(--spring);
}
.bub-pill svg { width: 4.6cqw; height: 4.6cqw; }
.sc-bub:not(.s1) .bub-pill { opacity: 0; transform: translateY(4cqw) scale(0.85); }
.bub-pill::after {
  content: "";
  position: absolute;
  inset: -2cqw;
  border-radius: inherit;
  box-shadow: 0 0 0 1.4cqw rgba(28, 25, 23, 0.3);
  opacity: 0;
}
.sc-bub.play.s2:not(.s3) .bub-pill::after { animation: pressring 0.8s var(--ease) both; }
.bub-sheet {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  border-radius: 7cqw 7cqw 0 0;
  background: #fff;
  box-shadow: 0 -4cqw 12cqw -4cqw rgba(0, 0, 0, 0.45);
  transition: transform 0.6s var(--ease-out);
}
.sc-bub:not(.s3) .bub-sheet { transform: translateY(104%); }
.bub { position: absolute; inset: 0; --ui-w: 20; padding: 0.7em 1.2em 1em; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #2a1f17; }
.bub-grab { display: block; width: 2.6em; height: 0.28em; margin: 0 auto 0.6em; border-radius: 9em; background: #cbc1b0; }
.bub-t { display: block; font-family: var(--font-display); font-size: 1.3em; font-weight: 600; }
.bub-form, .bub-done { position: absolute; left: 1.2em; right: 1.2em; top: 3.6em; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out); }
.bub-form { display: flex; flex-direction: column; gap: 0.45em; opacity: 0; transform: translateX(-1em); }
.sc-bub:not(.s5) .bub-form { opacity: 1; transform: none; }
.bub-l { margin-top: 0.35em; font-size: 0.68em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6e6761; }
.bub-chips { display: grid; gap: 0.35em; }
.bub-g { grid-template-columns: repeat(5, 1fr); }
.bub-tm { grid-template-columns: repeat(4, 1fr); }
.bub-chips i {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  height: 2.3em;
  border-radius: 0.55em;
  background: #f7f7f7;
  box-shadow: inset 0 0 0 1px #d5cbb8;
  font-style: normal;
  font-size: 0.86em;
  font-weight: 700;
  transition: color 0.3s var(--ease);
}
.bub-chips i::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #ad611c; opacity: 0; transition: opacity 0.3s var(--ease); }
.bub-chips .k-on { color: #fff; }
.bub-chips .k-on::before { opacity: 1; }
.sc-bub:not(.s4) .bub-chips .k-on { color: #2a1f17; }
.sc-bub:not(.s4) .bub-chips .k-on::before { opacity: 0; }
.bub-btn {
  display: grid;
  place-items: center;
  height: 2.8em;
  margin-top: 0.6em;
  border-radius: 9em;
  background: #ad611c;
  color: #fff;
  font-size: 0.9em;
  font-weight: 800;
  transition: opacity 0.3s var(--ease);
}
.sc-bub:not(.s4) .bub-btn { opacity: 0.45; }
.sc-bub.play.s5 .bub-btn::after { animation: pressring 0.7s var(--ease) both; }
.bub-done { display: flex; flex-direction: column; align-items: center; gap: 0.6em; padding-top: 0.6em; text-align: center; transition-delay: 0.3s; }
.sc-bub:not(.s5) .bub-done { opacity: 0; transform: translateX(1em); transition-delay: 0s; }
.bub-ok { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4em 0.9em; border-radius: 9em; background: #e6f7ef; color: var(--good); font-size: 0.8em; font-weight: 800; }
.bub-ok svg { width: 1.1em; height: 1.1em; }
.bub-done b { font-family: var(--font-display); font-size: 1.5em; font-weight: 600; }
.bub-done > span:last-child { font-size: 0.86em; line-height: 1.5; color: #6e6761; }
.bub-mail, .pay-note { position: absolute; z-index: 4; left: 50%; bottom: 0.4em; transform: translateX(-50%); }
.sc-bub .bub-mail, .sc-pay .pay-note { transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.sc-bub:not(.s6) .bub-mail, .sc-pay:not(.s3) .pay-note { opacity: 0; transform: translate3d(calc(-50% + 2em), 0, 0); }

/* --------------------------------------------------------------------------
   The week, one screen
   --------------------------------------------------------------------------
   A drawing of the app's reservation sheet as it is drawn from 1280px up
   (app/(protected)/builder/[projectId]/reservations: week-clock.tsx,
   service-counter.tsx and room.ts), laid out at a notional 1440px with one em
   for each of the app's rem. So every figure here is the app's own read
   straight across: its `h-14` is 3.5em, its `text-[1.1875rem]` is 1.1875em,
   and a box carrying words of its own size is that figure divided by it
   (the app's `h-11` on a 1.25em label is 2.2em). The inks are the app's light
   theme: Tailwind's stone and neutral, its `rule` hairline (#b7b7b7), petrol
   for tonight. Hairlines stay 1px at every size, the way a screen draws them.
   -------------------------------------------------------------------------- */

.sc-week .ui-s {
  --ui-w: 90;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  text-align: left;
  color: #171717;
}
.sc-week svg { display: block; flex: none; }

/* The app bar: white, the platform's lockup at the left, the account at the
   right, and nothing between them on this screen. */
.wk-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5em;
  padding: 0 1em;
  background: #fff;
  box-shadow: 0 0.0625em 0.1875em rgba(12, 10, 9, 0.08), 0 0.75em 1.75em -1.125em rgba(12, 10, 9, 0.2);
}
.wk-brand { display: flex; align-items: center; gap: 0.625em; }
.wk-brand > i {
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 0.5em;
  background: linear-gradient(to bottom right, var(--petrol-300), var(--petrol-600));
  color: var(--petrol-950);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0.0625em 0.125em rgba(0, 0, 0, 0.3);
}
.wk-brand > i svg { width: 1.0625em; height: 1.0625em; }
.wk-brand > span { font-size: 1.25em; line-height: 1.25; letter-spacing: -0.025em; white-space: nowrap; color: var(--petrol-600); }
.wk-brand b { font-weight: 600; color: #1c1917; }
.wk-brand b + b { color: var(--petrol-700); }
.wk-me {
  display: grid;
  place-items: center;
  width: 2.1053em;
  height: 2.1053em;
  border-radius: 999px;
  background: var(--petrol-700);
  color: #fff;
  font-size: 1.1875em;
  font-weight: 600;
  line-height: 1;
}

/* The console: the way back, the restaurant and tonight's guests on the head
   tier, the week's controls on the band under it, white over a hairline
   either side (`service-counter.tsx`, `room.ts`'s `CONSOLE_*`). Since the
   sheet's "A · Lighter" round (7 October 2026) the head tier says tonight's
   guests where tonight's date stood, and the band holds no figures: "This
   week", the arrows and the week's dates at the left, the door to what waits
   for an answer and "Add a reservation" at the right. */
.wk-console {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: inset 0 1px 0 #b7b7b7, 0 1px 0 #b7b7b7, 0 0.75em 1.75em -1.125em rgba(12, 10, 9, 0.2);
}
.wk-tier {
  display: flex;
  align-items: center;
  gap: 0.75em;
  height: calc(3.5em + 1px);
  padding: 0 1.5em;
  border-bottom: 1px solid #e7e5e4;
}
.wk-sq {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75em;
  height: 2.75em;
  border-radius: 0.75em;
  background: #fff;
  color: #292524;
  box-shadow: inset 0 0 0 1px #b7b7b7;
}
.wk-sq svg { width: 1.5em; height: 1.5em; }
.wk-name { font-size: 1.4375em; line-height: 1.3913; font-weight: 600; letter-spacing: -0.015em; color: var(--petrol-950); white-space: nowrap; }
.wk-vr { flex: none; width: 1px; height: 1.25em; background: #e5e5e5; }
.wk-guests { display: flex; align-items: baseline; gap: 0.5em; line-height: 1.75em; white-space: nowrap; }
.wk-guests > b { font-family: var(--font-mono); font-size: 1.3125em; font-weight: 600; color: var(--petrol-950); font-variant-numeric: tabular-nums; }
.wk-guests > span { font-size: 1.1875em; color: #525252; }
.wk-tabs {
  display: inline-flex;
  align-items: center;
  height: 2.75em;
  margin-left: auto;
  padding: 0.125em;
  border-radius: 0.75em;
  background: #f5f5f5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.wk-tabs span {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.8em;
  border-radius: 0.5em;
  font-size: 1.25em;
  line-height: 1;
  font-weight: 500;
  color: #525252;
  white-space: nowrap;
}
.wk-tabs .on { background: #fff; font-weight: 600; color: #171717; box-shadow: 0 0.0625em 0.125em rgba(28, 25, 23, 0.12); }

.wk-band { display: flex; align-items: center; gap: 0.75em 1.5em; min-height: 4.25em; padding: 0.75em 1.5em; }
.wk-week { display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.wk-range { margin-left: 0.4211em; font-size: 1.1875em; line-height: 1.4737; font-weight: 600; color: #171717; white-space: nowrap; }
.wk-controls { display: flex; align-items: center; gap: 0.75em; margin-left: auto; }
.wk-this, .wk-door, .wk-add {
  display: inline-flex;
  align-items: center;
  height: 2.2em;
  border-radius: 0.6em;
  font-size: 1.25em;
  line-height: 1;
  white-space: nowrap;
}
.wk-this { padding: 0 0.8em; background: #fff; color: #292524; box-shadow: inset 0 0 0 1px #b7b7b7; }
.wk-door { gap: 0.4em; padding: 0 0.8em; background: var(--petrol-50); color: var(--petrol-950); box-shadow: inset 0 0 0 1px rgba(4, 129, 142, 0.4); }
.wk-door b { font-family: var(--font-mono); font-weight: 600; color: var(--petrol-700); font-variant-numeric: tabular-nums; }
.wk-door svg { width: 1em; height: 1em; color: var(--petrol-700); }
.wk-add { gap: 0.4em; padding: 0 0.9em; background: var(--petrol-700); color: #fff; font-weight: 600; }
.wk-add svg { width: 1em; height: 1em; }

/* The seven heads, on the stage's own ground. ONE LINE a head
   (`week-clock.tsx`'s `ClockHead`, `room.ts`'s `CLOCK_HEAD_*`): the night's
   three letters, its date in a round box, and at its end "Closed" or the
   count to confirm. Tonight takes its column's wash, a petrol underline and
   its date filled petrol. A head stands on its night's cards' own edges. */
.wk-heads {
  display: grid;
  grid-template-columns: 4.25em repeat(7, minmax(0, 1fr));
  padding: 0.5em 1.25em 0.5em 1.5em;
  border-bottom: 1px solid #b7b7b7;
  background: rgba(245, 245, 244, 0.95);
}
.wk-h {
  display: flex;
  align-items: center;
  gap: 0.375em;
  min-width: 0;
  height: 2.75em;
  margin: 0 calc(0.25em - 1px) 0 0.25em;
  padding: 0.375em 0.5em;
  border-radius: 0.5em;
}
.wk-h > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1875em; line-height: 1.5; font-weight: 600; color: #171717; }
.wk-h > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6842em;
  height: 1.6842em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 1.1875em;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  color: #525252;
  font-variant-numeric: tabular-nums;
}
.wk-h > em { flex: none; margin-left: auto; font-size: 1.1875em; font-style: normal; line-height: 1.4737; color: #525252; white-space: nowrap; }
.wk-h.on { background: rgba(237, 250, 252, 0.6); box-shadow: inset 0 -0.1875em 0 var(--petrol-700); }
.wk-h.on > b { color: var(--petrol-700); }
.wk-h.on > i { background: var(--petrol-700); color: #fff; }
.wk-h > .wk-ask {
  display: grid;
  place-items: center;
  min-width: 1.4737em;
  height: 1.4737em;
  padding: 0 0.4211em;
  border-radius: 999px;
  background: var(--petrol-100);
  color: var(--petrol-900);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* One clock for the whole week: the gutter and seven nights across, the
   axis's 1em top inset and eight half hours down (18:00 to 21:30), inside
   the clock's own sides (`CLOCK_SIDES`: 24px at the left, 20px at the
   right). A half hour is as tall as its busiest night: 2.5em empty, then
   0.375em of air either side of 2.25em a reservation, so 3em for one and
   5.25em for two. */
.wk-board {
  display: grid;
  grid-template-columns: 4.25em repeat(7, minmax(0, 1fr));
  grid-template-rows: 1em 3em 3em 5.25em 3em 3em 3em 3em 2.5em;
  padding: 0 1.25em 0 1.5em;
  margin-bottom: 1.25em;
  box-shadow: 0 1px 0 #b7b7b7;
}
.wk-col { grid-row: 1 / -1; box-shadow: inset 1px 0 0 #f5f5f5; }
.wk-tonight { background: rgba(237, 250, 252, 0.6); box-shadow: inset 1px 0 0 #d6d3d1, inset -1px 0 0 #d6d3d1; }
.wk-shut {
  background:
    repeating-linear-gradient(135deg, transparent 0 0.3125em, rgba(120, 113, 108, 0.1) 0.3125em 0.625em),
    rgba(250, 250, 250, 0.7);
}
/* A rule at every half hour, the hour the stronger of the two. */
.wk-rule { grid-column: 2 / -1; align-self: start; height: 1px; background: #e5e5e5; }
.wk-rule.wk-hour { background: #b7b7b7; }
/* The gutter names every half hour, on the line of the first name in it. */
.wk-t {
  grid-column: 1;
  align-self: start;
  justify-self: end;
  margin: 0.6316em 0.5263em 0 0;
  font-family: var(--font-mono);
  font-size: 1.1875em;
  line-height: 1.2632;
  color: #737373;
  font-variant-numeric: tabular-nums;
}
.wk-t.wk-hour { font-weight: 600; color: #171717; }
.wk-closed {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  justify-self: center;
  margin-top: 1.2632em;
  font-family: var(--font-mono);
  font-size: 1.1875em;
  line-height: 1.2632;
  color: #525252;
}
/* Now is 19:18, three fifths of the way down the 19:00 half hour. The line
   is drawn at a third of its strength, and not where a reservation stands on
   the minute; the time itself is the pill's. */
.wk-now { grid-row: 4; align-self: start; height: 0.125em; margin-top: 3.15em; background: var(--petrol-600); opacity: 0.3; }
.wk-pill { position: relative; z-index: 2; grid-column: 1; grid-row: 4; align-self: start; justify-self: end; margin: 3.275em 0.5em 0 0; }
.wk-pill b {
  display: block;
  padding: 0 0.3158em;
  border-radius: 999px;
  background: var(--petrol-700);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.1875em;
  line-height: 1.2632;
  font-weight: 600;
}

/* A half hour's reservations are the rows of one card, which has a soft ring
   and a 2px cast, no border: a 4px bar in the state's colour, the name, a
   note's mark if there is one, how many. A table that is finished, or was
   missed, steps back through its ink; a missed one says so in place of its
   covers. A reservation waiting for an answer is the one row with a fill of
   its own (`booking-status.ts`'s `STATUS_BAR`). */
.wk-card {
  align-self: start;
  min-width: 0;
  margin: 0.375em 0.25em 0 calc(0.25em + 1px);
  overflow: hidden;
  border-radius: 0.75em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.09), 0 1px 2px rgba(28, 25, 23, 0.1);
}
.wk-r { display: flex; align-items: center; gap: 0.625em; height: 2.25em; padding-right: 0.75em; }
/* The rule between two rows is the row's own top border, as the app's
   (`border-t`), so the second name sits half a pixel lower than a shadow
   would put it. */
.wk-r + .wk-r { border-top: 1px solid #f5f5f5; }
.wk-r::before { content: ""; flex: none; align-self: stretch; width: 0.25em; margin-right: 0.375em; background: #059669; }
.wk-r b, .wk-r em { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1875em; line-height: 1.2632; }
.wk-r b { font-weight: 500; color: #171717; }
.wk-r em { font-style: normal; text-align: right; color: #737373; }
.wk-r i { flex: none; font-style: normal; font-family: var(--font-mono); font-size: 1.1875em; line-height: 1.2632; font-weight: 600; color: #171717; font-variant-numeric: tabular-nums; }
.wk-r svg { width: 0.875em; height: 0.875em; color: #737373; }
.wk-done::before { background: #78716c; }
.wk-done b, .wk-done i, .wk-missed b { color: #737373; }
.wk-seated::before { background: #2563eb; }
.wk-missed::before { background: #dc2626; }
.wk-waits { background: var(--petrol-50); }
.wk-waits::before { background: var(--petrol-600); }

/* The story. s1: "Add a reservation" is pressed. s2: the table taken by
   phone is on tonight's sheet, and tonight's guests go 12 to 14. s3: a guest
   books online and the reservation waits for an answer: on the board, at the
   end of tonight's head and as the door beside "Add a reservation", with
   tonight's guests at 18. */
.sc-week.play.s1:not(.s2) .wk-add::after { animation: pressring 0.8s var(--ease) both; }
.sc-week .wk-door,
.sc-week .wk-ask,
.sc-week .wk-added,
.sc-week .wk-arrive { transition: opacity 0.45s var(--ease), transform 0.55s var(--spring); }
.sc-week:not(.s2) .wk-added,
.sc-week:not(.s3) .wk-arrive { opacity: 0; transform: translateY(-0.5em) scale(0.97); }
.sc-week:not(.s3) .wk-door { opacity: 0; transform: scale(0.94); }
.sc-week:not(.s3) .wk-ask { opacity: 0; }
/* Tonight's guests are every value they take, stacked in one cell, so the
   figure is as wide as its widest and only the one in force is seen; the
   value going out fades before the one coming in appears. */
.wk-swap { display: grid; justify-items: start; }
.wk-swap > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.18s var(--ease); }
.sc-week:not(.s2) .wk-swap > .g0,
.sc-week.s2:not(.s3) .wk-swap > .g1,
.sc-week.s3 .wk-swap > .g2 { opacity: 1; transition-delay: 0.18s; }
/* Wound back with the rest, rather than snapping once it has gone. */
.sc-week.rewind .wk-swap > .g2 { opacity: 0; transition-delay: 0s; }
.sc-week.rewind .wk-swap > .g0 { opacity: 1; transition-delay: 0.18s; }

/* Dark: the sheet as the app draws it in dark, value for value, read off the
   real sheet over the same week (18 October 2026): the bar #1b1b1c, the
   console the dark petrol #143238 with its controls white/10 inside white/15,
   the week #111111, a reservation stone-900 on a white/8 hairline, the hour's
   rule stone-700 and the half hour's stone-800, tonight petrol-950/25 and its
   words petrol-300. The status stripes, "now" and tonight's date keep their
   colours. The bar, the lockup and the account circle are the builder's and
   the kitchen's too. */
@media screen {
  :where(.dark) .sc-week .ui-s { color: #f5f5f4; }
  :where(.dark) .wk-bar { background: #1b1b1c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
  :where(.dark) .wk-brand > span { color: var(--petrol-300); }
  :where(.dark) .wk-brand b { color: #fff; }
  :where(.dark) .wk-brand b + b { color: var(--petrol-100); }
  :where(.dark) .wk-me { background: var(--petrol-600); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
  :where(.dark) .wk-console { background: #143238; box-shadow: none; }
  :where(.dark) .wk-tier { border-bottom-color: rgba(255, 255, 255, 0.1); }
  :where(.dark) .wk-sq, :where(.dark) .wk-this { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
  :where(.dark) .wk-name, :where(.dark) .wk-guests > b, :where(.dark) .wk-range { color: #fff; }
  :where(.dark) .wk-vr { background: rgba(255, 255, 255, 0.2); }
  :where(.dark) .wk-guests > span { color: rgba(255, 255, 255, 0.7); }
  :where(.dark) .wk-tabs { background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
  :where(.dark) .wk-tabs span { color: rgba(255, 255, 255, 0.6); }
  :where(.dark) .wk-tabs .on { background: rgba(255, 255, 255, 0.15); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
  :where(.dark) .wk-door { background: rgba(90, 181, 193, 0.15); color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 210, 219, 0.4); }
  :where(.dark) .wk-door b, :where(.dark) .wk-door svg { color: var(--petrol-300); }
  :where(.dark) .wk-add { background: var(--petrol-600); }
  :where(.dark) .wk-heads { border-bottom-color: #292524; background: rgba(17, 17, 17, 0.95); }
  :where(.dark) .wk-h > b { color: #f5f5f4; }
  :where(.dark) .wk-h > i { color: #d6d3d1; }
  :where(.dark) .wk-h > em, :where(.dark) .wk-t, :where(.dark) .wk-closed, :where(.dark) .wk-r em, :where(.dark) .wk-r svg { color: #a8a29e; }
  :where(.dark) .wk-h.on { background: rgba(0, 40, 45, 0.25); box-shadow: inset 0 -0.1875em 0 var(--petrol-300); }
  :where(.dark) .wk-h.on > b { color: var(--petrol-300); }
  :where(.dark) .wk-h > .wk-ask { background: rgba(4, 85, 94, 0.6); color: var(--petrol-100); }
  :where(.dark) .wk-board { box-shadow: 0 1px 0 #292524; }
  :where(.dark) .wk-col { box-shadow: inset 1px 0 0 rgba(41, 37, 36, 0.6); }
  :where(.dark) .wk-tonight { background: rgba(0, 40, 45, 0.25); box-shadow: inset 1px 0 0 #44403c, inset -1px 0 0 #44403c; }
  :where(.dark) .wk-shut {
    background:
      repeating-linear-gradient(135deg, transparent 0 0.3125em, rgba(120, 113, 108, 0.1) 0.3125em 0.625em),
      rgba(28, 25, 23, 0.4);
  }
  :where(.dark) .wk-rule { background: #292524; }
  :where(.dark) .wk-rule.wk-hour { background: #44403c; }
  :where(.dark) .wk-t.wk-hour, :where(.dark) .wk-r b, :where(.dark) .wk-r i { color: #f5f5f4; }
  :where(.dark) .wk-card { background: #1c1917; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
  :where(.dark) .wk-r + .wk-r { border-top-color: #292524; }
  :where(.dark) .wk-done b, :where(.dark) .wk-done i, :where(.dark) .wk-missed b { color: #a8a29e; }
  :where(.dark) .wk-waits { background: rgba(0, 40, 45, 0.4); }
}

/* --------------------------------------------------------------------------
   Your regulars
   -------------------------------------------------------------------------- */

.art-guests .tile-art { aspect-ratio: 30 / 19; }
.gd-desk { position: absolute; inset: 1.2em 1.4em; display: grid; grid-template-columns: 11.5em minmax(0, 1fr); overflow: hidden; }
.gd-list { display: flex; flex-direction: column; gap: 0.3em; padding: 0.85em; border-right: 1px solid #f0efed; }
.gd-search {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 2.1em;
  margin-bottom: 0.3em;
  padding: 0 0.6em;
  border-radius: 0.5em;
  box-shadow: inset 0 0 0 1px #d6d3d1;
  font-size: 0.72em;
  color: #1c1917;
  white-space: nowrap;
}
.gd-search svg { width: 1.1em; height: 1.1em; color: #78716c; }
.gd-row { position: relative; z-index: 0; display: flex; justify-content: space-between; padding: 0.5em 0.6em; border-radius: 0.45em; font-size: 0.72em; transition: opacity 0.35s var(--ease); }
.gd-row b { color: #1c1917; }
.gd-row em { font-style: normal; color: #78716c; }
.gd-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--petrol-50); box-shadow: inset 0 0 0 1px var(--petrol-200); opacity: 0; transition: opacity 0.35s var(--ease); }
.gd-pick::before { opacity: 1; }
.gd-row:not(.gd-pick) { opacity: 0.35; }
.sc-guests:not(.s2) .gd-pick::before { opacity: 0; }
.sc-guests:not(.s2) .gd-row:not(.gd-pick) { opacity: 1; }
.gd-card { display: flex; flex-direction: column; gap: 0.3em; padding: 0.95em 1.1em; transition: opacity 0.45s var(--ease), transform 0.55s var(--ease-out); }
.sc-guests:not(.s3) .gd-card { opacity: 0; transform: translateX(0.8em); }
.gd-name { font-size: 1.05em; color: #1c1917; }
.gd-card > small { font-size: 0.66em; color: #78716c; }
.gd-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; margin: 0.45em 0 0.2em; }
.gd-figs span { display: flex; flex-direction: column; padding: 0.45em 0.55em; border-radius: 0.5em; background: #f7f7f5; font-size: 0.62em; color: #78716c; }
.gd-figs b { font-size: 1.55em; color: #1c1917; line-height: 1.1; }
.gd-l { margin-top: 0.2em; font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #78716c; }
.gd-past { display: flex; justify-content: space-between; padding: 0.35em 0; border-top: 1px solid #f0efed; font-size: 0.7em; color: #57534e; }
.gd-past i { font-style: normal; font-weight: 700; color: #1c1917; }

/* Dark: the guests' desk in the app's dark: hairlines stone-800, the search
   box's edge stone-700, the guest picked petrol-950/40 inside petrol-800. */
@media screen {
  :where(.dark) .gd-list, :where(.dark) .gd-past { border-color: #292524; }
  :where(.dark) .gd-search { box-shadow: inset 0 0 0 1px #44403c; color: #f5f5f4; }
  :where(.dark) .gd-search svg, :where(.dark) .gd-row em, :where(.dark) .gd-card > small, :where(.dark) .gd-figs span, :where(.dark) .gd-l, :where(.dark) .gd-past { color: #a8a29e; }
  :where(.dark) .gd-row b, :where(.dark) .gd-name, :where(.dark) .gd-figs b, :where(.dark) .gd-past i { color: #f5f5f4; }
  :where(.dark) .gd-row::before { background: rgba(0, 40, 45, 0.4); box-shadow: inset 0 0 0 1px var(--petrol-800); }
  :where(.dark) .gd-figs span { background: rgba(255, 255, 255, 0.05); }
}

/* --------------------------------------------------------------------------
   The Order page, wide
   -------------------------------------------------------------------------- */

.sc-shopw .ui-s { --ui-w: 64; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sc-shopw .frame-url { font-family: var(--font-sans); }
.shw { background: #faf6f1; color: #1f1a16; }
.shw-bar { display: flex; align-items: center; gap: 0.7em; padding: 0.75em 1.4em; background: #f4eee2; }
.shw-bar > b { font-family: var(--font-display); font-size: 1.02em; font-weight: 600; }
.shw-nav { display: flex; gap: 1.3em; margin-left: auto; }
.shw-nav i { padding-bottom: 0.15em; font-style: normal; font-size: 0.68em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5b4c3f; }
.shw-nav .on { color: #1f1a16; box-shadow: 0 0.15em 0 #c26a2a; }
.shw-body { display: grid; grid-template-columns: minmax(0, 1fr) 17.5em; gap: 1em; padding: 1em 1.4em 1.4em; }
.shw-menu { display: flex; flex-direction: column; gap: 0.55em; }
.shw-tools { display: flex; gap: 0.5em; }
.shw-tools .sh-search { flex: 1; }
.shw-filter { display: inline-flex; align-items: center; gap: 0.4em; padding: 0 0.85em; border-radius: 0.65em; background: #fff; box-shadow: inset 0 0 0 1px #e6ded3; font-size: 0.8em; font-weight: 700; }
.shw-filter svg { width: 1em; height: 1em; }
.shw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55em; }
.shw-out b { color: #7a6e63; }
.shw-out em { color: #a2968a; }
.shw-out .sh-add { opacity: 0.35; }
.shw-pane { align-self: start; display: flex; flex-direction: column; gap: 0.6em; padding: 1em; border-radius: 0.9em; background: #fff; box-shadow: 0 0 0 1px #ece4d9, 0 1em 2em -1.2em rgba(31, 26, 22, 0.3); }
.shw-h { text-align: center; font-size: 1em; }
.shw-lines { position: relative; display: grid; align-content: start; gap: 0.35em; min-height: 7.4em; padding: 0.7em 0.8em; border-radius: 0.6em; box-shadow: inset 0 0 0 1px #ece4d9; font-size: 0.76em; }
.shw-lines > span:not(.shw-empty) { display: flex; justify-content: space-between; gap: 0.5em; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out); }
.shw-lines i { font-style: normal; }
.ln-tot { margin-top: 0.15em; padding-top: 0.4em; border-top: 1px solid #ece4d9; font-weight: 800; }
.ln-tot > i:last-child { display: grid; }
.ln-tot > i:last-child > span { grid-area: 1 / 1; justify-self: end; transition: opacity 0.25s var(--ease); }
.ln-tot .t1, .ln-tot .t2 { opacity: 0; }
.sc-shopw.s1:not(.s2) .ln-tot .t1, .sc-shopw.s2:not(.s3) .ln-tot .t2 { opacity: 1; }
.sc-shopw:not(.s3) .ln-tot .t3 { opacity: 0; }
.shw-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #a2968a; opacity: 0; transition: opacity 0.3s var(--ease); }
.sc-shopw:not(.s1) .shw-empty { opacity: 1; }
.sc-shopw:not(.s1) .ln-a, .sc-shopw:not(.s2) .ln-b, .sc-shopw:not(.s3) .ln-fee { opacity: 0; transform: translateX(-0.4em); }
.sc-shopw:not(.s1) .ln-tot { opacity: 0; }
.sc-shopw:not(.s1) .sa .sh-q, .sc-shopw:not(.s2) .sb .sh-q { opacity: 0; transform: scale(0.6); }
.sc-shopw:not(.s3) .w-del.k-on { color: #1f1a16; box-shadow: inset 0 0 0 1px #d9cfc2; }
.sc-shopw:not(.s3) .w-del.k-on small { color: #7a6e63; }
.sc-shopw:not(.s3) .w-del.k-on::before { opacity: 0; }
.shw-note { font-size: 0.68em; color: #7a6e63; transition: opacity 0.3s var(--ease); }
.sc-shopw:not(.s3) .shw-note { opacity: 0; }
.shw-go { display: grid; place-items: center; height: 2.7em; border-radius: 0.65em; background: #1f1a16; color: #fff; font-size: 0.86em; font-weight: 800; transition: opacity 0.3s var(--ease); }
.sc-shopw:not(.s3) .shw-go { opacity: 0.4; }
.sc-shopw.play.s4 .shw-go::after { animation: pressring 0.8s var(--ease) both; }

/* --------------------------------------------------------------------------
   Paying by card, on a phone
   -------------------------------------------------------------------------- */

.pay { position: absolute; inset: 0; --ui-w: 18; background: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1a1f36; }
.pay-card, .pay-done { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity 0.45s var(--ease), transform 0.55s var(--ease-out); }
/* Stripe's own payment page: the card is typed there, never on the site. */
.pay-card { gap: 0.5em; padding: 3.4em 1.35em 1.2em; }
.pay-back { display: flex; align-items: center; gap: 0.5em; font-size: 0.74em; font-weight: 700; }
.pay-back > svg { width: 1.1em; height: 1.1em; color: #697386; transform: scaleX(-1); }
.pay-top { display: flex; flex-direction: column; margin-top: 0.7em; }
.pay-top small { font-size: 0.74em; font-weight: 600; color: #697386; }
.pay-top b { font-size: 1.95em; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.pay-l { margin-top: 0.25em; font-size: 0.7em; font-weight: 700; color: #697386; }
.pay-in { display: flex; align-items: center; gap: 0.55em; height: 2.55em; padding: 0 0.8em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px #e3e8ee, 0 0.1em 0.25em rgba(0, 0, 0, 0.04); font-size: 0.8em; white-space: nowrap; }
.pay-in svg { width: 1.25em; height: 1.25em; color: #697386; flex: none; }
.pay-grp { display: grid; }
.pay-grp > .pay-in { border-radius: 0.5em 0.5em 0 0; letter-spacing: 0.05em; }
.pay-two { display: grid; grid-template-columns: 1fr 1fr; margin-top: -1px; }
.pay-two .pay-in { border-radius: 0 0 0 0.5em; }
.pay-two .pay-in + .pay-in { margin-left: -1px; border-radius: 0 0 0.5em 0; }
.pay-btn { display: grid; place-items: center; height: 2.85em; margin-top: 0.9em; border-radius: 0.55em; background: #1f1a16; color: #fff; font-size: 0.92em; font-weight: 800; }
.sc-pay.play.s1:not(.s2) .pay-btn::after { animation: pressring 0.8s var(--ease) both; }
.pay-lock { display: flex; align-items: center; justify-content: center; gap: 0.4em; margin-top: auto; font-size: 0.66em; font-weight: 600; color: #697386; }
.pay-lock svg { width: 1.05em; height: 1.05em; }
.pay-card { opacity: 0; transform: translateX(-1em); }
.sc-pay:not(.s2) .pay-card { opacity: 1; transform: none; }
/* Then back on the guest's own order page, where Stripe sends them
   (`app/shop/r/[token]/order-status.tsx`): the order's code in the
   restaurant's colour, no heading while the order is live, the tracker, and
   what was ordered with "Paid" against the total. Stripe's page itself is
   sent one line, the restaurant and the total, so it lists no dishes. */
.pay-done { transition-delay: 0.25s; }
.sc-pay:not(.s2) .pay-done { opacity: 0; transform: translateX(1em); transition-delay: 0s; }
.pay-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6em; padding: 3.6em 1.2em 0; }
.pay-code { padding: 0.4em 0.95em; border-radius: 999px; background: #1f1a16; color: #fff; font-size: 0.86em; font-weight: 800; letter-spacing: 0.05em; }
/* Offered until the kitchen starts cooking; a paid order is refunded on its own. */
.pay-cancel { display: grid; place-items: center; align-self: stretch; height: 2.75em; margin-top: 0.3em; border-radius: 0.65em; box-shadow: inset 0 0 0 1px #ddd2c4; font-size: 0.8em; font-weight: 600; }
.pay-done .sh-track span:not(.k1) { color: #a2968a; }
.pay-done .sh-track span:not(.k1)::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   The kitchen's board, with the day's figures
   -------------------------------------------------------------------------- */

/* The board drawn at 1440px and whole: today's figures, the three columns and
   what was done today (its styles are with the ordering film's, above). An
   order lands waiting for you (s1), Accept is pressed (s2), it moves onto
   Cooking (s3) and Start cooking is pressed (s4). */
.sc-board > .ui-s { --ui-w: 90; --kb-gut: 3.375em; }
/* Under Cooking, the order lands over Tom Hughes's, whose time chosen for
   later gives it a line more than the order on its way under Sofia Rossi's,
   so Cooking becomes the longer column and "Done today" steps down by that
   line (28px and its 8px gap) as the order moves in, as the app's does. The
   board keeps that much room at its foot so the step never clips it. */
.sc-board .kb-body { padding-bottom: calc(1.5em + 2.25em); }
.sc-board .kb-done { transition: transform 0.75s var(--ease-out); }
.sc-board.s3 .kb-done { transform: translateY(2.25em); }
.sc-board.rewind .kb-done { transform: none; }
.sc-board .kb-mv { transform: translateX(calc(100% + 1.5em)); transition: transform 0.75s var(--ease-out), opacity 0.4s var(--ease); }
.sc-board:not(.s3) .kb-mv { transform: none; }
.sc-board:not(.s1) .kb-mv { opacity: 0; transform: translateY(-0.75em) scale(0.97); }
.sc-board.rewind .kb-mv { opacity: 0; }
.sc-board .kb-mv::before { transition-delay: 0s; }
.sc-board.s1:not(.s3) .kb-mv::before { opacity: 1; }
.sc-board .kb-old { transition-delay: 0s; }
.sc-board.s3 .kb-col:nth-child(2) .kb-old { transform: translateY(20.3047em); }
.sc-board.rewind .kb-col:nth-child(2) .kb-old { transform: none; }
.sc-board.s1:not(.s3) .kb-col:nth-child(1) .n1,
.sc-board.s3 .kb-col:nth-child(2) .n1 { opacity: 1; transition-delay: 0.3s; }
.sc-board.rewind .kb-col:nth-child(2) .n1 { opacity: 0; transition-delay: 0s; }
.sc-board:not(.s3) .kb-gos .g1,
.sc-board.s3:not(.s4) .kb-gos .g2,
.sc-board.s4 .kb-gos .g3 { opacity: 1; transition-delay: 0.85s; }
.sc-board.play.s2:not(.s3) .kb-gos .g1::after,
.sc-board.play.s4 .kb-gos .g2::after { animation: pressring 0.7s var(--ease) both; }
.sc-board:not(.s1) .kb-sw > .o0,
.sc-board.s1 .kb-sw > .o1 { opacity: 1; transition-delay: 0.6s; }
.sc-board.rewind .kb-sw > .o1 { opacity: 0; transition-delay: 0s; }
.sc-board.rewind .kb-sw > .o0 { opacity: 1; transition-delay: 0.18s; }

/* --------------------------------------------------------------------------
   The pricing page
   -------------------------------------------------------------------------- */

/* The comparison under the cards stands on the same white ground, so one
   band's air divides them (its own top), not that and this section's
   bottom as well: the two stood 216px apart at 1440. */
.pricing-top { padding-block: 0.5rem 0; }
.promise {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 2rem;
  margin-top: 2.5rem;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-2);
}
.promise li { display: inline-flex; align-items: center; gap: 0.65rem; }
.promise .pi {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--petrol-50);
  color: var(--petrol-700);
  box-shadow: inset 0 0 0 1px var(--petrol-100);
}
.promise .pi svg { width: 18px; height: 18px; }

.tbl-card { max-width: 1080px; margin-inline: auto; padding: 0.4rem 1.2rem 0.6rem; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.tbl td .tick { margin: auto; }
.tbl tbody tr:last-child > * { border-bottom: 0; }

@media screen {
  :where(.dark) .promise .pi { background: rgba(0, 40, 45, 0.6); color: var(--petrol-300); box-shadow: inset 0 0 0 1px var(--petrol-800); }
  :where(.dark) .tbl-card { background: var(--paper); }
}


/* --------------------------------------------------------------------------
   The questions page: a topic beside its questions
   -------------------------------------------------------------------------- */

.faq-grp {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 1.25rem clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
}
/* The section's own air opens and closes the list; the first topic's top
   and the last one's foot would only add to it (196px stood between the
   topic tiles and the first topic at 1440, 112px now). */
.faq-grp:first-child { border-top: 0; padding-top: 0; }
.faq-grp:last-child { padding-bottom: 0; }
.faq-side { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.faq-side h2 { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem); }
.fq-i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--petrol-600), var(--petrol-800));
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(3, 105, 116, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.fq-i svg { width: 25px; height: 25px; }
.acc-more { margin-top: 1rem; }
/* ==========================================================================
   5. Pricing, the questions, the doors, the sub-page heads
   ========================================================================== */

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */

/* Three figures on each page that has the strip (2026-10-04: four until the
   languages and currencies came off), so three across down to a phone, where
   they stack (520px below). Two across would leave one figure on its own. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 600;
  color: var(--petrol-700);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* Only a figure that counts up needs even digits; on a word, Lora's tabular
   set widens the space ("1  tap"). */
.stat b[data-count] { font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 0.6rem; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); max-width: 22ch; }

@media screen {
  :where(.dark) .stat b { color: var(--petrol-300); }
}

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

/* The three cards are the same height whatever their lists say, and the meters
   line up along the bottom, because a price comparison read across three ragged
   columns is harder than it needs to be. */
/* MONTHLY OR YEARLY: the switch above the plans. It is the app's own two-way
   switch (app/(protected)/onboarding/onboarding-chrome.ts: a groove with a
   white tile on the chosen half), drawn here in this stylesheet's own
   variables so the two screens say "chosen" the same way. Neutral rather
   than petrol: on a pricing page petrol means "recommended", and which price
   list you are reading is not a recommendation. The saving is petrol INK. */
.billing-row { text-align: center; margin-bottom: 2rem; }
.billing {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 12px;
  background: rgba(11, 30, 34, 0.055);
}
.billing-half {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.625rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.billing-half:hover { color: var(--ink); }
.billing-half.on {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.10), 0 12px 22px -14px rgba(2, 68, 75, 0.45);
}
.billing-half:focus-visible { outline: 2px solid var(--petrol-700); outline-offset: 0; }
.billing-save { font-size: var(--t-micro); font-weight: 700; color: var(--petrol-700); }
@media (max-width: 400px) { .billing-half { padding: 0 0.9rem; } }

/* Four tiers since Max. Two across between 960px and 1239px, because four
   1fr columns in that band give a card too narrow for the price and the
   billing line to sit on one row each. Below 960px the rule further down
   takes over and stacks them.
   FOUR ACROSS STARTS WHERE THE MEASURE IS FULL. `.wrap` reaches its 1240px
   cap at a 1240px viewport, so from there every four-across card is 272px;
   between 1201 and 1239 it was 262–271px, and the yearly prices (see the
   padding note below) do not fit a card narrower than 272. The band moved
   from 1200 to 1240 on 13 September 2026 for that reason — a measurement,
   the same one the app's own plan screen made when it moved its four-across
   arm from 1536 to 1800. */
/* ROWS ARE 24px APART AT EVERY WIDTH (2026-10-05), the app's own `gap-6`,
   because the recommended card's pill stands 14px above its top edge (see
   `.plan-flag`) and lands in the gap whenever Pro starts a row: two across,
   or stacked on a phone. The fluid gap fell to 16px there, leaving 2px
   between the pill and the card above it; 24px leaves 10px, as on /plan.
   Across, the gap stays fluid, and from 1000px wide the two are equal. */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 0.5rem + 1.6vw, 1.5rem); row-gap: 1.5rem; align-items: stretch; }
@media (max-width: 1239px) { .plans { grid-template-columns: repeat(2, 1fr); } }

.plan {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.15rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-out);
  isolation: isolate;
}
/* FOUR CARDS ACROSS TAKE A TIGHTER GUTTER INSIDE THE CARD, and the reason is
   one measurement rather than taste. At four up the card is 272px and its
   own padding leaves 203px of content; `$24.99 / month` needs 209px and
   `$39.99 / month` needs 212px, so the two dearest prices wrapped onto a
   second line while `$0` and `$9.99` did not — the price row standing 76px
   tall on two cards and 50px on the other two, which reads as a rendering
   fault rather than as a price. 1.75rem of padding gave 216px and cleared
   the widest of them with 4px to spare.
   THE YEARLY PRICES MOVED IT AGAIN (13 September 2026): `$284.99 / year` and
   `$455.99 / year` need 220px, so 1.5rem — 224px of content — and the gap
   between the figure and its period came in from 0.35rem to 0.25rem, 6px to
   spare at the widest. Every price row measured 50px at every width from 390
   to 1920 with the switch in both positions.
   The type does NOT shrink to fit: the container gives way, which is this
   app's standing repair. Re-check with `node .zz-plan4-marketing.mjs` if a
   price ever gains a digit. */
@media (min-width: 1240px) { .plan { padding: 1.5rem; } }
.plan::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: var(--sh-2);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.plan:hover { transform: translateY(-6px); }
.plan:hover::before { opacity: 1; }

/* THE RECOMMENDED PLAN (Pro: `PlanTier.flag` in lib/plan/tiers.ts), drawn the
   way the app's own /plan screen draws it (owner, 2026-10-05). The grey ring
   becomes 2px of petrol (`PLAN_CARD_FLAGGED` in plan-chrome.ts), a pill
   straddles the top edge (`PLAN_FLAG`), and the card's button is the filled
   primary. The three always appear together.
   The ring is inset like the 1px one it replaces, so it takes no layout and
   the four cards' rows stay level. The pill is set at this site's smallest
   size, as the app's is at the app's, in the app's weight, padding, line
   height, shadow and place (14px over the edge, centred). It is absolute, so
   nothing above it may clip: `.plan` has no overflow rule, and keep it so.
   What the card had here until 2026-10-04 and /plan never took did not come
   back: the breathing glow under it, and moving Pro to the top of the stack
   on a phone. */
.plan-best { box-shadow: inset 0 0 0 2px var(--petrol-700); }
.plan-flag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  background: var(--petrol-700);
  color: #fff;
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(2, 68, 75, 0.25);
}

.plan h3 { font-size: 1.4375rem; margin-bottom: 0.35rem; }
.plan .blurb { font-size: var(--t-small); color: var(--ink-3); min-height: 3rem; }
.plan-price { display: flex; align-items: baseline; gap: 0.25rem; margin: 1.25rem 0 0.25rem; }
.plan-price b {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.1rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-price span { font-size: var(--t-small); font-weight: 700; color: var(--ink-3); }
.plan-per { font-size: var(--t-micro); color: var(--ink-3); margin-bottom: 1.5rem; }
.plan .btn { margin-bottom: 1.6rem; }
.plan-list { list-style: none; display: grid; gap: 0.8rem; font-size: var(--t-small); }
.plan-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.plan-list li span:last-child { padding-top: 0.15rem; }
.plan-list .off { color: var(--ink-3); }
.plan-list { margin-bottom: auto; }

/* THE ADD-ON under the four plans: email marketing, bought on top of any paid
   plan (2026-09-30), in two sizes. A card of the plans' material, the
   whole width of the grid, words on the left and the two sizes on the right, wrapping to one
   column where the two do not fit. No hover lift: it is not a plan to pick. */
.addon {
  margin-top: clamp(1rem, 0.5rem + 1.6vw, 1.5rem);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.15rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.addon-text { max-width: 40rem; }
.addon h3 { font-size: 1.4375rem; margin: 0.35rem 0; }
.addon .blurb { font-size: var(--t-small); color: var(--ink-3); }
/* Each email the blurb names stays whole on a line (18 October 2026): the
   face has no non-breaking hyphen, and a phone broke "come-" over "back". */
.addon .blurb .whole { white-space: nowrap; }
.addon-figure { font-size: var(--t-small); color: var(--ink-2); margin-top: 0.5rem; }
.addon .plan-price { margin: 0 0 0.25rem; }
.addon .plan-per { margin-bottom: 0; }
/* Its two sizes (2,000 and 5,000 emails a month), side by side where they fit. */
.addon-sizes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.addon-size {
  flex: 1 1 13rem;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 1rem 1.15rem;
}
.addon-size-name { font-weight: 700; margin: 0 0 0.35rem; }

/* Comparison table */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; min-width: 620px; }
.tbl th, .tbl td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
}
.tbl tbody th { font-weight: 600; color: var(--ink); font-family: var(--font-sans); font-size: var(--t-small); }
.tbl td { text-align: center; }
.tbl th:first-child { text-align: left; }
.tbl tbody tr:hover { background: var(--petrol-50); }
.tbl .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
/* A figure the row's "each month" is not true of (the free column's): its own
   term rides under it, read as part of the figure. */
.tbl .num small { display: block; font-size: var(--t-micro); font-weight: 500; color: var(--ink-3); margin-top: 2px; }

/* Phones: the row names stay put and the four plans slide under them. The table
   used to be a 620px block in a 320px window with the names taking most of it, so
   a phone showed the names and a sliver of the first plan cut mid-word ("FRE",
   "on"). A pinned name column, tighter cells and a shadow on the right edge (it
   goes once the table is scrolled to its end) make the sideways scroll obvious
   and every figure readable beside the thing it is about. */
@media (max-width: 720px) {
  .tbl-scroll {
    background:
      linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center / 2rem 100% no-repeat local,
      linear-gradient(to left, rgba(15, 30, 32, 0.16), rgba(15, 30, 32, 0)) right center / 0.9rem 100% no-repeat scroll #fff;
  }
  /* A set width and equal plan columns (fixed layout), so "Ready-made" breaks
     at its hyphen instead of widening the Free column, and two plans sit beside
     the names at 360. */
  .tbl { min-width: 0; width: 30rem; table-layout: fixed; }
  .tbl th, .tbl td { padding: 0.8rem 0.6rem; }
  .tbl th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 8.5rem;
    min-width: 8.5rem;
    max-width: 8.5rem;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  .tbl thead th:first-child { z-index: 2; }
  .tbl tbody tr:hover th:first-child { background: var(--petrol-50); }
}

/* Dark. The plan picked is a raised stone-900 pill; the best plan's ring
   petrol-500, which holds its edge on the dark card. The table's grounds are
   the card's, and its pinned first column stays opaque over the plans
   sliding under it, so its hover is the wash already mixed: #0a1a1c. */
@media screen {
  :where(.dark) .billing { background: rgba(255, 255, 255, 0.06); }
  :where(.dark) .billing-half.on { background: #1c1917; box-shadow: 0 0 0 1px #44403c, 0 1px 2px rgba(0, 0, 0, 0.4); }
  :where(.dark) .billing-half:focus-visible { outline-color: var(--petrol-400); }
  :where(.dark) .billing-save { color: var(--petrol-300); }
  :where(.dark) .plan, :where(.dark) .addon, :where(.dark) .tbl thead th { background: var(--paper); }
  :where(.dark) .plan-best { box-shadow: inset 0 0 0 2px var(--petrol-500); }
  :where(.dark) .tbl tbody tr:hover { background: rgba(0, 40, 45, 0.4); }
}
@media screen and (max-width: 720px) {
  :where(.dark) .tbl-scroll {
    background:
      linear-gradient(to left, #111111 40%, rgba(17, 17, 17, 0)) right center / 2rem 100% no-repeat local,
      linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)) right center / 0.9rem 100% no-repeat scroll #111111;
  }
  :where(.dark) .tbl th:first-child { background: var(--paper); }
  :where(.dark) .tbl tbody tr:hover th:first-child { background: #0a1a1c; }
}

/* --------------------------------------------------------------------------
   Quote / callout
   -------------------------------------------------------------------------- */

.callout {
  border-radius: var(--r-lg);
  background: var(--petrol-50);
  box-shadow: inset 0 0 0 1px var(--petrol-200);
  padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.callout svg { width: 26px; height: 26px; color: var(--petrol-700); flex: none; margin-top: 2px; }
.callout p { color: var(--petrol-900); }
.callout b { color: var(--petrol-950); }

@media screen {
  :where(.dark) .callout { background: rgba(0, 40, 45, 0.5); box-shadow: inset 0 0 0 1px var(--petrol-800); }
  :where(.dark) .callout svg { color: var(--petrol-300); }
  :where(.dark) .callout p { color: var(--petrol-100); }
  :where(.dark) .callout b { color: var(--petrol-50); }
}

/* --------------------------------------------------------------------------
   Final call to action
   -------------------------------------------------------------------------- */

.cta-band { position: relative; overflow: clip; }
.cta-band .wrap { text-align: center; }
.cta-band h2 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); margin-bottom: 1.1rem; }
.cta-band .lead { margin-inline: auto; max-width: 50ch; }
.cta-band .btn-row { justify-content: center; margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   Auth screens
   --------------------------------------------------------------------------
   Deliberately drawn in the product's own flat grammar: a mark, a 2px rule
   opening the block, a heading, one plain line, then the controls, inside one
   25rem measure. The BLOCK is centred in the window; its CONTENTS are not,
   centring ragged text over left-anchored controls is what reads as broken.
   No card: no fill, no edge, no radius, no cast.
   -------------------------------------------------------------------------- */

.auth-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: #fff; }
.auth-main { display: grid; place-items: center; padding: clamp(2rem, 1rem + 4vw, 4rem) var(--gut); position: relative; }
.auth-glow { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 0; }
.auth-glow i {
  position: absolute;
  display: block;
  width: 46vw; height: 46vw; min-width: 400px; min-height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.42;
}
.auth-glow i:nth-child(1) { left: -12vw; bottom: -14vw; background: radial-gradient(circle, rgba(143,210,219,0.6), rgba(143,210,219,0) 70%); }
.auth-glow i:nth-child(2) { right: -10vw; top: -16vw; background: radial-gradient(circle, rgba(216,244,248,0.9), rgba(216,244,248,0) 70%); }

.auth-block { position: relative; z-index: 1; width: 100%; max-width: 25rem; }
/* The auth pages kept a full-width rule for a while. With every other bar on
   the site gone it was the only one left, which made it read as a leftover
   rather than as a masthead line, so it went too. */
.auth-block .rule { display: none; }
.auth-block h1 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.35rem); margin-bottom: 0.6rem; }
.auth-block .sub { font-size: var(--t-small); color: var(--ink-3); margin-bottom: 2rem; }
.auth-alt { margin-top: 1.75rem; font-size: var(--t-small); color: var(--ink-3); }
.auth-alt a { font-weight: 700; }
.auth-foot { padding: 1.5rem var(--gut) 2rem; text-align: center; font-size: var(--t-micro); color: var(--ink-3); }
.auth-foot a { color: var(--ink-3); }
/* "Back to the website" draws its arrow (#i-back) beside the words rather than
   typing "←", which neither face here carries: the reader's machine drew it from
   a fallback font, small and below the middle of the words (owner, 2026-10-15,
   of the app's own door footer, which this row is drawn from). The arrow stands
   in the words' own line, its middle on the middle of the capitals: measured
   from the baseline, for `.tlink`'s reason. The `em` line is Plus Jakarta Sans's
   figure for a browser without `cap`. `nowrap` keeps the arrow on the words'
   line, since a line may break beside a picture. */
.auth-foot a.back { white-space: nowrap; }
.auth-foot a.back svg {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.25em;
  vertical-align: -0.0525em;
  vertical-align: calc(0.5cap - 0.425em);
}

.auth-side { display: grid; gap: 1rem; align-content: center; }
.auth-side .card { padding: 1.35rem 1.5rem; }
.auth-side .card :is(h2, h3) { margin-bottom: 0.4rem; font-size: 1.25rem; }
.auth-side .icon-badge { width: 42px; height: 42px; border-radius: 13px; margin-bottom: 0.85rem; }
.auth-side .icon-badge svg { width: 20px; height: 20px; }
.auth-two {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 24rem);
  justify-content: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  width: 100%;
  max-width: 58rem;
  align-items: center;
}

/* Dark. These two pages are the design reference for the app's own doors,
   which are dark in both themes; live, they forward there. */
@media screen {
  :where(.dark) .auth-page { background: var(--paper); }
  :where(.dark) .auth-glow i:nth-child(1) { background: radial-gradient(circle, rgba(4, 129, 142, 0.45), rgba(4, 129, 142, 0) 70%); }
  :where(.dark) .auth-glow i:nth-child(2) { background: radial-gradient(circle, rgba(40, 154, 167, 0.3), rgba(40, 154, 167, 0) 70%); }
}

/* ==========================================================================
   7. Narrower screens
   --------------------------------------------------------------------------
   The drawings scale as one piece (their `em` is a share of their own width),
   so most of them need nothing here. The ones that are wider than they are
   tall (the builder, the two phone-and-screen films, the menu, the two wide
   tiles) are laid out again for a phone rather than shrunk, because shrunk
   they would be a picture of nothing. The two films decide by their OWN
   width, beside their other rules, since a film in half a column is as
   narrow as one on a phone; the rest decide by the window's, here.
   ========================================================================== */

/* The positioning line beside the logo goes first: it is what the bar can
   spare when five links and two buttons need the width. */
@media (max-width: 1300px) {
  .brand-tag { display: none; }
}

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

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .lead { max-width: 46ch; }
  .hero-stage { width: 100%; max-width: 820px; margin-inline: auto; }
  .hs-phone .phone { --pw: clamp(112px, 17vw, 170px); }

}

/* Five links, two buttons, the light/dark switch and the logo stop fitting
   one row here: measured, not guessed. The logo is words in the visitor's own
   system face since 2 October 2026 (`.lockup`), so the measure is the widest
   face's. The switch (18 October 2026) costs the row 58px, its 48px and a
   gap: in DejaVu Sans a link broke onto two lines up to a 1103px screen, so
   the links fold at 1120, which keeps 15px spare there (33 in the system
   face, 38 in Liberation Sans). It was 1100, with 55px spare in DejaVu, and
   1060 before that, which the raster itself had already outgrown: the links
   wrapped at 1061 to 1066. main.js asks the same width. */
@media (max-width: 1120px) {
  .nav { display: none; }
  .topbar-cta .btn-ghost { display: none; }
  .burger { display: grid; }
  .js .theme-btn { display: none; }
}

@media (max-width: 1000px) {
  .jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The features page's two films, one under the other, each as wide as the
     column. Above 700px a film is drawn wide again, from the column's left
     edge, and its words and button are set left with it; on a phone it fills
     the column and the button spans it. The ordering film's heading opens the
     second four. */
  .film-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; justify-items: stretch; }
  .film-pair > h2 { text-align: left; }
  .film-pair > .lead { text-align: left; text-wrap: pretty; }
  .film-pair > .btn-row + h2 { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
}

/* Between those two, a film is drawn as on a phone, at most 470px wide and
   centred in a wider column (`@container film`, after the ordering film), so
   its heading, line and button are centred with it, as side by side, instead
   of set left up to 111px outside it (at 750). The pair is the films' width
   here, so it asks the same 700px question the films do; from 521px, where
   buttons stop spanning the screen. After the rules above, which it
   overrides. */
@media (min-width: 521px) and (max-width: 1000px) {
  @container pair (max-width: 700px) {
    .film-pair > * { justify-self: center; }
    .film-pair > h2 { text-align: center; }
    .film-pair > .lead { text-align: center; text-wrap: balance; }
  }
}

@media (max-width: 960px) {
  .split, .split-wide, .split-lead, .split-art, .split-art-r, .split-phone { grid-template-columns: minmax(0, 1fr); }
  .split-flip > *:first-child { order: 2; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-two { grid-template-columns: minmax(0, 1fr); }
  .auth-side { display: none; }
}

@media (max-width: 860px) {
  .jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jump a { flex-direction: row; justify-content: flex-start; padding: 0.7rem 0.85rem; text-align: left; }
  .jump .pi { width: 38px; height: 38px; border-radius: 12px; }
  /* The three homepages become a row to swipe through. */
  .show {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 30rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .show-item { scroll-snap-align: start; }
  .show-a, .show-c { margin-top: 0; }
  .show-b { order: -1; }
}

/* Phones -------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* The builder: the conversation above the page it changes, the bar down
     to the platform and the account. At 1440 shrunk to a phone it would be a
     picture of nothing; this is the same room laid out narrow. */
  .sc-chat > .ui-s { --ui-w: 34; height: 46em; }
  .sc-chat .bb-bar { justify-content: space-between; }
  .sc-chat .bb-brand { width: auto; }
  .sc-chat .bb-tabs, .sc-chat .bb-tools, .sc-chat .bb-vr, .sc-chat .bb-head, .sc-chat .bb-switch { display: none; }
  .sc-chat .bb-room { flex-direction: column; }
  .sc-chat .bb-side { width: auto; height: 22.25em; }

  /* The menu: the printed one above, what was read from it below. */
  .sc-menu { aspect-ratio: 28 / 38; }
  .sc-menu .ui-s { --ui-w: 28; }
  .menu-paper { left: 0.6em; top: 0.8em; width: 17em; }
  .menu-read { right: 0; top: 12.5em; width: 21em; }
  .mr-toast { left: 0.5em; bottom: 0.2em; }

  /* Reservations and ordering lay themselves out by their own width: see
     "A film narrower than 700px". */

  /* The two wide drawings (the photos, the figures), laid out narrow. */
  .sc-photos .ui-s { --ui-w: 26; }
  .ph-page { left: 1.2em; right: 1.2em; width: auto; top: 1.1em; bottom: 5.4em; }
  .ph-tray {
    top: auto;
    bottom: 0.9em;
    left: 50%;
    grid-template-columns: auto repeat(3, 2.5em);
    align-items: center;
    padding: 0.55em 0.7em;
    transform: translateX(-50%) rotate(-2deg);
  }
  .ph-tl { grid-column: auto; margin-right: 0.3em; }
  /* The figures: the four tiles two by two and the two cards under them, the
     drawing as tall as they are. Squeezed into the wide drawing's shape, the
     chart had been nothing but its own padding and "Visits from" ran off the
     foot, at every width up to this one (measured 9 October 2026). Never
     drawn wider than 440px, so a wide phone gets the same picture, centred
     on its panel. */
  .art-wide .sc-stats { aspect-ratio: auto; }
  .sc-stats > .ui-s {
    --ui-w: 24;
    position: relative;
    inset: auto;
    max-width: 440px;
    margin-inline: auto;
    font-size: calc(min(100cqw, 440px) / var(--ui-w));
  }
  .stx { position: static; padding: 1em; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 0.55em; }
  .st-l { order: 1; }

  /* The wide screens (the week, the kitchen's board, the Order page, the
     builder adding pages) keep a readable width and swipe sideways, the way
     the showcase does: shrunk to a phone they would be a picture of nothing. */
  .week-stage, .shop-stage, .art-swipe {
    margin-inline: calc(-1 * var(--gut));
    padding: 0.5rem var(--gut) 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .week-stage > .ui, .shop-stage > .ui, .art-swipe > .ui { width: 44rem; max-width: none; }
  /* The builder adding pages is drawn at 1280 (66 of the app's rem across
     until 18 October 2026, 80 now), so it swipes that much wider to keep its
     words the size they were on a phone. */
  .art-swipe > .sc-pages { width: calc(44rem * 80 / 66); }
  /* The reservation sheet is drawn at 1440px, so it takes more room to stay
     readable, and it opens at its right-hand end: that is where its story
     happens (tonight's column, the count of what waits for an answer, "Add a
     reservation"), with the rest of the week a swipe away. Done with the
     scroller's direction rather than a script, so it holds with scripting
     off; the drawing inside is put back to left to right. */
  .week-stage-end { direction: rtl; }
  .week-stage > .sc-week { width: 50rem; direction: ltr; }
  .week-stage > .sc-board { width: 50rem; }
}

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .feat-list { grid-template-columns: minmax(0, 1fr); }
  .mobile-nav { inset-block-start: 68px; }
  .topbar-in { min-height: 68px; }
  .how { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
}

@media (max-width: 640px) {
  .hero-stage { padding: 2.25rem 0 2rem; }
  .hs-t3, .hs-t4 { display: none; }
  .hs-t1 { top: 0.4rem; left: -0.35rem; }
  .hs-t2 { top: auto; bottom: 0.35rem; left: 0.4rem; }
  .hs-toast .toast { max-width: 14rem; padding: 0.45rem 0.8rem 0.45rem 0.45rem; }
  .hs-toast .toast .ti { width: 32px; height: 32px; border-radius: 10px; }
  .hs-toast .toast b { font-size: 0.875rem; }
  .hs-phone { right: -0.4rem; }
  .hero-assur { grid-template-columns: minmax(0, 1fr); }
}

/* Under this width the product's name, one call to action and a menu button
   cannot all fit without something wrapping, and a wrapped brand reads as a
   broken page. The call to action goes, because it is just below in the hero
   and it is the first thing inside the menu. */
@media (max-width: 560px) {
  .topbar-cta .btn-primary { display: none; }
}

/* The lockup is words in the visitor's own system face, so its width is the
   face's: 213px in the widest one measured (DejaVu Sans, Linux's default),
   which beside the 52px menu button and the bar's 20px gap is 5px more than a
   320px screen holds inside its gutters. The gap gives those 5px back, never
   the lockup: it stays the app's size on every screen. */
@media (max-width: 340px) {
  .topbar-in { gap: 0.75rem; }
}

@media (max-width: 560px) {
  .art-duo { grid-template-columns: minmax(0, 1fr); }
  .art-pair { padding-bottom: 0; display: grid; gap: 1rem; }
  .art-float { position: static; width: auto; }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .stat { display: flex; align-items: baseline; gap: 1rem; }
  .stat span { margin-top: 0; }
  /* The footer's two lists stand side by side between the lockup and the
     address, so a phone scrolls past six links rather than ten (one column
     of all four groups was 1,028px tall at 390). Equal halves where both fit;
     where they do not, the column with the longer label ("Getting started",
     157px) takes what it needs and the other gives way. The lockup's row
     and the address's row span both columns, and a spanning row would size
     them to ITS unwrapped width (the placeholder line under the address,
     about 400px, pushed both columns 32px off a 390 screen): size
     containment keeps it out of the sum, and it wraps in whatever the two
     lists leave. */
  .footer-grid { grid-template-columns: repeat(2, minmax(max-content, 1fr)); column-gap: 1rem; }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; contain: inline-size; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .topbar-cta .btn { width: auto; white-space: nowrap; padding-inline: 1rem; }
  .points li { font-size: var(--t-micro); }
}
/* Side by side the two lists need 296px, which leaves 4px or less to spare
   from 340px down: one column there, so no face wider than ours wraps them. */
@media (max-width: 340px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The pricing page's promises and table, and the questions page, narrow. */
@media (max-width: 760px) {
  .promise { justify-content: flex-start; gap: 0.75rem 1.25rem; }
  .tbl-card { padding-inline: 0; }
}
@media (max-width: 860px) {
  .faq-grp { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .faq-side { position: static; flex-direction: row; align-items: center; gap: 0.85rem; }
  .fq-i { width: 44px; height: 44px; border-radius: 14px; }
  .fq-i svg { width: 21px; height: 21px; }
}

/* ==========================================================================
   8. Motion, switched off
   --------------------------------------------------------------------------
   Everything is already in its finished state when nothing plays: the script
   never starts a scene or a carousel under reduced motion. What is left here
   is the handful of things whose visible state an animation would otherwise
   PRODUCE.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hs-toast { opacity: 1 !important; transform: none !important; }
  .hl-under::after { transform: none !important; }
  .sc-lang .ln-l { animation: none !important; }
}

/* Print: an owner may well print the pricing page. */
@media print {
  .topbar, .mobile-nav, .hero-glow, .auth-glow, .cta-band, .footer { display: none !important; }
  body { color: #000; }
  .rise, .rise-l, .rise-r, .rise-scale { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   THE LANDING PAGE AS ONE STORY (2026-10-01)
   --------------------------------------------------------------------------
   The owner: "the marketing website looks very much like divided in sections
   even on the homepage, could we make the design more integrated? it should
   give a quick overview and sell the platform."

   So index.html no longer stacks bands on an alternating ground. Everything
   below sits on ONE ground (--paper-warm, the body's own) with ONE dark stage:
   - the promise, centred;
   - the stage, which the browser window straddles (the stage starts --lift
     below the window's top, the window is pulled back up by the same amount),
     with the guest's phone and the owner's sheet standing on it and the three
     overview columns under the three pictures;
   - one petrol line (.ix-axis, .ix-steps::before) from the stage, through the
     four steps, to the price, where it ends in the cloche (.ix-end).
   Every class here is `ix-` so nothing on the other pages can be moved by it.
   The drawings are laid out once in em and scaled by their own width
   (container units), like the `.ui` drawings elsewhere on the site.
   ========================================================================== */

body:has(.ix-stage) { background: var(--paper-warm); }
/* The footer is the one thing here off the warm ground. On every other page
   a dark band ends the page and the footer's ground follows it; here the
   price was followed by 208px of the same ground before the footer's first
   word, which read as an empty band rather than as the page ending (owner,
   6 October 2026: "too much empty space"). White, like the bar at the top. */
body:has(.ix-stage) .footer { background: var(--paper); }

.ix-hero { padding: clamp(2.5rem, 1.75rem + 3vw, 4.5rem) 0 3rem; text-align: center; }
.ix-hero-in { display: flex; flex-direction: column; align-items: center; }
.ix-h1 { max-width: 13em; font-size: clamp(2.6rem, 1.2rem + 5vw, 5.5rem); line-height: 1.03; letter-spacing: -0.03em; text-wrap: balance; }
.js .ix-h1:not(.in) .hl-under::after { transform: scaleX(0); }
.ix-hero .lead { max-width: 46ch; margin: 1.5rem auto 0; }
.ix-hero .btn-row { justify-content: center; margin-top: 2.25rem; }
/* The tick rides inline before the first word, never as a flex item: a line
   that wraps takes the whole width as its box, so on a phone under about 370px
   a flex tick stood far left of two centred lines. Sized and lowered in em
   (18px and where the flex row had it, at 16px), so it stays on the words'
   middle at any text size. "no card needed." is held by non-breaking spaces,
   so a wrap falls at the comma. */
.ix-assure { margin-top: 1.25rem; font-size: var(--t-small); font-weight: 500; color: var(--ink-3); }
.ix-assure svg { display: inline-block; width: 1.125em; height: 1.125em; margin-right: 0.5rem; vertical-align: -0.2em; color: var(--good); }

/* ---- The stage ---- */
.ix-stage-wrap { padding: 0 clamp(8px, 1.7vw, 24px); }
.ix-stage {
  --lift: 240px;
  position: relative;
  display: flow-root;            /* keeps the trip's negative margin from collapsing into ours */
  margin-top: var(--lift);
  padding-bottom: clamp(2.5rem, 4.5vw, 4.5rem);
  border-radius: clamp(24px, 2.6vw, 36px);
  background: var(--petrol-950);
  isolation: isolate;
}
/* The glow behind the website, and nothing else: the stage once carried a
   grid of faint white dots too, taken off at the owner's ask (2026-10-02,
   "i dont like the small light dots on the petrol sections"). Keep the
   petrol plain. */
.ix-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 46% at 50% 0%, rgba(40, 154, 167, 0.3), rgba(40, 154, 167, 0) 72%);
}
.ix-trip { position: relative; z-index: 1; max-width: 1240px; height: 670px; margin: calc(var(--lift) * -1) auto 0; }

.ix-site { position: absolute; left: 19%; top: 0; width: 62%; margin: 0; box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 44px 80px -34px rgba(0, 20, 24, 0.6), 0 18px 36px -18px rgba(0, 20, 24, 0.35); }
.ix-site img { display: block; width: 100%; height: auto; }

/* The guest's phone is the site's one phone drawing (.phone), as wide as its box.
   It stands 30px higher than it did until 6 October 2026, and the trip is
   30px shorter with it, so the three columns come up under the pictures:
   below the screenshot the stage held 341px of empty petrol at 1440, and
   holds 299px. */
.ix-guest { position: absolute; left: 1.5%; top: 120px; z-index: 2; width: 252px; container-type: inline-size; }
.ix-phone { --pw: 100cqw; }
.ix-screen { background: #fbf8f3; }
.ix-bk { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: calc(100cqw / 22); line-height: 1.3; color: #3a2a22; text-align: left; }
.ix-bk-top { padding: 3.4em 1.5em 1.3em; background: #1f1612; color: #f3ebe1; text-align: center; }
.ix-bk-name { display: block; font-family: var(--font-display); font-size: 2.3em; font-weight: 500; line-height: 1; }
.ix-bk-sub { display: block; margin-top: 0.55em; font-size: 0.82em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #d6c4b2; }
.ix-bk-body { display: flex; flex-direction: column; padding: 1.3em 1.4em; }
.ix-bk-l { display: block; margin: 1em 0 0.5em; font-size: 0.9em; font-weight: 700; color: #7a675b; }
.ix-bk-l:first-child { margin-top: 0; }
.ix-bk-chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.ix-bk-chips span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5em; height: 2.5em; padding: 0 0.55em; border-radius: 0.6em; background: #fff; box-shadow: inset 0 0 0 0.08em #e8ddd2; font-weight: 600; }
.ix-bk-chips .on { background: #1f1612; color: #f3ebe1; box-shadow: none; }
.ix-bk-days span { flex-direction: column; min-width: 3.6em; height: 3.2em; line-height: 1.1; }
.ix-bk-days small { font-size: 0.75em; font-weight: 600; opacity: 0.8; }
.ix-bk-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ix-bk-field { display: flex; align-items: center; height: 2.7em; padding: 0 0.8em; border-radius: 0.6em; background: #fff; box-shadow: inset 0 0 0 0.08em #e8ddd2; font-weight: 600; }
.ix-bk-btn { display: flex; align-items: center; justify-content: center; height: 3em; margin-top: 1.3em; border-radius: 999px; background: #1f1612; color: #f3ebe1; font-size: 1.05em; font-weight: 700; }

.ix-you { position: absolute; right: 0; top: 190px; z-index: 2; width: 410px; container-type: inline-size; }
.ix-app { font-size: calc(100cqw / 30); line-height: 1.35; color: var(--ink-2); text-align: left; background: #fff; border-radius: 1.1em; overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 44px 80px -34px rgba(0, 20, 24, 0.65), 0 14px 30px -16px rgba(0, 20, 24, 0.4); }
.ix-app-bar { display: flex; align-items: center; gap: 0.6em; padding: 0.85em 1.1em; border-bottom: 0.08em solid var(--line-soft); }
/* The platform's own lockup in both pictures of the app on this page (this
   card, and the builder in the fourth step): the tile and "The Main Course",
   drawn as the app bar draws them (`.wk-brand`, in the app's face), never the
   tile alone (owner, 2026-10-17: "the main course logo should be shown in
   full"). The card's screen stands after it behind a hairline, the way the
   site's own bar stands its tag beside the lockup. */
.ix-brand { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.9em; }
.ix-app-bar .ix-app-title { padding-left: 0.6em; border-left: 0.08em solid var(--line); }
.ix-app-title { font-weight: 700; color: var(--ink); }
.ix-app-badge { display: inline-flex; align-items: center; height: 1.9em; margin-left: auto; padding: 0 0.75em; border-radius: 999px; background: var(--petrol-50); color: var(--petrol-800); font-size: 0.85em; font-weight: 700; }
.ix-app-body { padding: 1em 1.1em 1.2em; }
.ix-app-l { display: block; margin: 0 0 0.55em; font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ix-app-day { margin-top: 1.15em; }
.ix-wait { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9em; padding: 0.75em 0.8em; border-radius: 0.8em; background: var(--petrol-50); box-shadow: inset 0 0 0 0.08em var(--petrol-200); }
.ix-w { font-size: 0.9em; line-height: 1.3; color: var(--ink-3); }
.ix-w b { display: block; color: var(--ink); }
.ix-w-act { display: flex; flex-direction: column; gap: 0.3em; }
.ix-w-ok { display: flex; align-items: center; justify-content: center; height: 2.1em; padding: 0 1em; border-radius: 999px; background: var(--petrol-700); color: #fff; font-size: 0.85em; font-weight: 700; }
.ix-w-no { font-size: 0.8em; font-weight: 600; text-align: center; color: var(--ink-3); }
.ix-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; gap: 0.7em; padding: 0.6em 0; border-top: 0.08em solid var(--line-soft); }
.ix-row .t { font-size: 0.9em; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ix-row .n { font-size: 0.88em; line-height: 1.3; color: var(--ink-3); }
.ix-row .n b { display: block; color: var(--ink); }
.ix-row .st { display: inline-flex; align-items: center; height: 1.8em; padding: 0 0.7em; border-radius: 999px; background: var(--good-bg); color: var(--good); font-size: 0.78em; font-weight: 700; white-space: nowrap; }

/* The notes arrive once, after the pictures, sliding in from the right
   (`.rise-r` in the markup, 1.1s late), and then stand still. The order note
   floated up and down on a loop until 16 October 2026 (owner: "i dont like
   the floating animations"). */
.ix-notes { display: contents; }
.ix-toast { position: absolute; z-index: 3; white-space: nowrap; }
.ix-t-order { right: 6%; top: 96px; }
.ix-t-resv { display: none; }

.ix-ov { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 2rem 3rem; max-width: 1320px; margin: 2.75rem auto 0; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }
.ix-ov-k { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--petrol-300); }
.ix-ov-k::after { content: ""; flex: 1; height: 1px; background: rgba(143, 210, 219, 0.28); }
.ix-ov ul { list-style: none; }
.ix-ov li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: #e8f5f7; }
.ix-ov li svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--petrol-300); }

/* ---- One line through the steps ----
   The line joins the stage to the steps and the steps to each other, so its
   lengths are a join, not a pause. Until 6 October 2026 they were 72px,
   28 + 56px and 72px and the steps stood up to 104px apart: at 1440, 140px
   of line between the heading and the first step and 101px between steps,
   now 100px and 64px (owner: "too much empty space"). */
.ix-axis { display: block; width: 2px; margin: 0 auto; background: var(--petrol-200); }
.ix-axis-a { height: 56px; }
.ix-axis-b { height: 40px; margin-top: 20px; }
.ix-axis-c { height: 56px; }
.ix-how-head { max-width: 920px; margin: 0 auto; padding: 1.4rem var(--gut) 0; text-align: center; }

.ix-steps { position: relative; display: flex; flex-direction: column; gap: clamp(40px, 4.5vw, 64px); max-width: 1320px; margin: 0 auto; padding: 40px var(--gut) 0; list-style: none; }
.ix-steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--petrol-200); }
.ix-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: center; }
.ix-node { position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--petrol-700); color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; box-shadow: 0 0 0 10px var(--paper-warm); }
.ix-copy { grid-column: 1; grid-row: 1; justify-self: end; width: 100%; max-width: 470px; }
.ix-art { grid-column: 3; grid-row: 1; justify-self: start; width: 100%; max-width: 540px; margin: 0; container-type: inline-size; }
.ix-flip .ix-copy { grid-column: 3; justify-self: start; }
.ix-flip .ix-art { grid-column: 1; justify-self: end; }

.ix-when { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 34px; padding: 0 0.9rem 0 0.7rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-micro); font-weight: 700; color: var(--petrol-800); }
.ix-when svg { width: 17px; height: 17px; color: var(--petrol-700); }
.ix-copy h3 { margin-top: 1rem; font-size: clamp(1.6rem, 1.25rem + 1vw, 2.1rem); line-height: 1.15; }
.ix-copy > p { margin-top: 0.75rem; color: var(--ink-2); }

/* The drawings: em-sized, 36em wide, scaled by the column's width. */
.ix-ui { position: relative; font-size: calc(100cqw / 36); line-height: 1.35; color: var(--ink-2); }
.ix-ui svg { width: 1em; height: 1em; flex: none; }
.ix-card { background: #fff; border-radius: 1em; box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.07), 0 30px 60px -34px rgba(2, 40, 45, 0.38), 0 10px 22px -14px rgba(2, 40, 45, 0.16); }
.ix-okc { display: inline-grid; place-items: center; flex: none; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--good); color: #fff; }
.ix-okc svg { width: 0.9em; height: 0.9em; }
.ix-go { display: flex; align-items: center; justify-content: center; height: 2.6em; margin-top: 0.8em; border-radius: 999px; background: var(--petrol-700); color: #fff; font-size: 0.92em; font-weight: 700; }

.ix-a1 { height: 29.5em; }
.ix-ask { position: absolute; left: 0; top: 0; width: 22em; padding: 1.4em 1.5em 1.5em; }
.ix-ask-h { display: block; font-family: var(--font-display); font-size: 1.25em; font-weight: 600; color: var(--ink); }
.ix-lbl { display: block; margin: 1em 0 0.45em; font-size: 0.82em; font-weight: 700; color: var(--ink-3); }
.ix-inp { display: flex; align-items: center; height: 2.6em; padding: 0 0.9em; border-radius: 0.6em; box-shadow: inset 0 0 0 0.1em var(--petrol-400), 0 0 0 0.28em var(--petrol-100); font-weight: 600; color: var(--ink); }
.ix-caret { display: inline-block; width: 0.09em; height: 1.15em; margin-left: 0.12em; background: var(--petrol-700); animation: ix-blink 1.1s steps(1) infinite; }
.ix-filled { box-shadow: inset 0 0 0 0.08em var(--line); }
.ix-files { display: flex; align-items: center; gap: 0.6em; }
.ix-file { display: inline-flex; align-items: center; gap: 0.45em; height: 2.6em; padding: 0 0.55em 0 0.7em; border-radius: 0.6em; background: var(--paper-warm); box-shadow: inset 0 0 0 0.08em var(--line); font-size: 0.92em; font-weight: 600; color: var(--ink); }
.ix-file > svg { width: 1.25em; height: 1.25em; color: var(--petrol-700); }
.ix-thumbs { display: flex; gap: 0.35em; }
.ix-thumbs .pt { width: 2.6em; opacity: 1; transform: none; }
.ix-menu { position: absolute; right: 0; top: 10em; width: 17.5em; padding: 1.2em 1.3em 1.3em; }
.ix-menu-h { display: flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--ink); }
.ix-menu-h svg { width: 1.2em; height: 1.2em; color: var(--petrol-700); }
.ix-menu-sub { display: block; margin: 0.15em 0 0.6em; font-size: 0.82em; color: var(--ink-3); }
.ix-dish { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 0.55em 0; border-top: 0.08em solid var(--line-soft); font-size: 0.95em; }
.ix-dish b { font-weight: 600; color: var(--ink); }
.ix-dish em { font-style: normal; font-weight: 700; color: var(--petrol-800); font-variant-numeric: tabular-nums; }

.ix-a2 { height: 27em; }
.ix-mini { position: absolute; width: 64%; border-radius: 0.7em; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 30px 60px -30px rgba(2, 40, 45, 0.45), 0 8px 18px -12px rgba(2, 40, 45, 0.2); }
.ix-mini-bar { display: flex; gap: 0.3em; padding: 0.5em 0.6em; background: #f4f3ef; border-bottom: 1px solid var(--line); }
.ix-mini-bar i { display: block; width: 0.5em; height: 0.5em; border-radius: 50%; background: #dcd8cf; }
.ix-mini img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.ix-m1 { left: 0; top: 0; }
.ix-m2 { left: 36%; top: 34%; }
.ix-mphone { position: absolute; left: 3%; top: 39%; z-index: 2; --pw: 19cqw; }

.ix-a3 { height: 25em; }
.ix-pub { position: absolute; left: 0; top: 0; width: 24em; padding: 1.4em 1.5em; }
.ix-pub-url { display: flex; align-items: center; gap: 0.5em; height: 2.8em; padding: 0 1em; border-radius: 999px; background: var(--paper-warm); box-shadow: inset 0 0 0 0.08em var(--line); font-weight: 600; color: var(--ink); }
.ix-pub-url svg { color: var(--good); }
.ix-pub-btn { height: 2.8em; font-size: 1em; }
.ix-pub-row { display: flex; align-items: center; gap: 0.6em; margin-top: 0.8em; font-size: 0.95em; font-weight: 600; }
.ix-pub-live { display: flex; align-items: center; margin-top: 1.1em; padding-top: 1em; border-top: 0.08em solid var(--line-soft); font-weight: 700; color: var(--good); }
.ix-seo { position: absolute; right: 0; top: 9em; width: 17em; padding: 1.3em 1.4em; }
.ix-seo-h { display: block; margin-bottom: 0.5em; font-weight: 700; color: var(--ink); }
.ix-seo-row { display: flex; align-items: center; gap: 0.7em; padding: 0.62em 0; border-top: 0.08em solid var(--line-soft); font-size: 0.92em; }
.ix-sw { position: relative; flex: none; width: 2.4em; height: 1.4em; border-radius: 999px; background: var(--petrol-700); }
.ix-sw::after { content: ""; position: absolute; top: 0.2em; left: 1.2em; width: 1em; height: 1em; border-radius: 50%; background: #fff; }

.ix-win { border-radius: 1em; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(11, 30, 34, 0.08), 0 30px 60px -32px rgba(2, 40, 45, 0.42), 0 10px 22px -14px rgba(2, 40, 45, 0.18); }
.ix-win-bar { display: flex; align-items: center; gap: 0.45em; padding: 0.65em 0.8em; border-bottom: 0.08em solid var(--line-soft); }
/* The app's page tabs stand clear of its lockup (the brand's own column from
   1280px), so the lockup keeps a little air before "Home" here too. */
.ix-win-bar .ix-brand { margin-right: 0.6em; font-size: 0.8em; }
.ix-tab { display: inline-flex; align-items: center; height: 1.9em; padding: 0 0.7em; border-radius: 0.5em; font-size: 0.85em; font-weight: 600; color: var(--ink-3); }
.ix-tab.on { background: var(--petrol-50); color: var(--petrol-800); }
.ix-tool { display: inline-flex; align-items: center; gap: 0.35em; height: 1.9em; margin-left: auto; padding: 0 0.7em; border-radius: 999px; box-shadow: inset 0 0 0 0.08em var(--line); font-size: 0.82em; font-weight: 600; }
.ix-win-body { display: grid; grid-template-columns: 13.5em minmax(0, 1fr); height: 20em; }
.ix-chat { display: flex; flex-direction: column; gap: 0.55em; padding: 0.85em; background: var(--paper-warm); border-right: 0.08em solid var(--line-soft); }
.ix-msg { align-self: flex-start; max-width: 94%; padding: 0.6em 0.8em; border-radius: 0.9em 0.9em 0.9em 0.3em; background: #fff; box-shadow: 0 0 0 0.08em var(--line); font-size: 0.85em; line-height: 1.4; }
.ix-msg.ix-me { align-self: flex-end; border-radius: 0.9em 0.9em 0.3em 0.9em; background: var(--petrol-700); color: #fff; box-shadow: none; }
.ix-chat-in { display: flex; align-items: center; gap: 0.4em; height: 2.6em; margin-top: auto; padding: 0 0.3em 0 0.8em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 0.08em var(--line); font-size: 0.82em; color: #7b8c8f; }
.ix-send { display: inline-flex; align-items: center; height: 2em; margin-left: auto; padding: 0 0.8em; border-radius: 999px; background: var(--petrol-700); color: #fff; font-weight: 700; }
.ix-view { padding: 0.8em; background: #fbfaf8; }
/* The note stands above the page, not over it: over it, it cut Noir's centred logo in half (2026-10-16). */
.ix-view-in { display: flex; flex-direction: column; height: 100%; border-radius: 0.6em; overflow: hidden; background: #1d1411; }
.ix-view-in img { display: block; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top center; }
.ix-pnote { display: flex; align-items: center; gap: 0.45em; padding: 0.55em 0.8em; background: #f6efe6; color: #2a1d16; font-size: 0.78em; font-weight: 700; }

/* ---- Where the line ends: the price ---- */
.ix-end { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--petrol-700); color: #fff; box-shadow: 0 0 0 10px var(--paper-warm), 0 18px 34px -14px rgba(3, 105, 116, 0.55); }
.ix-end svg { width: 30px; height: 30px; }
.ix-start { padding: 1.75rem 0 clamp(3.5rem, 6vw, 5rem); text-align: center; }
/* THE PRICE IN THREE FIGURES (2026-10-04): what one restaurant pays, in the
   place the four plan cards stood as one strip, and drawn the way that strip
   was: white cells split by hairlines in one rounded band. The figure gives
   way before the type does: below 640px the three stand one under another,
   because "+$14.99 / month" needs about 190px of a cell. */
.ix-prices { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 880px; margin: 2.25rem auto 0; border-radius: var(--r-lg); overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(2, 40, 45, 0.3); }
.ix-prices li { background: #fff; padding: 1.6rem 1.25rem 1.5rem; }
.ix-prices b { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 1.2vw, 2.6rem); font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.ix-prices small { font-family: var(--font-sans); font-size: var(--t-small); font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.ix-prices span { display: block; margin-top: 0.7rem; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.ix-promise { margin-top: 2rem; }
.ix-center { justify-content: center; margin-top: 2.1rem; }
.ix-more { margin-top: 1.1rem; font-size: var(--t-small); font-weight: 600; }
.ix-more a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }

@keyframes ix-blink { 50% { opacity: 0; } }

@media (max-width: 1180px) {
  .ix-stage { --lift: 200px; }
  .ix-trip { height: 610px; }
  .ix-site { left: 17%; width: 66%; }
  .ix-guest { left: 0; width: 220px; }
  .ix-you { top: 200px; width: 360px; }
  .ix-t-order { right: 3%; }
}
@media (max-width: 860px) {
  .ix-stage { --lift: 110px; }
  .ix-trip { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-areas: "site site" "guest notes"; column-gap: 12px; height: auto; padding: 0 14px; }
  .ix-site { position: relative; left: auto; width: auto; grid-area: site; }
  .ix-guest { position: relative; left: auto; top: auto; width: auto; grid-area: guest; margin-top: -50px; }
  .ix-you { display: none; }
  .ix-notes { display: flex; flex-direction: column; gap: 10px; grid-area: notes; align-self: center; min-width: 0; padding-top: 24px; }
  .ix-toast { position: relative; left: auto; right: auto; top: auto; max-width: none; white-space: normal; }
  .ix-t-resv { display: flex; }
  .ix-ov { margin-top: 2rem; }
  .ix-axis-a, .ix-axis-b, .ix-axis-c, .ix-end { display: none; }
  .ix-how-head { padding-top: 3rem; text-align: left; }
  .ix-steps { gap: 48px; padding-top: 32px; }
  .ix-steps::before { left: calc(var(--gut) + 22px); }
  .ix-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 24px; align-items: start; }
  .ix-node { grid-column: 1; width: 44px; height: 44px; font-size: 1.25rem; box-shadow: 0 0 0 8px var(--paper-warm); }
  .ix-copy, .ix-flip .ix-copy { grid-column: 2; grid-row: 1; justify-self: stretch; max-width: none; }
  .ix-art, .ix-flip .ix-art { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; max-width: none; }
  .ix-start { padding-top: 3.5rem; }
}
@media (max-width: 640px) {
  .ix-prices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ix-hero .btn-row .btn, .ix-center .btn { width: 100%; }
}
@media (max-width: 480px) {
  .ix-toast { gap: 0.55rem; padding: 0.5rem 0.65rem 0.5rem 0.5rem; }
  .ix-toast .ti { width: 32px; height: 32px; }
  .ix-toast b { font-size: 0.875rem; }
}
/* Below 400px the notes no longer fit beside the phone (the widest was
   198px, and the column is 154px at 320), and they used to run off the
   screen's edge. So they slide over the phone's edge instead, as the notes
   float over the pictures above 860px: one width for both, their right
   edges on the screenshot's, and at least 20px over the phone (the 32px is
   that and the 12px gap), so they never stop a pixel short of it. */
@media (max-width: 400px) {
  .ix-notes { justify-self: end; width: max-content; min-width: calc(100% + 32px); }
  .ix-toast { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-caret { animation: none !important; }
  .ix-h1 .hl-under::after { transform: none !important; }
}

/* Dark. The stage, its petrol and its three columns are already dark and stay.
   On it, Noir's website and the guest's phone are the restaurant's and keep
   their colours; the browser window round the site goes dark, as the
   builder's preview frame does. The app's pictures (the sheet's "To confirm"
   card, the questions and the food menu, publishing and Google, the builder
   and its chat) are the app's dark panels: #111111 on a stone-800 edge, the
   bar #1b1b1c, the words stone-100 to stone-400, the washes petrol-950. The
   line through the steps is petrol-800, and each step's node keeps its
   petrol fill inside a ring of the dark ground. */
@media screen {
  :where(.dark) .ix-assure svg { color: #34d399; }
  :where(.dark) .ix-site { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 44px 80px -34px rgba(0, 0, 0, 0.7), 0 18px 36px -18px rgba(0, 0, 0, 0.5); }

  :where(.dark) .ix-app { background: #111111; box-shadow: 0 0 0 1px #44403c, 0 44px 80px -34px rgba(0, 0, 0, 0.8), 0 14px 30px -16px rgba(0, 0, 0, 0.55); }
  :where(.dark) .ix-app-bar, :where(.dark) .ix-win-bar { background: #1b1b1c; border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
  :where(.dark) .ix-app-bar .ix-app-title { border-left-color: rgba(255, 255, 255, 0.15); }
  :where(.dark) .ix-app-badge { background: rgba(90, 181, 193, 0.15); color: var(--petrol-100); box-shadow: inset 0 0 0 1px rgba(143, 210, 219, 0.4); }
  :where(.dark) .ix-wait { background: rgba(0, 40, 45, 0.4); box-shadow: inset 0 0 0 0.08em var(--petrol-800); }
  :where(.dark) .ix-row, :where(.dark) .ix-dish, :where(.dark) .ix-seo-row { border-top-color: #292524; }
  :where(.dark) .ix-row .st { background: rgba(6, 78, 59, 0.45); color: #6ee7b7; }

  :where(.dark) .ix-axis, :where(.dark) .ix-steps::before { background: var(--petrol-800); }
  :where(.dark) .ix-when { background: var(--paper); color: var(--petrol-200); }
  :where(.dark) .ix-when svg, :where(.dark) .ix-file > svg, :where(.dark) .ix-menu-h svg { color: var(--petrol-300); }
  :where(.dark) .ix-caret { background: var(--petrol-300); }
  :where(.dark) .ix-end { box-shadow: 0 0 0 10px var(--paper-warm), 0 18px 34px -14px rgba(0, 0, 0, 0.6); }

  :where(.dark) .ix-card, :where(.dark) .ix-win, :where(.dark) .ix-mini { background: #111111; box-shadow: 0 0 0 1px #292524, 0 30px 60px -34px rgba(0, 0, 0, 0.9), 0 10px 22px -14px rgba(0, 0, 0, 0.6); }
  :where(.dark) .ix-inp { box-shadow: inset 0 0 0 0.1em var(--petrol-400), 0 0 0 0.28em rgba(90, 181, 193, 0.2); }
  :where(.dark) .ix-filled { box-shadow: inset 0 0 0 0.08em #44403c; }
  :where(.dark) .ix-file, :where(.dark) .ix-pub-url { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 0.08em #44403c; }
  :where(.dark) .ix-dish em { color: var(--petrol-200); }
  :where(.dark) .ix-mini-bar { background: #1b1b1c; }
  :where(.dark) .ix-mini-bar i { background: #3a3a3c; }
  :where(.dark) .ix-pub-url svg, :where(.dark) .ix-pub-live { color: #34d399; }
  :where(.dark) .ix-pub-live { border-top-color: #292524; }

  :where(.dark) .ix-tab.on { background: rgba(255, 255, 255, 0.1); color: #fff; }
  :where(.dark) .ix-tool { box-shadow: inset 0 0 0 0.08em rgba(255, 255, 255, 0.15); color: #d6d3d1; }
  :where(.dark) .ix-chat { background: #111111; border-right-color: #292524; }
  :where(.dark) .ix-msg { background: #292524; box-shadow: none; color: #e7e5e4; }
  :where(.dark) .ix-chat-in { background: #0a0a0a; box-shadow: inset 0 0 0 0.08em #44403c; color: #8a837e; }
  :where(.dark) .ix-view { background: #1c1c1c; }

  :where(.dark) .ix-prices { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, 0.6); }
  :where(.dark) .ix-prices li { background: var(--paper); }
}