/* ============================================================================
   pages.css: blocks that only the inner pages need.

   site.css carries the tokens, the nav, the slab, the buttons and everything
   the home page already had. Nothing here re-declares a token: if a value
   looks new, it is wrong.
   ========================================================================== */

/* ============================================================ page head
   A sub-page opens on the same night slab as the home hero, at two-thirds
   the height. The material has to be identical or the site reads as two
   sites stapled together. */
.pagehead { padding-top: 26px; }
.pagehead .slab { padding: clamp(30px, 4.6vw, 58px) clamp(24px, 4.4vw, 58px) clamp(34px, 4.6vw, 54px); }
.pagehead .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 9px;
}
.pagehead .kicker::after { content: ''; flex: 1; max-width: 90px; height: 1px; background: rgba(235,104,52,.4); }
.pagehead h1 {
  font-family: var(--display); font-optical-sizing: auto; font-synthesis: none;
  margin-top: 18px; font-weight: 380;
  font-size: clamp(33px, 4vw, 54px); line-height: 1.08; letter-spacing: -.024em;
  text-wrap: balance; max-width: 17ch;
}
.pagehead h1 em { font-style: normal; color: var(--accent); }
.pagehead .lede { margin-top: 20px; color: var(--night-ink-2); font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.6; max-width: 54ch; }
.pagehead .lede b { color: var(--night-ink); font-weight: 540; }
.pagehead .acts { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
.pagehead .facts { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--night-line); display: flex; gap: clamp(22px, 4vw, 54px); flex-wrap: wrap; }
.pagehead .facts div { min-width: 0; }
.pagehead .facts b {
  font-family: var(--display); font-size: 27px; font-weight: 460; line-height: 1;
  letter-spacing: -.022em; font-variant-numeric: tabular-nums lining-nums; display: block;
}
.pagehead .facts span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--night-ink-3); max-width: 22ch; line-height: 1.4; }

/* the head can carry the same live console preview the home page does */
.pagehead .split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (max-width: 1040px) { .pagehead .split { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================ cards
   Three or four abreast on the paper. The hairline lift on hover is the
   only reward; nothing scales, because a card that grows shoves the text
   under the reader's cursor. */
.cards { margin-top: 44px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.card {
  padding: 24px 22px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow); min-width: 0;
  transition: border-color 200ms ease, box-shadow 220ms ease, transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--ink-4); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
}
.card .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
.card .ic svg { width: 17px; height: 17px; }
.card h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.017em; }
.card p { margin-top: 9px; font-size: 14.5px; color: var(--ink-3); line-height: 1.58; }
.card .meta { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line-2); font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.card.dark { background: linear-gradient(174deg, var(--night-2), var(--night)); border-color: transparent; color: var(--night-ink); position: relative; isolation: isolate; overflow: hidden; }
.card.dark::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 240px at 86% -10%, rgba(235,104,52,.3), transparent 66%); }
.card.dark p { color: var(--night-ink-2); }
.card.dark .ic { background: rgba(235,104,52,.16); }
.card.dark .meta { border-top-color: var(--night-line); color: var(--night-ink-3); }

/* ============================================================ steps
   The method, in order. The rule down the left fills as you scroll it.
   --p is written by anim.js, so the fill is the reader's own position. */
.steps { margin-top: 46px; position: relative; display: grid; gap: clamp(26px, 4vw, 44px); padding-left: 54px; }
.steps::before { content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line); }
.steps::after {
  content: ''; position: absolute; left: 19px; top: 8px; width: 2px; border-radius: 2px; background: var(--accent);
  height: calc((100% - 16px) * var(--p, 0)); transition: height 120ms linear;
}
.step { position: relative; min-width: 0; }
/* z-index, because .steps::after paints after its children and would otherwise
   draw the fill straight through the numeral */
