/* fleetpages: the shared design system (the roster board, design A3).
   One stylesheet for every page. home.css carries only the home page's roster
   board; every other page is built from what is here. The contract, in short:
   - Ground: the wall (grey-green) with paper cards drawn in 2px ink.
   - Type: Big Shoulders Display for headings, labels and figures; Atkinson
     Hyperlegible Next for reading; Kalam only where something is handwritten.
   - Four staff colours, used as bars and fills, never as text: Manager yellow,
     Caretaker pink, Growth green, Chat blue.
   - Yellow is the action (buttons). Green means something went live. The red
     stamp marks a label ("Example", a kicker), never a warning.
   - The header and every page head sit on the slate board, so each page opens
     the way the home page does. site/DESIGN.md holds the long form. */

@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url("/_v/b300eeb650/fonts/big-shoulders-800.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 700; font-display: swap; src: url("/_v/38c636533b/fonts/big-shoulders-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url("/_v/860f35696c/fonts/atkinson-next-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap; src: url("/_v/ed26eb62c1/fonts/atkinson-next-700.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url("/_v/59c74f56ee/fonts/kalam-400.woff2") format("woff2"); }

:root {
  /* the board and the wall */
  --wall: #dfe3e1;
  --wall-2: #d3d9d6;
  --slate: #22313a;
  --panel: #1a262d;
  --slot: #111b21;
  --board-line: #34464f;
  --board-ink: #eef2f2;
  --board-mute: #a9b9c0;

  /* the four staff */
  --man: #f3c623;  --man-2: #fbe9a6;
  --care: #f3a0b2; --care-2: #fbd9e1;
  --grow: #86cf8f; --grow-2: #d3efd7;
  --chat: #7fb4ea; --chat-2: #d5e6f8;

  /* ink, stamp and live */
  --stamp: #c23a2b;
  --pen: #243c94;
  --live: #127a4f;
  --live-hi: #63c48e;

  /* the names every component already reads, pointed at the board palette */
  --paper: var(--wall);
  --paper-warm: var(--wall-2);
  --card: #f6f7f5;
  --ink: #151c20;
  --ink-soft: #364147;
  --ink-mute: #4f5b61;
  --hair: rgba(21, 28, 32, 0.2);
  --hair-strong: #151c20;
  --rule: #b9c2c0;
  --green: var(--live);
  --green-hover: #0e6441;
  --green-ink: #0f6a44;
  --green-soft: var(--grow-2);
  --green-bright: var(--live-hi);
  --amber-soft: var(--man-2);
  --amber-ink: #6e5200;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible Next", Verdana, sans-serif;
  --hand: "Kalam", "Comic Sans MS", cursive;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --r: 3px;
  --r-sm: 3px;
  --shadow: 0 3px 0 rgba(21, 28, 32, 0.18);
  --pad: 16px;
  --line: 2px solid var(--ink);
}
@media (min-width: 700px) { :root { --pad: 32px; } }

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--wall);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::placeholder { color: rgba(21, 28, 32, 0.42); }
::selection { background: var(--man-2); }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 9vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.02; }
h4 { font-size: 1.25rem; }
p, li { max-width: 65ch; }
b, strong { font-weight: 700; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--man); }

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

