@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   SPLITBITE, "Service"

   Design thesis: hospitality's real craft is anticipation, the waiter who
   remembers. So the site is set like a good restaurant's printed matter:
   warm paper stock, ink, letterpress-precise hairlines, one foil-amber
   accent, and dark "service" acts where the product itself lives.

   Deliberate refusals, because they are the tells of generated design:
     · no violet/blue gradient, no second accent, no gradient text
     · no centred hero, no 50/50 splits, no three-card feature grid
     · no floating orbs, no glass on everything, no emoji as iconography
     · no vw-only fluid type (it breaks browser zoom)
   Structure is expressed with a visible grid and rules, not with cards.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── 1. TOKENS */
:root {
  /* Paper, warm and slightly uneven in tone from surface to surface */
  --paper:        #F6F3ED;
  --paper-2:      #FBF9F5;
  --paper-3:      #EFEBE2;

  /* Ink. Every value measured against --paper, not eyeballed: warm neutrals
     read lighter than they measure, which is how the old ramp ended up with
     four failing steps applied to the smallest type on the page.
     Ratios: ink 16.58 · ink-2 10.15 · ink-3 6.65 · ink-4 5.11 */
  --ink:          #17140F;
  --ink-2:        #403A31;
  --ink-3:        #5C554A;
  --ink-4:        #6E6659;

  /* Service (dark acts). Ratios against --svc:
     svc-t 17.07 · svc-t2 10.90 · svc-t3 6.26 · svc-t4 4.62 */
  --svc:          #100E0B;
  --svc-2:        #17140F;
  --svc-3:        #211C16;
  --svc-t:        #F4F1E9;
  --svc-t2:       #C9C2B6;
  --svc-t3:       #9A9285;
  --svc-t4:       #847B6E;   /* faintest permitted meta on dark */

  /* One accent. Three tunings so it holds contrast on every ground it lands on.
     gold-ink 8.86 on dark · gold-paper 6.48 on paper
     gold-cta carries white text at 5.91 · gold-cta-d at 7.18 (AAA) */
  --gold-ink:     #D8A855;   /* accents on dark   */
  --gold-paper:   #7A4E12;   /* accents on paper  */
  --gold-cta:     #8A5A16;   /* primary CTA fill on paper */
  --gold-cta-d:   #7A4E12;   /* primary CTA fill on dark  */

  --sig:          #2A6248;   /* used once, for verified/positive marks only */

  /* Hairlines, the structural language of the whole site */
  --rule:         rgba(23, 20, 15, .13);
  --rule-2:       rgba(23, 20, 15, .22);
  --rule-svc:     rgba(244, 241, 233, .13);
  --rule-svc-2:   rgba(244, 241, 233, .24);

  /* Type */
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid scale. Every step keeps a rem term so browser zoom still works.
     A vw-only middle argument silently breaks WCAG 1.4.4. */
  /* Scaled up for the actual audience: an owner in their forties to sixties,
     on a phone, in a bright room. Body 18px, nothing carrying meaning under
     14px, and the mono labels large enough to survive being uppercased. */
  --t-d1: clamp(2.5rem, 1.28rem + 5.4vw, 4.75rem);
  --t-d2: clamp(2rem, 1.42rem + 2.6vw, 3.625rem);
  --t-d3: clamp(1.4375rem, 1.19rem + 1.1vw, 2.125rem);
  --t-d4: clamp(1.1875rem, 1.1rem + 0.37vw, 1.4375rem);
  --t-lede: clamp(1.125rem, 1.04rem + 0.37vw, 1.375rem);
  --t-body: 1.125rem;
  --t-sm: 1rem;
  --t-xs: 0.875rem;
  --t-mono: 0.75rem;

  /* Rhythm. Page inset and column gap are separate concerns: the inset wants
     to grow generously on tablet and up, the gap should stay tighter. */
  --pad:  clamp(1.25rem, 4vw, 3rem);
  --gut:  clamp(1rem, 2.2vw, 1.75rem);
  --page: 1240px;
  /* More air. Premium reads as space, and the mobile floor was the tightest
     failure in the old rhythm. */
  --act:  clamp(5rem, 9.5vw, 10rem);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.62, .05, .3, 1);
  --fast: 130ms;
}

/* ──────────────────────────────────────────────────────── 2. RESET / BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* iOS 26: honour the safe areas so nothing hides under the toolbar island */
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }
::selection { background: rgba(196, 145, 63, .26); }

:focus-visible {
  outline: 2px solid var(--gold-paper);
  outline-offset: 3px;
  border-radius: 2px;
}
.act--svc :focus-visible { outline-color: var(--gold-ink); }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 200; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  padding: .75rem 1.25rem; background: var(--ink); color: var(--paper);
  font-size: var(--t-sm); font-weight: 500; border-radius: 0 0 6px 6px;
  transition: transform 180ms var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ─────────────────────────────────────────────────────────── 3. TYPE ROLES */
h1, h2, h3, h4 { font-weight: 400; color: var(--ink); text-wrap: balance; }

.d1 {
  font-family: var(--serif);
  font-size: var(--t-d1);
  line-height: .96;
  letter-spacing: -.022em;
  font-weight: 400;
}
.d2 {
  font-family: var(--serif);
  font-size: var(--t-d2);
  line-height: 1.04;
  letter-spacing: -.016em;
}
.d3 {
  font-family: var(--sans);
  font-size: var(--t-d3);
  line-height: 1.18;
  letter-spacing: -.021em;
  font-weight: 500;
}
.d4 {
  font-family: var(--sans);
  font-size: var(--t-d4);
  line-height: 1.32;
  letter-spacing: -.014em;
  font-weight: 550;
}
/* Italic serif is the brand's one flourish. Used for the pivot word of a
   sentence, never for a whole heading. */
.it { font-style: italic; letter-spacing: -.005em; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.sm { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3); }
.xs { font-size: var(--t-xs); line-height: 1.55; color: var(--ink-3); }

/* Uppercase mono is only legible above 12px with tracking pulled back from
   .14em. Below that it becomes decoration, and these labels carry meaning. */