.step .n {
  position: absolute; z-index: 1; left: -54px; top: -3px; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center; background: var(--card); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; color: var(--ink-3); box-shadow: var(--shadow);
}
.step h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 580; letter-spacing: -.02em; line-height: 1.22; max-width: 26ch; }
.step p { margin-top: 10px; font-size: 15px; color: var(--ink-3); line-height: 1.62; max-width: 58ch; }
.step .out {
  margin-top: 15px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-radius: 11px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2);
}
.step .out b { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
@media (max-width: 560px) {
  .steps { padding-left: 42px; }
  .steps::before, .steps::after { left: 15px; }
  .step .n { left: -42px; width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
}

/* ============================================================ rules
   The five product rules. Numbered in mono, set wide, one per row, because
   each one is a promise a reader may want to quote back at us. */
.rules { margin-top: 44px; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.rule-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, .8fr); gap: clamp(14px, 2.4vw, 30px); padding: 22px clamp(20px, 3vw, 30px); border-top: 1px solid var(--line-2); align-items: start; }
.rule-row:first-child { border-top: 0; }
.rule-row .no { font-family: var(--mono); font-size: 12px; color: var(--ink-4); padding-top: 3px; }
.rule-row b { font-size: 16px; font-weight: 600; letter-spacing: -.017em; display: block; }
.rule-row p { margin-top: 8px; font-size: 14.5px; color: var(--ink-3); line-height: 1.58; }
.rule-row .ex { font-size: 13.5px; color: var(--ink-3); border-left: 2px solid var(--accent); padding-left: 14px; line-height: 1.55; }
.rule-row .ex i { display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
@media (max-width: 860px) { .rule-row { grid-template-columns: 40px minmax(0, 1fr); } .rule-row .ex { grid-column: 2; } }

/* ============================================================ source table
   What each source gives us and what it does not. The second column is the
   product's whole argument, so it is not a footnote. */
.srctable { margin-top: 40px; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.srchead, .srcrow { display: grid; grid-template-columns: 172px minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(12px, 2vw, 26px); padding: 15px clamp(18px, 2.6vw, 26px); align-items: start; }
.srchead { background: var(--card-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.srcrow { border-top: 1px solid var(--line-2); font-size: 14.5px; }
.srcrow:first-of-type { border-top: 0; }
.srcrow .who { display: flex; align-items: center; gap: 9px; font-weight: 560; letter-spacing: -.012em; }
.srcrow .who svg { width: 17px; height: 17px; flex: none; }
.srcrow .yes { color: var(--ink-2); line-height: 1.52; }
.srcrow .no { color: var(--ink-4); line-height: 1.52; }
/* the column header already says where it stops, so the wide layout needs no
   marker of its own; the narrow one below labels each line instead */
.srcrow .no::before { margin-right: 7px; color: var(--ink-4); }
@media (max-width: 760px) {
  .srchead { display: none; }
  .srcrow { grid-template-columns: 1fr; gap: 7px; padding-block: 17px; }
  .srcrow .no::before { content: 'not: '; font-family: var(--mono); font-size: 11px; }
}

/* ============================================================ spec / compare
   Used on pricing. Ticks and crosses both carry a word: a column of icons
   alone is unreadable on a phone in daylight. */
/* `clip`, not `hidden`: hidden would make this a scroll container and the
   sticky header below would never stick. */
.compare { margin-top: 40px; border: 1px solid var(--line); border-radius: 17px; overflow: clip; background: var(--card); box-shadow: var(--shadow); }
.crow { display: grid; grid-template-columns: minmax(0, 1.4fr) 132px 132px; gap: 14px; padding: 14px clamp(18px, 2.6vw, 26px); border-top: 1px solid var(--line-2); align-items: center; font-size: 14.5px; }
/* the header follows you down: a reader halfway through fourteen rows of
   Yes / Yes has otherwise lost which column is which */
.crow:first-child {
  position: sticky; top: 64px; z-index: 2;
  border-top: 0; border-bottom: 1px solid var(--line);
  background: var(--card-2); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4);
}
.crow .c { text-align: center; color: var(--ink-3); font-size: 13.5px; }
.crow .c.on { color: var(--ink); font-weight: 560; }
.crow .c.off { color: var(--ink-4); }
.crow .lab { color: var(--ink-2); }
.crow .lab small { display: block; margin-top: 3px; color: var(--ink-4); font-size: 12.5px; }
@media (max-width: 680px) { .crow { grid-template-columns: minmax(0,1fr) 84px 84px; gap: 8px; } .crow .c { font-size: 12.5px; } }

/* ============================================================ outlet calculator
   One input, one figure. Restaurants come in ones and twos, so this is a
   stepper, not a slider: an owner with three outlets wants to type 3. */
.calc { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 17px; background: var(--card); box-shadow: var(--shadow); }
@media (max-width: 720px) { .calc { grid-template-columns: 1fr; } }
.calc h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.017em; }
.calc p { margin-top: 9px; font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: 40ch; }
.stepper { margin-top: 18px; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--card-2); }
.stepper button { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); transition: background 160ms ease, color 160ms ease; }
.stepper button:hover { background: var(--card); color: var(--ink); }
.stepper button:disabled { color: var(--ink-4); cursor: not-allowed; }
.stepper output { min-width: 62px; text-align: center; font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.calc .total { text-align: right; }
.calc .total b { font-family: var(--display); font-size: clamp(38px, 5vw, 54px); font-weight: 440; line-height: 1; letter-spacing: -.028em; font-variant-numeric: tabular-nums lining-nums; display: block; }
.calc .total span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 720px) { .calc .total { text-align: left; } }

/* ============================================================ FAQ
   Native <details>. An accordion is thirty lines of JS and one keyboard trap
   waiting to happen; the element already opens, closes, is focusable, is
   searchable by the browser's own find-in-page and prints open. */
.faq { margin-top: 40px; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); max-width: 820px; }
.faq details { border-top: 1px solid var(--line-2); }
.faq details:first-child { border-top: 0; }
.faq summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none;
  padding: 19px clamp(18px, 2.6vw, 26px); font-size: 15.5px; font-weight: 560; letter-spacing: -.014em;
  transition: background 160ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--card-2); }