.container { max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section-tight { padding-block: clamp(2.2rem, 6vw, 3.8rem); }
.section + .section, .section-tight + .section-tight, .section + .section-tight, .section-tight + .section { border-top: 2px solid var(--rule); }
.alt { background: var(--wall-2); }

/* the label: a short uppercase line in the display face */
.kicker {
  display: block;
  font: 800 0.95rem/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 0.9rem;
}
.lede { font-size: clamp(1.08rem, 1.8vw, 1.22rem); color: var(--ink-soft); line-height: 1.55; }

/* ---------- the page head: every page opens on the board ----------
   Full-bleed slate behind the page's own container, so no page needs extra
   markup. A page that wants its visual idea up here puts it in .head-visual. */
.page-head {
  position: relative;
  background: var(--slate);
  color: var(--board-ink);
  box-shadow: 0 0 0 100vmax var(--slate);
  clip-path: inset(0 -100vmax);
  padding-block: clamp(2.2rem, 6vw, 4rem) clamp(2.4rem, 6vw, 4rem);
  margin-bottom: 0;
}
.page-head h1 { color: #fff; max-width: 18ch; }
.page-head .lede { margin-top: 1rem; color: #d5dfe2; max-width: 60ch; }
.page-head p { color: #c8d3d7; }
.page-head a { color: #fff; }
.page-head .kicker { color: var(--man); }
.page-head .crumb, .page-head .crumb a { color: var(--board-mute); }
.page-head .module-run { color: #d5dfe2; }
.page-head .module-run b { color: #fff; }
.page-head .module-run .sep { color: var(--board-line); }
.page-head .hero-note, .page-head .mono { color: var(--board-mute); }
.page-head .chip-idle { background: rgba(238, 242, 242, 0.12); color: var(--board-ink); }
.page-head .btn-ghost { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.page-head .btn-primary { color: var(--ink); }
@media (min-width: 980px) {
  .page-head.has-visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 20px 56px; align-items: center; }
  .page-head.has-visual > :not(.head-visual) { grid-column: 1; }
  .page-head.has-visual > .head-visual { grid-column: 2; grid-row: 1 / span 12; }
}
.head-visual { margin-top: 2rem; min-width: 0; }
@media (min-width: 980px) { .head-visual { margin-top: 0; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 22px;
  font: 800 1.2rem/1 var(--display); letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn-primary { background: var(--man); color: var(--ink); }
.btn-primary:hover { background: var(--man); }
.btn-ghost { background: var(--card); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 1.1rem; }

/* ---------- chips: the product's two-state grammar ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: 800 0.82rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.6rem 0.26rem; border-radius: 2px; white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-live { background: var(--grow-2); color: var(--green-ink); }
.chip-preview { background: var(--man-2); color: var(--amber-ink); }
.chip-idle { background: rgba(21, 28, 32, 0.08); color: var(--ink-soft); }

.mono { font-family: var(--mono); }
.addr {
  font-family: var(--mono); font-size: 0.9em;
  background: rgba(21, 28, 32, 0.06); border: 1px solid var(--hair);
  padding: 0.12em 0.5em; border-radius: 3px; white-space: nowrap;
}

/* ---------- header: the board's top rail ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--slate); color: var(--board-ink);
}
body[data-page="home"] .site-header { position: relative; }
.header-row { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand svg { width: 32px; height: 32px; flex: none; transition: transform 0.25s ease; }
.brand svg rect:first-child { stroke: var(--board-ink); opacity: 0.35; }
.brand:hover svg { transform: rotate(-4deg); }
.brand-word { font: 800 1.6rem/1 var(--display); letter-spacing: 0.01em; color: #fff; }
.brand-word b { font-weight: 800; color: var(--live-hi); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 22px; list-style: none; padding: 0; align-items: center; }
.site-nav a { text-decoration: none; font-size: 0.95rem; color: var(--board-ink); position: relative; padding-block: 0.35rem; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--man); transition: right 0.22s ease;
}
.site-nav a:hover::after { right: 0; }
body[data-page="work"] .site-nav a.nav-work::after,
body[data-page="examples"] .site-nav a.nav-examples::after,
body[data-page="modules"] .site-nav a.nav-modules::after,
body[data-page="agents"] .site-nav a.nav-agents::after,
body[data-page="help"] .site-nav a.nav-help::after { right: 0; }
/* Help and Log in are for people already on fleetpages: set apart from the tour links. */
.site-nav .nav-split { padding-left: 22px; border-left: 1px solid var(--board-line); }
.header-cta { flex: none; min-height: 40px; padding: 0 14px; font-size: 1.1rem; }

.nav-toggle { display: none; }
@media (max-width: 840px) {
  .header-row { gap: 10px; }
  .site-nav { display: none; }
  .header-cta { margin-left: auto; }
  .nav-toggle { display: block; position: relative; }
  .nav-toggle summary {
    list-style: none; cursor: pointer; width: 44px; height: 44px;
    border: 2px solid #5b6d76; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0; color: var(--board-ink);
  }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    display: block; width: 18px; height: 2px; background: var(--board-ink); border-radius: 2px;
  }
  .nav-toggle .bars { position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle .bars::before { top: -6px; }
  .nav-toggle .bars::after { top: 6px; }
  .nav-toggle[open] summary { background: var(--panel); }
  .mobile-menu {
    position: absolute; right: 0; top: calc(100% + 0.55rem);
    background: var(--card); color: var(--ink); border: var(--line);
    border-radius: 3px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
    min-width: 15rem; padding: 0.5rem; z-index: 60;
  }
  .mobile-menu a {
    display: block; padding: 0.7rem 0.9rem; text-decoration: none;
    font: 800 1.25rem/1.1 var(--display); letter-spacing: 0.01em;
  }
  .mobile-menu a:hover { background: var(--man-2); }
  body[data-page="examples"] .mobile-menu a.nav-examples,
  body[data-page="modules"] .mobile-menu a.nav-modules,
  body[data-page="agents"] .mobile-menu a.nav-agents,
  body[data-page="work"] .mobile-menu a.nav-work,
  body[data-page="help"] .mobile-menu a.nav-help { box-shadow: inset 4px 0 0 var(--man); }
  .mobile-menu .menu-cta, .mobile-menu .menu-account { margin-top: 0.4rem; border-top: 2px dashed var(--rule); padding-top: 0.5rem; }
  .mobile-menu a.menu-quiet { font: 400 0.98rem/1.4 var(--body); color: var(--ink-mute); }
}
@media (max-width: 370px) { .brand-word { font-size: 1.4rem; } .header-cta { padding: 0 10px; } }

/* ---------- hero grid (a two-column head or band) ---------- */
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero-grid > * { min-width: 0; }
.hero-ctas { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-mute); }

/* ---------- footer: the board again, closing the page ---------- */
.site-footer { background: var(--slot); color: var(--board-mute); }
.site-footer .brand-word { color: #fff; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--man); }
.footer-cols { display: grid; gap: 2rem 3rem; padding-block: clamp(2.8rem, 6vw, 4.2rem) 1.8rem; }
@media (min-width: 900px) { .footer-cols { grid-template-columns: 15rem 1fr; align-items: start; } }
.footer-brand { display: grid; gap: 0.9rem; justify-items: start; font-size: 0.93rem; }
.footer-brand p { max-width: 30ch; }
.footer-brand p a { text-decoration: underline; text-decoration-color: rgba(238, 242, 242, 0.3); }
.footer-brand .btn { color: var(--ink); }
.footer-brand .btn:hover { color: var(--ink); text-decoration: none; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.3rem; }
.site-footer .footer-login { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 4px; color: #fff; font: 800 1.1rem/1 var(--display); letter-spacing: 0.02em; }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.4rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-grid > div { display: grid; gap: 0.5rem; align-content: start; }
.footer-grid .footer-h { font: 800 0.95rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--man); margin-bottom: 0.3rem; }
.footer-grid a { color: #fff; font-size: 0.97rem; line-height: 1.3; overflow-wrap: anywhere; }
.footer-more { max-width: none; padding-bottom: 1.5rem; font-size: 0.86rem; color: var(--board-mute); }
.footer-meta {
  border-top: 1px solid var(--board-line);
  padding-block: 1.3rem 1.6rem;
  display: flex; gap: 1rem 1.8rem; flex-wrap: wrap; align-items: center;
  font-size: 0.86rem;
}
.footer-fine { margin-left: auto; }
.footer-fine a { text-decoration: underline; text-decoration-color: rgba(238, 242, 242, 0.3); }
.publish-plate {
  font-size: 0.84rem;
  border: 1px solid var(--board-line); border-radius: 3px; padding: 0.55rem 0.85rem;
  display: inline-flex; gap: 0.55rem; align-items: center; flex-wrap: wrap;
}
.publish-plate .chip-live { background: rgba(99, 196, 142, 0.18); color: var(--live-hi); }

/* ---------- vignette chrome: every product picture shares this frame ---------- */
.vignette {
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.vignette-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  background: var(--paper-warm);
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-mute);
}
.vignette-bar .dots { display: inline-flex; gap: 4px; }
.vignette-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--hair-strong); }
.vignette-body { padding: 1.1rem 1.2rem; }

/* pieces inside vignettes */
.msg { border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 0.85rem 1rem; background: var(--paper); }
.msg + .msg { margin-top: 0.75rem; }
.msg-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mute); margin-bottom: 0.45rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.msg p { font-size: 0.95rem; }
.vign-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.vign-approve {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--green); color: #fff; border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 560; font-size: 0.9rem;
  padding: 0.45rem 1rem; border: 0;
}
.vign-ghost { font-size: 0.88rem; color: var(--ink-mute); }

/* ---------- three steps ---------- */
.steps { display: grid; gap: 1.2rem; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.4rem; position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--hair-strong); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--mono); font-size: 0.78rem; color: var(--green-ink);
  display: block; margin-bottom: 0.8rem; letter-spacing: 0.1em;
}
.step h3 { margin-bottom: 0.55rem; }
.step p { font-size: 0.97rem; color: var(--ink-soft); }

/* ---------- plain cards (pricing summary etc.) ---------- */
.cards { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .cards { grid-template-columns: repeat(4, 1fr); } }
/* .cards goes 4-up at desktop, which strands a PAIR of cards in the left half
   of the page. Any deliberate two-card row (the pricing chooser, the roles
   we're auditioning) opts into staying 2-up so it fills the width. */
@media (min-width: 1060px) { .cards.cards-two { grid-template-columns: repeat(2, 1fr); } }
.cards-two .card { padding: 1.9rem 1.8rem 1.7rem; }
.card {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.4rem; display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--hair-strong); }
.card .tier-name { display: block; margin-bottom: 0.35rem; }
.card .tier-price { margin-bottom: 0.6rem; }
.card p { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- proof strip ---------- */
.proof { text-align: center; }
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; margin-block: 2.2rem; }
@media (min-width: 700px) { .proof-grid { grid-template-columns: repeat(4, 1fr); } }
.proof-num { font-family: var(--mono); font-weight: 600; font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.03em; line-height: 1; }
.proof-label { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 0.55rem; }
.proof-caption { font-size: 0.92rem; color: var(--ink-mute); max-width: 46ch; margin-inline: auto; }
.proof-invite { margin-top: 0.9rem; font-size: 1.02rem; text-align: center; margin-inline: auto; }

/* ---------- pricing ---------- */
.tiers { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; } }
@media (min-width: 700px) { .tiers.tiers-three { max-width: none; } }
@media (min-width: 1020px) { .tiers.tiers-three { grid-template-columns: repeat(3, 1fr); } }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .tiers { grid-template-rows: repeat(10, auto); }
    /* .tiers .tier beats the base .tier rule below regardless of source order */
    .tiers .tier { grid-row: span 10; display: grid; grid-template-rows: subgrid; }
  }
}
.tier {
  background: var(--card); border: 1px solid var(--hair-strong); border-radius: var(--r);
  padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: 0.85rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tier-name { font-family: var(--display); font-weight: 640; font-size: 1.2rem; }
.tier-price { font-family: var(--mono); }
.tier-price b { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.03em; }
.tier-price span { font-size: 0.8rem; color: var(--ink-mute); }
.tier-edits { font-size: 0.95rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--hair); }
.tier-edits b { font-family: var(--display); font-weight: 620; }
.tier ul { list-style: none; padding: 0; display: contents; }
.tier li { font-size: 0.92rem; color: var(--ink-soft); display: flex; gap: 0.55rem; align-items: baseline; }
.tier li .tick { font-weight: 700; color: var(--ink); flex: none; width: 1em; }
.tier li.na { color: color-mix(in oklab, var(--ink) 38%, var(--paper)); }
.tier li.na .tick { color: inherit; }
.tier-outside { font-size: 0.87rem; color: var(--ink-mute); border-top: 1px solid var(--hair); padding-top: 0.85rem; }
.tier .btn { justify-content: center; margin-top: 0.2rem; }
.tier-flag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-ink); }

.tiers-compare { margin-top: 1.6rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 62ch; }
.defs { margin-top: 2.4rem; border-top: 1px solid var(--hair-strong); padding-top: 1.6rem; display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .defs { grid-template-columns: repeat(2, 1fr); } }
.defs p { font-size: 0.93rem; color: var(--ink-soft); }
.defs b { color: var(--ink); }
.defs .fn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  background: var(--green-soft); border: 1px solid color-mix(in oklab, var(--green) 25%, transparent);
  font-family: var(--mono); color: var(--green-ink); font-size: 0.72rem; font-weight: 600;
  margin-right: 0.45rem; vertical-align: -0.3em;
}

