/* Guava styles.
   Self-hosted type (Schibsted Grotesk + IBM Plex Mono), a warm paper ground with
   the forest green as its ink, the hero photograph's own pink as the brand
   accent, and a few pixel-guava touches borrowed from the logo. No web font
   requests beyond two files, no layout-shifting animation, and every piece of
   content is plain HTML.

   The homepage shares the Main Street Bench page's design layer, which lives in
   bench.css and loads after this file: the stage at dusk and its street, the
   mono labels, the hatched bars, the big faint words behind a heading. The
   rules under "Homepage" below are what the homepage adds to that layer. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.e3b56e90510a.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400.c36f509c0a8f.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500.a76f53ca6612.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-700.9e1455e6e9c5.woff2") format("woff2");
}

:root {
  --paper: #fbf9f7;
  --tint: #f4efeb;
  --card: #ffffff;
  --forest: #15362b;
  --forest-2: #1d4639;
  --night: hsl(160 47% 10%);
  /* The ink is the forest green, so type and rules carry the color. Muted and
     rule are the same mixes of forest and paper that bench.css makes. */
  --ink: var(--forest);
  --muted: #556d64;
  --rule: #d9dcd8;
  --on-forest: #f3f1ec;
  --on-forest-muted: #b8c9c0;
  --guava: #e5b1b0;
  --guava-soft: #f8e2e0;
  --accent: #b5302a;
  --frame: 5px;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(21 32 27 / 0.05), 0 12px 32px -12px rgb(21 32 27 / 0.18);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --header-h: 68px;
  font-family: var(--sans);
  color-scheme: light;
}
@media (max-width: 599px) {
  :root {
    --frame: 4px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
h1,
h2,
h3 {
  text-wrap: balance;
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
::selection {
  background: var(--guava);
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.print-only {
  display: none;
}
/* A guava frame around the window, on every page: pink flesh around the green. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  border: var(--frame) solid var(--guava);
  pointer-events: none;
}

.wrap {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .wrap {
    width: min(100% - 80px, 1200px);
  }
}

.skip-link {
  position: absolute;
  z-index: 50;
  top: 8px;
  left: 16px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(251 249 247 / 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wordmark img {
  width: 32px;
  height: 32px;
}
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.site-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-nav a:hover {
  color: var(--ink);
  background: var(--tint);
}
.site-nav a[aria-current="true"] {
  color: var(--ink);
  background: var(--guava-soft);
}
/* Proof opens a menu of the two benchmarks (Romeo's call, October 10, 2026)
   and the live AI Operations page (added, and the menu renamed from
   Benchmarks, October 12, 2026): on hover, and on a click or tap (site.js).
   Without the script it also opens while focus is inside it, so the keyboard
   reaches every link. */
.nav-menu {
  position: relative;
}
.nav-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-menu-button:hover,
.nav-menu:hover .nav-menu-button,
.nav-menu-button[aria-expanded="true"] {
  color: var(--ink);
  background: var(--tint);
}
.nav-caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.nav-menu:hover .nav-caret,
.nav-menu-button[aria-expanded="true"] .nav-caret {
  transform: translateY(1px) rotate(225deg);
}
/* The panel hangs from the button's foot; its top padding bridges the space
   below the button, so the pointer can cross to it without the menu closing. */
.nav-drop {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.nav-menu:hover .nav-drop,
.nav-menu:not(.js):focus-within .nav-drop,
.nav-menu-button[aria-expanded="true"] + .nav-drop {
  display: flex;
}
.site-nav .nav-drop a {
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--ink);
  white-space: nowrap;
}
.site-nav .nav-drop a[aria-current="page"] {
  background: var(--guava-soft);
}
/* Five links fit from 820px; the sixth (Proof) needs about 940px, so it
   drops out below that (the footer has its links too). */
@media (max-width: 939px) {
  .site-nav .nav-menu {
    display: none;
  }
}
@media (max-width: 819px) {
  .site-nav {
    display: none;
  }
  .site-header .button {
    margin-left: auto;
  }
}

/* Buttons and links */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border: 2px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.button span {
  transition: transform 0.18s ease;
}
.arrow {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  display: inline-block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: var(--arrow-icon) center / contain no-repeat;
  mask: var(--arrow-icon) center / contain no-repeat;
}
.arrow-down {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M6 13.5l6 6 6-6'/%3E%3C/svg%3E");
}
.arrow-out {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.button:hover {
  background: var(--accent);
}
.button:hover span {
  transform: translateX(3px);
}
.button:hover .arrow-out {
  transform: translate(2px, -2px);
}
.button-small {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}
.button-large {
  min-height: 58px;
  padding: 16px 30px;
  font-size: 1.0625rem;
}
.button-human {
  padding-left: 12px;
}
.button-large.button-human {
  padding-block: 11px;
}
.button-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: -2px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--guava);
  box-shadow: 0 0 0 2px var(--guava);
}
.button-pink {
  background: var(--guava);
  color: var(--ink);
}
.button-pink:hover {
  background: var(--paper);
  color: var(--ink);
}
.button-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.button-outline:hover {
  background: var(--ink);
  color: var(--paper);
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.15s ease;
}
.text-link:hover {
  text-decoration-color: var(--accent);
}

/* Shared type */
h1 {
  font-size: clamp(2.75rem, 7.2vw, 5.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 11ch;
}
h1 em {
  font-style: normal;
  color: var(--accent);
}
h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
h3 {
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.section-lede {
  margin-top: 20px;
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 62ch;
}
.fine-print {
  margin-top: 28px;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 70ch;
}
.fine-print a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hero-for {
  color: var(--ink);
}
.hero-lede {
  margin-top: 28px;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}
.hero-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

/* Homepage
   1. Stage: the promise and one action beside the three fixed fees, over Main
   Street at dusk (scripts/home_street.py). bench.css sets the stage, its grain,
   the street's tones and the board's rows; this adds the headline, the checks
   and the fee rows. */
.home h1 {
  font-size: clamp(3rem, 6.4vw, 5.25rem);
  font-weight: 650;
  line-height: 0.94;
  letter-spacing: -0.05em;
}
.home .lb-stage {
  padding-top: calc(var(--header-h) + clamp(24px, 3.4vw, 44px));
}
.home .lb-stage .hero-lede {
  font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);
}
/* The line of checks is the last thing above the street, so the stage keeps
   more room under it than the benchmark's: the roofs stay clear of the type. */
@media (min-width: 900px) {
  .home .lb-stage {
    padding-bottom: calc(var(--street-h) * 0.84);
  }
}
/* On a short, wide window (a 13-inch laptop) the stage tightens so the street
   still shows above the fold. */
@media (min-width: 900px) and (max-height: 840px) {
  .home .lb-stage {
    padding-top: calc(var(--header-h) + 24px);
  }
  .home h1 {
    font-size: min(6.4vw, 4.5rem);
  }
  .home .lb-hero {
    row-gap: 28px;
  }
  .home .fee-row {
    padding-block: 14px 16px;
  }
}
/* The accent red is for paper; on the forest, the pink carries the emphasis. */
.lb-stage h1 em {
  color: var(--guava);
}
.home .lb-actions {
  margin-top: 8px;
}
/* What every engagement includes: one ruled line under both columns. */
.checks {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 40px;
  padding-top: 18px;
  border-top: 1px solid rgb(243 241 236 / 0.16);
  animation: lb-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.56s both;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-forest-muted);
}
.checks li {
  position: relative;
  padding-left: 24px;
}
/* A pixel tick, in the family of the heading marks. */
.checks li::before {
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1zM1 4h1v1h-1zM0 3h1v1h-1z'/%3E%3C/svg%3E");
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 13px;
  height: 13px;
  background: var(--guava);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
}
/* The street's own shapes for Guava's shop: its name, and the still life in its
   window (the chrome arch, the guavas ripening on a shelf, the cut half). */
.gv-name {
  font: 800 13px var(--sans);
  letter-spacing: 8px;
  fill: var(--forest);
}
.gv-chrome { fill: color-mix(in srgb, var(--forest) 46%, var(--on-forest)); }
.gv-shine { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.gv-rind { fill: var(--forest-2); }
.gv-unripe { fill: color-mix(in srgb, var(--forest-2) 45%, #c9c96a); }
.gv-flesh { fill: color-mix(in srgb, var(--accent) 42%, var(--guava)); }
.gv-seed { fill: #fff3e6; }

/* The board. Each bar is the engagement's length out of three months, with the
   length at its end; the Assessment's is pink, and a paler run marks a range
   (three to six weeks). Only the Assessment shows its fee: the other two rows
   are quiet, and their fees wait for the Pricing section. */
.fee-row {
  --c: var(--on-forest);
}
.fee-row .fee-first {
  --c: var(--guava);
}
.fee-row .fee-range {
  opacity: 0.4;
}
.fee-row .lb-score {
  font-size: clamp(2.875rem, 5.2vw, 4.5rem);
}
.fee-row .lb-name {
  text-wrap: balance;
}
.fee-quiet .lb-score {
  align-self: end;
}
/* The rows share the board's columns, so the last one is as wide as the fee in
   every row and the three bars keep one scale. */
@supports (grid-template-columns: subgrid) {
  .fees .lb-ranking {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    column-gap: 16px;
  }
  .fees .fee-row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
.fees .lb-notes {
  margin-top: 18px;
  color: var(--on-forest-muted);
  animation: lb-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}
/* Where the board is narrow (phones, and beside the copy on a small laptop) the
   name takes the row, with the fee and its length under it. */
.fees {
  container-type: inline-size;
}
@container (max-width: 520px) {
  .fees .lb-ranking {
    display: block;
  }
  .fees .fee-row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-areas: "pos name" "pos fee" "pos bar";
    gap: 10px 8px;
  }
  .fee-row .lb-pos {
    grid-area: pos;
    align-self: start;
    padding-top: 0.35em;
  }
  .fee-row .lb-who {
    display: contents;
  }
  .fee-row .lb-name {
    grid-area: name;
  }
  .fee-row .lb-hatch {
    grid-area: bar;
  }
  .fee-row .lb-score {
    grid-area: fee;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    line-height: 0.9;
  }
  .fee-row .lb-score small {
    margin-top: 0;
  }
  /* A quiet row has no fee, so its length sits on the name's line. */
  .fees .fee-quiet {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    grid-template-areas: "pos name fee" "pos bar bar";
  }
  .fee-quiet .lb-name > span {
    margin-bottom: 0;
  }
}
/* Small phones: the rank moves onto the name's line, and the fee and bar take
   the gutter it kept. */
@container (max-width: 440px) {
  .fees .fee-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "pos name" "fee fee" "bar bar";
  }
  .fees .fee-quiet {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pos name fee" "bar bar bar";
  }
  .fee-row .lb-pos {
    align-self: baseline;
    padding-top: 0;
  }
  .fee-row .lb-name {
    align-self: baseline;
  }
}

/* Sections on paper. A heading and its pixel mark: the mark sits outside the h2
   (the firm picker swaps one heading's text whole), so the pair shares a line. */
.lb-head {
  max-width: 20ch;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.home .lb-head h2 {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
}
/* Beside a second column, a heading has half the width to fill. */
:is(.sample-grid, .care-grid, .founder, .faq-grid) .lb-head {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
}
/* Fine print under an introduction keeps its own small mono lettering. */
.lb-intro .lb-notes p {
  max-width: none;
  font-size: inherit;
  color: inherit;
}

/* 2. Founder background: six facts under the stage's edge, two rows of three
   from tablet width up. */
.creds-list {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}
.home .creds-list .lb-key-n {
  display: block;
  font-size: clamp(1.5rem, 2.3vw, 1.875rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.creds-list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.creds-list a:hover {
  text-decoration-color: var(--accent);
}
@media (min-width: 760px) {
  .home .creds-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  /* .lb-key here outranks bench.css's six-in-a-row rule for six items. */
  .home .lb-key.creds-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 32px;
  }
}

/* 3b. Track record: four numbers, two a row until all four fit, then three
   columns like the use cases'. */
@media (min-width: 760px) {
  .home .record-key {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .home .record-key {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Firm picker: tailors the page (and its address) to one kind of firm. */
.firm-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.firm-picker-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The options share one ruled box: the box's ink shows between them. */
.firm-picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5px;
  padding: 1.5px;
  background: var(--ink);
}
.firm-picker a {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 16px;
  background: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .firm-picker a:hover {
    background: color-mix(in srgb, var(--guava-soft) 70%, var(--paper));
  }
}
.firm-picker a[aria-current] {
  background: var(--ink);
  color: var(--paper);
}
.firm-picker a[aria-current]:hover {
  cursor: default;
}
/* Always one line of text (two on phones), so choosing a firm never shifts the columns. */
.firm-picker-status {
  flex-basis: 100%;
  min-height: 1.6em;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 599px) {
  .firm-picker:not(.firm-picker-compact) .firm-picker-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .firm-picker:not(.firm-picker-compact) a {
    padding-inline: 10px;
    font-size: 0.875rem;
  }
  .firm-picker-status {
    min-height: 3.2em;
  }
}

/* 3. Use cases: three columns, each under its bar, like the benchmarks' four. */
.verticals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0 5px;
  counter-reset: vertical;
}
.vertical {
  display: grid;
  align-content: start;
  padding: 0 26px 36px 0;
  counter-increment: vertical;
}
.vertical::before {
  content: "";
  height: 16px;
  margin: 0 -26px 14px 0;
  background: var(--shade);
  transform-origin: 0 50%;
  transition: background-color 0.25s ease;
}
.vertical:nth-child(1) { --shade: var(--forest); }
.vertical:nth-child(2) { --shade: color-mix(in srgb, var(--forest) 64%, var(--paper)); }
.vertical:nth-child(3) { --shade: color-mix(in srgb, var(--forest) 36%, var(--paper)); }
/* The chosen firm is marked in place: its bar turns guava. Columns never reorder. */
.vertical.is-selected {
  --shade: var(--guava);
}
.vertical h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.vertical h3::before {
  content: "0" counter(vertical);
  display: block;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.vertical.is-selected h3::before {
  content: "0" counter(vertical) " · Your firm";
  color: var(--ink);
}
.vertical ul {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}
.vertical li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
  color: var(--muted);
}
.vertical li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* 4. Pricing: three columns under their bars, the fee set large. The heading
   stays first in the page; the fee is only shown above it. */
.plans {
  display: grid;
  gap: 0 5px;
}
@media (min-width: 980px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 26px 48px 0;
}
.plan::before {
  content: "";
  align-self: stretch;
  height: 16px;
  margin: 0 -26px 14px 0;
  background: var(--shade);
  transform-origin: 0 50%;
}
.plan:nth-child(1) { --shade: var(--guava); }
.plan:nth-child(2) { --shade: var(--forest); }
.plan:nth-child(3) { --shade: color-mix(in srgb, var(--forest) 64%, var(--paper)); }
.plan-tag {
  order: 1;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-featured .plan-tag {
  color: var(--ink);
}
.plan-price {
  order: 2;
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.price {
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.per {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan h3 {
  order: 3;
  margin-top: 26px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
/* What the engagement costs after the Assessment's credit: a stroke of guava
   highlighter, as on the leaderboard's best scores. */
.plan-credit {
  order: 4;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-credit strong {
  padding-inline: 4px;
  margin-right: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  background: linear-gradient(transparent 46%, var(--guava) 46% 94%, transparent 94%);
}
.plan-for {
  order: 5;
  align-self: stretch;
  margin-top: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
  color: var(--muted);
}
.plan-list {
  order: 6;
  margin: 20px 0 30px;
  display: grid;
  gap: 11px;
}
.plan-list li {
  position: relative;
  padding-left: 24px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
}
.plan-list li::before {
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1zM1 4h1v1h-1zM0 3h1v1h-1z'/%3E%3C/svg%3E");
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 13px;
  height: 13px;
  background: var(--accent);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
}
.plan .button {
  order: 7;
  margin-top: auto;
}
.addon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin-inline: -12px;
  padding: 20px 12px;
  border-block: 1px solid var(--rule);
  transition: background-color 0.15s ease;
}
.addon:hover {
  background: color-mix(in srgb, var(--guava-soft) 45%, var(--paper));
}
.addon-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.addon-name {
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.addon-price {
  color: var(--muted);
}
.addon-arrow {
  align-self: center;
  margin-left: auto;
  font-size: 1.25rem;
}

/* 5. Sample AI Assessment: a page from the deliverable, on a small stack of paper. */
.sample-grid {
  display: grid;
  /* One column that can shrink below the sample table's widest line on a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (min-width: 1040px) {
  .sample-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 72px;
  }
  .sample-grid .lb-intro {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}
.sample-grid .lb-intro {
  justify-items: start;
}
.sample-grid .text-link {
  margin-top: -6px;
}
.sample-docs {
  position: relative;
  isolation: isolate;
}
/* The tilted sheets reach a few pixels past narrow viewports; clip them at the
   section edge (clip, unlike hidden, keeps the sticky heading working). */
#sample,
.sample-page {
  overflow-x: clip;
}
.sample-docs::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px -6px -12px 10px;
  border-radius: 2px;
  background: var(--card);
  border: 1px solid var(--rule);
  transform: rotate(1.6deg);
}
.sample-doc {
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: 2px;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(21 32 27 / 0.1), 0 14px 34px -14px rgb(21 32 27 / 0.26);
  transform: rotate(-0.5deg);
  transition: transform 0.35s ease;
}
.sample-doc:hover {
  transform: none;
}
.doc-head {
  position: relative;
  padding: 0 104px 18px 0;
  border-bottom: 2px solid var(--ink);
}
.doc-kind {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
}
.doc-head :is(h2, h3) {
  margin-top: 8px;
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  letter-spacing: -0.025em;
}
.doc-head :is(h2, h3) span {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.doc-meta {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--muted);
}
.doc-stamp {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 10px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(7deg);
  opacity: 0.85;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.doc-table th,
.doc-table td {
  padding: 14px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.doc-table thead th {
  padding-block: 14px 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  vertical-align: bottom;
}
.doc-table tbody th {
  font-weight: 600;
}
.doc-table tr > :first-child {
  width: 2.5ch;
  padding-left: 0;
  font-family: var(--mono);
  color: var(--muted);
}
.doc-table tr > :nth-child(3),
.doc-table tr > :nth-child(4) {
  width: 6.5rem;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.doc-table tr > :last-child {
  width: 7.5rem;
  padding-right: 0;
  text-align: right;
}
.verdict {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.verdict-build {
  background: var(--forest);
  color: var(--on-forest);
}
.verdict-pilot {
  background: var(--guava-soft);
  color: var(--ink);
}
.verdict-no {
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.row-no > * {
  background: rgb(181 48 42 / 0.045);
}
.why {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}
.doc-foot {
  margin-top: 18px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (max-width: 639px) {
  .doc-head {
    padding-right: 84px;
  }
  .doc-stamp {
    font-size: 0.75rem;
  }
  .doc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .doc-table,
  .doc-table tbody {
    display: block;
  }
  .doc-table tr {
    display: grid;
    grid-template-columns: 2.5ch auto minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  .doc-table th,
  .doc-table td,
  .doc-table tr > *,
  .doc-table tr > :first-child,
  .doc-table tr > :nth-child(3),
  .doc-table tr > :nth-child(4),
  .doc-table tr > :last-child {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
  }
  .doc-head :is(h2, h3) span {
    display: block;
    margin: 2px 0 0;
  }
  .doc-table tr > :first-child {
    grid-row: 1 / span 3;
  }
  .doc-table tbody th {
    grid-column: 2 / 4;
  }
  .doc-table tr > :last-child {
    grid-column: 4;
    grid-row: 1;
  }
  .doc-table tr > :nth-child(3),
  .doc-table tr > :nth-child(4) {
    grid-column: 2 / 4;
    text-align: left;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--muted);
  }
  .doc-table td[data-label]::after {
    content: " " attr(data-label);
  }
  .doc-table .row-no td[data-label] {
    display: none;
  }
  .doc-table .row-no {
    margin-inline: -10px;
    padding-inline: 10px;
    border-radius: 8px;
    background: rgb(181 48 42 / 0.045);
  }
}

/* 7. Process: who leads each step, drawn as two lanes. The guava ripens as the
   work moves from Guava's lane (hatched) into yours (guava). */
.handover {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
}
.handover-lanes {
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.lane-label {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
}
.lane-label-you {
  color: var(--accent);
}
.handover-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, 64px);
  background:
    linear-gradient(var(--guava-soft), var(--guava-soft)) 0 100% / 100% 50% no-repeat,
    repeating-linear-gradient(115deg, var(--rule) 0 1.5px, transparent 1.5px 6px);
}
.handover-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.handover-line path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.line-guava {
  stroke: var(--forest);
}
.line-you {
  stroke: var(--accent);
}
.line-optional {
  stroke: var(--accent);
  stroke-dasharray: 3 9;
}
.node {
  position: relative;
  display: grid;
  place-items: center;
}
.handover-track .node:nth-of-type(1) { grid-column: 1; }
.handover-track .node:nth-of-type(2) { grid-column: 2; }
.handover-track .node:nth-of-type(3) { grid-column: 3; }
.handover-track .node:nth-of-type(4) { grid-column: 4; }
.handover-track .node:nth-of-type(5) { grid-column: 5; }
.handover-track .node:nth-of-type(6) { grid-column: 6; }
.lane-guava { grid-row: 1; }
.lane-both { grid-row: 2; }
.lane-you { grid-row: 3; }
/* A square tile under each pixel guava. */
.node::before {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--forest);
}
.node.lane-you::before {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.node-optional::before {
  background: color-mix(in srgb, var(--card) 60%, var(--guava-soft));
  box-shadow: none;
  outline: 1.5px dashed var(--accent);
  outline-offset: -1.5px;
}
/* Pixel guava sprite sheet: six 16px frames from scripts/pixel-sprites.py. */
.ripe {
  position: relative;
  width: 48px;
  height: 48px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAYAAADpunr5AAADLUlEQVR42u1YMWgTURj+ImKxBRtqE5CDCOY00EaEpkUHHSSTnRxE1CVLB92kS5bWwZZCluDmkiWDVhw6RpfGxYKSRAxNA1FT2sNQyaWhLdRSEM6hfa93l/cu73qXSsB/erzc9/Lf9/3/l/8F+B//NDwn9UWS7NfIuvaj7uk2ojqVv+ekEn/+8g7de/bkXdeI0On8T3c6+Vg8Ytizmzwh4Lgv7ATvRv6udcBxWlCPOU77SrJf8wW8AABV2bL94m7gneTvigDmFhSpAFbidl6i2/GuWZC5BUXJJ2JV1+rMZ9KJgsY7R5L92sKrewCANfUXEz/59KMlvpidAwA06l+Z+OiDt5Z4s+1Y5d9OLEcdYD5clPwrgWF8U1a4Aqwsq8hnlJbzCPmXQ4/wvfKaK0BxYw/pRIGJL2bn0D94G9uNDwYBzn8ZBABsjjRQLK1icjbPxMfiEUzkfJakpcZU+v2S7Ncq0zPM53qiUQDA/uIi8/PQzDS/A1jKSrJfE2k/K/JFgkX+9cYQAODzYLktnkc+XZ9Z5Vb+RM6HgYB00MEDvxFs9rasM/OfEItHkE4UNACoLy0ZMKG+ISbxld0yPaOp1PgWJMl+7e7jMADgp7JD99dLOwDAFEHEekgMXz2ssAwMrcyzHkI+iWsXzlIC9Ph21kPx4UtITgGTs3luQVEi+w6rFUAFRwTqXeEW3lPxgpDwp7nGFC+II/JTYyqQBU7xyO/v72lJ6mL4HHwBr6XvOal8nu+Tqhepfhb5myMN5toqSBX3RKPUSsjegnyDa01NpYamUjMIpa96Qn5mvmr9I7y9vW+ofpHoBPlmEeySb5d4vV2E+oYMNlLZLdMqNndBOlHQYvEIUmMqJnI+ajFmgQ4srErHYq4Adsm3EyvLqiN8cWPPGb602vaZYLPXYDl6S+GNpulEQfMFvMigivGHwZZnSNXr7yTcUWx0PNCyv17asbzQiIxwhHzeFJR8cVOIfN4UtPjmvhD5bk1BvOGFXAD1oSpbLdOkR+QWqT9A9BLDEpAQbzXSEjxPyHSiIIRPTo2y7xCzeSE8i0AeiU5GeFfvASK3SSd/Y3QTXjT+AvcJR2faPXrwAAAAAElFTkSuQmCC") 0 0 / 600% 100% no-repeat;
  image-rendering: pixelated;
}
.ripe-2 { background-position: 20% 0; }
.ripe-3 { background-position: 40% 0; }
.ripe-4 { background-position: 60% 0; }
.ripe-5 { background-position: 80% 0; }
.ripe-6 { background-position: 100% 0; }
.handover-labels {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.handover-labels b {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}
@media (max-width: 699px) {
  .handover {
    column-gap: 10px;
  }
  .lane-label {
    font-size: 0.6875rem;
  }
  .handover-track {
    grid-template-rows: repeat(3, 44px);
  }
  .node::before {
    width: 40px;
    height: 40px;
  }
  .ripe {
    width: 32px;
    height: 32px;
  }
  .node-name {
    display: none;
  }
}
/* On a phone the step names don't fit under the timeline, so they're listed
   once beneath it. */
.handover-key {
  display: none;
}
@media (max-width: 699px) {
  .handover-key {
    display: block;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 40px;
}
.steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-content: start;
  gap: 4px 8px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--rule);
}
.step-num {
  grid-row: span 2;
  padding-top: 0.5em;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.steps h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.steps p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}

/* 8. Guardrails: three numbered clauses, because they're written into every scope. */
.guards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0 40px;
}
.guards li {
  display: grid;
  align-content: start;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--rule);
}
.clause-num {
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.guards h3 {
  margin-top: 24px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.guards p {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}
/* "See mine, live" under Your dashboards: a link inside the clause's sentence. */
.guards .text-link {
  display: inline;
  min-height: 0;
  color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.contract-sign {
  margin-top: 26px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.contract-sign::after {
  content: "";
  flex: 1 1 160px;
  max-width: 280px;
  height: 1.4em;
  border-bottom: 1.5px solid var(--ink);
}

/* 9. Ongoing Optimization: the photograph as a plate, on a block of guava. */
.care-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  .care-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 88px;
  }
}
.care-copy {
  display: grid;
  gap: 28px;
}
.care-list {
  border-top: 2px solid var(--ink);
}
.care-list > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.care-list dt {
  font-weight: 650;
}
.care-list dd {
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}
.care-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.care-price .price {
  font-family: var(--sans);
  letter-spacing: -0.055em;
  color: var(--ink);
}
.care-copy .lb-notes {
  margin-top: -14px;
}
.care-art {
  margin: 0 14px 14px 0;
}
.care-art img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #dedfdc;
  box-shadow: 14px 14px 0 var(--guava);
}
@media (max-width: 959px) {
  .care-art {
    order: -1;
  }
}

/* 10. Founder: the old way struck through, beside what replaces it. */
.founder {
  display: grid;
  gap: 32px 72px;
}
@media (min-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
  .founder-head {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}
.founder-photo {
  width: 112px;
  height: 112px;
  margin: 0 10px 38px 0;
  object-fit: cover;
  background: var(--guava);
  box-shadow: 10px 10px 0 var(--guava);
}
.founder .lb-head {
  max-width: 13ch;
}
.founder-body {
  display: grid;
  align-content: start;
}
.founder-body > p:not([class]) {
  max-width: 60ch;
  margin-top: 26px;
}
/* The two labels sit over the list's two columns. */
.founder-body .lb-rank-head {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0 20px;
}
/* site.js draws the strikes in on scroll; without it (or with reduced motion)
   they're simply already struck. */
.manifesto li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: baseline;
  gap: 2px 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.manifesto s {
  justify-self: start;
  text-decoration: none;
  color: var(--muted);
  background: linear-gradient(var(--accent), var(--accent)) 0 58% / 100% 2px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1);
}
.manifesto s + span {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.manifesto.is-waiting s {
  background-size: 0 2px;
}
.manifesto li:nth-child(2) s { transition-delay: 0.12s; }
.manifesto li:nth-child(3) s { transition-delay: 0.24s; }
.manifesto li:nth-child(4) s { transition-delay: 0.36s; }
.manifesto li:nth-child(5) s { transition-delay: 0.48s; }
.manifesto li:nth-child(6) s { transition-delay: 0.6s; }
@media (max-width: 599px) {
  .manifesto li {
    grid-template-columns: minmax(0, 1fr);
  }
  .founder-body .lb-rank-head {
    display: flex;
  }
}
.signature {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.signature-name {
  font-family: var(--sans);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}
.signature-links {
  display: inline-flex;
  gap: 16px;
  margin-left: auto;
}
.signature a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.signature a:hover {
  text-decoration-color: var(--accent);
}

/* 11. FAQ */
.faq-grid {
  display: grid;
  gap: 40px 80px;
}
@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
  .faq-grid .lb-intro {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}
.faq-list {
  border-top: 2px solid var(--ink);
}
.faq-list details {
  border-bottom: 1px solid var(--rule);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
/* A pixel plus that turns to a cross when the answer is open. */
.faq-list summary::after {
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7h-1zM0 3h7v1h-7z'/%3E%3C/svg%3E");
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background: var(--accent);
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after {
  transform: rotate(45deg);
}
.faq-list summary h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.faq-list summary:hover h3 {
  color: var(--accent);
}
.faq-list details p {
  padding: 0 48px 24px 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}
.faq-list details p:has(+ .faq-more) {
  padding-bottom: 4px;
}
.faq-list .faq-more {
  padding-bottom: 16px;
}
.faq-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}
.faq-more .text-link {
  color: var(--ink);
}

/* 12. Close: a field of the hero photograph's own pink, the full width of the
   window, with the photograph melting into it and standing on the footer's edge.
   The field follows the photograph's light, which falls from the left: its
   stops are the pinks sampled at the photograph's left and right edges. */
.contact {
  --muted: color-mix(in srgb, var(--forest) 84%, var(--guava));
  position: relative;
  margin-top: clamp(72px, 9vw, 128px);
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(to right, #eab9b7, #d8a2a1);
}
@media (min-width: 900px) {
  .contact {
    background: linear-gradient(100deg, #edc0bd, #e9b8b6 46%, #e2adab 74%, #d7a1a0);
  }
}
.contact :focus-visible {
  outline-color: var(--forest);
}
.contact-grid {
  display: grid;
  gap: 0 56px;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: end;
  }
}
.contact-copy {
  display: grid;
  justify-items: start;
  padding-block: clamp(64px, 8.5vw, 120px) clamp(48px, 7vw, 104px);
}
.contact h2 {
  max-width: 9ch;
  font-size: clamp(3.25rem, 8vw, 6.75rem);
  font-weight: 650;
  line-height: 0.9;
  letter-spacing: -0.055em;
}
.contact-copy > p:not([class]) {
  margin-top: 26px;
  max-width: 40ch;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
}
.contact .button {
  margin-top: 30px;
}
.contact .button:hover {
  background: var(--paper);
  color: var(--forest);
}
.contact-note {
  margin-top: 14px;
  font-size: 0.9375rem;
}
.agenda-head {
  justify-self: stretch;
  max-width: 34rem;
  margin-top: clamp(40px, 5vw, 64px);
}
.agenda {
  justify-self: stretch;
  max-width: 34rem;
}
.agenda li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgb(21 54 43 / 0.22);
}
.agenda .step-num {
  grid-row: auto;
  padding-top: 0;
}
.agenda p {
  font-size: 1rem;
  line-height: 1.5;
}
/* The photograph's backdrop fades into the field at its top and sides; its foot
   is cut at the footer's edge, where the arch stands. */
.contact-art {
  align-self: end;
  margin: 0 0 -9% 0;
}
.contact-art img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 18%);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 18%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 899px) {
  .contact-copy {
    padding-bottom: 0;
  }
  .contact-art {
    width: min(100%, 460px);
    margin-inline: auto;
  }
}
@media (max-width: 479px) {
  .contact .button {
    width: 100%;
  }
}

/* Below the fold, the bars over a row of columns draw in as they come onto the
   screen, as the benchmarks' do (bench.css's lb-grow). */
@supports (animation-timeline: view()) {
  .vertical::before,
  .plan::before {
    animation: lb-grow linear both;
    animation-timeline: view();
    animation-range: entry calc(10% + var(--i, 0) * 10%) cover calc(26% + var(--i, 0) * 4%);
  }
}
@media (forced-colors: active) {
  body::after {
    display: none;
  }
  .vertical::before,
  .plan::before,
  .handover-track,
  input[type="range"] {
    forced-color-adjust: none;
  }
}

/* Footer */
.site-footer {
  background: var(--forest);
  color: var(--on-forest);
}
.footer-inner {
  padding-block: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
}
.footer-brand p {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--on-forest-muted);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  font-size: 0.9375rem;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-forest-muted);
}
.footer-links a:hover {
  color: var(--guava);
}
.site-footer :focus-visible {
  outline-color: var(--guava);
}
/* Footer easter egg: the logo splits open when clicked. */
.footer-fruit {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.pixel-guava {
  position: relative;
  display: grid;
  flex: none;
  width: 72px;
  height: 72px;
  /* No left pull now the row is centered; the right keeps the original 6px reach toward the text. */
  margin: -10px -6px -10px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.pixel-guava img {
  grid-area: 1 / 1;
  width: 72px;
  height: 72px;
  transform-origin: 50% 78%;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.pixel-guava-left {
  clip-path: inset(0 50% 0 0);
}
.pixel-guava-right {
  clip-path: inset(0 0 0 50%);
}
.pixel-guava:hover img {
  animation: wobble 0.5s ease-in-out;
}
.pixel-guava[aria-pressed="true"] img {
  animation: none;
}
.pixel-guava[aria-pressed="true"] .pixel-guava-left {
  transform: translateX(-8px) rotate(-16deg);
}
.pixel-guava[aria-pressed="true"] .pixel-guava-right {
  transform: translateX(8px) rotate(16deg);
}
@keyframes wobble {
  25% {
    transform: rotate(-7deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
.seed {
  position: absolute;
  top: 46%;
  left: 49%;
  width: 4px;
  height: 4px;
  background: #cd966f;
  opacity: 0;
  pointer-events: none;
}
.pixel-guava[aria-pressed="true"] .seed {
  animation: seed-pop 0.8s ease-out both;
}
.seed:nth-of-type(1) { --dx: -22px; --dy: -24px; }
.seed:nth-of-type(2) { --dx: -10px; --dy: -34px; animation-delay: 0.04s; }
.seed:nth-of-type(3) { --dx: 4px; --dy: -38px; animation-delay: 0.02s; }
.seed:nth-of-type(4) { --dx: 16px; --dy: -30px; animation-delay: 0.06s; }
.seed:nth-of-type(5) { --dx: 26px; --dy: -18px; animation-delay: 0.03s; }
@keyframes seed-pop {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  55% {
    opacity: 1;
    transform: translate(var(--dx), var(--dy));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) + 44px));
  }
}
.footer-made {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--on-forest-muted);
}

/* Placeholders for content only Romeo can supply. Loud on purpose, so none
   reaches production unnoticed. */
mark.todo {
  padding: 1px 5px;
  border-radius: 3px;
  background: #fff1a8;
  color: #4a3b00;
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  outline: 1px dashed #b89a00;
}

/* The firm pages' headlines are sentences, not the three-word slogan. */
html[data-firm] .home h1,
html[data-firm] .lb-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  line-height: 1;
}

/* The hero's buttons and the board's fees are there from the first paint: no
   rise and no count. Only the bars still draw in. */
.lb-hero-copy > .hero-actions,
.fees .lb-rank-head,
.fees .lb-rank-row {
  animation: none;
}

/* PlatformLogos: the platforms, one height, even spacing, in a fixed
   order (scripts/site_parts.py). Logos are shown as supplied. */
.platform-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.platform-logos li {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
/* Each mark is its share (--s) of the row height, so the three read at the same size. */
.platform-logos img {
  display: block;
  width: auto;
  height: calc(var(--row) * var(--s, 1));
}
/* Two rows: the assistants, then the cloud platforms for custom builds under a small label. */
.platform-sets {
  display: grid;
  gap: 12px;
}
.platform-sub {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Under the observability row: the link to /observability, Romeo's own usage in Elastic. */
.platform-proof {
  font-size: 0.9375rem;
}
.platform-proof .text-link {
  min-height: 40px;
}
/* For a mark that is an icon alone, the product name is set beside it, in a neutral grey. */
.platform-name {
  font-size: calc(var(--row) * 0.5);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #444;
  white-space: nowrap;
}
.platform-logos-sm { --row: 22px; gap: 10px 18px; }
.platform-logos-md { --row: 30px; gap: 12px 32px; }
/* The four assistants fit one line from 600px wide (in the 680px column beside the copy from
   1000px); below that they sit two by two. */
.platform-logos-lg { --row: 36px; gap: 18px 32px; }
@media (max-width: 767px) {
  .platform-logos-lg { --row: 30px; gap: 12px 24px; }
}
@media (max-width: 599px) {
  .platform-logos-lg {
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }
}
.platform-logos-stack {
  flex-direction: column;
  align-items: flex-start;
}

/* 1b. The platforms strip under the hero. */
.platforms {
  display: grid;
  gap: 18px;
  padding-top: clamp(40px, 5vw, 64px);
}
.platforms-line {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--muted);
}
@media (min-width: 1000px) {
  /* The logos' column stops at about the "Works with" row's width, so a longer row wraps. */
  .platforms {
    grid-template-columns: fit-content(680px) minmax(0, 1fr);
    align-items: center;
    column-gap: 48px;
  }
  .platforms .lb-label {
    grid-column: 1 / -1;
  }
  /* The Observability, SIEM & DLP row: five marks a line, in even columns. */
  .platforms .platform-logos-sm {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: start;
    gap: 12px 24px;
  }
}

/* Plan extras: a subtitle under the name and the measured outcome. */
.plan-sub {
  order: 3;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.plan-outcome {
  order: 6;
  margin: -14px 0 8px;
  font-weight: 600;
  line-height: 1.45;
}
.plan-more {
  order: 6;
  margin-bottom: 18px;
}

/* 4b. The Rollout's phases share the use cases' columns. */
.phase-note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.phase-note a {
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* A firm page's use cases: each with a line on what it does. */
.vertical > p:not(.phase-note) {
  margin-top: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* 11b. Lead magnet: one email field, on a block of guava. */
.magnet {
  margin-top: clamp(72px, 9vw, 128px);
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--guava-soft);
}
.magnet-grid {
  display: grid;
  gap: 32px;
  align-items: end;
}
@media (min-width: 960px) {
  .magnet-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }
}
.magnet .lb-head {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
}
.magnet .lb-intro .lb-label {
  font-size: 0.75rem;
  color: var(--muted);
}
/* The close follows on directly, pink on pink. */
.magnet + .contact {
  margin-top: 0;
}
.lead-form {
  display: grid;
  gap: 10px;
}
.lead-form label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lead-form input[type="email"] {
  flex: 1 1 240px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.lead-note {
  min-height: 1.5em;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* About, Privacy and Terms: the sample page's column, with plain sections. */
.doc-page section {
  margin-top: 56px;
}
.doc-page h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}
.doc-page section > p {
  margin-top: 16px;
  max-width: 64ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
}
.doc-page section > ul {
  margin-top: 12px;
  max-width: 64ch;
  padding-left: 1.25em;
  list-style: disc;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
}
.doc-page section > p strong {
  color: var(--ink);
}
.doc-page section > p a,
.doc-facts a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.about-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 32px;
}
.about-head .founder-photo {
  margin-bottom: 10px;
}
/* About's header matches the homepage's (Romeo's call, October 12, 2026):
   forest with cream lettering over the page's opening, then paper once the
   photo and name have passed, on the same scroll range bench.css gives the
   homepage's stage. Browsers without scroll timelines, and readers who ask for
   less motion, keep the paper header, as on the homepage. */
@supports (timeline-scope: --about-head) {
  .about {
    timeline-scope: --about-head;
  }
  .about .about-head {
    view-timeline: --about-head block;
    view-timeline-inset: 0;
  }
  .about .site-header,
  .about .site-header .wordmark,
  .about .site-nav > a:not(:hover),
  .about .site-nav .nav-menu:not(:hover) .nav-menu-button:not([aria-expanded="true"]),
  .about .site-header .button:not(:hover) {
    animation: about-header linear both;
    animation-timeline: --about-head;
    animation-range: exit calc(100% - 120px) exit calc(100% - 68px);
  }
  .about .site-header .wordmark {
    animation-name: about-header-ink;
  }
  .about .site-nav > a:not(:hover),
  .about .site-nav .nav-menu:not(:hover) .nav-menu-button:not([aria-expanded="true"]) {
    animation-name: about-header-link;
  }
  .about .site-header .button:not(:hover) {
    animation-name: about-header-button;
  }
  @keyframes about-header {
    from {
      background-color: hsl(160 47% 10%);
      border-bottom-color: transparent;
    }
  }
  @keyframes about-header-ink {
    from {
      color: var(--on-forest);
    }
  }
  @keyframes about-header-link {
    from {
      color: var(--on-forest-muted);
    }
  }
  @keyframes about-header-button {
    from {
      background-color: var(--guava);
      color: var(--forest);
    }
  }
}
.doc-facts {
  margin-top: 20px;
  border-top: 1px solid var(--rule);
}
.doc-facts li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
  color: var(--muted);
}
.doc-facts strong {
  color: var(--ink);
}

/* Standalone sample page: all three samples, each on its own small stack of paper. */
.sample-page {
  padding-block: clamp(48px, 8vw, 104px);
}
.sample-page .wrap {
  width: min(100% - 32px, 860px);
}
.sample-page h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  max-width: 14ch;
}
.verdict-key {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}
.verdict-key > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.verdict-key dd {
  color: var(--muted);
}
.sample-page .sample-docs {
  margin-top: 64px;
}
.sample-page-cta {
  margin-top: 96px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.sample-page-cta h2 {
  max-width: 16ch;
}
.sample-page-cta .hero-actions {
  margin-top: 28px;
}

/* 404 page: the unripe guava from the process timeline, swaying a little. */
.not-found {
  padding-block: clamp(56px, 10vw, 140px);
}
.not-found-book {
  margin-left: auto;
}
.not-found-fruit {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 0 24px -12px;
  transform-origin: 56% 6%;
  animation: sway 3.2s ease-in-out infinite;
}
.not-found h1 {
  max-width: 12ch;
}
.not-found .hero-actions {
  margin-top: 32px;
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

/* Mobile sticky booking bar (shown by site.js between hero and contact). */
.sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  html {
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta:not([hidden]) {
    display: block;
    position: fixed;
    z-index: 25;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgb(251 249 247 / 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
  }
  .sticky-cta .button {
    width: 100%;
    min-height: 54px;
  }
  .hero-actions .button {
    width: 100%;
  }
  .hero-actions {
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Print: a compact brief for the partner or CFO who wasn't on the page.
   site.js opens every FAQ answer before printing and restores them after.
   (bench.css strips the stage, the street and the big words.) */
@media print {
  @page {
    margin: 14mm 14mm 16mm;
  }
  :root {
    --paper: #fff;
    --tint: #fff;
    --card: #fff;
    --ink: #000;
    --muted: #333;
    --rule: #bbb;
  }
  html {
    font-size: 12px;
  }
  body {
    background: #fff;
    color: #000;
    line-height: 1.45;
  }
  .print-only {
    display: block;
  }
  body::after,
  .skip-link,
  .site-nav,
  .site-header .button,
  .sticky-cta,
  .fees,
  .creds,
  .firm-picker,
  .hero-actions,
  .care-art,
  .handover,
  .step-num,
  .agenda-head,
  .agenda,
  .faq-more,
  .sample-grid .text-link,
  .founder-photo,
  .magnet,
  .platforms,
  .contact .button,
  .contact-note,
  .contact-art,
  .footer-links,
  .footer-fruit,
  .plan .button,
  .addon-arrow,
  .lb-glyph,
  .lb-rank-head {
    display: none !important;
  }
  .site-header {
    position: static;
    border-bottom: 2px solid #000;
    backdrop-filter: none;
  }
  /* About's forest header prints on paper, wherever the page was scrolled to. */
  .about .site-header,
  .about .site-header * {
    animation: none !important;
  }
  .header-inner {
    height: auto;
    padding-block: 8px;
    justify-content: space-between;
  }
  .header-inner .print-only {
    font-family: var(--mono);
    font-size: 0.8125rem;
  }
  .wrap {
    width: 100%;
  }
  .home .lb-stage {
    padding: 0 0 12px;
  }
  .home .lb-section,
  .contact {
    margin-top: 0;
    padding-block: 14px 6px;
    gap: 8px;
    background: none;
  }
  .home .lb-section + .lb-section,
  .contact {
    border-top: 1px solid #ccc;
  }
  .contact-copy {
    padding: 0;
  }
  .home h1,
  h1 {
    font-size: 2.4rem;
    max-width: none;
  }
  .lb-stage h1 em {
    color: #000;
  }
  .home .lb-head,
  h2,
  .contact h2 {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: none;
  }
  .checks {
    color: #000;
  }
  .checks li::before {
    background: #000;
  }
  .lb-intro p,
  .section-lede,
  .hero-lede {
    margin-top: 0;
    font-size: 1rem;
  }
  .fine-print {
    margin-top: 8px;
  }
  .lb-notes {
    font-family: var(--sans);
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
  }
  .lb-hero,
  .sample-grid,
  .care-grid,
  .faq-grid,
  .founder,
  .contact-grid {
    display: block;
  }
  .lb-intro,
  .founder-head {
    position: static !important;
  }
  .verticals,
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
  }
  .vertical::before,
  .plan::before {
    display: none;
  }
  .vertical,
  .plan {
    padding: 12px;
    border: 1px solid #bbb;
  }
  .vertical h3::before {
    margin-bottom: 4px;
  }
  .price {
    font-size: 1.7rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .plan-price,
  .plan h3 {
    margin-top: 6px;
  }
  .plan h3,
  .vertical h3,
  .guards h3 {
    font-size: 1.15rem;
  }
  .plan-credit strong {
    background: none;
    padding: 0;
  }
  .plan-list,
  .vertical ul {
    margin: 8px 0 0;
    gap: 4px;
  }
  .plan-list li,
  .vertical li,
  .steps p,
  .guards p,
  .care-list dd,
  .faq-list details p {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .addon {
    margin: 8px 0 0;
    padding: 8px 0;
  }
  .sample-docs,
  .care-list,
  .manifesto {
    margin-top: 12px;
  }
  .sample-doc {
    padding: 14px;
    border: 1px solid #bbb;
    box-shadow: none;
    transform: none;
  }
  .sample-docs::before,
  .doc-stamp {
    display: none;
  }
  .doc-head {
    padding-right: 0;
  }
  .doc-table th,
  .doc-table td {
    padding-block: 6px;
  }
  .steps,
  .guards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }
  .steps li {
    display: block;
    padding-block: 10px;
  }
  .guards li {
    padding-block: 10px;
  }
  .clause-num {
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .guards h3 {
    margin-top: 0;
  }
  .contract-sign {
    margin-top: 8px;
  }
  .care-copy {
    gap: 8px;
  }
  .care-copy .lb-notes {
    margin-top: 0;
  }
  .care-list > div {
    padding-block: 6px;
  }
  .manifesto li {
    padding-block: 4px;
  }
  .manifesto.is-waiting s {
    background-size: 100% 2px;
  }
  .signature {
    margin-top: 8px;
  }
  .faq-list summary {
    padding-block: 10px 4px;
  }
  .faq-list summary h3 {
    font-size: 1rem;
  }
  .faq-list summary::after {
    display: none;
  }
  .faq-list details p {
    padding: 0 0 10px;
  }
  .site-footer {
    background: #fff;
    color: #000;
    border-top: 2px solid #000;
  }
  .footer-brand p {
    color: #000;
  }
  .vertical,
  .plan,
  .doc-table tr,
  .steps li,
  .guards li,
  .faq-list details,
  .manifesto li {
    break-inside: avoid;
  }
  .lb-head,
  h2,
  h3 {
    break-after: avoid;
  }
}