.faq summary::after {
  content: ''; margin-left: auto; flex: none; width: 11px; height: 11px;
  border-right: 1.6px solid var(--ink-4); border-bottom: 1.6px solid var(--ink-4);
  transform: rotate(45deg) translateY(-2px); transition: transform 240ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq details[open] summary { color: var(--accent); }
.faq .ans { padding: 0 clamp(18px, 2.6vw, 26px) 21px; font-size: 14.5px; color: var(--ink-3); line-height: 1.62; max-width: 68ch; }
.faq .ans p + p { margin-top: 11px; }
/* modern browsers animate this; the rest simply open */
@supports (interpolate-size: allow-keywords) {
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ============================================================ pull quote */
.pull { margin-top: 44px; max-width: 900px; }
.pull blockquote {
  font-family: var(--display); font-optical-sizing: auto;
  font-size: clamp(21px, 2.6vw, 31px); font-weight: 380; line-height: 1.3; letter-spacing: -.02em;
  text-wrap: pretty;
}
.pull blockquote em { font-style: normal; color: var(--accent); }
.pull .by { margin-top: 18px; display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink-3); }
.pull .by i { width: 26px; height: 1px; background: var(--ink-4); display: block; flex: none; }

/* ============================================================ screens
   The console, panel by panel. Each screen is real markup at real weight
   (not a screenshot) so it stays sharp and stays true when the product moves. */
.screens { margin-top: 46px; display: grid; gap: clamp(16px, 2.4vw, 22px); }
.screen {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 3.6vw, 48px);
  align-items: center; padding: clamp(24px, 3.4vw, 40px); border-radius: 19px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
}
.screen:nth-child(even) .txt { order: 2; }
.screen .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.screen h3 { margin-top: 13px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.022em; line-height: 1.16; max-width: 20ch; }
.screen p { margin-top: 13px; font-size: 15px; color: var(--ink-3); line-height: 1.62; max-width: 50ch; }
.screen .ticks { margin: 17px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.screen .ticks li { display: grid; grid-template-columns: 17px 1fr; gap: 9px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.screen .ticks li svg { margin-top: 4px; color: var(--series-2); flex: none; }
@media (max-width: 900px) {
  .screen { grid-template-columns: 1fr; }
  .screen:nth-child(even) .txt { order: 0; }
}

/* the dark panel a screen's artwork sits in, the console's own material */
.panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 15px;
  padding: 17px; color: var(--night-ink);
  background: linear-gradient(174deg, var(--night-2), var(--night));
  box-shadow: var(--shadow-lift);
}
.panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 280px at 88% -12%, rgba(235,104,52,.28), transparent 64%), radial-gradient(400px 220px at 4% 108%, rgba(42,120,214,.2), transparent 66%); }
.panel .ph { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid var(--night-line); font-size: 12px; color: var(--night-ink-2); }
.panel .ph b { font-size: 13px; font-weight: 580; color: var(--night-ink); letter-spacing: -.014em; }
.panel .ph .when { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--night-ink-3); }
.panel .rows { display: grid; }
.panel .r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--night-line); font-size: 13.5px; }
.panel .r:last-child { border-bottom: 0; }
.panel .r .i { font-family: var(--mono); font-size: 11px; color: var(--night-ink-3); }
.panel .r .m { font-family: var(--mono); font-size: 11px; color: var(--night-ink-2); }
.panel .r.lead { color: var(--night-ink); font-weight: 560; }
.panel .r.lead .i { color: var(--accent); }
.panel .quiet { color: var(--night-ink-3); }
.panel .accentline { color: var(--accent); }