.builds { margin-top: 2.8rem; border-top: 1px solid var(--hair-strong); padding-top: 2.2rem; }
.builds h2 { margin: 0.35rem 0 0.6rem; }
.builds-lede { color: var(--ink-soft); max-width: 62ch; margin-bottom: 1.6rem; }
.build-tiers { display: grid; gap: 1.2rem; }
@media (min-width: 860px) { .build-tiers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .build-tiers-two { grid-template-columns: repeat(2, 1fr); } }
/* one build per row: name + price rail on the left, inclusions on the right */
.build-tiers-rows { grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .build-tiers-rows .build-tier { display: grid; grid-template-columns: 220px 1fr; column-gap: 2.4rem; align-items: start; }
  .build-tiers-rows .build-tier .tier-name { grid-column: 1; }
  .build-tiers-rows .build-tier .tier-price { grid-column: 1; margin-bottom: 0; }
  .build-tiers-rows .build-tier ul { grid-column: 2; grid-row: 1 / 3; }
}
@media (min-width: 1060px) {
  .build-tiers-rows .build-tier ul { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
/* Module price line — the running fee is published, the build stays a quote. */
.module-run { font-family: var(--mono); font-size: 0.95rem; color: var(--ink-soft); margin: 1rem 0 0; }
.module-run b { font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.module-run .sep { color: var(--hair-strong); margin: 0 0.55rem; }
.build-tier-link .module-run { margin: 0.55rem 0 0; font-size: 0.88rem; }
.build-tier-link .module-run b { font-size: 1.2rem; }
.build-tier { background: var(--card); border: 1px solid var(--hair-strong); border-radius: var(--r); padding: 1.5rem 1.35rem; }
.build-tier .tier-price { margin: 0.5rem 0 0.7rem; }
.build-tier p:last-child { font-size: 0.95rem; color: var(--ink-soft); }
.build-tier ul { list-style: none; display: grid; gap: 0.45rem; font-size: 0.95rem; color: var(--ink-soft); }
.build-tier li { padding-left: 1.1rem; position: relative; }
.build-tier li::before { content: "\2713"; position: absolute; left: 0; color: var(--green-ink); font-size: 0.85em; }
.build-bespoke { margin-top: 1.3rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 62ch; }

/* add-ons */
.addons { margin-top: 2.6rem; border-top: 1px solid var(--hair-strong); padding-top: 2rem; }
.addons h2 { margin: 0.35rem 0 0.6rem; }
.addons-lede { color: var(--ink-soft); max-width: 62ch; margin-bottom: 1.4rem; }
.addons-list { list-style: none; display: grid; gap: 0.9rem; }
@media (min-width: 860px) { .addons-list { grid-template-columns: repeat(2, 1fr); } }
.addons-list li {
  background: var(--card); border: 1px solid var(--hair-strong); border-radius: var(--r);
  padding: 1.05rem 1.2rem; display: grid; grid-template-columns: 1fr auto; column-gap: 0.8rem; row-gap: 0.3rem;
}
.addons-list b { font-size: 1.02rem; }
.addon-price { font-weight: 700; color: var(--green-ink); white-space: nowrap; }
.addon-price::after { content: "/mo +GST"; font-weight: 400; font-size: 0.78em; color: var(--ink-mute); margin-left: 0.25em; }
.addon-once::after { content: none; } /* not a monthly price: no "/mo +GST" suffix */
.addon-desc { grid-column: 1 / -1; font-size: 0.92rem; color: var(--ink-soft); }

.sidecar {
  margin-top: 2.6rem; background: var(--ink); color: var(--paper);
  border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.2rem);
  display: grid; gap: 1.4rem; align-items: center;
}
@media (min-width: 860px) { .sidecar { grid-template-columns: 1fr auto; } }
.sidecar .kicker { color: oklch(78% 0.09 155); }
.sidecar h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
.sidecar p { color: color-mix(in oklab, var(--paper) 78%, var(--ink)); font-size: 0.98rem; }
.sidecar .tier-price { color: var(--paper); }
.sidecar .tier-price span { color: color-mix(in oklab, var(--paper) 60%, var(--ink)); }
.sidecar-cta { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }

.checklist { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.checklist li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; color: var(--ink-soft); }
.checklist .tick { color: var(--green-ink); font-weight: 700; flex: none; }

/* can / can't columns */
.cancant { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .cancant { grid-template-columns: 1fr 1fr; } }
.cancant .col { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 1.5rem 1.4rem; }
.cancant h3 { margin-bottom: 0.9rem; }
.cancant ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.cancant li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.96rem; color: var(--ink-soft); }
.cancant .tick { color: var(--green-ink); font-weight: 700; flex: none; }
.cancant .cross { color: var(--ink-mute); font-weight: 700; flex: none; }

/* ---------- FAQ ---------- */
.faq-group { margin-top: 2.6rem; }
.faq-group > h2 { font-size: 1.35rem; margin-bottom: 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--hair-strong); }
.qa { padding-block: 1.3rem; border-bottom: 1px solid var(--hair); max-width: 46rem; }
.qa:last-child { border-bottom: 0; }
.qa h3 { font-size: 1.12rem; margin-bottom: 0.55rem; }
.qa p { color: var(--ink-soft); font-size: 0.99rem; }
.qa p + p { margin-top: 0.6rem; }

/* ---------- statement ---------- */
.statement { text-align: center; }
.statement blockquote {
  font-family: var(--display); font-weight: 540;
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.35;
  max-width: 30ch; margin-inline: auto; text-wrap: balance;
}
.statement blockquote em { font-style: normal; color: var(--green-ink); }
.statement figcaption { margin-top: 1rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mute); }

/* ---------- enquiry form ---------- */
.enquiry-card {
  background: var(--card); border: 1px solid var(--hair-strong); border-radius: var(--r);
  box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, 2.3rem);
  max-width: 38rem;
}
.enquiry-card h2, .enquiry-card h3 { margin-bottom: 0.5rem; }
.enquiry-sub { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 1.4rem; }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.field label span { font-weight: 400; color: var(--ink-mute); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm); padding: 0.68rem 0.85rem;
  transition: border-color 0.15s ease;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-mute); }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: transparent; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.9rem; }
.lead-result { margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--r-sm); font-size: 0.97rem; }
[data-lead-success].lead-result { background: var(--green-soft); color: var(--green-ink); border: 1px solid color-mix(in oklab, var(--green) 35%, transparent); }
[data-lead-error].lead-result { background: oklch(94% 0.03 30); color: oklch(42% 0.13 30); border: 1px solid oklch(80% 0.06 30); }

/* ---------- prose pages (privacy, terms) ---------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.3rem; margin-top: 2.2rem; margin-bottom: 0.7rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }

/* ---------- big cta band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 0.8rem; }
.cta-band .lede { max-width: 52ch; margin-inline: auto; margin-bottom: 1.8rem; }

/* ---------- vs comparison rows ---------- */
.vs-rows { display: grid; gap: 1rem; }
.vs-row {
  display: grid; gap: 0.9rem 1.4rem;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--card, var(--paper));
  padding: 1.2rem 1.3rem;
}
.vs-row h3 { font-size: 1.02rem; margin-bottom: 0.1rem; }
.vs-cell p { font-size: 0.94rem; color: var(--ink-soft); }
.vs-cell .vs-label {
  display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.3rem;
}
.vs-cell.win .vs-label { color: var(--green); }
@media (min-width: 700px) {
  .vs-row { grid-template-columns: 1fr 1.1fr 1.1fr; align-items: start; }
  .vs-row h3 { margin-bottom: 0; }
}

/* ---------- the work: browser-framed live-site cards ---------- */
.work-grid { display: grid; gap: 1.4rem; }
@media (min-width: 700px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-grid.work-strip { }
@media (min-width: 1060px) { .work-strip { grid-template-columns: repeat(3, 1fr); } }
.site-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--card); border: 1px solid var(--hair-strong); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.site-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px color-mix(in oklab, var(--ink) 8%, transparent), 0 12px 28px color-mix(in oklab, var(--ink) 11%, transparent); border-color: var(--ink-mute); }
.site-card .vignette-bar { border-radius: 0; }
.site-card img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-bottom: 1px solid var(--hair);
  transition: transform 0.35s ease;
}
.site-card:hover img { transform: scale(1.015); }
.site-card-body { display: block; padding: 1rem 1.15rem 1.15rem; }
.site-card-body b { display: block; font-family: var(--display); font-weight: 640; font-size: 1.08rem; margin-bottom: 0.3rem; }
.site-card-body span { display: block; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.site-card-body b::after { content: " \2197"; color: var(--green-ink); font-size: 0.85em; opacity: 0; transition: opacity 0.2s ease; }
.site-card:hover .site-card-body b::after { opacity: 1; }

/* ---------- 404 ---------- */
.lost { min-height: 55vh; display: grid; place-content: center; text-align: center; padding-block: 4rem; }
.lost .mono { color: var(--ink-mute); margin-bottom: 1rem; }
.lost h1 { margin-bottom: 1rem; }
.lost p { margin-inline: auto; margin-bottom: 2rem; }

/* ---------- reduced motion floor ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Blog ─────────────────────────────────────────────────────────────────── */
.post-list { display: grid; gap: 1.1rem; max-width: 46rem; }
.post-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--hair); border-radius: 14px;
  padding: 1.4rem 1.6rem; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.post-card:hover { border-color: var(--hair-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.post-card h2 { margin: .2rem 0 .45rem; font-size: 1.35rem; line-height: 1.25; }
.post-card p { color: var(--ink-soft); margin: 0; line-height: 1.55; }
.post-date { font-size: .82rem; color: var(--ink-mute); letter-spacing: .02em; }
.post-more { display: inline-block; margin-top: .7rem; color: var(--green-ink); font-weight: 600; font-size: .92rem; }
.post-card:hover .post-more { text-decoration: underline; text-decoration-color: var(--green); }

.post { max-width: 44rem; }
.post h2 { margin: 2.1rem 0 .7rem; font-size: 1.45rem; }
.post p, .post li { line-height: 1.7; color: var(--ink-soft); }
.post p strong, .post li strong { color: var(--ink); }
.post ul { padding-left: 1.2rem; display: grid; gap: .55rem; margin: 1rem 0; }
.post blockquote {
  margin: 1.3rem 0; padding: .9rem 1.25rem;
  background: var(--paper-warm); border-left: 3px solid var(--green);
  border-radius: 0 10px 10px 0;
}
.post blockquote p { margin: 0; color: var(--ink); font-size: 1.02rem; }
.post .post-byline {
  margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--hair);
  font-size: .92rem; color: var(--ink-mute);
}

.post-figure { margin: 1.5rem 0 1.8rem; }
.post-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hair); border-radius: 12px; box-shadow: var(--shadow);
}
.post-figure figcaption { margin-top: .55rem; font-size: .88rem; color: var(--ink-mute); line-height: 1.5; }


/* ── Module pages ─────────────────────────────────────────────────────────── */
/* "what you get": a plain capability grid, reusing the card look */
.gets { list-style: none; padding: 0; display: grid; gap: 1.1rem; margin: 0; }
@media (min-width: 760px) { .gets { grid-template-columns: repeat(2, 1fr); } }
.get {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 1.35rem 1.4rem; max-width: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.get:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--hair-strong); }
.get h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.get p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* the honesty line: what's running today vs built to order for this module.
   stacks on mobile (chip above the text), two columns from tablet up */