.lbl {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Act label: a small numbered marker, sits on the grid's left edge */
.marker {
  display: flex; align-items: baseline; gap: .75rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.marker__n {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; color: var(--gold-paper);
}
.marker__t {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* ────────────────────────────────────────────────────────── 4. GRID / ACTS */
.wrap {
  width: 100%;
  max-width: calc(var(--page) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* 12 columns. Content deliberately spans uneven ranges. The reflex to
   split everything 50/50 or centre it is what makes layouts look generated. */
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  row-gap: clamp(1.75rem, 3.5vw, 3rem);
}
.c1-5  { grid-column: 1 / span 5; }
.c1-6  { grid-column: 1 / span 6; }
.c1-7  { grid-column: 1 / span 7; }
.c1-8  { grid-column: 1 / span 8; }
.c1-12 { grid-column: 1 / span 12; }
.c6-7  { grid-column: 6 / span 7; }
.c7-6  { grid-column: 7 / span 6; }
.c8-5  { grid-column: 8 / span 5; }
.c9-4  { grid-column: 9 / span 4; }
.c2-6  { grid-column: 2 / span 6; }
.c3-8  { grid-column: 3 / span 8; }

@media (max-width: 900px) {
  .c1-5, .c1-6, .c1-7, .c1-8, .c6-7, .c7-6, .c8-5, .c9-4, .c2-6, .c3-8 {
    grid-column: 1 / -1;
  }
}

.act { position: relative; padding-block: var(--act); }
.act--tight { padding-block: clamp(3.25rem, 6vw, 6rem); }
.act--rule { border-top: 1px solid var(--rule); }

/* Dark acts. Full-bleed, and they carry their own inverted token values so
   every child component works on either ground without special-casing. */
.act--svc {
  background: var(--svc);
  color: var(--svc-t2);
  --ink: var(--svc-t);
  --ink-2: var(--svc-t2);
  --ink-3: var(--svc-t3);
  --ink-4: var(--svc-t4);   /* was #625B51 at 2.88:1 — unreadable */
  --paper: var(--svc);
  --paper-2: var(--svc-2);
  --paper-3: var(--svc-3);
  --rule: var(--rule-svc);
  --rule-2: var(--rule-svc-2);
  --gold-paper: var(--gold-ink);
}
.act--svc h1, .act--svc h2, .act--svc h3, .act--svc h4 { color: var(--svc-t); }

/* A hairline "stitch" that joins a paper act to a service act, so the change
   of ground reads as intentional rather than as two stacked templates. */
.stitch { height: 1px; background: var(--rule); }

/* ────────────────────────────────────────────────────────────── 5. BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8125rem 1.25rem;
  font-size: var(--t-sm); font-weight: 550; letter-spacing: -.006em;
  border-radius: 2px;
  transition: background-color var(--fast) linear,
              color var(--fast) linear,
              border-color var(--fast) linear,
              transform var(--fast) var(--ease);
  min-height: 2.75rem;
}
.btn svg { flex: none; transition: transform 220ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--ink { background: var(--ink); color: var(--paper-2); }
.btn--ink:hover { background: #302A21; }
.act--svc .btn--ink { background: var(--svc-t); color: var(--svc); }
.act--svc .btn--ink:hover { background: #FFFFFF; }

/* ── Primary CTA ───────────────────────────────────────────────────────────
   The most valuable element on the site, and previously indistinguishable in
   weight from the outline button beside it while the accent colour was spent
   on hairlines. Now it owns the accent.
   White on --gold-cta is 5.91:1; on dark the fill darkens to hold 7.18:1.
   One per viewport: a second gold button halves the first. */
.btn--gold {
  background: var(--gold-cta);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(23,20,15,.06), 0 10px 24px -18px rgba(122,78,18,.7);
}
.btn--gold:hover { background: #74480F; }
.act--svc .btn--gold { background: var(--gold-cta-d); }
.act--svc .btn--gold:hover { background: #8A5A16; }

.btn--line {
  border: 1px solid var(--rule-2); color: var(--ink);
}
.btn--line:hover { border-color: var(--ink); background: rgba(23,20,15,.035); }
.act--svc .btn--line:hover { background: rgba(244,241,233,.06); }

.btn--text {
  padding-inline: 0; color: var(--ink);
  border-bottom: 1px solid var(--rule-2); border-radius: 0;
  min-height: 0; padding-block: .3125rem;
}
.btn--text:hover { border-bottom-color: var(--ink); }

.btn--lg {
  padding: 1.0625rem 1.75rem;
  font-size: 1.0625rem;
  min-height: 3.25rem;
}

/* ── Sticky mobile action bar ──────────────────────────────────────────────
   Mobile is the default decision environment for this audience, so the next
   step should never be more than a thumb-reach away. Carries the CTA and a
   real phone number, because owners still ring people.
   Hidden while the enquiry form is on screen (JS adds .is-away) so it never
   covers the thing it is asking you to do. */
.dock {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  display: none;
  gap: .625rem;
  padding: .625rem var(--pad);
  padding-bottom: calc(.625rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--rule);
  transition: transform 260ms var(--ease), opacity 200ms linear;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .dock { background: var(--paper); }
}
.dock .btn { flex: 1; justify-content: center; }
.dock__tel {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 3.25rem; min-height: 3.25rem;
  border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink);
}
.dock__tel:hover { border-color: var(--ink); }
.dock.is-away { transform: translateY(115%); opacity: 0; pointer-events: none; }

@media (max-width: 880px) {
  .dock { display: flex; }
  /* keep the last section clear of the bar */
  body { padding-bottom: 4.75rem; }
}

/* ────────────────────────────────────────────────────── 6. HEADER (sticky) */
/* sticky, not fixed: iOS 26 displaces fixed/sticky elements when the address
   bar collapses, and a sticky header in normal flow is far more stable. */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms linear, background-color 260ms linear;
  padding-top: env(safe-area-inset-top);
}
.hdr.is-past { border-bottom-color: var(--rule); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .hdr { background: var(--paper); }
}

.hdr__in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
}
.mark { display: flex; align-items: center; gap: 0; flex: none; }
.mark img { width: 1.375rem; height: auto; }
.mark span {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1;
  color: var(--ink); letter-spacing: -.02em;
}

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav a {
  padding: .5rem .6875rem; font-size: var(--t-sm); color: var(--ink-2);
  border-radius: 2px; transition: color var(--fast) linear;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); }
.hdr__cta { display: flex; align-items: center; gap: .5rem; flex: none; }

.burger {
  display: none; width: 2.75rem; height: 2.75rem;
  flex-direction: column; align-items: center; justify-content: center;
  margin-left: auto;
}
.burger i {
  display: block; width: 1.125rem; height: 1px; background: var(--ink);
  transition: transform 280ms var(--ease), opacity 160ms linear;
}
.burger i + i { margin-top: .3125rem; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(.375rem) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-.375rem) rotate(-45deg); }

.drawer { display: none; border-top: 1px solid var(--rule); }
.drawer.is-open { display: block; }
.drawer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; font-size: 1.0625rem; color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { width: 100%; justify-content: center; margin: 1rem 0 1.25rem; }
.drawer .btn--ink { color: var(--paper-2); }

@media (max-width: 880px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: flex; }
}

/* ───────────────────────────────────────────────────────────────── 7. HERO */
/* Asymmetric: statement on the left seven columns, the live recognition card
   on the right. No vertical centring, no full-viewport height (which fights
   iOS toolbars for nothing). */
.hero { padding-top: clamp(3.25rem, 7vw, 6.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__eyebrow s {
  display: block; width: 1.75rem; height: 1px; background: var(--gold-paper);
  text-decoration: none;
}

.hero h1 { max-width: 26ch; }
.hero .c9-4 { align-self: center; }
/* Opt a grid child into optical centring against a taller sibling column.
   Only above the stacking breakpoint: once columns stack there is no row to
   centre within, and the rule would just add dead space. */
@media (min-width: 861px) { .self-center { align-self: center; } }
.hero__sub { margin-top: clamp(1.25rem, 2.4vw, 1.875rem); max-width: 42ch; }
.hero__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hero__fine {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .375rem 1.25rem;
}
.hero__fine li { display: flex; align-items: center; gap: .4375rem; font-size: var(--t-xs); color: var(--ink-3); }
.hero__fine li::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-paper); flex: none;
}

/* Very light paper texture: two overlaid hairline grids, masked. Not a glow. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: -1px 0 auto; height: 100%;
  z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

/* ──────────────────────────────────────────── 8. RECOGNITION CARD (hero) */
/* The hero's one moving part, and it *is* the product: a guest scans, and
   the system fills in what it knows. Built from rules and mono type, like a
   docket, so it reads as an instrument rather than a decoration. */
.rec {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow:
    0 1px 0 rgba(23,20,15,.04),
    0 12px 28px -22px rgba(23,20,15,.4);
}
.rec__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--rule);
}
.rec__who { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.rec__qr { flex: none; color: var(--ink); }
.rec__place { font-size: var(--t-xs); color: var(--ink); font-weight: 550; letter-spacing: -.008em; }
.rec__seat { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--ink-3); }
.rec__live {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  color: var(--ink-3); text-transform: uppercase; flex: none;
}
.rec__live i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sig);
  animation: blink 2.6s var(--ease-io) infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.rec__body { padding: 1.125rem; }