/* a drafted reply, shown as the editable thing it is */
.reply { margin-top: 13px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--night-line); }
.reply .rq { font-size: 13px; color: var(--night-ink-2); line-height: 1.55; border-left: 2px solid rgba(255,255,255,.2); padding-left: 12px; }
.reply .rd { margin-top: 13px; font-size: 13.5px; color: var(--night-ink); line-height: 1.55; }
.reply .rf { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.reply .rf .sm2 { font-family: var(--mono); font-size: 10.5px; color: var(--night-ink-3); margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; font-size: 12.5px; border: 1px solid var(--night-line); color: var(--night-ink-2); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 540; }

/* ============================================================ forms on paper
   The scan form on the slab is glass. This is its daylight twin, used on the
   scan and contact pages where there is no dark field to sit on. */
.formcard { margin-top: 38px; padding: clamp(24px, 3.4vw, 36px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-lift); max-width: 620px; }
.field { display: grid; gap: 8px; margin-bottom: 17px; }
.field label { font-size: 13.5px; font-weight: 560; color: var(--ink-2); letter-spacing: -.01em; }
.field .hint { font-size: 12.5px; color: var(--ink-4); line-height: 1.45; }
.field input, .field textarea, .field select {
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2);
  font-size: 15.5px; color: var(--ink); outline: 0; width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; font-family: inherit; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px rgba(235,104,52,.13); }
.field input[aria-invalid="true"] { border-color: var(--critical); box-shadow: 0 0 0 4px rgba(208,59,59,.1); }
.err { font-size: 12.5px; color: var(--critical); min-height: 0; }
.formcard .btn { width: 100%; }
.formcard .after { margin-top: 16px; font-size: 12.5px; color: var(--ink-4); line-height: 1.5; }
/* align-items:start, or a two-line error under one field pushes its
   neighbour's input down the row */
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 520px) { .formrow { grid-template-columns: 1fr; } }

/* the state the form lands in, it says what happened, in one place */
.formdone { display: none; padding: 20px; border-radius: 13px; background: var(--accent-soft); border: 1px solid rgba(235,104,52,.3); }
.formdone b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.formdone p { margin-top: 7px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.formcard.done form { display: none; }
.formcard.done .formdone { display: block; animation: bootin 520ms var(--ease-out) both; }
/* both ends stated. Without an explicit `to`, the implicit one is the
   element's own computed value, and a caller that sets opacity:0 inline
   (the evidence quotes do) gets an animation from 0 to 0. */
@keyframes bootin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .formcard.done .formdone { animation: none; } }

/* ============================================================ note
   An inline caveat. Used wherever a number on this site is demonstration
   data, which the reader is owed in the same breath as the number. */