.state-note {
  display: grid; gap: 0.55rem 1.2rem;
  background: var(--card); border: 1px solid var(--hair-strong); border-radius: var(--r);
  padding: 1.2rem 1.4rem; max-width: 62rem;
}
.state-note .chip { justify-self: start; }
.state-note h3 { font-size: 1.1rem; margin: 0; }
.state-note p { font-size: 0.96rem; color: var(--ink-soft); margin: 0; }
.state-note p + p { margin-top: 0.55rem; }
@media (min-width: 620px) {
  .state-note { grid-template-columns: auto 1fr; align-items: start; }
  .state-note .chip { margin-top: 0.2rem; }
  .state-note h3, .state-note p { grid-column: 2; }
}

/* module page: back-to-catalogue crumb under the kicker */
.crumb { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mute); }
.crumb a { color: var(--green-ink); text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-decoration-color: var(--green); }

/* index: make each catalogue tile a link to its module page without restyling it */
.build-tier-link { text-decoration: none; color: inherit; display: block; }
.build-tier-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--ink-mute); }
.build-tier-link .tier-name::after { content: " \2197"; color: var(--green-ink); font-size: 0.8em; opacity: 0; transition: opacity 0.2s ease; }
.build-tier-link:hover .tier-name::after { opacity: 1; }

/* the transparency pair: what's included (green ticks) + what we leave out (reasons) */
.included { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; max-width: 60rem; }
@media (min-width: 720px) { .included { grid-template-columns: repeat(2, 1fr); column-gap: 2.4rem; } }
.included li { display: flex; gap: 0.65rem; align-items: baseline; font-size: 0.97rem; color: var(--ink-soft); max-width: none; }
.included li .tick { color: var(--green-ink); font-weight: 700; flex: none; }

.leaveouts { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
@media (min-width: 760px) { .leaveouts { grid-template-columns: repeat(2, 1fr); } }
.leaveout {
  background: var(--paper-warm); border: 1px solid var(--hair);
  border-left: 3px solid var(--hair-strong); border-radius: var(--r);
  padding: 1.2rem 1.35rem;
}
.leaveout h3 { font-size: 1.05rem; margin: 0 0 0.4rem; display: flex; gap: 0.5rem; align-items: baseline; }
.leaveout h3 .no { color: var(--ink-mute); font-weight: 700; flex: none; font-family: var(--body); }
.leaveout p { font-size: 0.93rem; color: var(--ink-soft); margin: 0; max-width: none; }
.leaveout p .why { color: var(--ink); font-weight: 600; }

/* ── /editing/: framed product captures (real screenshots + GIFs) ─────────── */
.shot {
  background: var(--card); border: 1px solid var(--hair-strong); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden; margin: 0;
}
.shot .vignette-bar { border-radius: 0; }
.shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--hair); }
.shot figcaption { font-size: 0.84rem; color: var(--ink-soft); padding: 0.65rem 1rem 0.75rem; line-height: 1.5; }
.shots { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 860px) { .shots { grid-template-columns: repeat(2, 1fr); } }
.door-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mute);
  border: 1px solid var(--hair-strong); border-radius: 99px; padding: 0.25rem 0.8rem;
  margin-bottom: 0.9rem;
}
.door-badge b { color: var(--green-ink); font-weight: 700; }
.capture-note { font-size: 0.87rem; color: var(--ink-mute); margin-top: 1.6rem; max-width: 46rem; }

/* ---- sequenced reveals (motion.js): checks that tick themselves off ---- */
.seq-armed li, .seq-armed .gate-row { opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .45s ease; }
.seq-on li, .seq-on .gate-row { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .seq-armed li, .seq-armed .gate-row { opacity: 1; transform: none; transition: none; }
}

/* Agent rows. Each agent is a separate hire, not a column in a comparison
   table — three columns invited "which one is best", one row each asks the
   right question, "do I want this one". Overrides the subgrid card rules
   above, which exist to line three cards up and have no job here. */
.tiers.tiers-rows { grid-template-columns: 1fr; max-width: none; grid-template-rows: none; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .tiers.tiers-rows { grid-template-rows: none; }
    .tiers.tiers-rows .tier { grid-row: auto; grid-template-rows: none; display: block; }
  }
}
@media (min-width: 860px) {
  .tiers.tiers-rows .tier ul { columns: 2; column-gap: 2.4rem; }
  .tiers.tiers-rows .tier ul li { break-inside: avoid; }
}

/* The tracked channels are plumbing, not staff — same list, quieter presentation. */
.addons-compact li { font-size: 0.97rem; }

/* Small phones: a grid item defaults to min-width:auto, so the enquiry card's
   widest form control sets the track and pushed the whole page 50px wider than
   a 320px viewport. Present on the live site before this change; found by
   sweeping /, /editing/ and the guide at 320-1440. Scoped to the card on
   purpose: a bare `input, select, textarea { width: 100% }` is exactly the rule
   that once stretched our own injected owner UI inside a tenant's cascade. */
.hero-grid > * { min-width: 0; }
.enquiry-card input, .enquiry-card select, .enquiry-card textarea { max-width: 100%; box-sizing: border-box; }

/* The hero simulation's kicker was the smallest text on the page at 9.8px. */

/* Turnstile renders a fixed 300px iframe. On a 320px phone the form's content
   box is 230px, so the widget alone pushed the whole document wider than the
   screen. Its size is not ours to set, so scale it down at the width where it
   stops fitting. */
@media (max-width: 380px) {
  .cf-turnstile { transform: scale(0.75); transform-origin: 0 0; height: 52px; }
}

/* ---------- the record: timed lines from one sitting (case study) ----------
   Green appears only on the "published" note, the one place something went live. */
.record { list-style: none; padding: 0; margin: 0; }
.record-row { display: grid; gap: 0.2rem; padding-block: 0.95rem; border-top: 1px solid var(--hair); max-width: none; }
.record-time { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--ink-mute); }
.record-row p { font-size: 0.94rem; color: var(--ink-soft); max-width: 44ch; }
.record-row p b { color: var(--ink); font-weight: 640; }
.record-status { font-family: var(--mono); font-size: 0.72rem; color: var(--green-ink); }
@media (min-width: 520px) {
  .record-row { grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1rem; }
  .record-time { grid-column: 1; padding-top: 0.15rem; }
  .record-row p, .record-status { grid-column: 2; }
}

/* ---------- case study: the long-form client story (/work/owen-roberts/) ----------
   Almost all of that page is furniture that already existed: page-head, kickers,
   ledes, .checklist ticks, .shot browser frames, the .record timeline, .cancant
   for the before/after pair, .statement for the closing quote, .cta-band. These
   are the four pieces the library had no equivalent for. The pull quote borrows
   the blog's quote treatment (warm ground, green rule) rather than inventing a
   second one. */
.case-meta {
  display: grid; gap: 0.7rem 2.6rem; margin-top: 1.7rem;
  padding-top: 1.3rem; border-top: 1px solid var(--hair);
  font-size: 0.9rem; color: var(--ink-mute);
}
@media (min-width: 760px) { .case-meta { grid-template-columns: repeat(3, auto); justify-content: start; } }
.case-meta b { display: block; font-family: var(--display); font-weight: 640; font-size: 1.02rem; color: var(--ink); }