.rec__q {
  font-family: var(--serif); font-size: 1.375rem; line-height: 1.2;
  color: var(--ink); letter-spacing: -.01em;
}
.rec__rows { margin-top: 1rem; }
.rec__row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .875rem;
  align-items: baseline;
  padding: .5625rem 0;
  border-top: 1px solid var(--rule);
  opacity: 0;
}
.rec__row.is-in { animation: recIn 520ms var(--ease) forwards; }
@keyframes recIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rec__k { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.rec__v { font-size: var(--t-sm); color: var(--ink); }
.rec__v em { font-style: normal; color: var(--gold-paper); }

.rec__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8125rem 1.125rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-3);
}
.rec__out { font-size: var(--t-xs); color: var(--ink); }
.rec__out b { font-weight: 600; }
.rec__ms { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-3); letter-spacing: .08em; }

/* Caret for the typed line */
.caret {
  display: inline-block; width: .5ch; height: 1em;
  margin-left: .06em; vertical-align: -.13em;
  background: var(--gold-paper);
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ────────────────────────────────────────────────────────── 9. PROOF LABEL */
/* The venue row this section used to style was a flex strip of circular
   avatars. It is now the logo wall in section 26, so only the label survives.
   The old rules are deliberately gone rather than left dormant: `.vn img` set
   `border-radius: 50%`, which has the same specificity as the wall's own
   `.vn__m img` and was never overridden, so every mark was being clipped to an
   ellipse inscribed in its box. On the wide marks that went unnoticed. On the
   round badge and the heaviest wordmark it cut a curved wedge out of them. */
.proof__l { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }

/* ──────────────────────────────────────────────────── 10. REVEAL / MOTION */
[data-r] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 720ms var(--ease) var(--d, 0ms),
              transform 720ms var(--ease) var(--d, 0ms);
}
[data-r="still"] { transform: none; }
[data-r].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  [data-r] { opacity: 1 !important; transform: none !important; }
  .rec__row { opacity: 1 !important; }
}

/* ══════════════════════════ 11. THE DUO: one menu, two guests, side by side
   Shown simultaneously rather than behind a toggle. The comparison *is* the
   argument, so making the visitor click to see it would be hiding the point. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.duo__col { padding: clamp(1.125rem, 2vw, 1.75rem); min-width: 0; }
.duo__spine { width: 1px; background: var(--rule); align-self: stretch; position: relative; }
.duo__spine span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  padding: .375rem .625rem;
  background: var(--paper-2);
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}

.duo__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-bottom: .8125rem; border-bottom: 1px solid var(--rule); }
.duo__who { font-size: var(--t-sm); color: var(--ink); font-weight: 550; letter-spacing: -.008em; }
.duo__meta { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .09em; color: var(--ink-4); text-transform: uppercase; }

.duo__tags { display: flex; flex-wrap: wrap; gap: .3125rem; padding-top: .8125rem; }
.tag {
  padding: .1875rem .4375rem;
  border: 1px solid var(--rule-2);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .06em;
  color: var(--ink-3); text-transform: uppercase;
}
.tag--on { border-color: color-mix(in oklab, var(--gold-paper) 46%, transparent); color: var(--gold-paper); }

.mlist { margin-top: 1.125rem; }
.mrow {
  display: grid; grid-template-columns: 1.375rem 1fr auto;
  gap: .75rem; align-items: baseline;
  padding: .625rem 0 .625rem .5rem;
  border-top: 1px solid var(--rule);
  position: relative;
}
.mrow:first-child { border-top: 0; }
.mrow__n { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-4); }
.mrow__n--up { color: var(--gold-paper); }
.mrow__t { font-size: var(--t-sm); color: var(--ink); letter-spacing: -.006em; }
.mrow__m { display: block; margin-top: .1875rem; font-size: var(--t-xs); color: var(--ink-3); }
.mrow__p { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); }
/* a 2px foil edge marks anything the layer promoted for this guest */
.mrow--up::before {
  content: ''; position: absolute; left: 0; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--gold-paper);
}
.mrow--dim .mrow__t, .mrow--dim .mrow__p { color: var(--ink-3); }

.duo__note {
  margin-top: 1.125rem; padding-top: .875rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--ink-3);
}
.duo__note b { color: var(--ink-2); font-weight: 550; }

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .duo__spine { width: auto; height: 1px; }
  .duo__spine span { transform: translate(-50%, -50%); }
  .duo__col + .duo__spine + .duo__col { border-top: 0; }
}

/* ────────────────────────────────────── 12. SECTION DRAWING: the four layers
   An architectural side-elevation rather than stacked cards: four bands, one
   hairline each, annotated in the margin. Interactive on hover/focus only as
   emphasis. All information is present without interaction. */
.elev { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.band {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(.875rem, 2vw, 2rem);
  align-items: start;
  padding: clamp(1.25rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background-color 200ms linear;
}
.band:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.band__n { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--ink-4); padding-top: .3125rem; }
.band__t { font-size: var(--t-d4); font-weight: 550; letter-spacing: -.014em; color: var(--ink); }
.band__s { margin-top: .375rem; font-size: var(--t-sm); color: var(--ink-3); }
.band__d { font-size: var(--t-sm); color: var(--ink-2); }
.band__d strong { color: var(--ink); font-weight: 550; }
.band__list { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .3125rem; }

/* the amber edge grows down the stack; layer 1 is the origin of the data */
.band::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold-paper);
  opacity: var(--o, .15);
}
.band:nth-child(1)::after { --o: .85; }
.band:nth-child(2)::after { --o: .6; }
.band:nth-child(3)::after { --o: .38; }
.band:nth-child(4)::after { --o: .2; }

