/* ==========================================================================
   BidOptimized · bidoptimized.com
   One static page: no build step, no JavaScript.
   Dark by design: navy canvas, big grid and soft glows (after the Margin
   brief), Schibsted Grotesk + IBM Plex Mono, amber as our own accent.
   ========================================================================== */

:root {
  /* Light (Day) is the default. Night, or Auto on a dark system, switches to dark below. */
  color-scheme: light;

  /* Canvas and lines */
  --bg: #f5f6f9;
  --line: rgba(13, 22, 38, 0.09);
  --line-strong: rgba(13, 22, 38, 0.14);
  --line-hover: rgba(13, 22, 38, 0.3);
  --grid: rgba(13, 22, 38, 0.05);
  --hair-1: rgba(13, 22, 38, 0.03);
  --hair-2: rgba(13, 22, 38, 0.06);
  --hover-fill: rgba(13, 22, 38, 0.05);
  --highlight: rgba(255, 255, 255, 0.7);
  --edge: rgba(13, 22, 38, 0.28);

  /* Surfaces */
  --header-bg: rgba(245, 246, 249, 0.8);
  --footer-bg: rgba(13, 22, 38, 0.03);
  --menu-bg: rgba(255, 255, 255, 0.98);
  --pill-bg: #ffffff;
  --inset: rgba(13, 22, 38, 0.035);
  --tint-a: rgba(255, 255, 255, 0.95);
  --tint-b: rgba(255, 255, 255, 0.75);
  --glass-a: rgba(255, 255, 255, 0.92);
  --glass-b: rgba(250, 251, 253, 0.92);
  --solid-a: #ffffff;
  --solid-b: #fafbfd;
  --card-a: rgba(255, 255, 255, 0.95);
  --card-b: rgba(248, 250, 253, 0.95);
  --voice-a: #ffffff;
  --voice-b: #f4fbf8;
  --shadow-color: rgba(20, 35, 70, 0.16);

  /* Text */
  --text: #0d1626;
  --body: #2c3a4f;
  --muted: #4b5568;
  --dim: #6b7588;
  --btn-light-hover: #1d2a40;

  /* Accent: BidOptimized amber */
  --amber: #ffb224;
  --amber-rgb: 255, 178, 36;
  --amber-text: #a35f00;
  --soft-amber-text: #8a5100;
  --chip-amber-text: #8a5100;
  --on-accent: #1c1204;
  --focus: #a35f00;
  --accent-gradient: linear-gradient(100deg, #ffd27a 0%, #ffb224 45%, #ff9a3c 100%);
  --accent-text-gradient: linear-gradient(100deg, #d08200 0%, #b86400 50%, #a1470d 100%);

  /* Atmosphere, as rgb triplets for rgba() */
  --teal: 110, 200, 178;
  --blue: 130, 165, 225;

  /* Product brands */
  --margin: #0d8c66;
  --margin-rgb: 13, 140, 102;
  --meatborsa: #1f8a4c;
  --meatborsa-rgb: 31, 138, 76;
  --boss: #6a4fd6;
  --boss-rgb: 106, 79, 214;
  --ledgvero: #07869f;
  --ledgvero-rgb: 7, 134, 159;
  --live-text: #1f7a45;

  /* Diagram and status */
  --node-stroke: rgba(13, 22, 38, 0.65);
  --node-core: #0d1626;
  --st-overdue: #b42318;
  --st-reminder: #07869f;
  --st-paid: #1f7a45;
  --f-blue: #2563eb;
  --f-purple: #7c3aed;
  --f-pink: #db2777;
  --f-red: #e11d48;
  --f-amber: #d97706;
  --f-green: #059669;

  /* Type */
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;
  --radius: 20px;
}

/* Dark: when Night is picked, or Auto on a dark system */
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #09152b;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-hover: rgba(255, 255, 255, 0.32);
  --grid: rgba(255, 255, 255, 0.045);
  --hair-1: rgba(255, 255, 255, 0.03);
  --hair-2: rgba(255, 255, 255, 0.06);
  --hover-fill: rgba(255, 255, 255, 0.05);
  --highlight: rgba(255, 255, 255, 0.06);
  --edge: rgba(255, 255, 255, 0.3);
  --header-bg: rgba(9, 21, 43, 0.72);
  --footer-bg: rgba(6, 14, 31, 0.6);
  --menu-bg: rgba(12, 24, 46, 0.98);
  --pill-bg: rgba(16, 28, 51, 0.96);
  --inset: rgba(9, 21, 43, 0.5);
  --tint-a: rgba(255, 255, 255, 0.05);
  --tint-b: rgba(255, 255, 255, 0.015);
  --glass-a: rgba(22, 36, 62, 0.78);
  --glass-b: rgba(14, 25, 46, 0.78);
  --solid-a: rgba(26, 38, 62, 0.94);
  --solid-b: rgba(17, 28, 50, 0.94);
  --card-a: rgba(20, 34, 60, 0.88);
  --card-b: rgba(12, 22, 42, 0.88);
  --voice-a: rgba(18, 40, 52, 0.96);
  --voice-b: rgba(13, 29, 44, 0.96);
  --shadow-color: rgba(0, 0, 0, 0.7);
  --text: #f5f7fb;
  --body: #c3ccda;
  --muted: #9fabc0;
  --dim: #6f7b92;
  --btn-light-hover: #ffffff;
  --amber-text: #ffb224;
  --soft-amber-text: #ffd27a;
  --chip-amber-text: #ffd48a;
  --focus: #ffb224;
  --accent-text-gradient: var(--accent-gradient);
  --teal: 72, 160, 140;
  --blue: 40, 90, 150;
  --margin: #7ee0bf;
  --margin-rgb: 126, 224, 191;
  --meatborsa: #4cc47f;
  --meatborsa-rgb: 76, 196, 127;
  --boss: #b4a2ff;
  --boss-rgb: 180, 162, 255;
  --ledgvero: #07b9d5;
  --ledgvero-rgb: 7, 185, 213;
  --live-text: #74de9f;
  --node-stroke: rgba(255, 255, 255, 0.8);
  --node-core: #ffffff;
  --st-overdue: #ff9a9a;
  --st-reminder: #6fdaec;
  --st-paid: #74de9f;
  --f-blue: #60a5fa;
  --f-purple: #c084fc;
  --f-pink: #f472b6;
  --f-red: #fb7185;
  --f-amber: #fbbf24;
  --f-green: #34d399;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #09152b;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --line-hover: rgba(255, 255, 255, 0.32);
    --grid: rgba(255, 255, 255, 0.045);
    --hair-1: rgba(255, 255, 255, 0.03);
    --hair-2: rgba(255, 255, 255, 0.06);
    --hover-fill: rgba(255, 255, 255, 0.05);
    --highlight: rgba(255, 255, 255, 0.06);
    --edge: rgba(255, 255, 255, 0.3);
    --header-bg: rgba(9, 21, 43, 0.72);
    --footer-bg: rgba(6, 14, 31, 0.6);
    --menu-bg: rgba(12, 24, 46, 0.98);
    --pill-bg: rgba(16, 28, 51, 0.96);
    --inset: rgba(9, 21, 43, 0.5);
    --tint-a: rgba(255, 255, 255, 0.05);
    --tint-b: rgba(255, 255, 255, 0.015);
    --glass-a: rgba(22, 36, 62, 0.78);
    --glass-b: rgba(14, 25, 46, 0.78);
    --solid-a: rgba(26, 38, 62, 0.94);
    --solid-b: rgba(17, 28, 50, 0.94);
    --card-a: rgba(20, 34, 60, 0.88);
    --card-b: rgba(12, 22, 42, 0.88);
    --voice-a: rgba(18, 40, 52, 0.96);
    --voice-b: rgba(13, 29, 44, 0.96);
    --shadow-color: rgba(0, 0, 0, 0.7);
    --text: #f5f7fb;
    --body: #c3ccda;
    --muted: #9fabc0;
    --dim: #6f7b92;
    --btn-light-hover: #ffffff;
    --amber-text: #ffb224;
    --soft-amber-text: #ffd27a;
    --chip-amber-text: #ffd48a;
    --focus: #ffb224;
    --accent-text-gradient: var(--accent-gradient);
    --teal: 72, 160, 140;
    --blue: 40, 90, 150;
    --margin: #7ee0bf;
    --margin-rgb: 126, 224, 191;
    --meatborsa: #4cc47f;
    --meatborsa-rgb: 76, 196, 127;
    --boss: #b4a2ff;
    --boss-rgb: 180, 162, 255;
    --ledgvero: #07b9d5;
    --ledgvero-rgb: 7, 185, 213;
    --live-text: #74de9f;
    --node-stroke: rgba(255, 255, 255, 0.8);
    --node-core: #ffffff;
    --st-overdue: #ff9a9a;
    --st-reminder: #6fdaec;
    --st-paid: #74de9f;
    --f-blue: #60a5fa;
    --f-purple: #c084fc;
    --f-pink: #f472b6;
    --f-red: #fb7185;
    --f-amber: #fbbf24;
    --f-green: #34d399;
  }
}

/* Base ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The big grid, running the length of the page */
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 280px 280px;
  background-position: center top;
}

/* Glows overflow their sections on purpose; clipping here keeps them from
   adding sideways scroll or empty space past the footer. */
main { overflow: clip; }

/* Footer stays at the bottom of the window on short pages */
body { display: flex; flex-direction: column; }
main { display: flex; flex-direction: column; flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* Home is the hero on its own: centre it in the window */
main > .hero:only-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 auto;
}

h1, h2, h3, p, ul, ol, dl, dd, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
svg { display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--amber);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

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