.case-sites { display: grid; gap: clamp(2.2rem, 5vw, 3.4rem); margin-top: 2.2rem; }
@media (min-width: 900px) { .case-sites { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.case-sites h3 { margin: 1.3rem 0 0.8rem; font-size: 1.3rem; }

.case-pull {
  margin: 0; padding: 1rem 1.3rem; max-width: 58rem;
  background: var(--paper-warm); border-left: 3px solid var(--green);
  border-radius: 0 var(--r) var(--r) 0;
}
.case-pull + .case-pull { margin-top: 1rem; }
.case-pull blockquote { font-size: 1.04rem; line-height: 1.6; }
.case-pull blockquote em { font-style: normal; color: var(--green-ink); }
.case-pull figcaption { margin-top: 0.7rem; font-family: var(--mono); font-size: 0.76rem; color: var(--ink-mute); }

.case-source { display: block; margin-top: 0.8rem; font-family: var(--mono); font-size: 0.73rem; line-height: 1.5; color: var(--ink-mute); }
/* The one note in the timeline that is not an approval: it is still in preview,
   so it must not wear the green that means something went live. */
.record-status .pending { color: var(--ink-mute); margin-left: 0.9rem; }

/* A label that only the screen reader needs: the field's own placeholder is the
   visible copy, and a second visible line would repeat it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ======================================================================
   The board skin. The component rules above were written for the old paper
   look and read the shared tokens; this layer gives each one the A3 finish:
   paper cards drawn in 2px ink, display-face labels, staff colours as bars.
   Kept as one block so the next change to the look is one place.
   ====================================================================== */
.vignette, .card, .tier, .build-tier, .get, .state-note, .step,
.enquiry-card, .shot, .site-card, .addons-list li, .cancant .col,
.vs-row, .post-card, .leaveout {
  border: var(--line); border-radius: 3px; box-shadow: var(--shadow);
}
.post-card { background: var(--card); }
.post-figure img { border: var(--line); border-radius: 3px; box-shadow: var(--shadow); }
/* a card that is not a link does not lift */
.card:hover, .tier:hover, .get:hover, .step:hover { transform: none; box-shadow: var(--shadow); border-color: var(--ink); }
.site-card:hover, .post-card:hover, .build-tier-link:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(21, 28, 32, 0.22); border-color: var(--ink); }

.vignette-bar {
  background: var(--slate); color: var(--board-mute); border-bottom: var(--line);
  font: 700 0.82rem/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
}
.vignette-bar .dots i { background: var(--board-line); }
.msg { background: #fff; border: 1.5px solid var(--rule); }
.msg-meta { font: 700 0.8rem/1.2 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.vign-approve { background: var(--live); border-radius: 3px; font: 800 1rem/1 var(--display); letter-spacing: 0.03em; padding: 0.55rem 1rem; }

/* labels and figures in the display face */
.tier-name { font: 800 2rem/1 var(--display); letter-spacing: 0.01em; }
.tier-price { font-family: var(--body); }
.tier-price b { font: 800 2.5rem/1 var(--display); letter-spacing: 0; }
.tier-price span { font-size: 0.86rem; }
.tier-flag { font: 800 0.9rem/1.15 var(--display); letter-spacing: 0.08em; color: var(--stamp); }
.tier-edits b { font-family: var(--body); font-weight: 700; }
.tier-edits { border-bottom: 2px dashed var(--rule); }
.tier-outside { border-top: 2px dashed var(--rule); }
.module-run { font-family: var(--body); }
.module-run b { font: 800 2rem/1 var(--display); letter-spacing: 0; }
.step::before { font: 800 1.8rem/1 var(--display); color: var(--stamp); letter-spacing: 0.02em; }
.step h3 { font-size: 1.7rem; }
.proof-num { font-family: var(--display); font-weight: 800; letter-spacing: 0; }
.proof-label { font: 700 0.9rem/1.2 var(--display); letter-spacing: 0.08em; }
.statement blockquote { font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.02; max-width: 24ch; }
.statement blockquote em { color: var(--ink); background: var(--man); padding: 0 0.1em; }
.statement figcaption, .case-pull figcaption, .case-source, .crumb, .post-date, .lost .mono {
  font: 700 0.9rem/1.3 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
}
.record-time { font: 800 1.25rem/1 var(--display); color: var(--stamp); letter-spacing: 0.02em; }
.record-status { font: 700 0.86rem/1.3 var(--body); color: var(--green-ink); }
.record-row { border-top: 1px solid var(--rule); }
.vs-cell .vs-label { font: 800 0.88rem/1.1 var(--display); letter-spacing: 0.08em; }
.vs-cell.win .vs-label { color: var(--green-ink); }
.vs-row h3 { font-size: 1.5rem; }
.site-card-body b { font: 800 1.4rem/1.05 var(--display); }
.post-card h2 { font-size: 1.9rem; line-height: 1; }
.get h3, .state-note h3, .leaveout h3 { font-size: 1.5rem; }
.leaveout { background: var(--card); border-left-width: 8px; border-left-color: var(--rule); }
.qa h3 { font-size: 1.55rem; }
.faq-group > h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); border-bottom: var(--line); }
.prose h2 { font-size: 1.8rem; }
.post h2 { font-size: 2rem; }
.post blockquote, .case-pull { background: var(--card); border-left: 6px solid var(--man); border-radius: 0 3px 3px 0; }
.post blockquote p { font-size: 1.05rem; }
.defs .fn { background: var(--man); border: 2px solid var(--ink); color: var(--ink); font: 800 0.9rem/1 var(--display); border-radius: 2px; }
.addon-price { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.build-tier li::before, .included li .tick, .cancant .tick, .checklist .tick, .tier li .tick { color: var(--live); }

/* the four staff, as a colour bar on their own card */
.tiers-rows .tier { border-left: var(--line); border-top: 12px solid var(--c, var(--ink)); }
.tiers-rows #manager { --c: var(--man); }
.tiers-rows #caretaker { --c: var(--care); }
.tiers-rows #growth-team { --c: var(--grow); }
.tiers-rows #chat { --c: var(--chat); }
.tiers-rows .tier .tier-name { color: var(--ink); }

/* the dark card inside a page: the board in miniature */
.sidecar { background: var(--slate); color: var(--board-ink); border-radius: 3px; border: var(--line); box-shadow: 0 4px 0 var(--ink); }
.sidecar .kicker { color: var(--man); }
.sidecar h3 { font-size: 2rem; }
.sidecar p { color: #c8d3d7; }
.sidecar .tier-price, .sidecar .tier-price b { color: #fff; }
.sidecar .tier-price span { color: var(--board-mute); }
.sidecar .btn-ghost { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }

/* forms: the job docket */
.enquiry-card { background: #fdfdf9; box-shadow: 0 6px 0 rgba(21, 28, 32, 0.22); }
.field label { font: 800 1rem/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stamp); }
.field label span { font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea, .field select { background: #fff; border: 2px solid var(--ink); border-radius: 3px; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--pen); outline-offset: 1px; border-color: var(--ink); }
/* Safari draws its own short, rounded select and ignores the padding: give it the
   same 2px ink field as the inputs, with a drawn chevron */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151c20' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 18px;
}
[data-lead-success].lead-result { border: 2px solid var(--live); }

/* the closing band on every page: back on the board, like the home page's door */
.cta-band { background: var(--slate); color: var(--board-ink); border-top: 0 !important; }
.cta-band h2 { color: #fff; margin-inline: auto; max-width: 20ch; }
.cta-band .lede, .cta-band p { color: #c8d3d7; }
.cta-band a:not(.btn) { color: #fff; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.page-head .head-note { margin-top: 1rem; font-size: 0.97rem; color: #c8d3d7; max-width: 60ch; }
.tiers-rows .tier-flag { display: block; margin-bottom: 0.45rem; }
[id] { scroll-margin-top: 84px; }

/* ======================================================================
   Page-head visuals. One idea per page, each drawn from that page's own
   content, all sitting on the board beside the headline. Decorative copies
   of facts the page states in words are aria-hidden; the contents board on
   /examples/ is real navigation and stays in the tree.
   ====================================================================== */
.paper {
  position: relative; background: #fdfdf9; color: var(--ink);
  border-radius: 2px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.paper.pinned::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: #8a9599; border: 2px solid #10191e;
}
.stamp-h {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-bottom: 1.5px solid var(--stamp); padding-bottom: 5px; margin-bottom: 6px;
  font: 800 1rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stamp);
}
.stamp-h em { font-style: normal; border: 1.5px solid var(--stamp); padding: 2px 5px 1px; transform: rotate(-4deg); font-size: 0.82rem; }

/* /agents/: the month, added up */
.tally { max-width: 420px; margin-inline: auto; padding: 16px 18px 14px; transform: rotate(-1.2deg); }
.tally-row { display: grid; grid-template-columns: 12px 1fr auto 4.6rem; gap: 10px; align-items: baseline; padding: 7px 0 6px; border-bottom: 1px solid #e9b8b2; }
.tally-row i { align-self: center; width: 12px; height: 12px; border-radius: 2px; background: var(--c); border: 1.5px solid var(--ink); }
.tally-row b { font: 800 1.35rem/1 var(--display); }
.tally-row span { font: 400 1.2rem/1 var(--hand); color: var(--pen); }
.tally-row strong { font: 800 1.35rem/1 var(--display); text-align: right; }
.tally-row.aside strong { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.tally-f { margin-top: 8px; font: 700 0.85rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); text-align: right; }

/* /examples/: the kinds of change, as a board of small pages */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; list-style: none; padding: 0; }
.kinds li { max-width: none; }
.kinds a { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: var(--board-ink); font: 800 1rem/1 var(--display); letter-spacing: 0.02em; }
.kinds a:hover .mini { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35); }
.kinds a:hover span { text-decoration: underline; text-decoration-color: var(--man); text-underline-offset: 4px; }
.mini {
  position: relative; display: flex; flex-direction: column; gap: 5px; aspect-ratio: 3 / 4;
  background: var(--card); border: 2px solid #0c1317; border-radius: 3px; padding: 11% 11%;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mini i { display: block; height: 6px; border-radius: 2px; background: #9aa4a8; }
.mini i:first-child { height: 9px; width: 70%; background: var(--ink); }
.mini .hi { background: var(--man); box-shadow: 0 0 0 1.5px var(--ink); }
.mini .blk { height: auto; flex: 1; background: #d6dbdc; }
.mini .ph { height: auto; flex: 1.4; background: linear-gradient(180deg, #bcd3db 0 55%, #7f9c8a 55%); }
.mini .add { background: transparent; border: 1.5px dashed var(--ink); height: 12px; }
.mini .bars { height: auto; flex: 1; display: flex; align-items: flex-end; gap: 4px; background: none; }
.mini .bars b { flex: 1; background: var(--man); border: 1.5px solid var(--ink); border-radius: 1px; }
.mini.page2::after { content: ""; position: absolute; inset: 8px -8px -8px 8px; z-index: -1; background: var(--care-2); border: 2px solid #0c1317; border-radius: 3px; }
.mini.moved .hi { transform: translateX(14%); }
@media (min-width: 980px) { .kinds { gap: 16px 14px; } .kinds a { font-size: 1.1rem; } }

/* /fleets/: the area a fleet covers */
.areas { width: 100%; max-width: 520px; margin-inline: auto; }
.areas text { font-family: var(--display); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* /websites/: priced by size, drawn as piles of pages */
.sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.pile { position: relative; height: var(--h); margin-bottom: 10px; }
.pile i { position: absolute; left: calc(var(--n) * 5px); right: calc(10px - var(--n) * 2px); bottom: calc(var(--n) * 5px); height: calc(var(--h) - 36px); background: var(--card); border: 2px solid #0c1317; border-radius: 3px; }
.pile i:last-child { background: #fff; }
.pile i:last-child::before { content: ""; position: absolute; left: 12%; right: 30%; top: 12%; height: 6px; border-radius: 2px; background: var(--ink); box-shadow: 0 12px 0 #9aa4a8, 0 24px 0 #9aa4a8; }
.pile .feat { position: absolute; right: 2px; top: -6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: var(--man); border: 2px solid var(--ink); }
.size-l b { display: block; font: 800 1.35rem/1 var(--display); color: #fff; }
.size-l span { display: block; margin-top: 4px; font-size: 0.86rem; line-height: 1.3; color: var(--board-mute); }
.size-l em { display: block; font-style: normal; margin-top: 4px; font: 800 1.2rem/1 var(--display); color: var(--man); }

/* /work/owen-roberts/: one corrected line, four pages kept consistent */
.fan { display: grid; gap: 14px; }
.fan-line { padding: 12px 14px; transform: rotate(-1deg); max-width: 26rem; }
.fan-line > s { display: block; font: 400 1.05rem/1.35 var(--hand); color: var(--ink-mute); text-decoration-color: var(--stamp); text-decoration-thickness: 2px; }
.fan-line > span { display: block; margin-top: 4px; font: 400 1.1rem/1.35 var(--hand); color: var(--pen); }
.fan-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fan-page { position: relative; color: var(--ink); background: var(--card); border: 2px solid #0c1317; border-radius: 3px; padding: 10px 12px 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.fan-page b { display: block; font: 800 1.2rem/1 var(--display); }
.fan-page i { display: block; height: 5px; margin-top: 7px; border-radius: 2px; background: #9aa4a8; }
.fan-page i.hi { background: var(--man); box-shadow: 0 0 0 1.5px var(--ink); }
.fan-page small { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 700 0.9rem/1 var(--display); letter-spacing: 0.04em; color: var(--green-ink); text-transform: uppercase; }
.fan-page small::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--live); box-shadow: inset 0 0 0 3px var(--live), inset 0 0 0 5px #fff; }

/* /your-data/: where an enquiry goes, and the road it cannot take back */
.flow { display: grid; gap: 10px; max-width: 460px; margin-inline: auto; }
.flow-box { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--card); color: var(--ink); border: 2px solid #0c1317; border-radius: 3px; padding: 10px 14px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.flow-box b { font: 800 1.35rem/1 var(--display); }
.flow-box span { font-size: 0.88rem; color: var(--ink-mute); text-align: right; }
.flow-box.site { border-top: 10px solid var(--man); }
.flow-box.store { border-top: 10px solid var(--chat); }
.flow-arrow { display: flex; align-items: center; gap: 10px; padding-left: 26px; font: 700 0.85rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--board-mute); }
.flow-arrow::before { content: ""; width: 2px; height: 26px; background: var(--live-hi); box-shadow: 0 0 0 0 transparent; }
.flow-arrow.no { color: #f0a59b; }
.flow-arrow.no::before { background: repeating-linear-gradient(180deg, #f0a59b 0 4px, transparent 4px 8px); }
.flow-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* /honesty/: the rules, as stamps */
.stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px; margin-inline: auto; padding: 18px; }
.stamps span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px;
  border: 2.5px solid var(--stamp); border-radius: 3px; padding: 6px 8px;
  font: 800 1.08rem/1.05 var(--display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--stamp);
  transform: rotate(var(--t, -2deg)); background: rgba(194, 58, 43, 0.04);
}
.stamps span:nth-child(2n) { --t: 1.5deg; }
.stamps span:nth-child(3n) { --t: -0.5deg; }

/* /bring-your-site/: your files, served as your files */
.import { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 0.9fr); align-items: center; gap: 10px; max-width: 520px; margin-inline: auto; }
.files { padding: 14px 16px 12px; }
.files li { list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #e3e7e6; font-family: var(--mono); font-size: 0.86rem; max-width: none; }
.files li::before { content: ""; width: 10px; height: 13px; border: 1.5px solid var(--ink); border-radius: 1px; background: #fff; flex: none; }
.files ul { padding: 0; }
.import-arrow { height: 3px; background: var(--live-hi); position: relative; }
.import-arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7.5px solid transparent; border-left: 10px solid var(--live-hi); }
.import-site { background: var(--card); border: 2px solid #0c1317; border-radius: 3px; aspect-ratio: 3 / 4; padding: 12%; display: flex; flex-direction: column; gap: 6px; position: relative; }
.import-site i { height: 6px; border-radius: 2px; background: #9aa4a8; }
.import-site i:first-child { height: 10px; width: 72%; background: var(--ink); }
.import-site .form { height: auto; flex: 1; background: #fff; border: 1.5px solid var(--ink); }
.import-site b { position: absolute; right: -10px; bottom: 18%; transform: rotate(-6deg); border: 2.5px solid var(--live); color: var(--live); background: #fdfdf9; font: 800 0.95rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px 3px; white-space: nowrap; }

/* /vs-wordpress/: what each one asks of you */
.vs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; margin-inline: auto; }
.vs2-panel { color: var(--ink); background: var(--card); border: 2px solid #0c1317; border-radius: 3px; overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.vs2-panel > b { display: block; background: var(--panel); color: var(--board-ink); font: 800 1.05rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 10px 7px; }
.vs2-panel ul { list-style: none; padding: 8px 10px 10px; display: grid; gap: 7px; }
.vs2-panel li { display: flex; justify-content: space-between; gap: 6px; align-items: center; font-size: 0.86rem; max-width: none; }
.vs2-panel li em { font-style: normal; font: 800 0.72rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; background: #fbd9e1; border: 1.5px solid var(--stamp); color: var(--stamp); padding: 3px 4px 2px; border-radius: 2px; }
.vs2-page { padding: 12px; display: grid; gap: 7px; }
.vs2-page i { display: block; height: 6px; border-radius: 2px; background: #9aa4a8; }
.vs2-page i:first-child { height: 10px; width: 70%; background: var(--ink); }
.vs2-page strong { justify-self: start; margin-top: 6px; border: 2.5px solid var(--live); color: var(--live); font: 800 0.95rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px 3px; transform: rotate(-4deg); }

/* /modules/: three shelves, by how far along each module is */
.shelf { display: grid; gap: 14px; }
.shelf-row { border-bottom: 6px solid var(--board-line); padding-bottom: 10px; }
.shelf-row > b { display: block; margin-bottom: 8px; font: 800 0.95rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--board-mute); }
.shelf-row ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.shelf-row li { max-width: none; background: var(--card); color: var(--ink); border: 2px solid #0c1317; border-radius: 3px; padding: 6px 9px 5px; font: 800 1rem/1 var(--display); letter-spacing: 0.02em; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); border-top: 6px solid var(--c); }
.shelf-row.live { --c: var(--live-hi); }
.shelf-row.built { --c: var(--man); }
.shelf-row.ask { --c: var(--board-mute); }
.shelf-row.ask li { background: transparent; color: var(--board-ink); border-style: dashed; border-color: var(--board-mute); box-shadow: none; }

@media (max-width: 420px) {
  .sizes { gap: 8px; }
  .size-l b { font-size: 1.15rem; }
  .size-l span { font-size: 0.78rem; }
  .import { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 0.8fr); }
  .files li { font-size: 0.78rem; }
  .vs2-panel li { font-size: 0.8rem; }
}

/* the case study's facts line, inside the page head */
.page-head .case-meta { color: var(--board-mute); border-top-color: var(--board-line); }
.page-head .case-meta b { color: #fff; }

/* a form in the page head (/agencies/interest/): the paper card keeps its own ink */
.page-head .enquiry-card, .page-head .enquiry-card p { color: var(--ink); }
.page-head .enquiry-card [data-lead-error] { color: oklch(42% 0.13 30); }
/* ticks on the board (/agencies/interest/): pale text, the bright live green */
.page-head .checklist { margin-top: 1.4rem; }
.page-head .checklist li { color: #d5dfe2; font-size: 1rem; }
.page-head .checklist .tick { color: var(--live-hi); }

/* /security/: who can do what, as a key board */
.keys { display: grid; gap: 8px; max-width: 520px; margin-inline: auto; }
.keys-row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.keys-row > span { font: 800 1.2rem/1.05 var(--display); color: #fff; padding: 10px 12px; background: var(--panel); border-left: 6px solid var(--c, var(--board-mute)); border-radius: 0 3px 3px 0; }
.keys-top b { font: 800 0.9rem/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--board-mute); text-align: center; }
.keys-top span { background: none; border: 0; }
.keys-row.you { --c: var(--live-hi); }
.keys-row.ai { --c: var(--man); }
.keys-row.other { --c: var(--board-mute); }
.keys-row i { justify-self: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #0c1317; position: relative; }
.keys-row i.y { background: var(--live); }
.keys-row i.y::after { content: ""; position: absolute; left: 13px; top: 7px; width: 9px; height: 17px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: rotate(45deg); }
.keys-row i.n { background: var(--panel); border-color: var(--board-line); }
.keys-row i.n::before, .keys-row i.n::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; margin: -1.5px 0 0 -9px; background: #f0a59b; transform: rotate(45deg); }
.keys-row i.n::after { transform: rotate(-45deg); }

/* /about/: the timeline, as a ruler (2005 to 2026, positions by year) */
.ruler { position: relative; height: 230px; max-width: 520px; margin-inline: auto; }
.ruler-line { position: absolute; left: 0; right: 0; top: 108px; height: 14px; background: repeating-linear-gradient(90deg, var(--board-mute) 0 2px, transparent 2px 4.76%); border-bottom: 3px solid var(--board-mute); }
.ruler-mark { position: absolute; left: var(--at); width: 150px; display: grid; gap: 6px; }
.ruler-mark::after { content: ""; position: absolute; left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--man); border: 2px solid #0c1317; }
.ruler-mark b { font: 800 1.4rem/1 var(--display); color: #fff; }
.ruler-mark span { font-size: 0.88rem; line-height: 1.3; color: var(--board-mute); }
.ruler-mark.up { bottom: 122px; padding-bottom: 22px; border-left: 2px solid var(--board-mute); padding-left: 10px; }
.ruler-mark.up::after { bottom: -9px; }
.ruler-mark.down { top: 125px; padding-top: 22px; border-left: 2px solid var(--board-mute); padding-left: 10px; }
.ruler-mark.down::after { top: -9px; }
.ruler-mark.end { left: auto; right: 0; border-left: 0; padding-left: 0; border-right: 2px solid var(--board-mute); padding-right: 10px; text-align: right; }
.ruler-mark.end::after { left: auto; right: -8px; background: var(--live-hi); }
.ruler-mark.end b { color: var(--man); }

/* /leaving/: the packing list */
.box { max-width: 420px; margin-inline: auto; padding: 16px 18px 14px; transform: rotate(1deg); }
.box ul { list-style: none; padding: 0; display: grid; }
.box li { max-width: none; display: flex; gap: 10px; align-items: baseline; padding: 6px 0 5px; border-bottom: 1px solid #e9b8b2; font: 400 1.15rem/1.25 var(--hand); color: var(--pen); }
.box-in li::before { content: ""; flex: none; width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 2px; background: var(--grow-2); box-shadow: inset 0 0 0 2px #fdfdf9, inset 0 0 0 7px var(--live); }
.page-head .box .box-out-h, .box-out-h { margin-top: 12px; font: 800 0.95rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.box-out li { color: var(--ink-mute); }
.box-out li::before { content: ""; flex: none; width: 13px; height: 13px; border: 2px dashed var(--ink-mute); border-radius: 2px; }

/* ======================================================================
   The help centre (/help/ and /help/<guide>/, HELPV1). Each guide pairs its
   steps with the real screen on a phone, and a yellow ring marks the one
   thing to tap: yellow is the action, and the rest of the screen dims.
   A screen we have not captured yet is stamped "Screen to come", never drawn.
   ====================================================================== */
/* page head: the way back to the index sits where a kicker would */
.hcrumb {
  display: inline-flex; align-items: center; gap: 0.15rem; min-height: 44px;
  margin: -0.7rem 0 0.2rem -0.35rem; padding-right: 0.6rem;
  font: 800 0.95rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.page-head .hcrumb { color: var(--man); }
.hcrumb svg { width: 20px; height: 20px; }
.hcrumb:hover { text-decoration: underline; text-decoration-color: var(--man); }

/* the index: one card per guide, each showing its screen */
.help-tiles-wrap { padding-block: clamp(2rem, 5vw, 3.2rem) clamp(3rem, 7vw, 5rem); }
.help-tiles { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.help-tiles li { max-width: none; }
.help-tile {
  display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1rem; align-items: center;
  height: 100%; padding: 0.75rem; text-decoration: none; color: inherit;
  background: var(--card); border: var(--line); border-radius: 3px; box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.help-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(21, 28, 32, 0.22); }
.help-tile-art .hscreen { border: 1.5px solid var(--ink); border-radius: 3px; }
.help-tile-text { display: grid; gap: 0.3rem; }
.help-tile-name { font: 800 1.45rem/1.02 var(--display); letter-spacing: 0.005em; }
.help-tile-desc { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.45; }
.help-tile-art { display: block; }
.hscreen.help-tile-icon { display: grid; place-items: center; background: var(--wall-2); color: var(--ink); }
.help-tile-icon svg { width: 34%; height: auto; }
@media (min-width: 720px) { .help-tiles { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (min-width: 1000px) {
  .help-tiles { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
  .help-tile { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 1rem; padding: 0.9rem 0.9rem 1.2rem; }
  .help-tile-name { font-size: 1.6rem; }
}
.help-close { margin-top: 2.2rem; color: var(--ink-soft); max-width: 62ch; }
/* the longer guides, after the one-job how-tos */
.help-more { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin: clamp(2.4rem, 5vw, 3.4rem) 0 1rem; }

/* a guide: sections of steps, each beside its screen */
.hsec { padding-block: clamp(2rem, 5vw, 3.4rem); }
.hsec + .hsec { border-top: 2px solid var(--rule); }
.hsec h2 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 1.1rem; }
.hrow { display: grid; gap: 1.8rem; }
.hrow + .hrow { margin-top: 1.8rem; }
.hprose { display: grid; gap: 1rem; align-content: start; }
.hprose p, .hprose li { max-width: 60ch; }
/* prose that follows a screen reads after it on a phone, and beside it on a wide screen */
@media (min-width: 900px) {
  .hrow.has-fig { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: auto 1fr; column-gap: clamp(3rem, 7vw, 6rem); row-gap: 1rem; align-items: start; }
  .hrow.has-fig .hfig { grid-column: 2; grid-row: 1 / span 2; }
  .hrow.has-fig .hprose { grid-column: 1; grid-row: 1; padding-top: 0.3rem; }
  .hrow.has-fig .hprose.after { grid-row: 2; padding-top: 0; }
}
/* numbered steps: the order is the content */
.hsteps { list-style: none; padding: 0; counter-reset: hstep; display: grid; gap: 1rem; }
.hsteps[start="2"] { counter-reset: hstep 1; }
.hsteps[start="3"] { counter-reset: hstep 2; }
.hsteps[start="4"] { counter-reset: hstep 3; }
.hsteps[start="5"] { counter-reset: hstep 4; }
.hsteps li { counter-increment: hstep; position: relative; padding-left: 2.75rem; }
.hsteps li::before {
  content: counter(hstep); position: absolute; left: 0; top: -0.05rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--card); border: var(--line); display: grid; place-items: center;
  font: 800 1.1rem/1 var(--display);
}
.hfacts { padding-left: 1.2rem; display: grid; gap: 0.65rem; }
.hfacts li::marker { color: var(--ink-mute); }
.htbl { max-width: 50rem; overflow-x: auto; background: var(--card); border: var(--line); border-radius: 3px; box-shadow: var(--shadow); }
.htbl table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.htbl th, .htbl td { text-align: left; padding: 0.7rem 0.9rem; vertical-align: top; border-bottom: 1.5px solid var(--rule); }
.htbl tr:last-child td { border-bottom: 0; }
.htbl th { font: 800 0.95rem/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); background: var(--wall-2); border-bottom: var(--line); }
.htbl td:last-child { white-space: nowrap; }
@media (max-width: 520px) { .htbl td:last-child { white-space: normal; } }

/* the phone */
.hfig { margin: 0; justify-self: center; width: min(100%, 19rem); }
.hphone {
  display: block; position: relative; text-decoration: none; color: inherit;
  padding: 1.55rem 0.55rem 0.55rem; border-radius: 2.4rem;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: 0 5px 0 rgba(21, 28, 32, 0.2);
}
.hisland {
  position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%);
  width: 4.6rem; height: 0.55rem; border-radius: 99px; background: var(--ink);
}
.hscreen { display: block; position: relative; overflow: hidden; border-radius: 1.8rem; background: #fff; isolation: isolate; }
.hcanvas { position: absolute; inset: 0 0 auto 0; }
.hcanvas img { width: 100%; height: auto; display: block; max-width: none; }
/* a window onto a longer screen: the phone opens at the cut and fades */
.hphone.cut-bottom {
  border-bottom: 0; border-radius: 2.4rem 2.4rem 0 0; padding-bottom: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.hphone.cut-bottom .hscreen { border-radius: 1.8rem 1.8rem 0 0; }
/* the ring: everything else dims, the thing to tap stays lit */
.hring {
  position: absolute; pointer-events: none; border-radius: 8px;
  border: 3px solid var(--man); outline: 1.5px solid var(--ink);
  box-shadow: 0 0 0 200vmax rgba(21, 28, 32, 0.26);
}
.help-tile .hring { border-width: 2px; outline-width: 1px; border-radius: 5px; box-shadow: 0 0 0 200vmax rgba(21, 28, 32, 0.22); }
.hring::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .hfig.seen .hring::after { animation: hring-call 1.3s ease-out 0.2s 2; }
}
@keyframes hring-call {
  0% { box-shadow: 0 0 0 0 rgba(243, 198, 35, 0.75); }
  100% { box-shadow: 0 0 0 16px rgba(243, 198, 35, 0); }
}
.hfig figcaption { display: flex; gap: 0.65rem; align-items: baseline; margin-top: 1rem; font-size: 0.97rem; line-height: 1.45; }
.hkey { flex: none; width: 1rem; height: 0.72rem; border-radius: 3px; border: 3px solid var(--man); outline: 1.5px solid var(--ink); transform: translateY(0.05rem); }
/* a screen we have not captured yet, said plainly */
.hscreen.is-todo {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(21, 28, 32, 0.07) 11px 12px), var(--wall-2);
}
.hfig.is-todo .hphone { border-style: dashed; border-color: var(--ink-mute); }
.hfig.is-todo .hisland { background: var(--ink-mute); }
.htodo { display: grid; justify-items: center; gap: 0.7rem; padding: 1.4rem; max-width: 15rem; }
.htodo b {
  font: 800 1.15rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stamp);
  border: 2px solid var(--stamp); padding: 0.35rem 0.55rem 0.25rem; transform: rotate(-3deg); background: var(--card);
}
.htodo span { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.45; }

/* the end of a guide: who to ask, and the next guide */
.help-end { border-top: 2px solid var(--rule); }
.help-end-in { display: grid; gap: 1.1rem; padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem); }
.help-stuck { font-size: 1.08rem; color: var(--ink-soft); }
.help-next {
  display: grid; gap: 0.3rem; justify-self: start; min-width: min(100%, 22rem);
  padding: 0.9rem 1.1rem 1rem; text-decoration: none; color: inherit;
  background: var(--card); border: var(--line); border-radius: 3px; box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.help-next:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(21, 28, 32, 0.22); }
.help-next-label { font: 800 0.9rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stamp); }
.help-next-name { font: 800 1.55rem/1.02 var(--display); }
@media (min-width: 900px) {
  .help-end-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .help-next { justify-self: end; }
}

/* ======================================================================
   Product screens on the module pages and the tour (fpau preview 2).
   The help guide's phone (.hfig) carries the real screen; these add what a
   selling page needs around it: a chalk note on the slate board, a desk
   frame for the full dashboard, the rules as a docket, and the plain list of
   what is not built yet. Screens are real captures on test businesses only.
   ====================================================================== */
/* the chalk note: the board's own handwriting, pointing at the ring */
.hfig.on-board { position: relative; width: min(100%, 21rem); }
.hfig.on-board figcaption { color: var(--board-mute); }
.chalk {
  display: flex; align-items: flex-end; gap: 0.35rem; margin: 0 0 0.9rem;
  font: 400 1.45rem/1.15 var(--hand); color: var(--man); max-width: 17rem;
}
.chalk svg { flex: none; width: 2.4rem; height: 2.4rem; transform: rotate(75deg); }
@media (min-width: 980px) {
  .head-visual .hfig.on-board { width: 100%; padding-left: calc(100% - 22rem); }
  .head-visual .hfig.on-board .chalk {
    position: absolute; left: 0; top: var(--note-at, 40%); width: calc(100% - 23rem); max-width: 13rem;
    flex-direction: column; align-items: flex-end; text-align: right; margin: 0;
  }
  .head-visual .hfig.on-board .chalk svg { transform: none; width: 3.2rem; height: 2.2rem; }
}
/* the desk: the dashboard at full width, drawn like the phone */
.hfig.is-desk { width: 100%; max-width: 75rem; justify-self: stretch; }
.hdesk {
  display: block; position: relative; text-decoration: none; color: inherit;
  padding: 1.3rem 0.55rem 0.55rem; border-radius: 1.1rem;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: 0 5px 0 rgba(21, 28, 32, 0.2);
}
.hdesk .hisland { width: 0.5rem; height: 0.5rem; top: 0.42rem; }
.hdesk .hscreen { border-radius: 0.5rem; }
.page-head.has-desk { padding-bottom: clamp(5rem, 12vw, 8.5rem); }
.tour-desk { position: relative; z-index: 1; margin-top: clamp(-6.5rem, -9vw, -3rem); }
/* the rules a module keeps, written like a job docket */
.docket { max-width: 46rem; background: var(--card); border: var(--line); border-radius: 3px; box-shadow: var(--shadow); }
.docket-row { display: grid; gap: 0.2rem 1.4rem; padding: 0.85rem 1.1rem; border-bottom: 2px dashed var(--rule); }
.docket-row:last-child { border-bottom: 0; }
.docket-row b { font: 800 0.95rem/1.2 var(--display); letter-spacing: 0.07em; text-transform: uppercase; color: var(--stamp); }
.docket-row span { font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }
@media (min-width: 640px) { .docket-row { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: baseline; } }
/* not built yet: each line stamped, never a promise */
.notyet { list-style: none; padding: 0; display: grid; gap: 1rem; max-width: 46rem; }
.notyet li { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 1rem; align-items: baseline; }
.notyet .ny-stamp {
  grid-row: span 2; align-self: start; margin-top: 0.1rem;
  font: 800 0.9rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stamp);
  border: 2px solid var(--stamp); padding: 0.3rem 0.45rem 0.2rem; transform: rotate(-3deg); background: var(--card);
}
.notyet b { font: 800 1.35rem/1.05 var(--display); }
.notyet span:last-child { color: var(--ink-soft); font-size: 0.98rem; }
/* the tour: the dashboard's own rooms as the way round the page */
.rooms { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.rooms li { max-width: none; }
.rooms a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.85rem;
  font: 700 1rem/1 var(--body); color: var(--ink); text-decoration: none;
  background: var(--card); border: 2px solid #0c1317; border-radius: 3px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.rooms a:hover { text-decoration: underline; text-decoration-color: var(--man); }
.page-head .rooms a { color: var(--ink); }
.hsec .kicker { margin-bottom: 0.6rem; }
.hsec + .section-tight { border-top: 2px solid var(--rule); }
.hsec-lede { color: var(--ink-soft); max-width: 60ch; margin: -0.4rem 0 1.4rem; }

/* ======================================================================
   Fix round (fpau preview 2, 8 Oct): the modules hub shows each module's own
   screen; a zoomed crop for screens too small to read inside the phone; the
   tour swaps its desk for a phone below 700px; looser display leading on
   phones, where Big Shoulders' descenders touched the next line.
   ====================================================================== */
@media (max-width: 699px) { h1, h2 { line-height: 1.06; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* the hub: a module with a screen is a row of three (name, words, screen) */
[data-page="modules"] h2 + .builds-lede { margin-top: 0.7rem; }
.mods { display: grid; gap: 1.2rem; margin-top: 0.4rem; }
.mod {
  display: grid; gap: 0.9rem; text-decoration: none; color: inherit;
  background: var(--card); border: var(--line); border-radius: 3px; box-shadow: var(--shadow);
  padding: 1.3rem 1.3rem 1.4rem;
}
a.mod { transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.mod:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(21, 28, 32, 0.22); }
.mod-name { font: 800 2rem/1 var(--display); letter-spacing: 0.005em; }
.mod-price { margin-top: 0.55rem; font: 400 0.92rem/1.35 var(--body); color: var(--ink-mute); }
.mod-price b { color: var(--ink); font-weight: 700; }
.mod-price .sep { margin: 0 0.4rem; color: var(--rule); }
.mod-what { display: grid; gap: 0.8rem; align-content: start; }
.mod-what p { font-size: 0.98rem; color: var(--ink-soft); max-width: 60ch; }
.mod-go { justify-self: start; font: 800 1.05rem/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-ink); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
a.mod:hover .mod-go { color: var(--ink); }
.mod-shot .hscreen { border: 2px solid var(--ink); border-radius: 3px; }
@media (min-width: 860px) {
  .mod { grid-template-columns: 12.5rem minmax(0, 1fr) 17rem; column-gap: 2.2rem; align-items: start; }
  .mod-shot { grid-column: 3; grid-row: 1; }
}
/* a module with no screen to show is a line in a ledger, not a card with a hole */
.mod-lines { list-style: none; padding: 0; margin-top: 1.2rem; background: var(--card); border: var(--line); border-radius: 3px; box-shadow: var(--shadow); }
.mod-lines li { max-width: none; border-bottom: 2px dashed var(--rule); }
.mod-lines li:last-child { border-bottom: 0; }
.mod-line { display: grid; gap: 0.45rem 2.2rem; padding: 1.05rem 1.3rem 1.15rem; text-decoration: none; color: inherit; }
a.mod-line:hover { background: var(--wall); }
.mod-line .mod-name { font-size: 1.6rem; }
.mod-line p { font-size: 0.98rem; color: var(--ink-soft); max-width: 62ch; }
.mod-line .mod-price { margin-top: 0; }
.mod-line .mod-go { margin-top: 0.15rem; font-size: 0.95rem; }
.mod-line .mod-end { display: grid; gap: 0.5rem; justify-items: start; }
@media (min-width: 860px) {
  .mod-line { grid-template-columns: 12.5rem minmax(0, 1fr) 13rem; align-items: baseline; }
  .mod-line .mod-end { justify-self: end; text-align: right; justify-items: end; }
}

/* a crop pulled out of the phone, for a screen whose words are small */
.hfig.is-crop { width: min(100%, 23rem); }
.hcrop {
  display: block; position: relative; overflow: hidden; background: #fff;
  border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 0 5px 0 rgba(21, 28, 32, 0.2);
}
.hcrop img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .hrow.has-fig.fig-wide { grid-template-columns: minmax(0, 1fr) 23rem; } }

/* the tour: the desk needs a wide screen; a phone shows the conversation */
.tour-phone { display: none; }
@media (max-width: 699px) {
  .tour-desk .is-desk { display: none; }
  .tour-phone { display: block; }
  .tour-desk .tour-phone .hfig { margin-inline: auto; }
}

/* /examples/ the yes: the phone, then the going-live list beneath it */
.ex-yes { display: grid; gap: 1.6rem; justify-items: center; }
.ex-yes .shot { width: 100%; }
/* /examples/ a change with no screen: the owner's words beside what came back */
.ex-text { display: grid; gap: 1.1rem 3.2rem; }
@media (min-width: 940px) { .ex-text { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.ex-ask { margin: 0; padding: 0.15rem 0 0.25rem 1.1rem; border-left: 4px solid var(--man); }
.ex-ask p { max-width: 36ch; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; font-style: italic; color: var(--ink); }
.ex-what { display: grid; gap: 0.9rem; }
/* /examples/ after the tap: going live, live on the card, live on the site */
.ex-after-lead { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 60ch; }
.ex-after { display: grid; gap: 1.4rem; margin-top: 1rem; align-items: start; }
/* the two short cards stack beside the tall site picture, so no gap opens under a pair */
@media (min-width: 860px) {
  .ex-after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-after > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
}