.note { margin-top: 26px; display: flex; gap: 12px; padding: 15px 17px; border-radius: 13px; background: var(--paper-2); border: 1px solid var(--line); max-width: 78ch; }
.note svg { flex: none; margin-top: 2px; color: var(--ink-4); width: 15px; height: 15px; }
.note p { font-size: 13.5px; color: var(--ink-3); line-height: 1.58; }
.note.warm { background: var(--accent-soft); border-color: rgba(235,104,52,.26); }
.note.warm svg { color: var(--accent); }

/* ============================================================ contact rail */
.contactgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contactgrid { grid-template-columns: 1fr; } }
.ways { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 34px; }
.way { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: var(--card); align-items: start; }
.way .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--card-2); color: var(--ink-3); }
.way .ic svg { width: 16px; height: 16px; }
.way b { font-size: 14.5px; font-weight: 580; letter-spacing: -.014em; }
.way p { margin-top: 5px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.way a { color: var(--accent); text-decoration: none; font-weight: 540; }
.way a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ 404 */
.lost { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: clamp(60px, 10vw, 120px); }
.lost .code { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.lost h1 { margin-top: 20px; font-family: var(--display); font-size: clamp(32px, 5vw, 52px); font-weight: 380; letter-spacing: -.024em; line-height: 1.1; max-width: 22ch; text-wrap: balance; }
.lost p { margin: 18px auto 0; font-size: 16px; color: var(--ink-3); max-width: 46ch; line-height: 1.6; }
.lost .acts { margin-top: 30px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================ the sentence wall
   Every card here is a guest sentence from the swept record of one real
   tenant. It is the product's whole argument made into a picture: somebody
   read all fourteen hundred of these so the owner does not have to.

   The field is a real 3D plane, CSS perspective, one transform per card from
   four custom properties. Scroll drives the plane's depth through --p, the
   pointer tilts it through --tilt-x/--tilt-y, and a card lifts to the front
   on hover so it can actually be read.

   Below 860px and under reduced motion it collapses to a plain column: an
   overlapping scatter you cannot dismiss is a puzzle, not a page.
   ============================================================ */
/* night appears on this site as a slab sitting on paper, never full-bleed,
   partly because a translucent light nav over a full-bleed dark band turns
   muddy grey at the top of the screen */
.wallslab {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg); color: var(--night-ink);
  padding: clamp(30px, 4.4vw, 58px) clamp(20px, 3.4vw, 46px) clamp(26px, 3.4vw, 42px);
  background: linear-gradient(176deg, var(--night-2), var(--night) 58%, #121108);
  box-shadow: var(--shadow-deep);
}
.wallslab::before {
  content: ''; position: absolute; inset: -14%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(760px 360px at 78% -10%, rgba(235, 104, 52, .34), transparent 64%),
    radial-gradient(560px 320px at 8% 104%, rgba(42, 120, 214, .26), transparent 66%);
  animation: drift 52s var(--ease-in-out) infinite alternate;
}
.wallslab::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.wallslab .sec-h h2 { color: var(--night-ink); }
.wallslab .sec-h p { color: var(--night-ink-2); }

.wall {
  position: relative; margin-top: clamp(6px, 1.2vw, 16px);
  height: clamp(470px, 50vw, 660px);
  perspective: 1500px; perspective-origin: 50% 42%;
}
.wall-plane {
  position: absolute; inset: 0; transform-style: preserve-3d;
  /* --p is the reader's own scroll position through this section */
  transform:
    rotateX(calc(13deg - var(--p, .5) * 11deg))
    rotateY(calc(var(--tilt-x, 0) * 1deg))
    translate3d(0, calc((.5 - var(--p, .5)) * 46px), calc(-30px + var(--p, .5) * 70px));
  transition: transform 220ms linear;
}

.wcard {
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(208px, 19vw, 268px);
  padding: 17px 18px 15px; border-radius: 13px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 30px 60px -28px rgba(0,0,0,.9);
  opacity: 0;
  /* --off collapses to 0 on entry, so one variable carries the whole reveal */
  transform:
    translate3d(-50%, -50%, calc(var(--z) - var(--off, 160px)))
    rotateY(var(--ry, 0deg)) rotateZ(var(--r, 0deg));
  transition:
    opacity 760ms var(--ease-out) var(--d, 0ms),
    transform 900ms var(--ease-out) var(--d, 0ms),
    box-shadow 320ms var(--ease-out);
}
.wall.in .wcard { --off: 0px; opacity: 1; }

/* the critical ones are ink, not orange: orange on this site means
   "this one is yours" and is never spent on sentiment */
.wcard.stings { background: var(--night-2); color: var(--night-ink); box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 30px 60px -26px #000, inset 0 0 0 1px var(--night-line); }

.wcard .qm { position: absolute; top: 11px; right: 13px; font-family: var(--display); font-size: 30px; line-height: 1; color: var(--accent); opacity: .5; }
.wcard p { font-size: 13.5px; line-height: 1.5; letter-spacing: -.005em; padding-right: 22px; }
.wcard p mark { background: rgba(235,104,52,.22); color: inherit; border-radius: 3px; padding: 0 2px; }
.wcard.stings p mark { background: rgba(235,104,52,.3); }

.wcard .meta { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; }
.wcard.stings .meta { border-top-color: var(--night-line); }
.wcard .meta svg { width: 14px; height: 14px; flex: none; }
.wcard .stars { color: var(--warning); font-size: 10px; letter-spacing: .06em; }
.wcard .when { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.wcard.stings .when { color: var(--night-ink-3); }
/* the topic is the informative part: what the sentence was counted toward */
.wcard .topic { display: block; margin-top: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.wcard.stings .topic { color: var(--night-ink-3); }
.wcard .topic b { color: var(--accent); font-weight: 400; }

@media (hover: hover) and (pointer: fine) {
  /* straighten and come forward, because a tilted card at 13.5px is a card
     nobody reads */
  .wall.in .wcard:hover, .wall.in .wcard:focus-within {
    --off: -70px;
    transform: translate3d(-50%, -50%, calc(var(--z) + 70px)) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 4px 8px rgba(0,0,0,.24), 0 50px 90px -30px #000;
    z-index: 3;
  }
}

/* the count under the field, the wall shows ten, the sweep read all of them */
.wall-legend { margin-top: clamp(22px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: baseline; }
.wall-legend div { min-width: 0; }
.wall-legend b { font-family: var(--display); font-size: 25px; font-weight: 460; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.wall-legend span { margin-left: 9px; font-size: 13px; color: var(--night-ink-3); }
.wall-legend .last { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--night-ink-3); }

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .wall { height: auto; perspective: none; }
  .wall-plane { position: static; transform: none; transform-style: flat; display: grid; gap: 12px; }
  .wcard {
    position: static; width: auto; max-width: 520px; opacity: 1;
    transform: none; transition: none;
  }
  .wall.in .wcard:hover, .wall.in .wcard:focus-within { transform: none; }
  .wall-legend .last { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wallslab::before { animation: none; } }
.still .wallslab::before { animation: none !important; }

/* ============================================================ dish intelligence
   Three dishes on three plates, each with a leader line out to what guests
   actually said about it, one warm, one not. The product's dish panel, shown
   at the size it deserves.

   The illustrations carry real food colour, which is the second and last thing
   on this site allowed outside the palette (the logo is the first). Appetite is
   the whole point of the picture, and a duotone burger has none. They are
   drawn rather than photographed so the folder stays self-contained; drop real
   photography into the same slot and nothing else changes.
   ============================================================ */
.dishrow { margin-top: clamp(34px, 4.4vw, 58px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); }

.dishfig { min-width: 0; }
.dishstage { position: relative; aspect-ratio: 100 / 132; }

/* the tray
   A dish arrives on a board in a good restaurant, so it arrives on one here.
   Built from gradients rather than a texture file: three grain passes, two
   soft knots, a routed inner edge, a lit top lip and a dark bottom one. Light
   comes from above-left and every shadow on this page agrees with that. */
.tray {
  position: absolute; left: 50%; top: 45%;
  width: 70%; aspect-ratio: 1.16 / 1; border-radius: 17px;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(91.5deg, rgba(58,31,11,.10) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(88.5deg, rgba(255,224,182,.05) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90.8deg, rgba(58,31,11,.06) 0 2px, transparent 2px 17px),
    radial-gradient(58% 38% at 24% 28%, rgba(84,46,18,.26), transparent 62%),
    radial-gradient(48% 34% at 79% 74%, rgba(84,46,18,.2), transparent 64%),
    linear-gradient(166deg, #b17c46, #9a6632 46%, #8a582a);
  box-shadow:
    inset 0 1.5px 0 rgba(255,229,192,.38),
    inset 0 -3px 0 rgba(44,23,8,.5),
    inset 0 0 0 1px rgba(44,23,8,.38),
    0 6px 10px -6px rgba(20,19,15,.4),
    0 30px 44px -24px rgba(20,19,15,.62);
  transition: box-shadow 300ms var(--ease-out);
}
/* the routed edge every serving board has */
.tray::before {
  content: ''; position: absolute; inset: 6.5%; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(44,23,8,.2), inset 0 1px 0 rgba(255,229,192,.16);
}
.tray .art { width: 74%; height: auto; overflow: visible; }

/* the leader lines, drawn on entry by anim.js */
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leaders path { fill: none; stroke: var(--ink-4); stroke-width: .45; stroke-linecap: round; }
.leaders circle { fill: var(--accent); }

/* the two things guests said */
.callout {
  position: absolute; width: 63%; padding: 11px 13px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lift);
}
.callout.warm { right: 0; top: 0; }
.callout.cold { left: 0; bottom: 0; }
.callout p { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.callout .cm { margin-top: 8px; display: flex; align-items: center; gap: 7px; }
.callout .cm svg { width: 13px; height: 13px; flex: none; }
.callout .stars { color: var(--warning); font-size: 9.5px; letter-spacing: .05em; }
/* the date only, the stars are a span in this row too, and the unscoped rule
   greyed them out and shoved them into the middle of it */
.callout .cm span:last-child { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
/* the sentiment is named, never left to the colour of a border */
.callout .tag {
  position: absolute; top: -9px; left: 13px; padding: 2px 8px; border-radius: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
.callout.warm .tag { background: var(--series-2); color: #fff; }
.callout.cold .tag { background: var(--ink); color: var(--paper); }

/* what the console concluded from the two of them */
.dishfig figcaption { margin-top: 14px; text-align: center; }
.dishfig h3 { font-family: var(--display); font-size: clamp(20px, 2vw, 25px); font-weight: 420; letter-spacing: -.02em; }
.dishfig .verdict { margin-top: 7px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; max-width: 30ch; margin-inline: auto; }
.dishfig .split { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.dishfig .bar { flex: 1; height: 7px; border-radius: 99px; overflow: hidden; background: var(--line-2); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; }
.dishfig .bar i { display: block; height: 100%; transform-origin: left center; }
.dishfig .bar .w { background: var(--series-2); }
.dishfig .bar .c { background: var(--ink-4); }
.dishfig .split b { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }

/* ---------------------------------------------------------- the assembly
   The one place on this site with a showy animation, and it earns it: the
   dish builds itself a layer at a time, the line draws out to what a guest
   said, the pin lands, and the sentence arrives. It is the product's own
   sequence (read, then point, then quote) at the speed of a held breath.

   Everything below keys off .anim-in on the figure, so the whole sequence has
   one trigger and dies whole under reduced motion. */
.dishfig { --ease-back: cubic-bezier(.34, 1.5, .64, 1); }

.dishfig .lyr {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transform: translate(0, -22px) scale(.9);
  transition:
    opacity 460ms var(--ease-out) calc(var(--i, 0) * 85ms + 140ms),
    transform 700ms var(--ease-back) calc(var(--i, 0) * 85ms + 140ms);
}
.dishfig.anim-in .lyr { opacity: 1; transform: none; }

/* the plate turns a few degrees across its own scroll, so the food is never
   quite the same twice */
.tray .art { transform: rotate(calc((var(--p, .5) - .5) * 4deg)); transform-origin: 50% 58%; transition: transform 240ms linear; }

/* pointer tilt composed here rather than written by anim.js, because this
   element is already centred by a transform of its own. The board tips the
   way a board tips, a few degrees, from the wrist. */
.tray {
  transform:
    translate(-50%, -50%)
    perspective(900px)
    rotateX(calc(var(--tilt-y, 0) * .5deg))
    rotateY(calc(var(--tilt-x, 0) * .5deg));
}

.leaders path { opacity: 0; transition: opacity 1ms linear 260ms; }
.dishfig.anim-in .leaders path { opacity: 1; }
.leaders circle {
  transform: scale(0); transform-box: fill-box; transform-origin: center;
  transition: transform 460ms var(--ease-back) 1080ms;
}
.dishfig.anim-in .leaders circle { transform: scale(1); }

.dishfig .callout {
  opacity: 0; transform: translate3d(0, 16px, 0) scale(.95) rotate(var(--rot, 0deg));
  transition:
    opacity 520ms var(--ease-out) var(--cd, 1150ms),
    transform 760ms var(--ease-back) var(--cd, 1150ms);
}
.dishfig.anim-in .callout { opacity: 1; transform: rotate(var(--rot, 0deg)); }
.callout.warm { --rot: 1.2deg; --cd: 1150ms; }
.callout.cold { --rot: -1.4deg; --cd: 1320ms; }

.dishfig .bar i { transform: scaleX(0); transition: transform 820ms var(--ease-out) calc(1420ms + var(--i, 0) * 140ms); }
.dishfig.anim-in .bar i { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .dishfig:hover .tray {
    box-shadow:
      inset 0 1.5px 0 rgba(255,229,192,.42), inset 0 -3px 0 rgba(44,23,8,.5), inset 0 0 0 1px rgba(44,23,8,.38),
      0 8px 14px -8px rgba(20,19,15,.42), 0 46px 64px -28px rgba(20,19,15,.68);
  }
  .dishfig:hover .tray .art { transform: rotate(calc((var(--p, .5) - .5) * 4deg)) scale(1.04); }
}

@media (max-width: 980px) {
  .dishrow { grid-template-columns: 1fr; gap: 40px; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 620px) {
  /* no room to point at anything: the plate goes on top and the two
     sentences become a plain pair underneath it */
  .dishstage { aspect-ratio: auto; display: grid; gap: 12px; }
  .leaders { display: none; }
  /* relative, not static: .tray::before is the board's routed edge and is
     positioned against it. Made static, the pseudo escapes to .dishstage and
     draws a 400px rounded rectangle across the whole section. left/top are
     reset because the absolute layout sets them and relative would obey. */
  .tray { position: relative; left: auto; top: auto; transform: none; width: 248px; margin: 0 auto 4px; }
  .callout { position: static; width: auto; }
  .callout .tag { position: static; display: inline-block; margin-bottom: 7px; }
  .dishfig.anim-in .callout { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dishfig .lyr, .dishfig .callout, .leaders circle, .dishfig .bar i, .leaders path {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .tray { transform: translate(-50%, -50%); transition: none; }
  .tray .art { transform: none; }
}
.still .dishfig .lyr, .still .dishfig .callout, .still .leaders circle,
.still .dishfig .bar i, .still .leaders path {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ============================================================ misc shared */
.tickrow { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tickrow span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); }
.tickrow svg { color: var(--series-2); flex: none; }

.secbar { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.secbar .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }

/* a sticky sub-nav for the long pages: it is a table of contents, not a menu */
.toc { position: sticky; top: 64px; z-index: 40; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--line); }
.toc .wrap { display: flex; gap: 6px; overflow-x: auto; padding-block: 11px; scrollbar-width: none; }
.toc .wrap::-webkit-scrollbar { display: none; }
.toc a { flex: none; padding: 7px 13px; border-radius: 9px; text-decoration: none; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; transition: color 160ms ease, background 160ms ease; }
.toc a:hover { color: var(--ink); background: var(--line-2); }
.toc a.here { color: var(--ink); background: var(--card); box-shadow: var(--shadow); font-weight: 540; }