.display {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
h1.display {
  font-size: clamp(3rem, 1.6rem + 4.6vw, 5.5rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}
h2.display { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }

/* The main heading of an inner page: section-sized, not hero-sized */
h1.page-title {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.accent {
  background: var(--accent-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (forced-colors: active) {
  .accent { background: none; color: CanvasText; }
}

.kicker,
.label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.label-num { color: var(--amber-text); }
.label-rule {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.lede,
.section-lede {
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.lede { max-width: 33em; margin-top: 26px; }
.section-lede { max-width: 32em; }

/* Buttons and pills ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent-gradient);
  color: var(--on-accent);
  box-shadow: 0 12px 32px -14px rgba(var(--amber-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 40px -14px rgba(var(--amber-rgb), 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-ghost {
  border-color: var(--line-strong);
  background: var(--hair-1);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--line-hover);
  background: var(--hover-fill);
}

.btn-light { background: var(--text); color: var(--bg); }
.btn-light:hover { background: var(--btn-light-hover); }

.btn-sm { height: 38px; padding: 0 16px; font-size: 0.9375rem; }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.pills li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hair-1);
  font-size: 0.875rem;
  font-weight: 500;
}
.pill-dot,
.pulse {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(var(--amber-rgb), 0.8);
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-name {
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.brand-name b { font-weight: 800; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav a:not(.btn):hover { color: var(--text); }

.nav a[aria-current="page"]:not(.btn) { color: var(--text); }

/* Phones and small tablets: one "Menu" button instead of the links (no JavaScript) */
.menu { display: none; position: relative; }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; }
}
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary {
  border-color: var(--line-hover);
  background: var(--hair-2);
}
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  width: min(280px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--menu-bg);
  box-shadow: 0 30px 60px -20px var(--shadow-color);
}
.menu-panel a:not(.btn) {
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.menu-panel a:not(.btn):hover,
.menu-panel a[aria-current="page"]:not(.btn) { background: var(--hair-2); }
.menu-panel .btn { margin-top: 8px; }

/* Sections and their glows ---------------------------------------------- */

.hero,
.section {
  position: relative;
  isolation: isolate;
}
.section { padding-block: clamp(56px, 6vw, 88px); }

.hero::before, .hero::after,
.section::before, .section::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  right: -320px;
  bottom: -420px;
  width: 1040px;
  height: 1040px;
  background: radial-gradient(closest-side, rgba(var(--teal), 0.5), transparent);
}
.hero::after {
  top: -40px;
  right: 40px;
  width: 760px;
  height: 760px;
  background: radial-gradient(closest-side, rgba(var(--blue), 0.42), transparent);
}

.section--carcass::before {
  top: 0;
  left: -460px;
  width: 900px;
  height: 900px;
  background: radial-gradient(closest-side, rgba(var(--teal), 0.3), transparent);
}
.section--carcass::after {
  top: 20%;
  right: -300px;
  width: 860px;
  height: 860px;
  background: radial-gradient(closest-side, rgba(var(--teal), 0.28), transparent);
}

.section--registry::before {
  top: -140px;
  right: -380px;
  width: 980px;
  height: 980px;
  background: radial-gradient(closest-side, rgba(var(--teal), 0.32), transparent);
}
.section--registry::after {
  bottom: -260px;
  left: -300px;
  width: 760px;
  height: 760px;
  background: radial-gradient(closest-side, rgba(var(--blue), 0.28), transparent);
}

.section--how::before {
  top: 10%;
  left: -420px;
  width: 860px;
  height: 860px;
  background: radial-gradient(closest-side, rgba(var(--teal), 0.26), transparent);
}

.section--build::before {
  top: 20%;
  right: -360px;
  width: 900px;
  height: 900px;
  background: radial-gradient(closest-side, rgba(var(--blue), 0.3), transparent);
}

.section--products::before {
  top: 30%;
  left: 50%;
  width: 1200px;
  height: 820px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--blue), 0.32), transparent);
}

.section--approach::before {
  bottom: -300px;
  left: 50%;
  width: 1000px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--teal), 0.28), transparent);
}

.section--contact::before {
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--teal), 0.42), transparent);
}
.section--contact::after {
  top: 20%;
  left: 30%;
  width: 520px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--amber-rgb), 0.1), transparent);
}

/* Heading on the left, lede on the right */
.split {
  display: grid;
  gap: 20px;
  align-items: end;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
}

/* Glass cards ------------------------------------------------------------ */

.note-card,
.match-card,
.recipe-card {
  position: relative;
  padding: 22px 24px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -40px var(--shadow-color), inset 0 1px 0 var(--highlight);
}

/* Amber gradient border for the cards that show an AI result */
.match-card,
.recipe-card {
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--solid-a), var(--solid-b)) padding-box,
    linear-gradient(140deg, rgba(var(--amber-rgb), 0.85), rgba(var(--amber-rgb), 0.12) 55%, var(--line-strong)) border-box;
  box-shadow: 0 40px 90px -40px rgba(var(--amber-rgb), 0.45), 0 30px 60px -30px var(--shadow-color);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.card-tag { color: var(--text); }