@media (max-width: 760px) {
  .band { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .band__d { grid-column: 2; }
}

/* ─────────────────────────────────────────────── 13. ATLAS: the guest graph
   Set as a navigational chart rather than a network diagram: a surveyed
   ground of fine and major rules, venues as chart symbols with leader-line
   callouts, and preferences moving along the routes between cities. The
   reference is an admiralty chart or a celestial atlas, which is why the
   furniture (corner ticks, a scale, a station count) matters as much as the
   nodes. Deliberately not a glowing particle cloud, and no depth-of-field
   blur: everything on this ground is drawn, not lit. */
.atlas {
  position: relative;
  border: 1px solid var(--rule-2);
  background:
    /* vignette removed — the ground rules alone carry the chart */
    /* major rules, every fourth cell */
    linear-gradient(to right, rgba(244,241,233,.075) 1px, transparent 1px) 0 0 / 7rem 7rem,
    linear-gradient(to bottom, rgba(244,241,233,.075) 1px, transparent 1px) 0 0 / 7rem 7rem,
    /* fine rules */
    linear-gradient(to right, rgba(244,241,233,.032) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem,
    linear-gradient(to bottom, rgba(244,241,233,.032) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem,
    var(--svc);
  /* A chart, so a panoramic plate. Taller than this and the clusters float in
     dead ground; shorter and the trunk routes have no room to bow. */
  aspect-ratio: 2.28 / 1;
  min-height: 19rem;
  overflow: hidden;
}
.atlas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Chart furniture. Corner ticks read as a registered plate and stop the
   drawing from floating inside its own border. */
.atlas__tick {
  position: absolute; width: .8125rem; height: .8125rem; pointer-events: none;
  border: 0 solid var(--rule-2);
}
.atlas__tick--tl { top: .5rem; left: .5rem; border-top-width: 1px; border-left-width: 1px; }
.atlas__tick--tr { top: .5rem; right: .5rem; border-top-width: 1px; border-right-width: 1px; }
.atlas__tick--bl { bottom: 3.9rem; left: .5rem; border-bottom-width: 1px; border-left-width: 1px; }
.atlas__tick--br { bottom: 3.9rem; right: .5rem; border-bottom-width: 1px; border-right-width: 1px; }

/* Live station count, top right, so "live today" is stated on the drawing */
.atlas__meter {
  /* inset past the corner tick, which owns the very corner */
  position: absolute; top: 1.9rem; right: 1.375rem;
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--svc-t3);
  pointer-events: none;
}
.atlas__meter b { color: var(--gold-ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.atlas__key {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.375rem; align-items: center;
  padding: .8125rem clamp(.875rem, 2vw, 1.25rem);
  border-top: 1px solid var(--rule);
  background: color-mix(in oklab, var(--svc) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.atlas__key span { display: flex; align-items: center; gap: .4375rem; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--svc-t3); }
.atlas__key i { width: .5rem; height: .5rem; flex: none; }
.atlas__key .atlas__note { margin-left: auto; color: var(--svc-t3); opacity: .72; }
@media (max-width: 860px) {
  .atlas { aspect-ratio: 1 / 1; }
  /* must out-specify `.atlas__key span`, which sets display:flex */
  .atlas__key .atlas__note { display: none; }
}
@media (max-width: 620px) {
  .atlas { aspect-ratio: 4 / 5; min-height: 25rem; }
  .atlas__meter { top: .8125rem; right: .875rem; bottom: auto; }
  .atlas__tick--bl, .atlas__tick--br { bottom: 5.6rem; }
}

/* ── Atlas on a phone ──────────────────────────────────────────────────────
   The chart is the most crafted thing on the site and the least legible to
   the person buying. On a phone it filled most of a screen with an admiralty
   -chart visual language an owner has no reference for. Below 620px it is
   replaced by the same claim, stated concretely. */
.hops { display: none; }
@media (max-width: 620px) {
  .atlas { display: none; }
  .hops { display: grid; border-top: 1px solid var(--rule); }
}
.hop {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .875rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.hop__n { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--gold-paper); }
.hop__v { font-size: var(--t-sm); font-weight: 600; color: var(--ink); letter-spacing: -.008em; }
.hop__c { display: block; margin-top: .1875rem; font-size: var(--t-xs); color: var(--ink-3); }
.hop__d { margin-top: .4375rem; font-size: var(--t-sm); color: var(--ink-2); }

/* ─────────────────────────────────────────────────────── 14. LEDGER: steps
   The connect → act → prove loop set as a ledger, with the return entry ruled
   in at the foot. Numbers in the margin, no icon tiles. */
.ledger { border-top: 1px solid var(--rule-2); }
.led {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 8rem) minmax(0, 1fr) minmax(0, 11rem);
  gap: clamp(.75rem, 2vw, 1.75rem);
  align-items: baseline;
  padding: clamp(1.125rem, 2.2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule);
}
.led__n { font-family: var(--mono); font-size: var(--t-mono); color: var(--gold-paper); letter-spacing: .1em; }
.led__t { font-size: var(--t-d4); font-weight: 550; color: var(--ink); letter-spacing: -.014em; }
.led__d { font-size: var(--t-sm); color: var(--ink-2); }
.led__x { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.led--back {
  border-bottom: 0;
  border-top: 1px dashed var(--rule-2);
  align-items: center;
}
.led--back .led__t { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; font-style: italic; }
@media (max-width: 900px) {
  .led { grid-template-columns: 2rem minmax(0, 1fr); }
  .led__d, .led__x { grid-column: 2; }
  .led__x { padding-top: .25rem; }
}

/* ────────────────────────────────────────── 15. WIRE: systems in / out figure
   A single hand-set SVG. Reads as a schematic, monochrome plus one amber. */
.wire { border: 1px solid var(--rule); background: var(--paper-2); padding: clamp(1rem, 2.4vw, 2rem); }
.wire svg { width: 100%; height: auto; overflow: visible; }
.w-node { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.w-core { fill: color-mix(in oklab, var(--gold-paper) 10%, transparent); stroke: color-mix(in oklab, var(--gold-paper) 55%, transparent); stroke-width: 1; }
.w-line { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.w-t { font-family: var(--sans); font-size: 11px; font-weight: 500; fill: var(--ink); letter-spacing: -.005em; }
.w-c { font-family: var(--mono); font-size: 8.5px; letter-spacing: .11em; fill: var(--ink-4); text-transform: uppercase; }
.w-a { font-family: var(--mono); font-size: 8.5px; letter-spacing: .11em; fill: var(--gold-paper); text-transform: uppercase; }
.w-dash {
  fill: none; stroke: var(--gold-paper); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 3 150;
  animation: wireRun 4.2s linear infinite;
}
@keyframes wireRun { to { stroke-dashoffset: -153; } }

/* mobile retelling of the schematic, as a ruled list */
.wire-m { display: none; }
@media (max-width: 700px) {
  .wire { padding: 0; border: 0; background: none; }
  .wire svg { display: none; }
  .wire-m { display: block; border-top: 1px solid var(--rule); }
  .wire-m__r { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem; align-items: baseline; padding: .8125rem 0; border-bottom: 1px solid var(--rule); }
  .wire-m__t { font-size: var(--t-sm); color: var(--ink); }
  .wire-m__c { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
  .wire-m__h { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-paper); padding: 1.125rem 0 .5rem; }
}

/* ──────────────────────────────────────────────────── 16. FIGURES (numbers) */
.figs { border-top: 1px solid var(--rule-2); }
.fig {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(.875rem, 2.4vw, 2rem);
  align-items: baseline;
  padding: clamp(1.125rem, 2.4vw, 1.875rem) 0;
  border-bottom: 1px solid var(--rule);
}
.fig__v {
  font-family: var(--serif); font-size: clamp(2.25rem, 1.2rem + 4.2vw, 3.75rem);
  line-height: .92; color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fig__t { font-size: var(--t-d4); font-weight: 550; color: var(--ink); letter-spacing: -.012em; }
.fig__d { font-size: var(--t-sm); color: var(--ink-2); }
/* Source lines are part of the design, not an afterthought. We sourced every
   industry figure and then rendered the citations at 11px and 2.33:1, which
   made the credibility work unreadable. */
.fig__s { display: block; margin-top: .5rem; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .07em; color: var(--ink-4); line-height: 1.5; }
.fig__s a { color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
.fig__s a:hover { color: var(--ink); }

/* ════════════════════════════════ PROOF BLOCK: named owner + KPI triplet
   The strongest device found in the field. A number floating on its own is
   marketing; the same number with a name, a role and a venue attached is
   proof. If we cannot name them, we do not run it. */
.proofs { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 861px) { .proofs { grid-template-columns: 1fr 1fr; } }

.pf {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: clamp(1.25rem, 2.4vw, 1.875rem);
}
.pf__q {
  font-family: var(--serif); font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.34; letter-spacing: -.011em; color: var(--ink);
  text-wrap: pretty;
}
.pf__kpi {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pf__v {
  font-family: var(--sans); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 600; letter-spacing: -.022em; color: var(--gold-paper);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pf__k {
  display: block; margin-top: .375rem;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4); line-height: 1.4;
}
.pf__who { display: flex; align-items: center; gap: .8125rem; }
.pf__ph {
  flex: none; width: 2.875rem; height: 2.875rem; border-radius: 50%;
  object-fit: cover; background: var(--paper-3);
  border: 1px solid var(--rule);
}
.pf__nm { font-size: var(--t-sm); font-weight: 600; color: var(--ink); letter-spacing: -.008em; }
.pf__ro { display: block; font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
@media (max-width: 420px) {
  .pf__kpi { grid-template-columns: 1fr; gap: .875rem; }
}
@media (max-width: 820px) {
  .fig { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); }
  .fig__d { grid-column: 2; }
}

/* ─────────────────────────────────────────────────── 17. SPEC (verticals) */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: .8125rem 1rem; white-space: nowrap;
  font-size: var(--t-sm); color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--fast) linear, border-color var(--fast) linear;
  min-height: 2.75rem;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold-paper); font-weight: 550; }

.spec { display: grid; }
.spec__r {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: clamp(.75rem, 2vw, 1.75rem);
  padding: .875rem 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.spec__k { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.spec__v { font-size: var(--t-sm); color: var(--ink); }
@media (max-width: 620px) { .spec__r { grid-template-columns: 1fr; gap: .25rem; } }

/* Device: a plain, tight bezel. No notch theatre, no glare, just a frame that
   stops a light screenshot from tearing a hole in a dark page. */
.dev { width: 100%; max-width: 17.5rem; margin-inline: auto; padding: .5rem; background: var(--svc-3); border: 1px solid var(--rule-svc-2); border-radius: 1.375rem; }
.act:not(.act--svc) .dev { background: var(--paper-3); border-color: var(--rule-2); }
.dev__s { display: block; border-radius: 1rem; overflow: hidden; background: #0B0A09; }
.dev__s img { width: 100%; height: auto; }
.dev + .dev__cap, .dev__cap { margin-top: .875rem; text-align: center; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }

/* ──────────────────────────────────────────────────────────── 18. MATRIX */
.mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); }
table.mx { width: 100%; min-width: 46rem; font-size: var(--t-xs); }
table.mx th, table.mx td { padding: .8125rem .75rem; text-align: center; border-bottom: 1px solid var(--rule); }
table.mx thead th {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 400;
  vertical-align: bottom; position: sticky; top: 0; background: var(--paper);
}
table.mx tbody th {
  text-align: left; font-weight: 450; color: var(--ink-2);
  font-size: var(--t-sm); min-width: 14rem; padding-left: 1rem;
}
table.mx tbody tr:last-child th, table.mx tbody tr:last-child td { border-bottom: 0; }
table.mx .own { background: color-mix(in oklab, var(--gold-paper) 7%, transparent); color: var(--ink); }
table.mx thead .own { color: var(--gold-paper); background: color-mix(in oklab, var(--gold-paper) 11%, transparent); }
.yes { color: var(--sig); font-size: .875rem; }
.act--svc .yes { color: #6BBF95; }
.part { font-family: var(--mono); font-size: .625rem; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; }
.no { color: var(--ink-4); }

/* ─────────────────────────────────────────────────────────────── 19. Q & A */
.qa { border-top: 1px solid var(--rule-2); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 1.25rem; gap: 1.25rem; align-items: start;
  padding: 1.125rem 0;
  font-size: var(--t-d4); font-weight: 500; color: var(--ink); letter-spacing: -.012em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold-paper); }
.qa__i { position: relative; width: 1.25rem; height: 1.25rem; margin-top: .1875rem; }
.qa__i::before, .qa__i::after {
  content: ''; position: absolute; background: var(--ink-3);
  transition: transform 300ms var(--ease), opacity 200ms linear;
}
.qa__i::before { left: 0; right: 0; top: 50%; height: 1px; }
.qa__i::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.qa details[open] .qa__i::after { transform: rotate(90deg); opacity: 0; }
.qa__a { padding-bottom: 1.375rem; max-width: 62ch; }
.qa__a p { font-size: var(--t-sm); color: var(--ink-2); }
.qa__a p + p { margin-top: .75rem; }

/* ──────────────────────────────────────────────────────── 20. FORM / CLOSE */
.form { display: grid; gap: .875rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }
.f {
  display: grid; gap: .375rem;
}
.f > label { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.f input, .f select, .f textarea {
  width: 100%;
  padding: .75rem .8125rem;
  font-size: 1rem; /* ≥16px: stops iOS zooming the page on focus */
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  transition: border-color var(--fast) linear, background-color var(--fast) linear;
  min-height: 2.75rem;
}
.act--svc .f input, .act--svc .f select, .act--svc .f textarea { background: var(--svc-2); }
.f textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-4); }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; border-color: var(--gold-paper);
}
.f select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237C7367' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8125rem center;
  padding-right: 2.25rem;
}
.msg { font-size: var(--t-sm); min-height: 1.375rem; color: var(--sig); }
.msg--bad { color: #B4402F; }
.act--svc .msg { color: #6BBF95; }

.card {
  border: 1px solid var(--rule); background: var(--paper-2);
  padding: clamp(1.125rem, 2.2vw, 1.75rem);
}
.deets { border-top: 1px solid var(--rule); }
.deet { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 1rem; padding: .8125rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.deet dt { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.deet dd { font-size: var(--t-sm); color: var(--ink); }
.deet dd a { border-bottom: 1px solid var(--rule-2); }
.deet dd a:hover { border-bottom-color: var(--ink); }

/* ─────────────────────────────────────────────────────────────── 21. FOOTER */
.ft { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem; }
.ft__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 820px) { .ft__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ft__cols { grid-template-columns: 1fr; } }
/* Footer column labels. h3 rather than h4: they follow an h2 close section, and
   jumping h2 -> h4 skips a level, which screen-reader users navigating by
   heading experience as a missing section. Tracking pulled back to match the
   larger mono size. */
.ft h3, .ft h4 { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; margin-bottom: .875rem; }
.ft li + li { margin-top: .5625rem; }
.ft a { font-size: var(--t-sm); color: var(--ink-2); }
.ft a:hover { color: var(--ink); }
.ft__base {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .625rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: var(--t-xs); color: var(--ink-4);
}
.ft__base nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ─────────────────────────────────────────────────────── 22. PROSE (legal) */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--sans); font-size: var(--t-d4); font-weight: 600; margin: 2.25rem 0 .625rem; }
.prose h3 { font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; margin: 1.75rem 0 .5rem; color: var(--ink); }
.prose p, .prose li { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; }
.prose table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); font-size: var(--t-xs); letter-spacing: .02em; }
.prose td { color: var(--ink-2); }
.prose p + p { margin-top: .75rem; }
.prose ul { margin-top: .75rem; display: grid; gap: .5rem; }
.prose li { padding-left: 1rem; position: relative; }
.prose li::before { content: ''; position: absolute; left: 0; top: .6875rem; width: 4px; height: 1px; background: var(--ink-4); }
.prose a { color: var(--gold-paper); border-bottom: 1px solid color-mix(in oklab, var(--gold-paper) 35%, transparent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code {
  font-family: var(--mono); font-size: .8125em; color: var(--ink);
  background: var(--paper-3); padding: .1em .35em; border-radius: 2px;
  word-break: break-word;
}
/* Legal tables carry real reference content, so they scroll rather than crush
   on narrow screens. -webkit-overflow-scrolling keeps momentum on iOS. */
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 561px) { .prose table { display: table; } }

/* ════════════════════════════════════ THE PROBE: "does it work with…"
   Replaces an earlier credits roll. The roll made you wait nine seconds for a
   payoff, competed with the page scroll, and answered a question nobody asked.

   This asks the owner's actual question — does it work with MY till — and
   answers it, repeatedly, in about a second each. It is deliberately built in
   the same docket language as the hero recognition card, so it reads as the
   same instrument rather than a second gimmick.

   The point it makes that a logo grid cannot: the absurd entries at the end all
   resolve through route three, which is the route nobody else has. */
.probe {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(23,20,15,.04), 0 12px 28px -22px rgba(23,20,15,.4);
}
.probe__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--rule);
}
.probe__ttl {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.probe__live {
  display: inline-flex; align-items: center; gap: .4375rem; flex: none;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.probe__live i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sig);
  animation: blink 2.6s var(--ease-io) infinite;
}
.probe__body {
  padding: clamp(1.375rem, 3vw, 2.25rem) 1.125rem;
  min-height: 9.5rem;
  display: grid; align-content: center; gap: 1rem;
}
/* Reserve the tallest line so the panel never resizes between entries. */
.probe__q {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.375rem);
  line-height: 1.16; letter-spacing: -.016em; color: var(--ink);
  min-height: 2.4em;
}
.probe__a {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .75rem;
  opacity: 0; transition: opacity 160ms linear;
}
.probe__a.is-in { opacity: 1; }
.probe__ok {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: var(--t-d4); font-weight: 600; color: var(--sig);
  letter-spacing: -.014em;
}
.probe__ok::before {
  content: ''; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--sig); flex: none;
}
.probe__via {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-paper);
}
.probe__foot {
  padding: .8125rem 1.125rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-3);
  font-size: var(--t-xs); color: var(--ink-2);
}
.probe__foot b { color: var(--ink); font-weight: 600; }