.card-tag--hot { color: var(--amber-text); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.chips li {
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--inset);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.chips span {
  margin-right: 7px;
  color: var(--dim);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.hero { padding-block: clamp(48px, 6vw, 96px) clamp(64px, 7vw, 104px); }

.hero-grid {
  display: grid;
  align-items: center;
  gap: clamp(48px, 6vw, 80px);
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero h1 { margin-top: 24px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.wave { position: relative; margin: 16px 0 16px; }
.wave svg {
  width: 100%;
  height: auto;
  fill: rgba(255, 255, 255, 0.42);
}
.wave .wave-played {
  position: absolute;
  inset: 0;
  fill: var(--amber);
  clip-path: inset(0 62% 0 0);
}

.note-quote {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.note-quote mark { background: none; color: var(--amber-text); }

.match-card {
  z-index: 1;
  width: min(100%, 380px);
  margin: -20px 0 0 auto;
}
@media (max-width: 560px) {
  .match-card { width: calc(100% - 20px); }
}

.match-rows {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.match-rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9375rem;
}
.match-rows dt { color: var(--muted); }
.match-rows dd { font-family: var(--font-mono); font-size: 0.875rem; }

.match-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(var(--amber-rgb), 0.35);
}
.match-total span { color: var(--muted); font-size: 0.875rem; }
.match-total strong {
  background: var(--accent-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

/* Hero visual: what lands in the inbox, and what's done a minute later ---- */

.flow { position: relative; width: 100%; max-width: 500px; margin-inline: auto; }

/* A trader's voice note dropping into the inbox (Margin's mint) */
.flow { padding-top: 86px; }
@media (max-width: 560px) {
  .flow { padding-top: 104px; }
}
.voice-bubble {
  position: absolute;
  top: 0;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(310px, calc(100% - 28px));
  padding: 12px 14px 12px 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, var(--voice-a), var(--voice-b)) padding-box,
    linear-gradient(140deg, rgba(var(--margin-rgb), 0.8), rgba(var(--margin-rgb), 0.12) 55%, var(--line-strong)) border-box;
  box-shadow: 0 24px 60px -24px rgba(var(--margin-rgb), 0.35), 0 20px 40px -20px var(--shadow-color);
}
.voice-mic {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--margin-rgb), 0.16);
}
.voice-mic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--margin);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.voice-body { flex: 1; min-width: 0; }
.voice-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--margin);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.voice-meta span + span { color: var(--dim); }
.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  margin-top: 6px;
}
.voice-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--margin);
  transform-origin: center;
}
.voice-wave i:nth-child(6n + 1) { height: 35%; }
.voice-wave i:nth-child(6n + 2) { height: 80%; }
.voice-wave i:nth-child(6n + 3) { height: 55%; }
.voice-wave i:nth-child(6n + 4) { height: 100%; }
.voice-wave i:nth-child(6n + 5) { height: 45%; }
.voice-wave i:nth-child(6n + 6) { height: 70%; }
.voice-wave i:nth-child(n + 25) { opacity: 0.45; }
.voice-quote {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.inbox-rows { display: grid; gap: 10px; margin-top: 16px; }
.inbox-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--inset);
}
.inbox-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--hair-2);
}
.inbox-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inbox-from {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inbox-text { margin-top: 2px; font-size: 0.9375rem; line-height: 1.4; }

.flow-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  margin-left: 34px;
  padding-left: 22px;
  border-left: 2px solid rgba(var(--amber-rgb), 0.55);
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.done-card {
  position: relative;
  padding: 22px 24px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--solid-a), var(--solid-b)) padding-box,
    linear-gradient(140deg, rgba(var(--amber-rgb), 0.85), rgba(var(--amber-rgb), 0.12) 55%, var(--line-strong)) border-box;
  box-shadow: 0 40px 90px -40px rgba(var(--amber-rgb), 0.45), 0 30px 60px -30px var(--shadow-color);
}
.done-rows { display: grid; gap: 10px; margin-top: 16px; }
.done-rows li {
  position: relative;
  padding-left: 28px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.done-rows li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.2'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.2'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.done-rows span { color: var(--muted); }

/* How we work ------------------------------------------------------------ */

.steps {
  display: grid;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
  counter-reset: step;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.step {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint-a), var(--tint-b));
}
.step-num {
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.step h2 {
  margin-top: 14px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.step p {
  margin-top: 8px;
  color: var(--muted);
  text-wrap: pretty;
}

.segments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.segments .segments-label {
  padding-left: 0;
  border: 0;
  background: none;
  margin-right: 6px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.segments li {
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hair-1);
  font-size: 0.875rem;
  font-weight: 500;
}

/* What we build ---------------------------------------------------------- */

.usecases {
  display: grid;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 700px) {
  .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .usecases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.usecase {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint-a), var(--tint-b));
}
.usecase h2,
.usecase h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.usecase p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.96875rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.built-on {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
}
.built-on li {
  padding: 3px 9px;
  border: 1px solid rgba(var(--amber-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--amber-rgb), 0.07);
  color: var(--chip-amber-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/* Full-width card: agents inside Slack and Office 365 */
.usecase--wide {
  display: grid;
  gap: 24px;
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--solid-a), var(--solid-b)) padding-box,
    linear-gradient(140deg, rgba(var(--amber-rgb), 0.7), rgba(var(--amber-rgb), 0.1) 50%, var(--line)) border-box;
}
@media (min-width: 700px) {
  .usecase--wide { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .usecase--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 28px 32px;
  }
}
.usecase-copy { display: flex; flex-direction: column; }
.usecase--wide h2 { font-size: 1.5rem; letter-spacing: -0.03em; }
.usecase--wide .built-on { margin-top: 0; padding-top: 18px; }

.agent-mock { display: grid; gap: 12px; }
.mock-panel {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--inset);
}
.mock-app {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.mock-dot--slack { background: conic-gradient(#e01e5a 0 25%, #36c5f0 0 50%, #2eb67d 0 75%, #ecb22e 0); }
.mock-dot--outlook { background: #0f78d4; }
.mock-msg {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mock-msg b { margin-right: 6px; color: var(--text); font-weight: 600; }
.mock-msg--agent {
  padding: 8px 10px;
  border-left: 2px solid var(--amber);
  border-radius: 0 8px 8px 0;
  background: rgba(var(--amber-rgb), 0.07);
  color: var(--text);
}
.mock-msg--agent b { color: var(--amber-text); }

/* Already running: our own platforms ------------------------------------ */

.platforms {
  display: grid;
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 900px) {
  .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .platforms .product--featured { grid-column: 1 / -1; }
}
/* Two classes so these win over the base .product rule further down */
.product.product--boss { --p: var(--boss); --p-rgb: var(--boss-rgb); }
.product.product--ledgvero { --p: var(--ledgvero); --p-rgb: var(--ledgvero-rgb); }

.product--featured .product-grid-inner {
  display: grid;
  gap: 28px;
}
@media (min-width: 900px) {
  .product--featured .product-grid-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: end;
  }
}
.product--featured .product-points { margin-top: 0; border-top: 0; padding-top: 0; }

/* 01 Carcass AI ---------------------------------------------------------- */

.carcass-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .carcass-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
}
.carcass-grid .section-lede { margin-top: 20px; }

.capabilities {
  display: grid;
  margin-top: 36px;
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 640px) {
  .capabilities { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.capabilities li {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line-strong);
}
.capabilities h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.cap-num {
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.capabilities p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.96875rem;
  line-height: 1.55;
}

.recipe-card { width: 100%; max-width: 480px; margin-inline: auto; }
.recipe-name {
  margin-top: 16px;
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.recipe-card .chips { margin-top: 14px; }

.recipe-table {
  margin-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.recipe-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.recipe-row--head {
  padding: 10px 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.supplier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgba(var(--amber-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--amber-rgb), 0.08);
  color: var(--chip-amber-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}
.supplier::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.2 2.2 4.8-4.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.2 2.2 4.8-4.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.recipe-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* 02 The Registry -------------------------------------------------------- */

.registry-grid {
  display: grid;
  gap: 40px;
  align-items: center;
  margin-top: 28px;
}
@media (min-width: 1024px) {
  .registry-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
}

.big-number {
  display: inline-block;
  font-size: 1.6em;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.facts {
  margin-top: 32px;
  border-top: 1px solid var(--line-strong);
}
.facts li {
  position: relative;
  padding: 14px 0 15px 22px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
.facts li::before {
  content: "";
  position: absolute;
  top: 1.45em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.facts strong { color: var(--text); font-weight: 600; }

.graph {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
.edge {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.edge--hot {
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-dasharray: none;
}
.node .ring { fill: var(--bg); stroke: var(--node-stroke); stroke-width: 1.5; }
.node .core { fill: var(--node-core); }
.node--hot .halo {
  fill: rgba(var(--amber-rgb), 0.12);
  stroke: rgba(var(--amber-rgb), 0.75);
  stroke-width: 1.5;
}
.node--hot .ring { stroke: var(--amber); }
.node--hot .core { fill: var(--amber); }
.glabel {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-anchor: middle;
}
.glabel--hot { fill: var(--amber-text); }

/* 03 Products ------------------------------------------------------------ */

.product-grid {
  display: grid;
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 900px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.product {
  --p: var(--text);
  --p-rgb: 255, 255, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(var(--p-rgb), 0.16), transparent 60%) padding-box,
    linear-gradient(180deg, var(--card-a), var(--card-b)) padding-box,
    linear-gradient(150deg, rgba(var(--p-rgb), 0.55), var(--line) 45%, var(--hair-1)) border-box;
  box-shadow: 0 50px 100px -50px var(--shadow-color);
}
.product--margin { --p: var(--margin); --p-rgb: var(--margin-rgb); }
.product--meatborsa { --p: var(--meatborsa); --p-rgb: var(--meatborsa-rgb); }

.product-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-tag {
  padding: 5px 12px;
  border: 1px solid rgba(var(--p-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--p-rgb), 0.08);
  color: var(--p);
}
.product-platform { color: var(--dim); }

.product-name {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.product-tagline {
  margin-top: 10px;
  color: var(--p);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.product-body {
  margin-top: 12px;
  color: var(--muted);
  text-wrap: pretty;
}

.product-points {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.product-points li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5;
}
.product-points li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 19px;
  height: 19px;
  background: var(--p);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.2'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.2'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.product-foot {
  margin-top: auto;
  padding-top: 28px;
}
.product-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(var(--p-rgb), 0.4);
  border-radius: 999px;
  color: var(--p);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.product-link:hover {
  border-color: rgba(var(--p-rgb), 0.7);
  background: rgba(var(--p-rgb), 0.1);
}

/* 04 How we build -------------------------------------------------------- */

.pillars {
  display: grid;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.pillar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint-a), var(--tint-b));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pillar-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--amber-rgb), 0.3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.16), rgba(var(--amber-rgb), 0.04));
}
.pillar-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.pillar p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.96875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* 05 Contact ------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: 40px;
  align-items: end;
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; }
}
.contact-grid .section-lede { margin-top: 18px; }
.contact-mail { margin-top: 28px; }
.contact-alt {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.contact-alt a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.addresses {
  display: grid;
  gap: 24px;
}
@media (min-width: 560px) {
  .addresses { grid-template-columns: 1fr 1fr; }
}
.address {
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  font-size: 0.96875rem;
  line-height: 1.6;
}
.address-label {
  display: block;
  margin-bottom: 8px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 32px;
  padding-block: 24px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Company details on every page, as EU e-commerce rules expect */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: 4px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  letter-spacing: 0.04em;
  text-transform: none;
}
/* Keep each detail in one piece; only the address may wrap, on the narrowest phones */
.footer-legal span:not(:last-child) { white-space: nowrap; }

.footer-inner a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-inner a:hover,
.footer-inner a[aria-current="page"] { color: var(--text); }

/* Privacy policy --------------------------------------------------------- */

.legal-page {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 112px);
}
.legal-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -260px;
  right: -320px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--teal), 0.28), transparent);
  pointer-events: none;
}

.legal { max-width: calc(780px + 2 * var(--gutter)); }
.legal .label { margin-bottom: 28px; }
.legal-title { font-size: clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem); }
.legal-intro {
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.legal-summary {
  margin-top: 36px;
  padding: 22px 26px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--solid-a), var(--solid-b)) padding-box,
    linear-gradient(140deg, rgba(var(--amber-rgb), 0.7), rgba(var(--amber-rgb), 0.1) 55%, var(--line)) border-box;
}
.legal-summary h2 {
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal-summary ul {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.legal-toc {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.legal-toc ol {
  counter-reset: toc;
  columns: 2;
  column-gap: 32px;
}
@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}
.legal-toc li {
  counter-increment: toc;
  break-inside: avoid;
  padding: 4px 0;
}
.legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 12px;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.legal .legal-toc a {
  color: var(--text);
  text-decoration: none;
}
.legal .legal-toc a:hover { color: var(--amber-text); }

.legal section {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.legal section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.sec-num {
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.legal h3 {
  margin-top: 30px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.legal section p,
.legal section ul,
.legal address { margin-top: 12px; }
.legal p,
.legal li,
.legal address {
  color: var(--body);
  line-height: 1.7;
}
.legal section ul { display: grid; gap: 8px; }
.legal section li,
.legal-summary li {
  position: relative;
  padding-left: 22px;
}
.legal section li::before,
.legal-summary li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.legal strong { color: var(--text); font-weight: 600; }
.legal p a,
.legal li a,
.legal address a {
  color: var(--amber-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.basis {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--hair-1);
  font-size: 0.9375rem;
}
.legal .basis { margin-top: 14px; }
.basis span {
  padding-top: 0.3em;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 404 -------------------------------------------------------------------- */

.page-404 main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: 48px;
}
.page-404 .label { width: 100%; margin: 64px 0 28px; }
.page-404 h1.display { font-size: clamp(3rem, 1.8rem + 4.6vw, 5.5rem); }
.page-404 .btn { margin-top: 36px; }

/* Motion (only for people who haven't asked to reduce it) ---------------- */

@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2.4s ease-in-out infinite; }

  .note-card { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .match-card { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }

  /* The voice note "plays", then loops */
  .wave .wave-played { animation: play 9s linear 0.8s infinite both; }

  .node--hot .halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: halo 3.2s ease-in-out infinite;
  }

  /* Hero story: inbox, then the voice note drops in, then the work is done */
  .voice-bubble {
    animation:
      drop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both,
      bob 4.5s ease-in-out 1.6s infinite;
  }
  .voice-mic { animation: mic 1.8s ease-out infinite; }
  .voice-wave i { animation: talk 1.1s ease-in-out infinite; }
  .voice-wave i:nth-child(3n) { animation-delay: -0.35s; }
  .voice-wave i:nth-child(3n + 1) { animation-delay: -0.75s; }
  .voice-wave i:nth-child(5n) { animation-duration: 1.5s; }
  .done-card { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both; }

  @keyframes drop {
    from { opacity: 0; transform: translateY(-14px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  @keyframes mic {
    0% { box-shadow: 0 0 0 0 rgba(var(--margin-rgb), 0.45); }
    100% { box-shadow: 0 0 0 10px rgba(var(--margin-rgb), 0); }
  }
  @keyframes talk {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.4); }
  }
  @keyframes halo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.7; }
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(var(--amber-rgb), 0.04); }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes play {
    0% { clip-path: inset(0 100% 0 0); }
    80%, 100% { clip-path: inset(0 0 0 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.nowrap { white-space: nowrap; }

/* ==========================================================================
   Inner pages: fewer boxes, less text, one animation each.
   Interactivity is CSS only: radio tabs and <details> lists.
   ========================================================================== */

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

.split--top { align-items: start; }
.split-lede { margin-top: 18px; }

/* Click-to-open lists (one open at a time where the browser supports it) */
.accordion { border-top: 1px solid var(--line-strong); }
.accordion details { border-bottom: 1px solid var(--line-strong); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color 0.15s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background:
    linear-gradient(var(--text), var(--text)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 1.5px 10px no-repeat;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.accordion summary:hover,
.accordion details[open] summary { color: var(--amber-text); }
.accordion details[open] summary::after {
  transform: rotate(45deg);
  border-color: rgba(var(--amber-rgb), 0.5);
  background-color: rgba(var(--amber-rgb), 0.12);
}
.acc-body { padding: 0 2px 22px; }
.acc-body p { max-width: 40em; color: var(--muted); text-wrap: pretty; }
.acc-body .built-on { margin-top: 0; padding-top: 14px; }
.acc-body .agent-mock { margin-top: 16px; }

/* Who we work with: a static list, or a slow ticker when motion is allowed */
.marquee {
  display: grid;
  gap: 14px;
  margin-top: clamp(56px, 7vw, 88px);
}
.marquee-label {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.marquee-window { display: flex; overflow: hidden; }
.marquee-track {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.marquee-track + .marquee-track { display: none; }
.marquee-track li {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hair-1);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Products: one product at a time */
.switcher { margin-top: clamp(36px, 5vw, 56px); }
.tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.switcher-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hair-1);
}
.switcher-tabs label {
  padding: 10px 20px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.switcher-tabs label:hover { color: var(--text); }
#tab-meatborsa:checked ~ .switcher-tabs label[for="tab-meatborsa"],
#tab-boss:checked ~ .switcher-tabs label[for="tab-boss"],
#tab-margin:checked ~ .switcher-tabs label[for="tab-margin"],
#tab-ledgvero:checked ~ .switcher-tabs label[for="tab-ledgvero"] {
  background: var(--text);
  color: var(--bg);
}
#tab-meatborsa:focus-visible ~ .switcher-tabs label[for="tab-meatborsa"],
#tab-boss:focus-visible ~ .switcher-tabs label[for="tab-boss"],
#tab-margin:focus-visible ~ .switcher-tabs label[for="tab-margin"],
#tab-ledgvero:focus-visible ~ .switcher-tabs label[for="tab-ledgvero"] {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.switcher-panels { margin-top: 20px; }
.panel { display: none; }
#tab-meatborsa:checked ~ .switcher-panels .product--meatborsa,
#tab-boss:checked ~ .switcher-panels .product--boss,
#tab-margin:checked ~ .switcher-panels .product--margin,
#tab-ledgvero:checked ~ .switcher-panels .product--ledgvero {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  #tab-meatborsa:checked ~ .switcher-panels .product--meatborsa,
  #tab-boss:checked ~ .switcher-panels .product--boss,
  #tab-margin:checked ~ .switcher-panels .product--margin,
  #tab-ledgvero:checked ~ .switcher-panels .product--ledgvero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}
.panel .product-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.panel .product-name { margin-top: 18px; }
.panel-link { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* The little live preview inside each product */
.mini {
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--inset);
}
.mini-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mini-head span:first-child { color: var(--p); }
.mini-live { display: inline-flex; align-items: center; gap: 6px; }
.mini-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p);
}
.mini-rows { display: grid; gap: 4px; margin-top: 14px; }
.mini-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9375rem;
}
.mini-rows li > span:nth-child(2) { color: var(--dim); font-family: var(--font-mono); font-size: 0.75rem; }
.mini-rows b { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; }
.mini-rows--checks li { grid-template-columns: 20px minmax(0, 1fr); row-gap: 0; }
.mini-rows--checks li::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}
.mini-rows--invoices li > span:nth-child(1) { color: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem; }
.status { display: grid; justify-items: end; }
.status i {
  grid-area: 1 / 1;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.st-overdue { background: rgba(255, 110, 110, 0.14); color: var(--st-overdue); }
.st-reminder { background: rgba(7, 185, 213, 0.16); color: var(--st-reminder); }
.st-paid { background: rgba(76, 196, 127, 0.16); color: var(--st-paid); }
.st-due { background: rgba(var(--amber-rgb), 0.14); color: var(--soft-amber-text); }
.status--cycle i:not(:first-child) { opacity: 0; }
.mini-voice { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mini-voice .voice-wave { flex: 1; margin-top: 0; }
.mini-time { color: var(--dim); font-family: var(--font-mono); font-size: 0.75rem; }
.mini-quote { margin-top: 14px; font-size: 0.9375rem; line-height: 1.45; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mini-chips li {
  padding: 5px 10px;
  border: 1px solid rgba(var(--p-rgb), 0.35);
  border-radius: 8px;
  background: rgba(var(--p-rgb), 0.08);
  color: var(--p);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* Carcass AI */
.skills { display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.skills li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.carcass-visuals { display: grid; gap: 20px; width: 100%; max-width: 480px; margin-inline: auto; }
.carcass-visuals .recipe-card { max-width: none; }
.lex-card {
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
}
.lex-card .card-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lex-rotator { display: grid; margin-top: 14px; }
.lex-word {
  grid-area: 1 / 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.lex-word b {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.lex-word i {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.14em;
}
.lex-word:not(:first-child) { opacity: 0; }
.lex-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--amber-rgb), 0.3);
  border-radius: 10px;
  background: rgba(var(--amber-rgb), 0.1);
  color: var(--chip-amber-text);
  font-weight: 600;
}
.lex-arrow { color: var(--amber-text); }
.recipe-row:not(.recipe-row--head) { margin-inline: -8px; padding-inline: 8px; border-radius: 8px; }

/* Registry: the number rolls up like an odometer */
.odometer {
  display: inline-flex;
  line-height: 1;
}
/* Letter-spacing doesn't apply between the digit boxes, so tighten them by hand */
.odo-digit { position: relative; display: inline-block; height: 1em; margin-right: -0.04em; overflow: hidden; }
/* Each box is as wide as its final digit, so a narrow 1 doesn't leave a gap */
.odo-digit::before { content: attr(data-n); visibility: hidden; }
.odo-sep { margin: 0 -0.02em 0 -0.06em; }
.odo-plus { margin-left: 0.02em; color: var(--amber-text); }
.odo-strip {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(calc(var(--d) * -1em));
}
.odo-strip span { display: block; height: 1em; }
.graph .node { cursor: default; }
.graph .node:hover .ring { stroke: var(--amber); }
.graph .node:hover .core { fill: var(--amber); }

/* Contact: the pain points */
.pain {
  margin-top: 22px;
  color: var(--soft-amber-text);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.pain span { display: block; }
.pain + .section-lede { margin-top: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .marquee-window {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track {
    flex: none;
    flex-wrap: nowrap;
    padding-right: 10px;
    animation: marquee 32s linear infinite;
  }
  .marquee-track + .marquee-track { display: flex; }
  .marquee-window:hover .marquee-track { animation-play-state: paused; }

  /* Products */
  .panel { animation: panel-in 0.4s ease both; }
  .mini-live::before { animation: live 1.6s ease-in-out infinite; }
  .mini-rows li { animation: row-glow 8s ease-in-out infinite; }
  .mini-rows li:nth-child(2) { animation-delay: 2s; }
  .mini-rows li:nth-child(3) { animation-delay: 4s; }
  .mini-rows li:nth-child(4) { animation-delay: 6s; }
  .mini-rows--checks li { animation: none; }
  .order-flow .mini-rows--checks li:nth-child(1)::before { animation: tick1 12s ease infinite; }
  .order-flow .mini-rows--checks li:nth-child(2)::before { animation: tick2 12s ease infinite; }
  .order-flow .mini-rows--checks li:nth-child(3)::before { animation: tick3 12s ease infinite; }
  .order-flow .mini-rows--checks li:nth-child(4)::before { animation: tick4 12s ease infinite; }
  .mini-rows--invoices li { animation: none; }
  .status--cycle i { opacity: 0; animation: status 9s ease-in-out infinite both; }
  .status--cycle i:nth-child(2) { animation-delay: 3s; }
  .status--cycle i:nth-child(3) { animation-delay: 6s; }
  .mini-chips li { animation: chip-pop 7s ease infinite both; }
  .mini-chips li:nth-child(2) { animation-delay: 0.4s; }
  .mini-chips li:nth-child(3) { animation-delay: 0.8s; }
  .mini-chips li:nth-child(4) { animation-delay: 1.2s; }
  .accordion details[open] .acc-body { animation: panel-in 0.35s ease both; }


  /* Carcass AI */
  .lex-word { opacity: 0; animation: lex 10s ease-in-out infinite both; }
  .lex-word:nth-child(2) { animation-delay: 2s; }
  .lex-word:nth-child(3) { animation-delay: 4s; }
  .lex-word:nth-child(4) { animation-delay: 6s; }
  .lex-word:nth-child(5) { animation-delay: 8s; }
  .lex-result { animation: lex-pulse 2s ease-in-out infinite; }
  .recipe-row:not(.recipe-row--head) { animation: recipe-scan 8s ease-in-out infinite; }
  .recipe-row:nth-child(3) { animation-delay: 2s; }
  .recipe-row:nth-child(4) { animation-delay: 4s; }
  .recipe-row:nth-child(5) { animation-delay: 6s; }
  .recipe-row .supplier { animation: supplier-glow 8s ease-in-out infinite; animation-delay: inherit; }

  /* Registry */
  .odo-strip { animation: odo-roll 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 120ms); }
  .graph .edge { animation: march 1.2s linear infinite; }
  .graph .edge--hot { animation: none; }
  .graph .node .ring,
  .graph .node .core {
    transform-box: fill-box;
    transform-origin: center;
    animation: node-pop 0.6s cubic-bezier(0.2, 0.7, 0.3, 1.4) both;
    animation-delay: calc(var(--n, 0) * 90ms + 0.3s);
  }

  /* Contact */
  .pain { display: grid; }
  .pain span { grid-area: 1 / 1; opacity: 0; animation: pain 10s ease-in-out infinite both; }
  .pain span:nth-child(2) { animation-delay: 2.5s; }
  .pain span:nth-child(3) { animation-delay: 5s; }
  .pain span:nth-child(4) { animation-delay: 7.5s; }

  @keyframes marquee { to { transform: translateX(-100%); } }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  @keyframes row-glow {
    0%, 30%, 100% { background-color: transparent; }
    6%, 22% { background-color: rgba(var(--p-rgb), 0.12); }
  }
  @keyframes tick1 { 0%, 6%, 98%, 100% { background-color: transparent; border-color: var(--line-strong); } 9%, 95% { background-color: var(--p); border-color: var(--p); } }
  @keyframes tick2 { 0%, 16%, 98%, 100% { background-color: transparent; border-color: var(--line-strong); } 19%, 95% { background-color: var(--p); border-color: var(--p); } }
  @keyframes tick3 { 0%, 28%, 98%, 100% { background-color: transparent; border-color: var(--line-strong); } 31%, 95% { background-color: var(--p); border-color: var(--p); } }
  @keyframes tick4 { 0%, 58%, 98%, 100% { background-color: transparent; border-color: var(--line-strong); } 61%, 95% { background-color: var(--p); border-color: var(--p); } }
  @keyframes status {
    0% { opacity: 0; }
    4%, 30% { opacity: 1; }
    34%, 100% { opacity: 0; }
  }
  @keyframes chip-pop {
    0%, 6% { opacity: 0; transform: translateY(6px); }
    12%, 88% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; transform: none; }
  }
  @keyframes lex {
    0% { opacity: 0; transform: translateY(10px); }
    3%, 17% { opacity: 1; transform: none; }
    20%, 100% { opacity: 0; transform: translateY(-10px); }
  }
  @keyframes lex-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--amber-rgb), 0); }
    20% { box-shadow: 0 0 0 6px rgba(var(--amber-rgb), 0.12); }
  }
  @keyframes recipe-scan {
    0%, 30%, 100% { background-color: transparent; }
    6%, 22% { background-color: rgba(var(--amber-rgb), 0.08); }
  }
  @keyframes supplier-glow {
    0%, 30%, 100% { box-shadow: none; }
    8%, 22% { box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.15); }
  }
  @keyframes odo-roll { from { transform: translateY(0); } }
  @keyframes march { to { stroke-dashoffset: -12; } }
  @keyframes node-pop {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes pain {
    0% { opacity: 0; transform: translateY(12px); }
    4%, 21% { opacity: 1; transform: none; }
    25%, 100% { opacity: 0; transform: translateY(-12px); }
  }
}

/* BOSS's full name under the product name */
.product-fullname {
  margin-top: 8px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* How we work: who we are -------------------------------------------- */
.roles {
  display: grid;
  gap: 22px;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 760px) {
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.roles li {
  padding-top: 18px;
  background:
    linear-gradient(var(--amber), var(--amber)) top left / 100% 2px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) top left / 100% 2px no-repeat;
}
.role-word {
  display: block;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.role-line { display: block; margin-top: 8px; color: var(--muted); text-wrap: pretty; }

/* Two ways to work with us */
.ways { margin-top: clamp(56px, 7vw, 88px); }
.modes { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.mode {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint-a), var(--tint-b));
}
.mode-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(var(--amber-rgb), 0.3);
  border-radius: 14px;
  background: rgba(var(--amber-rgb), 0.1);
}
.mode-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--amber-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mode h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.mode p { margin-top: 6px; color: var(--muted); text-wrap: pretty; }
.mode--team { border-color: rgba(var(--amber-rgb), 0.45); background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.1), rgba(var(--amber-rgb), 0.03)); }
.mode .mode-aka {
  margin-top: 10px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ways + .marquee { margin-top: clamp(48px, 6vw, 72px); }

@media (prefers-reduced-motion: no-preference) {
  /* Traders, then builders, then maintainers: each line fills in once */
  .roles li { animation: role-fill 0.9s ease-out both; }
  .roles li:nth-child(2) { animation-delay: 0.5s; }
  .roles li:nth-child(3) { animation-delay: 1s; }
  @keyframes role-fill {
    from { background-size: 0% 2px, 100% 2px; }
    to { background-size: 100% 2px, 100% 2px; }
  }
}

/* Integrations: pick an example, follow it in, through AI and our team, and out */
.fx { margin-top: clamp(32px, 4vw, 48px); }
.fx-input {
  /* fixed, so picking an example from far down the map never scrolls the page */
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.fx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-chips-label {
  margin-right: 6px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fx-chips label {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hair-1);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fx-chips label:hover { border-color: var(--line-hover); }

.fmap {
  position: relative;
  aspect-ratio: 2.1 / 1;
  margin-top: clamp(28px, 4vw, 44px);
}
.fmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fmap-lines line {
  stroke: var(--edge);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
  transition: opacity 0.3s ease, stroke 0.3s ease;
}
.fmap-lines line.out { stroke: rgba(var(--meatborsa-rgb), 0.55); stroke-dasharray: none; }
.fmap-ins,
.fmap-outs { position: absolute; inset: 0; }
.fmap-cap {
  position: absolute;
  top: 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
.fmap-in {
  position: absolute;
  z-index: 3;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.fmap-out {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  width: 210px;
  padding: 11px 14px 12px;
  border: 1px solid rgba(var(--meatborsa-rgb), 0.45);
  border-radius: 14px;
  background: var(--pill-bg);
  box-shadow: 0 14px 30px -18px var(--shadow-color);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.fmap-out b { font-size: 0.9375rem; letter-spacing: -0.01em; }
.fmap-out .say { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
/* Every wording sits in the same spot; only the current one is visible,
   so a card keeps the height of its longest wording and nothing reflows */
.fmap-out .say { grid-area: say; }
.fmap-out { grid-template-areas: "title" "say"; }
.fmap-out b { grid-area: title; }
.fmap-out .say:not(.say-all) { visibility: hidden; }
/* Apps and results are clickable: each opens its matching example */
.fmap-in,
.fmap-out { cursor: pointer; -webkit-user-select: none; user-select: none; }
.fmap-in:hover { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.12); }
.fmap-out:hover { border-color: var(--meatborsa); box-shadow: 0 0 0 4px rgba(var(--meatborsa-rgb), 0.12), 0 14px 30px -18px var(--shadow-color); }

/* AI in the middle, our team around it */
.fmap-hub {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 236px;
  height: 236px;
  transform: translate(-50%, -50%);
}
.fmap-orbit {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(var(--amber-rgb), 0.5);
  border-radius: 50%;
}
.orbit-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateX(118px) rotate(calc(var(--a) * -1));
}
.orbit-spin { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.orbit-spin i {
  position: absolute;
  padding: 4px 10px;
  border: 1px solid rgba(var(--amber-rgb), 0.5);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.fmap-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: var(--on-accent);
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow: 0 0 0 10px rgba(var(--amber-rgb), 0.08), 0 20px 60px -10px rgba(var(--amber-rgb), 0.5);
}
.fmap-hub-cap {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
.fmap-dot {
  position: absolute;
  z-index: 1;
  top: var(--y);
  left: var(--x);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(var(--amber-rgb), 0.9);
  opacity: 0;
}
.fmap-dot--out { top: 52%; left: 50%; background: var(--meatborsa); box-shadow: 0 0 10px rgba(var(--meatborsa-rgb), 0.9); }
.fmap-v { display: none; }

/* The story under the map */
.fx-story { margin-top: clamp(28px, 4vw, 40px); }
.story { display: none; gap: 28px; align-items: start; }
@media (min-width: 960px) {
  .story { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; }
  .story--wide { grid-template-columns: 1fr; }
}
.story-steps { display: grid; gap: 18px 24px; }
@media (min-width: 640px) {
  .story-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .story--wide .story-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.story-steps li { padding-top: 12px; border-top: 2px solid rgba(var(--amber-rgb), 0.6); }
.story-steps li:nth-child(3) { border-top-color: rgba(var(--meatborsa-rgb), 0.7); }
.story-steps b {
  display: block;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.story-steps span { display: block; margin-top: 6px; font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.story-steps .story-team {
  padding: 12px 14px 14px;
  border-top-color: var(--amber);
  border-radius: 0 0 14px 14px;
  background: rgba(var(--amber-rgb), 0.08);
}
.story-steps .story-team b { color: var(--amber-text); }

/* Example screens */
.mock-card {
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--solid-a), var(--solid-b));
  box-shadow: 0 30px 60px -34px var(--shadow-color);
}
.mc-title { margin-top: 12px; font-weight: 700; }
.mc-title span { margin-left: 8px; color: var(--muted); font-weight: 500; }
.mc-quote {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--inset);
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mc-done { display: grid; gap: 8px; margin-top: 14px; }
.mc-done li { position: relative; padding-left: 26px; font-size: 0.9375rem; font-weight: 500; }
.mc-done li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--meatborsa);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.2'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.2'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pl-rows { display: grid; gap: 4px; margin-top: 12px; }
.pl-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--inset);
  font-size: 0.875rem;
}
.pl-rows span { color: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem; }
.pl-rows b { font-weight: 600; }
.pl-rows b::before { content: "→ "; color: var(--amber-text); }
.pl-rows em { font-family: var(--font-mono); font-size: 0.8125rem; font-style: normal; }
.pl-foot { margin-top: 12px; color: var(--live-text); font-family: var(--font-mono); font-size: 0.75rem; }
.iv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.iv-row span { color: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem; }
.iv-row b { font-family: var(--font-mono); font-size: 0.875rem; }
.iv-row i {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 110, 110, 0.14);
  color: var(--st-overdue);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
}

/* A real screenshot, in a phone frame */
.shot {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.shot picture {
  display: block;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 36px;
  background: #0b0f14;
  box-shadow: 0 40px 80px -40px var(--shadow-color);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}
.shot figcaption {
  margin-top: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.panel .shot { max-width: 270px; }

/* Narrow screens: the same flow, top to bottom */
@media (max-width: 900px) {
  .fmap {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
  }
  .fmap-lines,
  .fmap-dot { display: none; }
  .fmap-ins,
  .fmap-outs,
  .fmap-cap,
  .fmap-in,
  .fmap-out { position: static; transform: none; }
  .fmap-ins { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .fmap-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .fmap-cap { flex-basis: 100%; grid-column: 1 / -1; margin-bottom: 4px; text-align: center; }
  .fmap-out { width: auto; }
  .fmap-hub { position: relative; margin: 20px 0 48px; transform: none; }
  .fmap-v {
    display: block;
    width: 2px;
    height: 40px;
    margin: 10px 0;
    background: linear-gradient(var(--edge), var(--edge));
  }
  .fmap-v--out { background: rgba(var(--meatborsa-rgb), 0.55); }
}
@media (max-width: 420px) {
  .fmap-outs { grid-template-columns: 1fr; }
}

#fx-whatsapp:checked ~ .fx-chips label[for="fx-whatsapp"] { background: var(--text); border-color: var(--text); color: var(--bg); }
#fx-whatsapp:focus-visible ~ .fx-chips label[for="fx-whatsapp"] { outline: 2px solid var(--focus); outline-offset: 2px; }
#fx-whatsapp:checked ~ .fx-story .story-whatsapp { display: grid; }
#fx-whatsapp:checked ~ .fmap .fmap-in:not(.x-whatsapp),
#fx-whatsapp:checked ~ .fmap .fmap-out:not(.x-whatsapp) { opacity: 0.32; }
#fx-whatsapp:checked ~ .fmap .fmap-lines line:not(.x-whatsapp) { opacity: 0.18; }
#fx-whatsapp:checked ~ .fmap .fmap-dot:not(.x-whatsapp) { visibility: hidden; }
#fx-whatsapp:checked ~ .fmap .fmap-in.x-whatsapp { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.16); }
#fx-whatsapp:checked ~ .fmap .fmap-out.x-whatsapp { border-color: var(--meatborsa); box-shadow: 0 0 0 4px rgba(var(--meatborsa-rgb), 0.16), 0 14px 30px -18px var(--shadow-color); }
#fx-whatsapp:checked ~ .fmap .fmap-lines line.x-whatsapp { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; }
#fx-whatsapp:checked ~ .fmap .fmap-lines line.out.x-whatsapp { stroke: var(--meatborsa); }
#fx-whatsapp:checked ~ .fmap .fmap-out.x-whatsapp .say-all { visibility: hidden; }
#fx-whatsapp:checked ~ .fmap .fmap-out.x-whatsapp .say-whatsapp { visibility: visible; color: var(--text); font-weight: 600; }
#fx-order:checked ~ .fx-chips label[for="fx-order"] { background: var(--text); border-color: var(--text); color: var(--bg); }
#fx-order:focus-visible ~ .fx-chips label[for="fx-order"] { outline: 2px solid var(--focus); outline-offset: 2px; }
#fx-order:checked ~ .fx-story .story-order { display: grid; }
#fx-order:checked ~ .fmap .fmap-in:not(.x-order),
#fx-order:checked ~ .fmap .fmap-out:not(.x-order) { opacity: 0.32; }
#fx-order:checked ~ .fmap .fmap-lines line:not(.x-order) { opacity: 0.18; }
#fx-order:checked ~ .fmap .fmap-dot:not(.x-order) { visibility: hidden; }
#fx-order:checked ~ .fmap .fmap-in.x-order { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.16); }
#fx-order:checked ~ .fmap .fmap-out.x-order { border-color: var(--meatborsa); box-shadow: 0 0 0 4px rgba(var(--meatborsa-rgb), 0.16), 0 14px 30px -18px var(--shadow-color); }
#fx-order:checked ~ .fmap .fmap-lines line.x-order { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; }
#fx-order:checked ~ .fmap .fmap-lines line.out.x-order { stroke: var(--meatborsa); }
#fx-order:checked ~ .fmap .fmap-out.x-order .say-all { visibility: hidden; }
#fx-order:checked ~ .fmap .fmap-out.x-order .say-order { visibility: visible; color: var(--text); font-weight: 600; }
#fx-prices:checked ~ .fx-chips label[for="fx-prices"] { background: var(--text); border-color: var(--text); color: var(--bg); }
#fx-prices:focus-visible ~ .fx-chips label[for="fx-prices"] { outline: 2px solid var(--focus); outline-offset: 2px; }
#fx-prices:checked ~ .fx-story .story-prices { display: grid; }
#fx-prices:checked ~ .fmap .fmap-in:not(.x-prices),
#fx-prices:checked ~ .fmap .fmap-out:not(.x-prices) { opacity: 0.32; }
#fx-prices:checked ~ .fmap .fmap-lines line:not(.x-prices) { opacity: 0.18; }
#fx-prices:checked ~ .fmap .fmap-dot:not(.x-prices) { visibility: hidden; }
#fx-prices:checked ~ .fmap .fmap-in.x-prices { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.16); }
#fx-prices:checked ~ .fmap .fmap-out.x-prices { border-color: var(--meatborsa); box-shadow: 0 0 0 4px rgba(var(--meatborsa-rgb), 0.16), 0 14px 30px -18px var(--shadow-color); }
#fx-prices:checked ~ .fmap .fmap-lines line.x-prices { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; }
#fx-prices:checked ~ .fmap .fmap-lines line.out.x-prices { stroke: var(--meatborsa); }
#fx-prices:checked ~ .fmap .fmap-out.x-prices .say-all { visibility: hidden; }
#fx-prices:checked ~ .fmap .fmap-out.x-prices .say-prices { visibility: visible; color: var(--text); font-weight: 600; }
#fx-invoice:checked ~ .fx-chips label[for="fx-invoice"] { background: var(--text); border-color: var(--text); color: var(--bg); }
#fx-invoice:focus-visible ~ .fx-chips label[for="fx-invoice"] { outline: 2px solid var(--focus); outline-offset: 2px; }
#fx-invoice:checked ~ .fx-story .story-invoice { display: grid; }
#fx-invoice:checked ~ .fmap .fmap-in:not(.x-invoice),
#fx-invoice:checked ~ .fmap .fmap-out:not(.x-invoice) { opacity: 0.32; }
#fx-invoice:checked ~ .fmap .fmap-lines line:not(.x-invoice) { opacity: 0.18; }
#fx-invoice:checked ~ .fmap .fmap-dot:not(.x-invoice) { visibility: hidden; }
#fx-invoice:checked ~ .fmap .fmap-in.x-invoice { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.16); }
#fx-invoice:checked ~ .fmap .fmap-out.x-invoice { border-color: var(--meatborsa); box-shadow: 0 0 0 4px rgba(var(--meatborsa-rgb), 0.16), 0 14px 30px -18px var(--shadow-color); }
#fx-invoice:checked ~ .fmap .fmap-lines line.x-invoice { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; }
#fx-invoice:checked ~ .fmap .fmap-lines line.out.x-invoice { stroke: var(--meatborsa); }
#fx-invoice:checked ~ .fmap .fmap-out.x-invoice .say-all { visibility: hidden; }
#fx-invoice:checked ~ .fmap .fmap-out.x-invoice .say-invoice { visibility: visible; color: var(--text); font-weight: 600; }
#fx-question:checked ~ .fx-chips label[for="fx-question"] { background: var(--text); border-color: var(--text); color: var(--bg); }
#fx-question:focus-visible ~ .fx-chips label[for="fx-question"] { outline: 2px solid var(--focus); outline-offset: 2px; }
#fx-question:checked ~ .fx-story .story-question { display: grid; }
#fx-question:checked ~ .fmap .fmap-in:not(.x-question),
#fx-question:checked ~ .fmap .fmap-out:not(.x-question) { opacity: 0.32; }
#fx-question:checked ~ .fmap .fmap-lines line:not(.x-question) { opacity: 0.18; }
#fx-question:checked ~ .fmap .fmap-dot:not(.x-question) { visibility: hidden; }
#fx-question:checked ~ .fmap .fmap-in.x-question { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.16); }
#fx-question:checked ~ .fmap .fmap-out.x-question { border-color: var(--meatborsa); box-shadow: 0 0 0 4px rgba(var(--meatborsa-rgb), 0.16), 0 14px 30px -18px var(--shadow-color); }
#fx-question:checked ~ .fmap .fmap-lines line.x-question { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; }
#fx-question:checked ~ .fmap .fmap-lines line.out.x-question { stroke: var(--meatborsa); }
#fx-question:checked ~ .fmap .fmap-out.x-question .say-all { visibility: hidden; }
#fx-question:checked ~ .fmap .fmap-out.x-question .say-question { visibility: visible; color: var(--text); font-weight: 600; }
#fx-all:checked ~ .fx-chips label[for="fx-all"] { background: var(--text); border-color: var(--text); color: var(--bg); }
#fx-all:focus-visible ~ .fx-chips label[for="fx-all"] { outline: 2px solid var(--focus); outline-offset: 2px; }
#fx-all:checked ~ .fx-story .story-all { display: grid; }
.fmap:has(.i-0:hover) .l-0 { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; opacity: 1; }
.fmap:has(.i-1:hover) .l-1 { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; opacity: 1; }
.fmap:has(.i-2:hover) .l-2 { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; opacity: 1; }
.fmap:has(.i-3:hover) .l-3 { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; opacity: 1; }
.fmap:has(.i-4:hover) .l-4 { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; opacity: 1; }
.fmap:has(.i-5:hover) .l-5 { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; opacity: 1; }
.fmap:has(.i-6:hover) .l-6 { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2; opacity: 1; }
.fmap:has(.o-0:hover) .lo-0 { stroke: var(--meatborsa); stroke-width: 2; opacity: 1; }
.fmap:has(.o-1:hover) .lo-1 { stroke: var(--meatborsa); stroke-width: 2; opacity: 1; }
.fmap:has(.o-2:hover) .lo-2 { stroke: var(--meatborsa); stroke-width: 2; opacity: 1; }
.fmap:has(.o-3:hover) .lo-3 { stroke: var(--meatborsa); stroke-width: 2; opacity: 1; }
.fmap:has(.o-4:hover) .lo-4 { stroke: var(--meatborsa); stroke-width: 2; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .fmap-dot { animation: fmap-in 3.6s ease-in infinite; animation-delay: calc(var(--i) * 0.5s); }
  .fmap-dot--out { animation: fmap-out 3.6s ease-out infinite; animation-delay: calc(1.6s + var(--j) * 0.7s); }
  .fmap-core { animation: fmap-pulse 3.6s ease-in-out infinite; }
  .fmap-orbit { animation: orbit 40s linear infinite; }
  .orbit-spin { animation: orbit 40s linear infinite reverse; }

  /* Each example plays when you pick it */
  .story .story-steps li { animation: panel-in 0.45s ease both; }
  .story .story-steps li:nth-child(2) { animation-delay: 0.12s; }
  .story .story-steps li:nth-child(3) { animation-delay: 0.24s; }
  .story .story-steps li:nth-child(4) { animation-delay: 0.36s; }
  .shot { animation: panel-in 0.5s ease 0.15s both; }
  .mc-done li,
  .pl-rows b,
  .pl-rows em { animation: msg-in 0.4s ease both; }
  .mc-done li:nth-child(1), .pl-rows li:nth-child(1) b, .pl-rows li:nth-child(1) em { animation-delay: 0.6s; }
  .mc-done li:nth-child(2), .pl-rows li:nth-child(2) b, .pl-rows li:nth-child(2) em { animation-delay: 1.2s; }
  .mc-done li:nth-child(3), .pl-rows li:nth-child(3) b, .pl-rows li:nth-child(3) em { animation-delay: 1.8s; }
  .mc-done li:nth-child(4), .pl-rows li:nth-child(4) b, .pl-rows li:nth-child(4) em { animation-delay: 2.4s; }
  .pl-foot { animation: msg-in 0.4s ease 3s both; }
  .story .mock-msg--agent { animation: msg-in 0.4s ease 1.2s both; }

  /* On phones the dots run down the connectors instead */
  @media (max-width: 900px) {
    .fmap-v {
      background:
        radial-gradient(circle, var(--amber) 0 3px, transparent 4px) 50% 0 / 8px 14px no-repeat,
        linear-gradient(var(--edge), var(--edge));
      animation: fmap-drop 1.4s linear infinite;
    }
    .fmap-v--out {
      background:
        radial-gradient(circle, var(--meatborsa) 0 3px, transparent 4px) 50% 0 / 8px 14px no-repeat,
        linear-gradient(rgba(var(--meatborsa-rgb), 0.55), rgba(var(--meatborsa-rgb), 0.55));
      animation-delay: 0.7s;
    }
  }

  @keyframes fmap-in {
    0% { top: var(--y); left: var(--x); opacity: 0; }
    15%, 80% { opacity: 1; }
    100% { top: 52%; left: 50%; opacity: 0; }
  }
  @keyframes fmap-out {
    0% { top: 52%; left: 50%; opacity: 0; }
    15%, 70% { opacity: 1; }
    100% { top: var(--y); left: var(--x); opacity: 0; }
  }
  @keyframes fmap-pulse {
    0%, 100% { box-shadow: 0 0 0 10px rgba(var(--amber-rgb), 0.08), 0 20px 60px -10px rgba(var(--amber-rgb), 0.5); }
    50% { box-shadow: 0 0 0 18px rgba(var(--amber-rgb), 0.03), 0 20px 70px -10px rgba(var(--amber-rgb), 0.7); }
  }
  @keyframes fmap-drop {
    from { background-position: 50% -14px, 0 0; }
    to { background-position: 50% 40px, 0 0; }
  }
  @keyframes orbit { to { transform: rotate(360deg); } }
  @keyframes msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* Theme switcher, quiet in the footer: Auto | Day | Night (needs theme.js) */
.theme-switch { display: none; }
.js .theme-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.theme-switch button {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--hair-2); color: var(--text); }
.footer-inner { align-items: center; }

/* Ledgvero: a small version of the dashboard */
.dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 110px;
  margin-top: 16px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line-strong);
}
.dash-bars i {
  flex: 1;
  height: max(var(--h), 2px);
  border-radius: 3px 3px 0 0;
  background: var(--p);
  opacity: 0.9;
  transform-origin: bottom;
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.dash-kpis p { padding: 10px 12px; border-radius: 10px; background: var(--inset); }
.dash-kpis span { display: block; color: var(--dim); font-size: 0.75rem; }
.dash-kpis b { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 1rem; }
.dash-kpis i { color: var(--st-paid); font-size: 0.75rem; font-style: normal; }

/* Ledgvero features: cards in different sizes */
.bento { display: none; gap: 16px; margin-top: 16px; }
#tab-ledgvero:checked ~ .switcher-panels .bento--ledgvero { display: grid; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento-card:nth-child(1),
  .bento-card:nth-child(4),
  .bento-card:nth-child(5) { grid-column: span 7; }
  .bento-card:nth-child(2),
  .bento-card:nth-child(3),
  .bento-card:nth-child(6) { grid-column: span 5; }
}
.bento-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 26px 28px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--tint-a), var(--tint-b));
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--c) 70%, transparent);
}
.bento-label {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bento-label b { color: var(--c); font-weight: 500; }
.bento-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--pill-bg);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.bento-icon svg,
.bento-mark {
  fill: none;
  stroke: var(--c);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bento-icon svg { width: 22px; height: 22px; stroke-width: 1.8; transition: stroke 0.25s ease; }
.bento-card:hover .bento-icon { border-color: var(--c); background: var(--c); }
.bento-card:hover .bento-icon svg { stroke: var(--bg); }
.bento-mark {
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 210px;
  height: 210px;
  stroke-width: 1.1;
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bento-card:hover .bento-mark { opacity: 0.16; transform: scale(1.06) rotate(-4deg); }
.bento-card h3 {
  position: relative;
  max-width: 13em;
  margin-top: 40px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.bento-card p { position: relative; max-width: 30em; margin-top: 10px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .dash-bars i { animation: bar-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--k) * 25ms); }
  .bento-card { animation: panel-in 0.45s ease both; }
  .bento-card:nth-child(2) { animation-delay: 0.06s; }
  .bento-card:nth-child(3) { animation-delay: 0.12s; }
  .bento-card:nth-child(4) { animation-delay: 0.18s; }
  .bento-card:nth-child(5) { animation-delay: 0.24s; }
  .bento-card:nth-child(6) { animation-delay: 0.3s; }
  @keyframes bar-grow { from { transform: scaleY(0); } }
}

/* How we work: Advise, Build, Measure, Improve, round and round ------- */
.cycle {
  display: grid;
  gap: 40px;
  align-items: center;
  margin-top: clamp(48px, 6vw, 80px);
}
@media (min-width: 960px) {
  .cycle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}
.loop {
  position: relative;
  width: min(100% - 96px, 460px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.loop-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.loop-track { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }
.loop-fill {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
}
.loop-arm { display: none; position: absolute; inset: 0; }
.loop-dot {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(var(--amber-rgb), 0.2), 0 0 18px rgba(var(--amber-rgb), 0.9);
}
.loop-node {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.loop-node b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hair-2);
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
}
.ln1 { top: 8%; left: 50%; }
.ln2 { top: 50%; left: 92%; }
.ln3 { top: 92%; left: 50%; }
.ln4 { top: 50%; left: 8%; }
.loop-center {
  position: absolute;
  inset: 21%;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.loop-example {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.loop-says { display: grid; margin-top: 10px; }
.loop-say { grid-area: 1 / 1; display: grid; gap: 6px; }
.loop-say b {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.loop-say span { color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
/* Without motion, the loop shows the Measure step */
.loop-say:not(.ls3) { opacity: 0; }

.cycle-steps { display: grid; gap: 4px; }
.cs {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 16px;
}
.cs-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.cs h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.cs p { margin-top: 4px; color: var(--muted); }

/* Phones: a bigger loop, and just the step numbers on it (the list names them) */
@media (max-width: 560px) {
  .loop { width: min(100% - 24px, 460px); }
  .loop-node { padding: 4px; }
  .loop-node > span { display: none; }
  .loop-node b { width: 26px; height: 26px; font-size: 0.6875rem; }
  .loop-center { inset: 17%; }
  .loop-say b { font-size: 1.25rem; }
  .loop-say span { font-size: 0.875rem; }
}

/* One lap every 16 seconds; each step owns a quarter of the lap */
@media (prefers-reduced-motion: no-preference) {
  .loop-arm { display: block; animation: loop-spin 16s linear infinite; }
  .loop-fill { animation: loop-fill 16s linear infinite; }
  .loop-say { opacity: 0; animation: loop-say 16s ease infinite both; }
  .loop-node { animation: loop-node 16s ease infinite both; }
  .cs { animation: cs-on 16s ease infinite both; }
  .cs-num { animation: cs-num 16s ease infinite both; }
  .ls2, .ln2, .cs2, .cs2 .cs-num { animation-delay: -12s; }
  .ls3, .ln3, .cs3, .cs3 .cs-num { animation-delay: -8s; }
  .ls4, .ln4, .cs4, .cs4 .cs-num { animation-delay: -4s; }

  @keyframes loop-spin { to { transform: rotate(360deg); } }
  @keyframes loop-fill {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
  }
  @keyframes loop-say {
    0% { opacity: 0; transform: translateY(8px); }
    3%, 22% { opacity: 1; transform: none; }
    25%, 100% { opacity: 0; transform: translateY(-8px); }
  }
  @keyframes loop-node {
    0% { border-color: var(--amber); box-shadow: 0 0 0 7px rgba(var(--amber-rgb), 0.22), 0 0 30px rgba(var(--amber-rgb), 0.45); transform: translate(-50%, -50%) scale(1.08); }
    6%, 23% { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.16), 0 0 24px rgba(var(--amber-rgb), 0.3); transform: translate(-50%, -50%); }
    27%, 100% { border-color: var(--line-strong); box-shadow: none; transform: translate(-50%, -50%); }
  }
  @keyframes cs-on {
    0%, 23% { border-color: rgba(var(--amber-rgb), 0.35); background-color: rgba(var(--amber-rgb), 0.08); }
    27%, 100% { border-color: transparent; background-color: transparent; }
  }
  @keyframes cs-num {
    0%, 23% { border-color: var(--amber); background-color: var(--amber); color: var(--on-accent); }
    27%, 100% { border-color: var(--line-strong); background-color: transparent; color: var(--muted); }
  }
}

/* BOSS preview: the order runs step by step. The documents check opens a
   box with two issues it fixed, and the order ends as completed. An invisible
   copy of the finished order keeps the card the same height, so nothing on
   the page moves while it plays. */
.order-stack { display: grid; }
.order-flow { grid-area: 1 / 1; align-self: start; }
.order-flow--ghost { visibility: hidden; }
.fixes-wrap,
.done-wrap { display: grid; grid-template-rows: 1fr; }
.fixes-wrap { grid-column: 2; }
.fixes-clip,
.done-clip { min-height: 0; overflow: hidden; }
.fixes {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--meatborsa-rgb), 0.45);
  border-radius: 10px;
  background: rgba(var(--meatborsa-rgb), 0.08);
  font-size: 0.8125rem;
}
.fixes-head { display: grid; font-weight: 600; }
.fixes-head span { grid-area: 1 / 1; }
.fixes-found { color: var(--soft-amber-text); opacity: 0; }
.fixes-done { color: var(--live-text); }
.fix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.fix span { color: var(--muted); }
.fix s,
.fix b { font-family: var(--font-mono); font-size: 0.75rem; }
.fix s { color: var(--st-overdue); }
.fix b { color: var(--live-text); font-weight: 500; }
.fix b::before { content: "→ "; color: var(--dim); }
.order-done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--meatborsa-rgb), 0.5);
  border-radius: 12px;
  background: rgba(var(--meatborsa-rgb), 0.14);
  color: var(--live-text);
  font-weight: 700;
}
.order-done::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--meatborsa);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.25'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill-opacity='.25'/%3E%3Cpath d='m5.3 9.3 2.4 2.4 5-5.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Without motion: the finished order, all steps ticked */
@media (prefers-reduced-motion: reduce) {
  .mini-rows--checks li::before { border-color: var(--p); background-color: var(--p); }
}

/* With motion: one 12-second run, then it starts again */
@media (prefers-reduced-motion: no-preference) {
  .order-flow--ghost,
  .order-flow--ghost * { animation: none !important; }
  .fixes-wrap { animation: fixes-open 12s ease infinite; }
  .done-wrap { animation: done-open 12s ease infinite; }
  .fixes { animation: fixes-tone 12s ease infinite; }
  .fixes-found { animation: fixes-found 12s ease infinite; }
  .fixes-done { animation: fixes-done 12s ease infinite; }
  .fix b { animation: fix-new 12s ease infinite; }
  .order-done { animation: done-glow 12s ease infinite; }

  @keyframes fixes-open {
    0%, 31% { grid-template-rows: 0fr; }
    36%, 95% { grid-template-rows: 1fr; }
    99%, 100% { grid-template-rows: 0fr; }
  }
  @keyframes fixes-tone {
    0%, 44% { border-color: rgba(var(--amber-rgb), 0.45); background-color: rgba(var(--amber-rgb), 0.08); }
    48%, 100% { border-color: rgba(var(--meatborsa-rgb), 0.45); background-color: rgba(var(--meatborsa-rgb), 0.08); }
  }
  @keyframes fixes-found { 0%, 45% { opacity: 1; } 47%, 100% { opacity: 0; } }
  @keyframes fixes-done { 0%, 45% { opacity: 0; } 47%, 100% { opacity: 1; } }
  @keyframes fix-new { 0%, 40% { opacity: 0; } 44%, 100% { opacity: 1; } }
  @keyframes done-open {
    0%, 66% { grid-template-rows: 0fr; }
    71%, 95% { grid-template-rows: 1fr; }
    99%, 100% { grid-template-rows: 0fr; }
  }
  @keyframes done-glow {
    0%, 70% { box-shadow: 0 0 0 0 rgba(var(--meatborsa-rgb), 0); }
    75% { box-shadow: 0 0 0 7px rgba(var(--meatborsa-rgb), 0.18); }
    84%, 100% { box-shadow: 0 0 0 0 rgba(var(--meatborsa-rgb), 0); }
  }
}

/* Phones: each fix on two lines, label first */
@media (max-width: 560px) {
  .fix { grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; }
  .fix span { grid-column: 1 / -1; }
}
.mini-head span:first-child { white-space: nowrap; }

/* Links inside product lists and section intros */
.product-points a,
.section-lede a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(var(--amber-rgb), 0.7);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.product-points a { color: var(--p); text-decoration-color: currentColor; }
.product-points a:hover,
.section-lede a:hover { color: var(--amber-text); }
.panel .product-points { margin-top: 16px; padding-top: 16px; }

/* "Book a call" while Calendly loads on the first click */
a[data-book].is-loading { cursor: progress; opacity: 0.7; }

/* Registry: company profile with credit, finances, owners and approvals --- */
.section--dossier { padding-top: 0; }
.dossier-grid {
  display: grid;
  gap: 40px;
  align-items: start;
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 960px) {
  .dossier-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
}
.dossier {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--solid-a), var(--solid-b));
  box-shadow: 0 40px 80px -44px var(--shadow-color);
}
.dz-example {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dz-name { margin-top: 8px; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; }
.dz-meta { margin-top: 2px; color: var(--muted); }
.dz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hair-1);
}
.dz-tabs label {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dz-tabs label:hover { color: var(--text); }
#dz-credit:checked ~ .dz-tabs label[for="dz-credit"],
#dz-finance:checked ~ .dz-tabs label[for="dz-finance"],
#dz-owners:checked ~ .dz-tabs label[for="dz-owners"],
#dz-approvals:checked ~ .dz-tabs label[for="dz-approvals"] { background: var(--text); color: var(--bg); }
#dz-credit:focus-visible ~ .dz-tabs label[for="dz-credit"],
#dz-finance:focus-visible ~ .dz-tabs label[for="dz-finance"],
#dz-owners:focus-visible ~ .dz-tabs label[for="dz-owners"],
#dz-approvals:focus-visible ~ .dz-tabs label[for="dz-approvals"] { outline: 2px solid var(--focus); outline-offset: 2px; }
.dz-panel { display: none; margin-top: 22px; }
#dz-credit:checked ~ .dz-panel--credit,
#dz-finance:checked ~ .dz-panel--finance,
#dz-owners:checked ~ .dz-panel--owners,
#dz-approvals:checked ~ .dz-panel--approvals { display: block; }

.dz-facts { display: grid; margin-top: 18px; border-top: 1px solid var(--line); }
.dz-facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.dz-facts dt { color: var(--muted); }
.dz-facts dd { font-weight: 700; text-align: right; }
.dz-source,
.dz-note { margin-top: 14px; font-size: 0.875rem; }
.dz-source { color: var(--dim); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dz-source::before { content: "Source · "; color: var(--amber-text); }
.dz-note { color: var(--body); font-weight: 600; }

/* Credit: a risk gauge */
.gauge { display: grid; justify-items: center; }
.gauge svg { width: min(100%, 260px); height: auto; overflow: visible; }
.gauge path { fill: none; stroke-width: 14; stroke-linecap: round; }
.gauge-track { stroke: var(--hair-2); }
.gauge-low { stroke: var(--meatborsa); }
.gauge-mid { stroke: var(--amber); opacity: 0.55; }
.gauge-high { stroke: var(--st-overdue); opacity: 0.55; }
.gauge-needle path { stroke: var(--text); stroke-width: 4; }
.gauge-needle circle { fill: var(--text); }
.gauge-needle { transform-origin: 100px 100px; }
.gauge-label { display: grid; justify-items: center; margin-top: -4px; }
.gauge-label b { color: var(--live-text); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.gauge-label span { color: var(--muted); font-size: 0.875rem; }

/* Finances: revenue by year */
.fin-bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  height: 170px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line-strong);
}
.fin-bar { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; height: 100%; }
.fin-bar b { align-self: end; font-family: var(--font-mono); font-size: 0.8125rem; }
.fin-bar i {
  align-self: end;
  width: min(100%, 64px);
  height: calc(var(--v) * 100%);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--amber), rgba(var(--amber-rgb), 0.55));
  transform-origin: bottom;
}
.fin-bar span { margin-bottom: -26px; color: var(--dim); font-family: var(--font-mono); font-size: 0.75rem; }
.dz-panel--finance .dz-facts { margin-top: 36px; }

/* Owners: who is behind the company */
.owner-chain { display: grid; gap: 0; }
.owner-chain li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--inset);
}
.owner-chain li + li { margin-top: 22px; }
.owner-chain li + li::before {
  content: "";
  position: absolute;
  top: -23px;
  left: 22px;
  width: 2px;
  height: 22px;
  background: rgba(var(--amber-rgb), 0.6);
}
.owner-chain li::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 16px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  background: var(--bg);
}
.owner-chain b { font-weight: 700; }
.owner-chain span { color: var(--muted); font-size: 0.875rem; }
.owner-chain-self { border-color: rgba(var(--amber-rgb), 0.5) !important; background: rgba(var(--amber-rgb), 0.08) !important; }
.owner-chain-self::after { background: var(--amber) !important; }

/* Approvals */
.dz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-chips li {
  padding: 6px 12px;
  border: 1px solid rgba(var(--meatborsa-rgb), 0.45);
  border-radius: 999px;
  background: rgba(var(--meatborsa-rgb), 0.08);
  color: var(--live-text);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Where the data comes from */
.sources { display: grid; gap: 26px; }
.sources li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.src-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(var(--amber-rgb), 0.3);
  border-radius: 14px;
  background: rgba(var(--amber-rgb), 0.1);
}
.src-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--amber-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sources h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
.sources p { margin-top: 4px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .dz-panel { animation: panel-in 0.35s ease both; }
  .gauge-needle { animation: needle 1.2s cubic-bezier(0.3, 1.4, 0.5, 1) 0.15s both; }
  .fin-bar i { animation: bar-grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .fin-bar:nth-child(2) i { animation-delay: 0.12s; }
  .fin-bar:nth-child(3) i { animation-delay: 0.24s; }
  .owner-chain li { animation: msg-in 0.4s ease both; }
  .owner-chain li:nth-child(2) { animation-delay: 0.2s; }
  .owner-chain li:nth-child(3) { animation-delay: 0.4s; }
  .dz-chips li { animation: msg-in 0.4s ease both; }
  .dz-chips li:nth-child(2) { animation-delay: 0.12s; }
  .dz-chips li:nth-child(3) { animation-delay: 0.24s; }
  @keyframes needle {
    from { transform: rotate(146deg); }
    to { transform: rotate(0deg); }
  }
}

/* Phones: the four profile tabs in one even row */
@media (max-width: 560px) {
  .dz-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; border-radius: 14px; }
  .dz-tabs label { padding: 7px 4px; border-radius: 10px; font-size: 0.8125rem; text-align: center; }
}