/* Static equivalent. Hidden while the panel animates; revealed for
   reduced-motion users, who get the whole argument as a plain list. */
.probe__all { display: none; }
@media (prefers-reduced-motion: reduce) {
  .probe__body { min-height: 0; }
  .probe__q { min-height: 0; }
  .probe__a { opacity: 1; }
  .probe__all { display: grid; gap: .5rem; margin-top: 1.25rem; }
  .probe__all li { font-size: var(--t-sm); color: var(--ink-2); }
  .probe__all b { color: var(--ink); font-weight: 600; }
}

/* The three connection methods. When paired side-by-side with the probe panel
   inside a grid column, they stack vertically. */
.hows { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.how { background: var(--paper-2); padding: clamp(1rem, 2vw, 1.5rem); }
.how__k { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-paper); }
.how__t { margin-top: .5rem; font-size: var(--t-d4); font-weight: 550; color: var(--ink); letter-spacing: -.014em; }
.how__d { margin-top: .375rem; font-size: var(--t-sm); color: var(--ink-2); }

/* ════════════════════════════════════ PRODUCT BLOCKS (/restaurants)
   One product per block, alternating which side the screen sits on. The
   asymmetry is deliberate: symmetrical rows read as a template, and the
   research on premium layout is consistent that alternation signals curation.

   Each block follows feature → what it does → what changes for you, because
   the "after-state" is the part an owner actually buys. */
.prod { border-top: 1px solid var(--rule); padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.prod + .prod { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.prod__n {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-paper);
}
.prod__t { margin-top: .625rem; }
.prod__d { margin-top: .875rem; }

/* Every product block is the same shape: text column left, visual column
   right, after-state line always last in the text column. Parts without a
   screenshot get a .pnl panel instead, so the rhythm never breaks and no
   block ends up visually longer than its neighbours.

   The list absorbs the spare height rather than the after-state line taking
   `margin-top: auto`. Auto margin collapses to zero once the column is full,
   which put the box hard against the last list item. Growing the list instead
   keeps the gap fixed at every column height, and `align-content: start`
   stops the grid rows spreading out as it grows. */
.prod__txt { display: flex; flex-direction: column; }
.prod__txt .gets { flex: 1 1 auto; align-content: start; }

/* Docket panel used where there is no screenshot. */
.pnl {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(23,20,15,.04), 0 12px 28px -22px rgba(23,20,15,.4);
}
.pnl__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 1.125rem; border-bottom: 1px solid var(--rule);
}
.pnl__ttl {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.pnl__live {
  display: inline-flex; align-items: center; gap: .4375rem; flex: none;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.pnl__live i { width: 5px; height: 5px; border-radius: 50%; background: var(--sig); }
.pnl__r {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .5rem .875rem; align-items: baseline;
  padding: .8125rem 1.125rem; border-bottom: 1px solid var(--rule);
}
.pnl__r:last-child { border-bottom: 0; }
.pnl__k {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.pnl__v { font-size: var(--t-sm); color: var(--ink); }
@media (max-width: 480px) { .pnl__r { grid-template-columns: 1fr; } }

/* "Coming soon" treatment. Honest by construction: the badge is part of the
   component, so the section cannot be built without declaring its status. */
.soon { border: 1px dashed var(--rule-2); background: var(--paper-2); padding: clamp(1.25rem, 2.5vw, 2rem); }
.badge {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .3125rem .625rem; border-radius: 2px;
  border: 1px solid color-mix(in oklab, var(--gold-paper) 40%, transparent);
  background: color-mix(in oklab, var(--gold-paper) 8%, transparent);
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-paper);
}

/* Plain "you get / they get" list. Ticks rather than bullets, because every
   line here is something the owner receives. */
.gets { display: grid; gap: .6875rem; margin-top: 1.5rem; }
.gets li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--t-sm); color: var(--ink-2);
  line-height: 1.6;
}
.gets li::before {
  content: ''; position: absolute; left: 0; top: .25rem;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--sig) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--sig) 45%, transparent);
  background-image: linear-gradient(to bottom right, transparent 44%, var(--sig) 44%, var(--sig) 56%, transparent 56%);
}
.gets b { color: var(--ink); font-weight: 600; }

/* The after-state line that closes each product block. */
.after {
  margin-top: 2rem; padding: 1.125rem 1.25rem;
  border-left: 2px solid var(--gold-paper);
  background: var(--paper-2);
  font-size: var(--t-sm); color: var(--ink);
  line-height: 1.6;
}
.after b { font-weight: 600; }

/* Big plain three-step explainer. */
.steps { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step__n {
  font-family: var(--serif); font-size: 2.75rem; line-height: 1;
  color: var(--gold-paper); letter-spacing: -.02em;
}
.step__t { margin-top: .625rem; font-size: var(--t-d4); font-weight: 600; color: var(--ink); letter-spacing: -.014em; }
.step__d { margin-top: .4375rem; font-size: var(--t-sm); color: var(--ink-2); }

/* ════════════════════════════════════ PHOTOGRAPHY
   Frames sized so that dropping a real image in changes nothing but the
   content. Until the photography lands the slot states what belongs there,
   which reads as deliberate rather than broken. */
.ph { position: relative; overflow: hidden; background: var(--paper-3); border: 1px solid var(--rule); }
.ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph--dish { aspect-ratio: 1 / 1; }
.ph--hands { aspect-ratio: 3 / 2; }

/* Placeholder state. Hairline cross plus a plain label, in paper tones. */
.ph--empty { display: grid; place-items: center; text-align: center; }
.ph--empty::before {
  content: ''; position: absolute; inset: .5rem;
  border: 1px dashed var(--rule-2);
}
.ph__lbl {
  position: relative; padding: 1rem;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); line-height: 1.6;
  max-width: 26ch;
}
.ph__cap { margin-top: .625rem; font-size: var(--t-xs); color: var(--ink-3); }

/* ════════════════════════════════════ FOUNDER
   Highest-leverage trust device for an SMB buyer: a real person with a stated
   position, rather than a company voice. */