/* Examples and tabs swap content of different heights. The browser's scroll
   anchoring would then nudge the page; this site never inserts content above
   the reader (images have fixed sizes), so it is switched off. */
html { overflow-anchor: none; }

/* Events: the bar on top of every page, shown only until the event ends ---- */
.event-bar[hidden],
.event[hidden],
.events-empty[hidden] { display: none; }
.event-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 9px var(--gutter);
  background: var(--accent-gradient);
  color: var(--on-accent);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
.event-bar-steak { font-size: 1rem; line-height: 1; }
.event-bar b { font-weight: 800; letter-spacing: -0.01em; }
.event-bar-when { font-weight: 600; }
.event-bar-cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.event-bar:hover .event-bar-cta { text-decoration-thickness: 2px; }
@media (max-width: 640px) {
  .event-bar-where { display: none; }
}

/* Team */
/* Flex, not grid, so a short last row is centred instead of left-aligned:
   every card keeps the same width whatever the team size (7 → 4 + 3) */
.people {
  --cols: 2;
  --gap-x: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px var(--gap-x);
  margin-top: clamp(36px, 5vw, 56px);
}
.person { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)); min-width: 0; }
@media (min-width: 760px) {
  .people { --cols: 4; --gap-x: 24px; gap: 40px var(--gap-x); }
}
@media (min-width: 1024px) {
  .people { --gap-x: 28px; }
}
.person img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 6;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--hair-2);
  filter: grayscale(0.25);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.person:hover img { filter: none; transform: translateY(-3px); }
.person h2 {
  margin-top: 14px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.person p { margin-top: 2px; color: var(--muted); }

/* Team page: events */
.section--events { padding-top: 0; }
.events { margin-top: clamp(28px, 4vw, 40px); }
.event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 820px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--solid-a), var(--solid-b)) padding-box,
    linear-gradient(140deg, rgba(var(--amber-rgb), 0.8), rgba(var(--amber-rgb), 0.12) 55%, var(--line-strong)) border-box;
  box-shadow: 0 40px 80px -44px var(--shadow-color);
}
.event + .event { margin-top: 16px; }
.event-date {
  display: grid;
  justify-items: center;
  min-width: 96px;
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--accent-gradient);
  color: var(--on-accent);
  text-align: center;
}
.event-date b { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.event-date span { margin-top: 6px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.event-place {
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.event h3 { margin-top: 6px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
.event-body > p:not(.event-place) { margin-top: 8px; color: var(--muted); }
.event .event-stand { color: var(--text); font-weight: 700; }
.event-add { margin-top: 18px; }
.events-empty { color: var(--muted); }
.events-empty a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .event { grid-template-columns: 1fr; }
  .event-date { justify-self: start; }
}