.fdr { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 861px) { .fdr { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.fdr__ph { width: 100%; max-width: 15rem; aspect-ratio: 1; border: 1px solid var(--rule); background: var(--paper-3); object-fit: cover; }
.fdr__b { display: grid; gap: 1.25rem; }
.fdr__i { border-top: 1px solid var(--rule); padding-top: 1rem; }
.fdr__i h3 { font-size: var(--t-d4); font-weight: 600; color: var(--ink); letter-spacing: -.014em; }
.fdr__i p { margin-top: .4375rem; font-size: var(--t-sm); color: var(--ink-2); }
.fdr__sig { margin-top: .25rem; font-size: var(--t-xs); color: var(--ink-3); }

/* ════════════════════════════════════ RANGE STRIP
   "From the corner trattoria to the tasting menu" — tells a small independent
   and a fine-dining room that they both belong here. */
.range {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .875rem;
  font-size: var(--t-sm); color: var(--ink-2);
}
.range b { color: var(--ink); font-weight: 600; }

/* ────────────────────────────────────────────────────────── 23. UTILITIES */
.mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; } .mt3 { margin-top: 1.5rem; }
.mt4 { margin-top: 2rem; } .mt5 { margin-top: clamp(2rem, 4vw, 3.25rem); }
.mb3 { margin-bottom: 1.5rem; } .mb4 { margin-bottom: 2rem; }
.mb5 { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.rowg { display: flex; flex-wrap: wrap; gap: .75rem; }
.stack-sm { display: grid; gap: .75rem; }
.stack-md { display: grid; gap: 1.25rem; }
.gold { color: var(--gold-paper); }
.inkc { color: var(--ink); }
.nowrap { white-space: nowrap; }
.maxch { max-width: 54ch; }

/* Hover effects are pointer-only; on touch they stick on after a tap. */
@media (hover: none) {
  .band:hover { background: none; }
  .btn:hover svg { transform: none; }
}

/* ═══════════════════════════════════════════════════════════ 24. FIXES */

/* The hidden attribute must beat any author display rule. Without this, a
   panel that is also a grid container stays visible when hidden is set. */
[hidden] { display: none !important; }

/* The spine label is absolutely positioned inside a 1px-wide parent, so it
   needs an intrinsic width or it wraps to one character per line. */
.duo__spine span { width: max-content; }

/* Clear the band's amber edge so the row number is not sitting on top of it. */
.band { padding-left: 1.125rem; }

/* Give ledger titles room to sit on one line at the largest step. */
.led { grid-template-columns: 2.5rem minmax(0, 11rem) minmax(0, 1fr) minmax(0, 11rem); }
.led--back { grid-template-columns: 2.5rem minmax(0, 1fr); }
@media (max-width: 900px) {
  .led, .led--back { grid-template-columns: 2rem minmax(0, 1fr); }
}

/* ── Lockup ───────────────────────────────────────────────────────────────
   The emblem IS the capital S of the wordmark, so it has to behave like a
   glyph rather than like a logo sitting next to some text. Three things make
   that work, and all three were wrong before:

   1. Baseline alignment, not centre. A centred image floats against the
      x-height and reads as a separate object.
   2. Height set in em, just under the cap height of the following letters
      (0.95em ≈ 1.35× cap height, which is right for a swash initial).
   3. A negative right margin to absorb the emblem's own sidebearing plus the
      "p"'s, so the pair sits at normal letter distance.

   The asset is generated at 3× with its hairlines slightly dilated. At this
   size an untouched hairline resolves to about a third of a pixel and greys
   out next to the serif.                                                    */
.mark {
  /* inline-flex so the lockup hugs its own width. As a block-level flex box
     the link's hit area stretched across the whole footer column. */
  display: inline-flex;
  font-size: 1.55rem;
  align-items: baseline;
  gap: 0;
  line-height: 1;
}
.mark img {
  height: .95em;
  width: auto;
  flex: none;
  /* Air between the emblem and the "p", matched to the serif's own inter-letter
     spacing. Set in em so it holds its optical value at every lockup size,
     about 2.5px in the header, and it scales with the larger footer mark. */
  margin-right: .06em;
  transform: translateY(.1em);
}
.mark span {
  font-size: 1em;
  letter-spacing: -.018em;
}
@media (max-width: 420px) {
  .mark { font-size: 1.375rem; }
}

/* The footer lockup is the sign-off, not a utility label; it carries more
   size than the header so it is legible at a glance. */
.ft .mark { font-size: 2.125rem; }
@media (max-width: 620px) {
  .ft .mark { font-size: 1.875rem; }
}

/* The figure ledger's grid children are the three wrapper divs, so the
   narrow-screen reflow has to target those, not the paragraph inside them.
   At phone width the figure reads better fully stacked. */
@media (max-width: 820px) {
  .fig { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); row-gap: .5rem; }
  .fig > *:nth-child(3) { grid-column: 2; }
}
@media (max-width: 560px) {
  .fig { grid-template-columns: 1fr; row-gap: .375rem; }
  .fig > *:nth-child(3) { grid-column: 1; }
  .fig__v { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.5rem); }
}

/* Same reasoning for the ledger rows that wrap their title in a div. */
@media (max-width: 900px) {
  .led > div { grid-column: 2; }
  .led__d, .led__x { grid-column: 2; }
}
@media (max-width: 560px) {
  .led, .led--back { grid-template-columns: 1.75rem minmax(0, 1fr); }
}

/* Below ~1080px the hero's two columns squeeze the recognition docket until
   every row wraps. Stack instead, and cap the docket so it stays a card
   rather than becoming a full-width band on a tablet. */
@media (max-width: 1080px) {
  .hero .c1-8, .hero .c1-7, .hero .c1-6, .hero .c9-4, .hero .c8-5 { grid-column: 1 / -1; }
  .hero .c9-4 { max-width: 30rem; }
  .hero .c8-5 { max-width: 34rem; }
}

/* The hero override must not leak into the section grids, which are fine at
   this width, hence scoping it to .hero above rather than the column classes. */

/* ══════════════════════════════════════════════ 25. MARKET ROWS (investors)
   These were previously .fig rows with an inline grid-template-columns, which
   beat the responsive rules and pinned the value column to 10rem, far too
   narrow for a range like "$7.6B → $24.1B", so the number ran under the title.
   Ranges get their own line here, so there is nothing to collide with.       */
.mkt { border-top: 1px solid var(--rule-2); }
.mkt__r {
  padding: clamp(1.125rem, 2.2vw, 1.625rem) 0;
  border-bottom: 1px solid var(--rule);
}
.mkt__k {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4);
}
.mkt__v {
  margin-top: .5rem;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mkt__v i {
  font-style: normal;
  color: var(--ink-4);
  padding: 0 .18em;
  font-size: .78em;
  vertical-align: .06em;
}
.mkt__t {
  margin-top: .625rem;
  font-size: var(--t-d4);
  font-weight: 550;
  letter-spacing: -.014em;
  color: var(--ink);
}
.mkt__d { margin-top: .3125rem; font-size: var(--t-sm); color: var(--ink-2); max-width: 52ch; }
.mkt__s {
  display: block; margin-top: .5rem;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .08em; color: var(--ink-4);
}
.mkt__s a { color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
.mkt__s a:hover { color: var(--ink); }

/* At the very narrowest the largest ranges still need to shrink rather than
   force a horizontal scroll. */
@media (max-width: 400px) {
  .mkt__v { font-size: 1.55rem; }
}

/* ═══════════════════════════════════════════════ 26. IN SERVICE (venue row)
   These logos are heterogeneous: a circular badge, a 6:1 wordmark, and three
   stacked lockups. They are normalised in the asset rather than in CSS, on a
   shared 16:5 artboard at equal optical ink area, and desaturated so the mixed
   palettes sit quietly on paper. Rebuild them with tools/artboards.py after
   dropping in a new mark. Where no official logo file exists yet, the venue
   name is set in the brand serif inside the same box so the row stays even. */
.proof__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  margin-top: 1.5rem;
}
.vn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .6875rem; min-width: 0;
}
/* Sizing every mark to one height crushes the stacked ones: a lockup with an
   arc over a wordmark spends its height on leading and the name goes
   illegible, while a 6:1 wordmark becomes a hairline. So the normalising
   happens in the asset: all five marks sit on one shared 16:5 artboard at
   equal optical ink area, and the CSS only sets a width. A solid badge
   therefore ships smaller than an airy wordmark, which is what makes the row
   read evenly.

   The box is a fixed 160px and each mark ships at exactly 1x, 2x and 3x of it,
   chosen by srcset, so no device resamples the raster and the marks stay crisp.
   Keep the 160px here and the artboard in tools/artboards.py in step.

   Do not reintroduce a `border-radius` that can reach these images. The old
   proof row set `border-radius: 50%` on `.vn img`, which has the same
   specificity as the rule below and so was never overridden: every mark was
   silently clipped to an ellipse inscribed in its box.

   Marks carry alpha, because a baked background greys out under the filter
   below and reads as a panel. */
.vn__m {
  width: 160px; max-width: 100%;
  aspect-ratio: 16 / 5;
  display: flex; align-items: center;
}
.vn__m img {
  display: block; width: 100%; height: auto;
  /* raster marks read lighter than the typeset wordmarks beside them, so they
     need more weight than a conventional logo wall would use */
  filter: grayscale(1) contrast(1.08);
  opacity: .88;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.vn:hover .vn__m img, .vn:focus-within .vn__m img { opacity: 1; filter: grayscale(0); }
.vn__w {
  font-family: var(--serif); font-size: 1.625rem; line-height: 1;
  color: var(--ink-2); letter-spacing: -.015em;
}
.vn__l { font-size: var(--t-xs); color: var(--ink-4); line-height: 1.35; }

@media (max-width: 1080px) { .proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }
  .vn__w { font-size: 1.4375rem; }
}
@media (hover: none) { .vn__m img { opacity: .85; } }

/* ══════════════════════════════════════════ 28. TYPEWRITER (digital menu hero)
   Replaces the hero screenshot on /digital-menu. The argument of that page is
   breadth, "look how much one code does", and a still image of one screen
   argues the opposite. So the hero's one moving part states the capabilities
   in sequence instead, set as a full-width hairline band in the page's own
   language: mono key on the left, serif line on the right.

   Two things that matter more than they look:
   · the line box is height-reserved (min-height below), because a typing
     effect that reflows the paragraph under it makes the whole hero jitter.
   · the first phrase is in the markup, so with JS off, or under
     prefers-reduced-motion, the band is a finished sentence, not an empty rule. */
.tw {
  margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.25rem, 2.6vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  column-gap: clamp(.875rem, 2.4vw, 2rem);
  row-gap: .625rem;
  align-items: baseline;
}
.tw__k {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-paper);
}
.tw__l {
  font-family: var(--serif);
  /* capped at 2.5rem so the longest phrase still sets on one line in the
     widest layout. Larger than this and the band flips between one and two
     lines mid-animation, which is the jitter min-height exists to prevent. */
  font-size: clamp(1.625rem, 1.05rem + 2.1vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
  min-height: 1.15em;
  text-wrap: pretty;
}
/* Below this the column is narrow enough that the longer phrases wrap, so the
   second line is reserved permanently rather than appearing as it is typed. */
@media (max-width: 1140px) {
  .tw__l { min-height: 2.3em; }
}
.tw__t { font-style: italic; letter-spacing: -.005em; }
/* the caret inherits .caret's blink from section 8 */

@media (max-width: 700px) {
  .tw { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════ 29. LAPTOP SHOT + EMPTY STATES
   Two screenshot frames, one per aspect. `.dev` (section 15) already handles
   portrait phone captures; `.shot` is its landscape counterpart for the admin
   captures, which are 2708×1674 dashboards and look absurd in a phone bezel.

   Both carry an `--empty` variant, because this page shows every feature and
   not every feature is photographed yet. An empty slot that states what
   belongs in it reads as a page mid-build; a missing slot reads as a feature
   that does not exist. Same dashed treatment as `.ph--empty` so the whole
   site has one vocabulary for "photography pending". */
.shot {
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 1px 0 rgba(23,20,15,.04), 0 18px 40px -30px rgba(23,20,15,.5);
}
.shot img { width: 100%; height: auto; display: block; }
.shot--empty {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center; text-align: center;
  box-shadow: none;
  background: var(--paper-2);
  border-style: dashed;
}
.dev--empty .dev__s {
  position: relative;
  aspect-ratio: 806 / 1528;
  background: var(--paper-2);
  display: grid; place-items: center; text-align: center;
}
.dev--empty .dev__s::before {
  content: ''; position: absolute; inset: .625rem;
  border: 1px dashed var(--rule-2);
  border-radius: .625rem;
}
/* Shared by both empty frames above, hence the neutral name: it sits inside
   `.shot--empty` on the landscape slots and inside `.dev--empty` on the
   portrait ones. */
.slot__lbl {
  position: relative; padding: 1.25rem;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); line-height: 1.7; max-width: 24ch;
}

/* ══════════════════════════════════════════════ 30. STAT (per-feature number)
   Sits where `.after` sits, last in `.prod__txt`, and inherits the same 2rem
   top margin. That margin is load-bearing: `.gets` above it is the flex child
   that absorbs the column's slack, and without the margin the stat's rule
   lands directly on the last list item's descenders. */
.stat {
  margin-top: 2rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(.875rem, 2vw, 1.375rem);
  row-gap: .5rem;
  align-items: baseline;
}
.stat__v {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.875rem);
  line-height: .9; letter-spacing: -.02em;
  color: var(--gold-paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat__d { font-size: var(--t-sm); color: var(--ink-2); }
.stat__d b { color: var(--ink); font-weight: 600; }
.stat__s {
  grid-column: 2;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .06em; color: var(--ink-4); line-height: 1.55;
}
.stat__s a { color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
.stat__s a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .stat { grid-template-columns: 1fr; row-gap: .375rem; }
  .stat__s { grid-column: 1; }
}

/* ═══════════════════════════════════════ 31. DIGITAL-MENU HERO (dramatic)
   Split layout: headline + copy on the left 7 columns, product visual on the
   right 4 columns. This is the pattern that actually converts in SaaS: a
   clear statement paired with proof that the product exists. The device frame
   fills the right side and gives the eye somewhere to land after reading the
   headline. */
.hero--dm {
  padding-top: clamp(4.5rem, 9vw, 9rem);
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}
.hero--dm h1 {
  max-width: 20ch;
  font-size: clamp(2.75rem, 1.5rem + 5.6vw, 5.25rem);
  line-height: .92;
}
.hero--dm .hero__sub {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 48ch;
}
.hero--dm .tw {
  margin-top: clamp(2rem, 3.8vw, 3rem);
}
.hero--dm .hero__acts {
  margin-top: clamp(2rem, 3.8vw, 3rem);
}
.hero--dm .hero__fine {
  margin-top: clamp(1.5rem, 2.6vw, 2rem);
}