/* Landing page: one screen, never scrolls. The body is a fixed-height grid
   (header, hero, product banners, footer) and every size scales with both
   viewport width and height, so the whole page shrinks to fit rather than
   overflow. Wide screens put the copy beside the robot scene; portrait
   screens stack them. scene/shots.mjs fails if any size scrolls. */

:root {
  --bg: #e7e4de;          /* keep in sync with BG in scene/run.sh */
  --bg-lit: #f2f0eb;      /* the studio light on the floor behind the arm */
  --ink: #17181a;
  --muted: #55585d;
  --line: #cdc8bf;
  --accent: #d9532a;      /* the arm's wrist ring and vacuum LED */
  --wa: #25d366;
  --wa-hover: #1ebe5a;
  --gutter: clamp(16px, min(4vw, 5svh), 56px);
  --gap: clamp(8px, 2svh, 24px);
  --display: "Archivo", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100svh;
  margin: 0;
  background: radial-gradient(60% 70% at 72% 50%, var(--bg-lit) 0%, var(--bg) 72%) var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-underline-offset: 4px; }

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

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(10px, 2.4svh, 22px) var(--gutter) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 1.1rem/1 var(--display);
  letter-spacing: -0.015em;
  text-decoration: none;
}

.brand img { filter: brightness(0); width: 30px; height: 30px; }

.top nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  font: 500 0.85rem/1 var(--body);
}

.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

.lang {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;
}

.lang:hover { border-color: var(--ink); }

/* Hero: copy column sized by the headline, scene takes the rest. */
.hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap);
  min-height: 0;
  padding: var(--gap) var(--gutter);
}

.copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

h1 {
  margin: 0;
  font: 900 clamp(1.7rem, min(6.4vw, 9.2svh), 6rem)/0.9 var(--display);
  letter-spacing: -0.04em;
}

h1 .l { display: block; }

h1 em {
  font-style: normal;
  color: var(--accent);
}

.lede {
  margin: clamp(10px, 3svh, 32px) 0 0;
  max-width: 27rem;
  font-size: clamp(0.85rem, min(1.25vw, 2.1svh), 1.2rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(12px, 3.6svh, 40px);
}

.btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.9svh, 17px) clamp(16px, 2.6svh, 24px);
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
  font: 600 clamp(0.85rem, 1.8svh, 1rem)/1 var(--body);
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgb(23 24 26 / 0.55);
  transition: background 0.2s, box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.btn svg { transition: transform 0.3s var(--ease-out); }

.btn:hover {
  background: #000;
  box-shadow: 0 16px 32px -14px rgb(23 24 26 / 0.6);
  transform: translateY(-1px);
}

.btn:hover svg { transform: translateX(3px); }

/* WhatsApp's own green, so the button is recognised before it is read.
   Ink text, not white: white on #25d366 is 2:1, ink is 9:1. */
.btn.wa {
  gap: 9px;
  background: var(--wa);
  color: var(--ink);
  box-shadow: 0 10px 24px -12px rgb(18 140 76 / 0.6);
}

.btn.wa:hover {
  background: var(--wa-hover);
  box-shadow: 0 16px 32px -14px rgb(18 140 76 / 0.65);
}

.btn.wa:hover svg { transform: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Stage: the canvas fills the whole cell. */
.stage {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1svh, 10px);
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.view {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.view canvas,
.view .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.view .poster {
  object-fit: contain;
  transition: opacity 0.6s ease;
}

.view canvas {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.stage.ready canvas { opacity: 1; }
.stage.ready .poster { opacity: 0; }

.tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.6);
  font: 400 0.72rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.tag b { font-weight: 500; }

/* On a very small scene the tags would sit on top of the castles. */
.stage.compact .tag { display: none; }


/* Product banners: 192x24 pixel art (tools/pixelart.py). They wrap into rows
   rather than shrink below 192 px, where the 5x7 lettering stops reading, so
   adding a project needs no CSS change. */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}

.products a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}

/* Whole multiples of 192 px keep every art pixel square on 1x screens;
   below 384 px the banner just fills its column. */
.products img {
  display: block;
  width: min(100%, 384px);
  height: auto;
  image-rendering: pixelated;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(23 24 26 / 0.15);
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.products a:hover img {
  box-shadow: 0 0 0 1px var(--ink), 0 8px 18px -10px rgb(23 24 26 / 0.5);
  transform: translateY(-1px);
}

@media (min-width: 1880px) and (min-height: 900px) {
  .products img { width: min(100%, 576px); }
}

.products .url {
  font: 400 0.7rem/1.2 var(--mono);
  color: var(--muted);
}

.products a:hover .url { color: var(--ink); text-decoration: underline; }

.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: clamp(6px, 1.6svh, 16px) var(--gutter) clamp(8px, 2svh, 18px);
  font: 400 0.7rem/1.4 var(--mono);  /* 11.2px: the floor for links */
  color: var(--muted);
}

/* One entrance: the headline rises line by line, then the rest settles in. */
@media (prefers-reduced-motion: no-preference) {
  h1 .l,
  .lede,
  .actions,
  .products {
    animation: rise 1.1s var(--ease-out) both;
  }

  h1 .l:nth-child(2) { animation-delay: 0.07s; }
  h1 .l:nth-child(3) { animation-delay: 0.14s; }
  h1 .l:nth-child(4) { animation-delay: 0.21s; }
  .lede { animation-delay: 0.26s; }
  .actions { animation-delay: 0.34s; }
  .products { animation-delay: 0.5s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(0.6em); filter: blur(6px); }
  }
}

/* Short screens (landscape phones, small laptops): drop what is only nice to have. */
@media (max-height: 560px) {
  .products .url, .top nav .mail { display: none; }
}

/* Portrait: copy on top, scene in the middle, banners stacked at the bottom. */
@media (max-aspect-ratio: 1/1) {
  body { background: radial-gradient(90% 40% at 50% 60%, var(--bg-lit) 0%, var(--bg) 75%) var(--bg); }

  .top nav .mail { display: none; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  h1 { font-size: clamp(1.5rem, min(12.5vw, 5.4svh), 4.5rem); }

  .lede { font-size: clamp(0.78rem, min(3.8vw, 1.75svh), 1.1rem); max-width: 34rem; }


  .actions { flex-wrap: nowrap; gap: 8px; }

  .btn { gap: 8px; padding: clamp(9px, 1.5svh, 14px) clamp(12px, 3.4vw, 20px); font-size: clamp(0.8rem, 3.6vw, 0.95rem); }

  /* Two per row: each new project costs half a banner of height, not a whole one. */
  .products {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(4px, 1svh, 10px);
  }

  .products li { display: flex; justify-content: center; }

  .products a { width: min(100%, 384px); }

  .products img { width: 100%; }

  .products .url { display: none; }
}

/* Wide portrait (tablets, square windows): three per row still reads, and gives the scene back two rows. */
@media (max-aspect-ratio: 1/1) and (min-width: 700px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .view canvas, .view .poster, .btn, .btn svg, .products img { transition: none; }
}

/* Text pages (privacy): same one-screen grid, the copy in a narrow column. */
.doc-page { grid-template-rows: auto minmax(0, 1fr) auto; }

.doc {
  align-self: center;
  max-width: 40rem;
  padding: var(--gap) var(--gutter);
  font-size: clamp(0.8rem, min(1.6vw, 2svh), 1rem);
}

.doc h1 { font-size: clamp(1.6rem, min(5vw, 7svh), 3.5rem); margin-bottom: 0.6em; }

.doc p { margin: 0 0 0.9em; color: var(--muted); text-wrap: pretty; }

.doc p:first-of-type { color: var(--ink); font-weight: 500; }

.doc .meta { font: 400 0.8em/1.5 var(--mono); }

/* Project pages (greenhouse-os.html): unlike the landing these scroll, so the
   body drops the one-screen grid and everything sits in one centred column
   (.wrap), so every section shares the same left edge. Each section repeats
   one pattern: pixel label, headline, intro, then its content on the grid.
   The stills come from scene/greenhouse.sh, rendered in the castle's studio.
   The pixel face and the board/lime/leaf colours are the banner's own. */
.project-page {
  --wrap: 1200px;
  --board: #1f2e1c;
  --lime: #a8dc5c;
  --leaf: #2f6b22;       /* 5.6:1 on --bg */
  --pixel: "Silkscreen", var(--mono);
  --accent-ink: #a83c18;  /* the accent for small text: 5.5:1 on --bg-lit, 5:1 on --bg */
  --radius: 8px;
  /* What each product page overrides (.p-* below): pixel labels on the floor
     (4.5:1 on --bg at least), the highlight on the board, and the hero's glow. */
  --label: var(--leaf);
  --hi: var(--lime);
  --hero-lit: var(--bg-lit);
  display: block;
  height: auto;
  min-height: 100svh;
  background: var(--bg);
}

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.project-page .top,
.project-page .foot { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-inline: 0; }

.proj h2 {
  margin: 0;
  font: 900 clamp(2.1rem, 4.4vw, 3.9rem)/0.95 var(--display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.gh-num {
  font: 400 1rem/1 var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--label);
}

/* Hero: centred, the clicked banner above the headline, the model on the lit floor below. */
.gh-hero {
  padding: clamp(28px, 6svh, 72px) 0 0;
  text-align: center;
  /* The ellipse ends inside the section, so its bottom edge is plain --bg and leaves no seam. */
  background: radial-gradient(46% 36% at 50% 62%, var(--hero-lit) 0%, var(--bg) 100%);
}

.gh-banner {
  display: block;
  width: 384px;
  max-width: 100%;
  height: auto;
  margin: 0 auto clamp(20px, 4svh, 40px);
  image-rendering: pixelated;
}

.gh-hero h1 { font-size: clamp(2.3rem, min(6.2vw, 8.6svh), 6.4rem); text-wrap: balance; }

.gh-hero .lede {
  max-width: 40rem;
  margin: clamp(16px, 3svh, 28px) auto 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.gh-model {
  position: relative;
  width: min(100% - 2 * var(--gutter), 1120px);
  margin: clamp(8px, 2svh, 24px) auto 0;
}

.gh-model img, .gh-model video { display: block; width: 100%; height: auto; }

.gh-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
  padding: 6px 12px 5px;
  font: 400 0.85rem/1 var(--pixel);
  text-transform: uppercase;
  color: var(--hi);
  background: var(--board);
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgb(23 24 26 / 0.6);
}

/* A short stem from the label down to the thing it names. */
.gh-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  background: var(--board);
}

/* Section pattern: the headline and its intro on the hero's centre axis, then the content on the grid. */
.gh-sec { padding: clamp(72px, 13svh, 160px) 0 0; }

.gh-head { max-width: 46rem; margin: 0 auto clamp(40px, 6svh, 72px); text-align: center; }

.gh-intro {
  margin: 20px auto 0;
  max-width: 36rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--muted);
  text-wrap: pretty;
}

.gh-farm {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}

.gh-photo { margin: 0; }

.gh-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.gh-stats {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  margin: 0;
}

.gh-stats div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 6px;
  padding-block: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}

.gh-stats div:last-child { border-bottom: 1px solid var(--line); }

.gh-stats dd {
  margin: 0;
  font: 900 clamp(2.4rem, 4.4vw, 3.8rem)/0.9 var(--display);
  letter-spacing: -0.04em;
}

.gh-stats dt { color: var(--muted); }

/* Seed to sale: three equal panels on the lit floor colour, joined by arrows. */
.gh-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gh-steps li {
  position: relative;
  padding: clamp(16px, 2vw, 28px);
  background: var(--bg-lit);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.gh-steps li + li::before {
  content: "";
  position: absolute;
  top: 34%;
  left: calc(-0.5 * clamp(16px, 2.4vw, 32px));
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8dc5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px no-repeat var(--board);
  border-radius: 50%;
  z-index: 1;
}

.gh-steps img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  margin-bottom: 12px;
}

.gh-steps .gh-num { margin: 0 0 8px; color: var(--accent-ink); }

.gh-steps h3,
.gh-parts dt {
  margin: 0 0 10px;
  font: 800 clamp(1.5rem, 2.2vw, 2rem)/1 var(--display);
  letter-spacing: -0.03em;
}

.gh-steps p:last-child { margin: 0; color: var(--muted); text-wrap: pretty; }

/* The console chain: one row of steps on the banner's dark board, a signal running along it. */
.gh-chain {
  position: relative;
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--board);
  color: #f4f1ea;
  border-radius: var(--radius);
  overflow: hidden;
}

.gh-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The wire the signal runs along, behind the steps. */
.gh-flow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  border-top: 2px dashed rgb(168 220 92 / 0.5);
}

.gh-flow li {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  font-size: 0.98rem;
  line-height: 1.35;
}

.gh-flow .gh-num,
.gh-task .gh-num {
  justify-self: start;
  padding: 18px 12px 16px;
  min-width: 100%;
  color: var(--lime);
  background: #2b3f27;
  border: 2px solid var(--lime);
  border-radius: 4px;
  text-align: center;
}

.gh-task {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px dashed rgb(168 220 92 / 0.4);
  font-size: 1.05rem;
}

.gh-task .gh-num {
  flex-shrink: 0;
  min-width: 0;
  padding: 10px 14px 9px;
  color: var(--board);
  background: #ffb199;
  border-color: #ffb199;
}

/* The parts are not a sequence: ruled rows, name left, what it is right. */
.gh-parts { max-width: 60rem; margin: 0 auto; }

.gh-parts div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}

.gh-parts div:last-child { border-bottom: 1px solid var(--line); }
.gh-parts dt { margin: 0; }
.gh-parts dd { margin: 0; font-size: 1.05rem; color: var(--muted); text-wrap: pretty; }

.gh-cta {
  margin-top: clamp(72px, 13svh, 160px);
  text-align: center;
}

.gh-cta p { margin: 16px auto 0; max-width: 32rem; color: var(--muted); }
.gh-cta .actions { justify-content: center; margin-top: 32px; }

.back { margin-top: clamp(28px, 5svh, 48px); margin-bottom: clamp(28px, 5svh, 48px); font-size: 0.85rem; }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .gh-farm,
  .gh-steps { grid-template-columns: minmax(0, 1fr); }

  .gh-parts div { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .gh-steps li + li::before { top: 0; left: 50%; transform: translate(-50%, calc(-50% - 0.5 * clamp(16px, 2.4vw, 32px))); rotate: 90deg; }

  .gh-flow { grid-template-columns: minmax(0, 1fr); }
  .gh-flow::before { left: 26px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgb(168 220 92 / 0.5) 0 6px, transparent 6px 12px); }
  .gh-flow li { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; }
  .gh-flow .gh-num { padding: 12px 8px 10px; }

  .gh-banner { width: 288px; }
  .gh-hero h1 .l { display: inline; }
  .gh-pin { font-size: 0.7rem; padding: 4px 8px 3px; }
}

/* The hand-off from the landing: js/leave.js fades the landing out to a blank
   page, then this page builds in: the banner draws itself while the headline
   rises. */
@media (prefers-reduced-motion: no-preference) {
  body > * { transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease; }

  body.leaving > * {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-0.4em);
    pointer-events: none;
  }

  /* The banner draws itself in 24 steps of 8 art pixels, then the copy and the model rise. */
  .gh-banner { animation: draw 0.7s steps(24) both; }

  .gh-hero .lede, .gh-model { animation: rise 1.1s var(--ease-out) both; }
  .gh-hero h1 .l { animation-delay: 0.5s; }
  .gh-hero h1 .l:nth-child(2) { animation-delay: 0.57s; }
  .gh-hero .lede { animation-delay: 0.68s; }
  .gh-model { animation-delay: 0.8s; }

  /* A reading travels the chain: each step lights in turn, then the task. */
  .gh-flow li .gh-num, .gh-task .gh-num { animation: signal 5s steps(1) infinite; }
  .gh-flow li:nth-child(2) .gh-num { animation-delay: 0.6s; }
  .gh-flow li:nth-child(3) .gh-num { animation-delay: 1.2s; }
  .gh-flow li:nth-child(4) .gh-num { animation-delay: 1.8s; }
  .gh-flow li:nth-child(5) .gh-num { animation-delay: 2.4s; }
  .gh-task .gh-num { animation-name: signal-task; animation-delay: 3s; }

  @keyframes signal {
    0% { background: var(--lime); color: var(--board); }
    12% { background: #2b3f27; color: var(--lime); }
  }

  @keyframes signal-task {
    0% { box-shadow: 0 0 0 6px rgb(255 177 153 / 0.35); }
    12% { box-shadow: none; }
  }
  .gh-model { animation-delay: 0.75s; }

  @keyframes draw {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}


/* Cement OS project page: a WhatsApp exchange. Each chat sits on the app's
   wallpaper under a graphite title bar; people write on white, the system
   answers on the pale green of a sent message. Also a caption for
   screenshots of demo data, which must say so. */

.co-chats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}

.co-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 clamp(12px, 1.6vw, 20px) clamp(16px, 2vw, 24px);
  background: #efeae2;
  border-radius: var(--radius);
  overflow: hidden;
}

.co-chat > .gh-num {
  margin: 0 calc(-1 * clamp(12px, 1.6vw, 20px)) 6px;
  padding: 15px clamp(12px, 1.6vw, 20px) 13px;
  color: #f4f1ea;
  background: var(--board);
}

.co-msg {
  max-width: 85%;
  margin: 0;
  padding: 9px 13px 10px;
  border-radius: 10px;
  font-size: 0.98rem;
  line-height: 1.45;
  text-wrap: pretty;
  box-shadow: 0 1px 0 rgb(23 24 26 / 0.13);
}

.co-msg b {
  display: block;
  margin-bottom: 4px;
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.co-in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 2px;
}

.co-out {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 2px;
}

.co-out b { color: #1f7a4a; }  /* 4.8:1 on the bubble */

.co-note {
  align-self: center;
  margin: 0;
  padding: 5px 12px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  background: #f7f3ec;
  border-radius: 6px;
}

.co-shot { border-radius: var(--radius); }

.co-cap {
  max-width: 40rem;
  margin: 16px auto 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
}

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .co-chats { grid-template-columns: minmax(0, 1fr); }
  .co-msg { max-width: 92%; }
}

/* FishAI page: several captioned figures, and a list, under one section head. */
.gh-fig { margin-top: clamp(40px, 6svh, 72px); }
.gh-after { margin-top: clamp(40px, 6svh, 72px); }

/* Each product page wears its banner's palette (tools/pixelart.py) and swaps
   the Greenhouse board for a piece that looks like the product's own world.
   Labels are checked at 4.5:1 on --bg, the headline accent at 3:1. */

/* Cement OS: graphite, steel and safety orange. The replanning prints as a work slip. */
.p-cement {
  --board: #22272b;
  --hi: #e8742a;
  --label: #9a4a16;     /* 4.9:1 on --bg, 6:1 on the slip */
  --accent: #c95f1c;    /* 3.2:1 on --bg */
  --hero-lit: #efece6;
}

/* The drop shadow lives on the wrapper because the mask that punches the
   tear-off edge would cut it away on the paper itself. */
.co-slip {
  max-width: 48rem;
  margin: 0 auto;
  filter: drop-shadow(0 14px 22px rgb(23 24 26 / 0.16));
}

.co-paper {
  padding: 34px clamp(20px, 3.4vw, 44px) 38px;
  background: #fbfaf6;
  -webkit-mask: radial-gradient(circle at 50% 0, #0000 5px, #000 5.5px) top / 16px 51% repeat-x,
                radial-gradient(circle at 50% 100%, #0000 5px, #000 5.5px) bottom / 16px 51% repeat-x;
  mask: radial-gradient(circle at 50% 0, #0000 5px, #000 5.5px) top / 16px 51% repeat-x,
        radial-gradient(circle at 50% 100%, #0000 5px, #000 5.5px) bottom / 16px 51% repeat-x;
}

.co-slip-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font: 500 0.78rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.co-slip ol { margin: 0; padding: 0; list-style: none; counter-reset: row; }

.co-slip li {
  counter-increment: row;
  display: grid;
  grid-template-columns: 2.2rem 9.5rem minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 15px 8px;
  margin-inline: -8px;
  border-bottom: 1px dashed #c9c4ba;
  border-radius: 3px;
}

.co-slip li::before { content: counter(row, decimal-leading-zero); font: 400 0.8rem/1 var(--mono); color: var(--muted); }
.co-slip li b { font: 500 0.82rem/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label); }

/* The rubber stamp at the foot of the slip. */
.co-stamp {
  width: fit-content;
  max-width: 24rem;
  margin: 28px 4px 0 auto;
  padding: 10px 16px 11px;
  border: 3px solid var(--hi);
  border-radius: 4px;
  rotate: -2.5deg;
  color: var(--label);
  font-size: 0.95rem;
  line-height: 1.4;
}

.co-stamp b { display: block; margin-bottom: 3px; font: 500 0.82rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Sinqro V2: the navy and teal of an insurer's app. One claim runs the tracker. */
.p-sinqro {
  --board: #14213d;
  --hi: #2ec4b6;
  --label: #0b6e66;     /* 4.8:1 on --bg */
  --accent: #0f8a7e;    /* 3.3:1 on --bg */
  --hero-lit: #edf0f2;
}

.sq-case {
  overflow: hidden;
  text-align: left;
  background: #fbfcfd;
  border: 1px solid #d3d9e2;
  border-radius: 12px;
  box-shadow: 0 24px 48px -32px rgb(20 33 61 / 0.45);
}

.sq-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px clamp(18px, 2.6vw, 32px);
  color: #e9e4dc;
  background: var(--board);
  font: 500 0.78rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sq-live { display: inline-flex; align-items: center; gap: 8px; color: var(--hi); white-space: nowrap; }
.sq-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hi); }

.sq-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  margin: 0;
  padding: clamp(24px, 3.4vw, 40px) clamp(18px, 2.6vw, 32px) clamp(20px, 3vw, 32px);
  list-style: none;
}

/* The line the claim travels, through the centre of every node. */
.sq-track::before {
  content: "";
  position: absolute;
  top: calc(clamp(24px, 3.4vw, 40px) + 8px);
  left: clamp(18px, 2.6vw, 32px);
  right: clamp(18px, 2.6vw, 32px);
  height: 2px;
  background: #c8d2df;
}

.sq-track li { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 30px; font-size: 0.95rem; line-height: 1.4; color: var(--muted); }

.sq-track li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border: 3px solid var(--board);
  border-radius: 50%;
  background: #fbfcfd;
}

.sq-track b { font: 500 0.8rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--board); }

.sq-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px clamp(18px, 2.6vw, 32px);
  background: #e3f6f4;
  border-top: 1px solid #c4e9e5;
}

.sq-v2 b {
  flex-shrink: 0;
  padding: 6px 10px 5px;
  font: 400 0.9rem/1 var(--pixel);
  color: var(--hi);
  background: var(--board);
  border-radius: 4px;
}

/* The claim's stages: numbered tabs joined by the tracker's line, not arrows. */
.p-sinqro .gh-steps li { padding-top: clamp(22px, 2.6vw, 34px); background: #fbfcfd; border-color: #d3d9e2; }
.p-sinqro .gh-steps li + li::before { width: clamp(16px, 2.4vw, 32px); height: 2px; top: 46px; left: 0; transform: translateX(-100%); background: #c8d2df; border-radius: 0; }
.p-sinqro .gh-steps .gh-num { display: inline-block; padding: 7px 9px 6px; color: var(--hi); background: var(--board); border-radius: 4px; }

/* The fifteen entries, grouped the way the app's sidebar groups them. */
.sq-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: none; }
.sq-menu div { display: block; padding: clamp(20px, 2.4vw, 30px); background: #fbfcfd; border: 1px solid #d3d9e2; border-radius: var(--radius); }
.sq-menu div:last-child { border-bottom: 1px solid #d3d9e2; }
.sq-menu dt { margin-bottom: 12px; font: 500 0.82rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }

/* FishAI: the lab's dark bench and the water's teal. The pipeline ends in the real files. */
.p-fishai {
  --board: #1c211f;
  --hi: #7fd3df;
  --label: #1d6a80;     /* 4.8:1 on --bg, 6:1 on the sheet */
  --accent: #1f7f9a;    /* 3.6:1 on --bg */
  --hero-lit: #edefee;
}

.fa-sheet { display: grid; gap: clamp(20px, 3vw, 32px); }

/* Five steps as the header cells of one sheet. */
.fa-pipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fbfcfc;
  border: 1px solid #cfd6d6;
  border-radius: var(--radius);
  overflow: hidden;
}

.fa-pipe li { display: grid; grid-template-rows: auto 1fr; font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
.fa-pipe li + li { border-left: 1px solid #cfd6d6; }

.fa-pipe b {
  padding: 12px 14px 11px;
  font: 500 0.8rem/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label);
  background: #eaefef;
  border-bottom: 1px solid #cfd6d6;
}

.fa-pipe span { padding: 12px 14px 14px; }

.fa-files { display: grid; gap: clamp(16px, 2.4vw, 28px); }

.fa-file { margin: 0; background: #fbfcfc; border: 1px solid #cfd6d6; border-radius: var(--radius); overflow: hidden; }

/* The file name sits on a tab, the way a sheet's name does. */
.fa-file figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 14px;
  background: var(--board);
  color: #c9d1cf;
  font-size: 0.82rem;
}

.fa-file figcaption b { font: 500 0.85rem/1.2 var(--mono); color: var(--hi); }

/* Wide tables scroll inside their own box, never the page. */
.fa-scroll { overflow-x: auto; }

.fa-file table { width: 100%; border-collapse: collapse; font: 400 0.8rem/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.fa-file th, .fa-file td { padding: 7px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid #e2e7e7; }
.fa-file th { font-weight: 500; color: var(--label); background: #eaefef; }
.fa-file tr > :first-child { color: var(--muted); }
.fa-file .sp { text-align: left; }
.fa-file .sp::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; background: var(--sp); }
.fa-file tbody tr:last-child td { border-bottom: 0; }

.fa-live { margin: 0; color: var(--muted); text-align: center; text-wrap: balance; }
.fa-live::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 12px 1px 4px; border-radius: 50%; background: #d8382b; }

/* REDSERVA: forest, trail and lapacho. Booking a visit is a walk along a marked trail. */
.p-redserva {
  --board: #183126;
  --hi: #e6c88f;
  --label: #a8306b;     /* 5:1 on --bg, 5.5:1 on the map */
  --accent: #c23d82;    /* 3.9:1 on --bg */
  --hero-lit: #eeebe2;
}

/* A topographic sheet: contour lines drawn as a repeating tile. */
.rs-map {
  position: relative;
  padding: clamp(24px, 3.4vw, 44px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160' fill='none' stroke='%23ddd2bc' stroke-width='1.2'%3E%3Cpath d='M0 30c40-14 70 10 110 0s70-22 110-6 70 14 100 4'/%3E%3Cpath d='M0 62c46-10 76 16 120 6s74-26 112-8 60 12 88 2'/%3E%3Cpath d='M0 96c36-6 66 18 104 8s78-24 118-10 66 14 98 4'/%3E%3Cpath d='M0 130c42-12 72 12 114 2s70-20 106-6 70 16 100 6'/%3E%3C/svg%3E") 0 0 / 320px 160px,
    #f3eee4;
  border: 1px solid #ddd2bc;
  border-radius: var(--radius);
}

.rs-path { position: absolute; left: clamp(24px, 3.4vw, 44px); right: clamp(24px, 3.4vw, 44px); top: clamp(24px, 3.4vw, 44px); width: calc(100% - 2 * clamp(24px, 3.4vw, 44px)); height: 120px; overflow: visible; }
.rs-path path { fill: none; stroke: #a8865a; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.rs-trail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: mark; }

/* Each waypoint sits where the path crosses its column: 40 px or 90 px down. */
.rs-trail li { counter-increment: mark; position: relative; display: grid; gap: 8px; align-content: start; padding: 138px clamp(6px, 1vw, 14px) 0; text-align: center; font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
.rs-trail li::before {
  content: counter(mark);
  position: absolute;
  top: var(--y, 40px);
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font: 400 0.95rem/1 var(--pixel);
  color: var(--hi);
  background: var(--board);
  border: 3px solid #f3eee4;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--board);
}

.rs-trail li:nth-child(even) { --y: 90px; }
.rs-trail b { font: 500 0.82rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--board); }

/* The waiting list, on a wooden trail sign. */
.rs-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 40rem;
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 14px 20px;
  color: #f3eee4;
  background: #5a4330;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #6d5440, 0 10px 20px -14px rgb(23 24 26 / 0.7);
}

.rs-sign b { flex-shrink: 0; font: 400 0.9rem/1 var(--pixel); text-transform: uppercase; color: #e6c88f; }

/* The guides, as cards from a field handbook. */
.rs-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: none; }
.rs-guide div { display: block; padding: clamp(20px, 2.4vw, 30px); background: #f3eee4; border: 1px solid #ddd2bc; border-radius: var(--radius); }
.rs-guide div:last-child { border-bottom: 1px solid #ddd2bc; }
.rs-guide dt { margin-bottom: 10px; }

/* Openflight: dusk violet, the trainer's yellow and red. The flight reads as a log with telemetry. */
.p-openflight {
  --board: #1c2a44;
  --hi: #f2c230;
  --label: #4b3f9a;     /* 6.7:1 on --bg */
  --accent: #5a48b0;    /* 5.5:1 on --bg */
  --hero-lit: #edebf0;
}

.of-log { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 46px 0 0; list-style: none; }

/* The flight's time ruler: one tick and time per frame. */
.of-log::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--board); }
.of-log li { position: relative; }
.of-t { position: absolute; top: -46px; left: 0; height: 34px; margin: 0; padding: 14px 0 0 10px; font: 500 0.82rem/1 var(--mono); color: var(--board); }
.of-t::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--board); }

.of-frame { position: relative; margin: 0 0 16px; overflow: hidden; border-radius: var(--radius); background: var(--board); }
.of-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* The telemetry strip along the frame's foot, in the sim's own HUD colours. */
.of-hud {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 26px 14px 11px;
  background: linear-gradient(to top, rgb(28 42 68 / 0.92), rgb(28 42 68 / 0));
  font: 500 0.82rem/1.2 var(--mono);
  color: #fff;
}

.of-hud i { font-style: normal; margin-right: 6px; color: var(--hi); }

.of-log h3 { margin: 0 0 10px; font: 800 clamp(1.5rem, 2.2vw, 2rem)/1 var(--display); letter-spacing: -0.03em; }
.of-log li > p:last-child { margin: 0; color: var(--muted); text-wrap: pretty; }

/* PDCS: night, smoke and amber. The operations are a mission-select screen. */
.p-pdcs {
  --board: #17171b;
  --hi: #f2c230;
  --hero-lit: #ebe7e1;
}

.p-pdcs .gh-steps li { padding: 0 0 clamp(16px, 2vw, 24px); color: #e6dfd2; background: var(--board); border: 0; overflow: hidden; }
.p-pdcs .gh-steps li + li::before { content: none; }
.p-pdcs .gh-steps img { aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 18px; }
.p-pdcs .gh-steps li > :not(img) { margin-inline: clamp(16px, 2vw, 24px); }
.p-pdcs .gh-steps .gh-num { color: var(--hi); }
.p-pdcs .gh-steps .gh-num::before { content: "OP "; }
.p-pdcs .gh-steps p:last-child { color: #b9b2a6; }

/* Corner brackets over each still, like a target box on the HUD. */
.p-pdcs .gh-steps li::after {
  content: "";
  position: absolute;
  inset: 12px 12px auto 12px;
  padding-top: calc(62.5% - 24px);  /* the 16:10 still, 12 px in: padding % follows the width */
  pointer-events: none;
  --c: var(--hi);
  background:
    linear-gradient(var(--c), var(--c)) top left / 22px 2px, linear-gradient(var(--c), var(--c)) top left / 2px 22px,
    linear-gradient(var(--c), var(--c)) top right / 22px 2px, linear-gradient(var(--c), var(--c)) top right / 2px 22px,
    linear-gradient(var(--c), var(--c)) bottom left / 22px 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px 22px,
    linear-gradient(var(--c), var(--c)) bottom right / 22px 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px 22px;
  background-repeat: no-repeat;
}

/* EV charging station software: night blue and a charger's status lights. The hero is the charger's face, the charge is its OCPP log. */
.p-ev {
  --board: #0f1d30;
  --hi: #7fb0ff;
  --label: #2f55b0;     /* 5.4:1 on --bg */
  --accent: #3a66cc;    /* 4.2:1 on --bg */
  --hero-lit: #eceef2;
  --free: #7ee0a3;
  --fault: #ff8f7a;
}

.ov-post {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 32px);
  color: #c9d1dc;
  background: var(--board);
  border-radius: var(--radius);
  text-align: left;
}

.ov-screen { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 clamp(14px, 2vw, 22px); font: 500 0.9rem/1.2 var(--mono); }
.ov-screen b { font: 400 1.1rem/1 var(--pixel); color: var(--hi); }

.ov-conn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }

.ov-conn li {
  display: grid;
  gap: 6px;
  padding: 14px 16px 16px;
  border: 1px solid #24344f;
  border-radius: 6px;
  font: 400 0.85rem/1.3 var(--mono);
}

.ov-conn b { font: 900 2.6rem/1 var(--display); color: #f4f1ea; }

/* State is colour and shape: a ring when free, a filling bar while charging, a square when out. */
.ov-conn i { display: flex; align-items: center; gap: 9px; font: 500 0.9rem/1.2 var(--body); font-style: normal; color: #f4f1ea; }
.ov-conn i::before { content: ""; flex: none; width: 12px; height: 12px; }
.ov-free i::before { border: 2px solid var(--free); border-radius: 50%; }
.ov-out i::before { background: var(--fault); border-radius: 2px; }
.ov-charging i::before { background: var(--hi); border-radius: 50%; }
.ov-charging { position: relative; overflow: hidden; }
.ov-charging::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 81%; background: var(--hi); }

.ov-share { margin: clamp(12px, 1.6vw, 18px) 0 0; font-size: 0.9rem; color: #9aa6b8; }

/* The charge as the virtual charger's own log: dark console, one row per message. */
.ov-log { margin: 0; color: #c9d1dc; background: var(--board); border-radius: var(--radius); overflow: hidden; }

.ov-log figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(16px, 2.2vw, 24px);
  border-bottom: 1px solid #24344f;
  font: 500 0.82rem/1.2 var(--mono);
  color: #9aa6b8;
}

.ov-log figcaption b { font-weight: 500; color: var(--hi); }

.ov-log ol { margin: 0; padding: 0; list-style: none; }

.ov-log li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 4fr);
  grid-template-rows: auto auto;
  gap: 2px clamp(12px, 2vw, 28px);
  align-items: baseline;
  padding: 14px clamp(16px, 2.2vw, 24px);
  border-bottom: 1px solid #1c2c45;
}

.ov-log li:last-child { border-bottom: 0; }
.ov-log time { grid-row: span 2; font: 400 0.82rem/1.3 var(--mono); font-variant-numeric: tabular-nums; color: #9aa6b8; }
.ov-log code { font: 500 0.95rem/1.3 var(--mono); color: #f4f1ea; overflow-wrap: anywhere; }
.ov-log samp { grid-column: 2; font: 400 0.8rem/1.3 var(--mono); color: #9aa6b8; overflow-wrap: anywhere; }
.ov-log li > span { grid-column: 3; grid-row: 1 / span 2; color: #c9d1dc; text-wrap: pretty; }
.ov-out-msg code { color: var(--hi); }

/* Pay first: the receipt beside the power curve of the same charge. */
.ov-money { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }

.ov-receipt { padding: clamp(18px, 2.4vw, 28px); background: #fbfaf7; border: 1px solid var(--line); border-radius: var(--radius); font: 400 0.88rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.ov-receipt-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); font-weight: 500; color: var(--label); }
.ov-receipt dl { margin: 0; }
.ov-receipt div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.ov-receipt dt { color: var(--muted); }
.ov-receipt dd { margin: 0; white-space: nowrap; }
.ov-receipt .ov-total { margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--line); font-weight: 500; }
.ov-receipt .ov-total dt { color: var(--ink); }
.ov-receipt .ov-back { margin-top: 6px; padding: 10px 12px; background: #eef2f8; border-radius: 4px; color: var(--label); font-weight: 500; }
.ov-receipt .ov-back dt { color: var(--label); }

.ov-chart { margin: 0; }
.ov-curve { display: block; width: 100%; height: auto; overflow: visible; }
.ov-grid { stroke: var(--line); stroke-width: 1; }
.ov-tick { font: 400 12px/1 var(--mono); fill: var(--muted); }
.ov-val { font: 500 13px/1 var(--mono); fill: var(--ink); }
.ov-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.ov-end { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.ov-hit { fill: transparent; }
.ov-hit:hover { fill: rgb(58 102 204 / 0.18); }
.ov-chart figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--muted); text-wrap: pretty; }

/* The notifications, as they land on the phone. */
.ov-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }

.ov-notes li { display: grid; align-content: start; gap: 6px; padding: 16px 18px; background: #fbfbfd; border: 1px solid var(--line); border-radius: 16px; }
.ov-notes li > p:first-child { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 0.8rem; color: var(--muted); }
.ov-notes li > p:first-child b { font-weight: 500; color: var(--ink); }
.ov-notes li > p:first-child b::before { content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 8px -4px 0; border-radius: 5px; background: var(--board) linear-gradient(var(--hi), var(--hi)) center / 6px 6px no-repeat; }
.ov-notes li > p:first-child span:last-child { margin-left: auto; }
.ov-notes h3 { margin: 0; font: 600 1.05rem/1.3 var(--body); }
.ov-notes li > p:not(:first-child) { margin: 0; color: var(--ink); }
.ov-notes small { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }

/* The test network as a dot-matrix sign: Paraguay in squares, a lit one per place with chargers. */
.ov-net { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.ov-mapfig { margin: 0; }
/* Sized by height so the board hugs the country instead of letterboxing it. */
.ov-map { display: block; box-sizing: border-box; width: auto; max-width: 100%; height: min(78svh, 760px); margin-inline: auto; padding: clamp(16px, 2.4vw, 32px); background: var(--board); border-radius: var(--radius); }
.ov-land { fill: #22324d; }
.ov-lit { fill: var(--hi); }
.ov-gap { stroke: var(--fault); stroke-width: 3; stroke-dasharray: 6 6; }
.ov-place { font: 500 18px/1 var(--mono); fill: #e6eaf0; paint-order: stroke; stroke: var(--board); stroke-width: 6px; stroke-linejoin: round; }
.ov-gap-t { fill: var(--fault); }

.ov-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }
.ov-rules li { padding: clamp(20px, 2.6vw, 30px); background: var(--bg-lit); border: 1px solid var(--line); border-radius: var(--radius); }
.ov-rules .gh-num { margin: 0 0 12px; }
.ov-rules p:last-child { margin: 0; color: var(--muted); text-wrap: pretty; }

/* BurnLedger: ink, ledger paper and the banner's red, yellow and blue, in flat
   planes with square corners like the product's own site. The hero is the real
   sample record as a document; the check is the CLI's real output. */
.p-burnledger {
  --board: #1b1b1b;
  --hi: #f2b630;        /* 9.4:1 on --board */
  --label: #b4341c;     /* 4.8:1 on --bg */
  --accent: #e0452b;    /* 3.3:1 on --bg */
  --hero-lit: #f3ead7;
  --blue: #1f4fa3;
  --rule: #cbbf9f;
  --term: #e6e1d6;      /* 13:1 on --board */
  --term-dim: #9a948a;  /* 5.7:1 on --board */
  --term-red: #ff8a6e;  /* 7.5:1 on --board */
}

.bl-doc {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--board);
  border-top: 10px solid var(--accent);
  box-shadow: 10px 10px 0 var(--board);
  text-align: left;
}

/* The banner's page breaking into squares, drifting off the sheet's right edge. */
.bl-doc::after {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(100% + 18px);
  width: 8px;
  height: 8px;
  background: var(--accent);
  box-shadow:
    10px 18px 0 var(--accent), 22px 2px 0 var(--hi), 4px 44px 0 var(--blue),
    30px 34px 0 var(--board), 44px 14px 0 var(--accent), 18px 70px 0 var(--hi),
    48px 58px 0 var(--accent), 2px 96px 0 var(--board), 28px 112px 0 var(--accent),
    56px 92px 0 var(--blue), 12px 140px 0 var(--accent), 40px 150px 0 var(--hi);
}

.bl-doc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.6vw, 32px) 0;
  font: 400 0.85rem/1.2 var(--mono);
  color: var(--muted);
}

.bl-doc-head b { font: 400 clamp(1rem, 1.6vw, 1.25rem)/1 var(--pixel); text-transform: uppercase; color: var(--board); }

.bl-id { margin: 8px clamp(18px, 2.6vw, 32px) 0; font: 400 0.82rem/1.3 var(--mono); color: var(--muted); overflow-wrap: anywhere; }

.bl-count {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  margin: clamp(14px, 2vw, 22px) clamp(18px, 2.6vw, 32px);
  padding: clamp(10px, 1.6vw, 18px) 0;
  border-block: 2px solid var(--board);
}

.bl-count > span { display: flex; align-items: baseline; gap: 12px; }
.bl-count b { font: 900 clamp(3rem, 7vw, 5.4rem)/0.85 var(--display); letter-spacing: -0.04em; }
.bl-count > span:last-child b { color: var(--accent); }
.bl-count small { max-width: 6rem; font: 500 0.85rem/1.2 var(--body); color: var(--muted); }
.bl-count i { font: 900 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); font-style: normal; color: var(--rule); }

.bl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: 0 clamp(18px, 2.6vw, 32px); }
.bl-fields div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.bl-fields dt { font: 400 0.78rem/1.6 var(--pixel); text-transform: uppercase; color: var(--label); }
.bl-fields dd { display: grid; align-content: start; gap: 2px; margin: 0; min-width: 0; }
.bl-fields code { font: 500 0.88rem/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.bl-fields small { font-size: 0.8rem; line-height: 1.35; color: var(--muted); }

/* The signature line at the foot of the ledger page. */
.bl-doc-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px) 0;
  padding: 10px 0 clamp(16px, 2.2vw, 24px);
  border-top: 2px solid var(--board);
  font: 400 0.82rem/1.3 var(--mono);
  color: var(--muted);
}

.bl-doc-foot span { font-weight: 500; color: var(--ink); }

/* The record's history as four columns of one ledger sheet. */
.bl-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 2px solid var(--board);
  border-top: 10px solid var(--accent);
}

.bl-ledger li { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; padding: clamp(18px, 2.2vw, 26px); }
.bl-ledger li + li { border-left: 1px solid var(--rule); }
.bl-ledger .gh-num { margin: 0 -6px; padding: 6px 6px 8px; border-bottom: 2px solid var(--board); }
.bl-ledger time { margin-top: 12px; font: 400 0.85rem/1.2 var(--mono); color: var(--muted); }
.bl-ledger .bl-n { margin: 6px 0 14px; font: 900 clamp(2.6rem, 4.6vw, 4rem)/1 var(--display); letter-spacing: -0.04em; }
.bl-ledger .bl-you { color: var(--blue); }
.bl-ledger li:nth-child(3) .bl-n { color: var(--accent); }
.bl-ledger p:last-child { margin: 0; color: var(--muted); text-wrap: pretty; }

/* The check: two terminal panes, the original and the forged copy. */
.bl-terms { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }

.bl-term { margin: 0; color: var(--term); background: var(--board); text-align: left; }

.bl-term figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid #333;
  font: 400 0.82rem/1.3 var(--mono);
  color: var(--term-dim);
}

.bl-term figcaption b { font: 400 0.85rem/1.3 var(--pixel); text-transform: uppercase; color: var(--hi); }
.bl-bad figcaption b, .bl-bad figcaption span, .bl-term.bl-bad mark { color: var(--term-red); }

.bl-term pre {
  margin: 0;
  padding: clamp(14px, 2vw, 22px);
  font: 400 0.8rem/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bl-term kbd { font: inherit; color: #fff; }
.bl-term mark { font-weight: 500; color: var(--hi); background: none; }
.bl-term i { font-style: normal; color: var(--term-dim); }

/* Proves / doesn't prove as a T-account: one rule across, one rule down. */
.bl-t { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 64rem; margin: 0 auto; border-top: 3px solid var(--board); background: linear-gradient(var(--board), var(--board)) 50% 0 / 3px 100% no-repeat; }
.bl-t section { padding: clamp(16px, 2.4vw, 28px) clamp(16px, 3vw, 40px) 0; }
.bl-t h3 { margin: 0 0 8px; font: 400 1rem/1 var(--pixel); text-transform: uppercase; color: var(--label); }
.bl-t ul { margin: 0; padding: 0; list-style: none; }
.bl-t li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); text-wrap: pretty; }
.bl-t li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 10px; background: var(--blue); }
.bl-t section + section li::before { background: var(--accent); }

.bl-laws { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(36px, 5svh, 56px) 0 0; }
.bl-laws span { padding: 8px 14px 7px; border: 2px solid var(--board); font: 500 0.85rem/1.2 var(--mono); }

.bl-dev { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.bl-systems { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-systems li { padding: 7px 12px 6px; background: #fff; border: 1px solid var(--board); font: 500 0.88rem/1.2 var(--body); }
.bl-systems .bl-asserted { background: transparent; border-style: dashed; }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .bl-doc::after { content: none; }
  .bl-doc { box-shadow: 6px 6px 0 var(--board); }
  .bl-fields { grid-template-columns: minmax(0, 1fr); }
  .bl-fields div { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .bl-ledger { grid-template-columns: minmax(0, 1fr); }
  .bl-ledger li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .bl-ledger li { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; gap: 0 16px; }
  .bl-ledger .gh-num, .bl-ledger p:last-child { grid-column: 1 / -1; }
  .bl-ledger .bl-n { grid-column: 2; grid-row: 2; margin: 8px 0 10px; }
  .bl-ledger time { align-self: center; }
  .bl-terms, .bl-dev, .bl-t { grid-template-columns: minmax(0, 1fr); }
  .bl-term pre { font-size: 0.74rem; }
  .bl-t { background: none; }
  .bl-t section + section { border-top: 3px solid var(--board); margin-top: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The record's history runs left to right: each column's heading lights in turn. */
  .bl-ledger .gh-num { animation: bl-tick 6s steps(1) var(--d, 0s) infinite; }
  .bl-ledger li:nth-child(2) .gh-num { --d: 0.8s; }
  .bl-ledger li:nth-child(3) .gh-num { --d: 1.6s; }
  .bl-ledger li:nth-child(4) .gh-num { --d: 2.4s; }
  @keyframes bl-tick { 0% { color: var(--hi); background: var(--board); } 12% { color: var(--label); background: transparent; } }
}

/* OpenFieldRC: the banner's sky blue, mown green and runway grey. The hub is drawn as a
   flying field, one area per kind of pilot, and the account as its real sign-in card. */
.p-openfieldrc {
  --board: #1c2a44;
  --hi: #8fb8de;        /* 6.9:1 on --board */
  --label: #2b5fa8;     /* 5:1 on --bg */
  --accent: #3f8a3a;    /* 3.4:1 on --bg */
  --hero-lit: #eef0f1;
}

/* The field plan: the map framed in the board colour, labels pinned over it. */
.ofr-map { position: relative; border-radius: var(--radius); box-shadow: 0 0 0 clamp(6px, 0.9vw, 10px) var(--board), 0 30px 60px -30px rgb(23 24 26 / 0.55); }
.ofr-map svg { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.ofr-plan .co-cap { max-width: 40rem; margin: clamp(22px, 3svh, 32px) auto 0; text-align: center; }
.ofr-fence { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.ofr-circuit { fill: none; stroke: #fff; stroke-opacity: 0.6; stroke-width: 2; stroke-dasharray: 6 10; }
.ofr-site { fill: none; stroke: var(--board); stroke-width: 3; stroke-dasharray: 12 8; }
.ofr-line { fill: none; stroke: var(--hi); stroke-width: 3; stroke-dasharray: 8 10; }
.ofr-gate rect { fill: none; stroke: #d8382b; stroke-width: 6; }
.ofr-path path { fill: none; stroke: var(--bg); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }

.ofr-pin { display: flex; align-items: center; gap: 8px; margin: 0; }
.ofr-pin b { display: grid; place-items: center; width: 1.35em; height: 1.35em; margin: -2px 0 -2px -4px; font-weight: 400; color: var(--board); background: var(--hi); border-radius: 2px; }

/* The areas as field signs: a dark board with the letter, then what is in that area. */
.ofr-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: start; margin: 0; padding: 0; list-style: none; }
.ofr-areas li { overflow: hidden; background: var(--bg-lit); border: 1px solid var(--line); border-radius: var(--radius); }
.ofr-sign { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px clamp(16px, 2vw, 24px); font: 400 0.95rem/1.25 var(--pixel); text-transform: uppercase; color: var(--hi); background: var(--board); }
.ofr-sign b { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; font-weight: 400; font-size: 1.3rem; color: var(--board); background: var(--hi); border-radius: 3px; }
.ofr-prod { padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px); }
.ofr-prod + .ofr-prod { border-top: 2px dashed var(--line); }
.ofr-prod h3 { margin: 0 0 10px; font: 800 clamp(1.3rem, 1.9vw, 1.6rem)/1.1 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.ofr-prod p { margin: 0; color: var(--muted); text-wrap: pretty; }
.ofr-prod .ofr-state { display: flex; align-items: center; gap: 8px; margin-top: 16px; font: 500 0.8rem/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label); }
/* Filled when you can fly it today, hollow while it is still being built. */
.ofr-state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.ofr-later .ofr-state::before { background: transparent; box-shadow: inset 0 0 0 2px var(--label); }
.ofr-later h3 { color: var(--muted); }
.ofr-more { display: inline-block; margin-top: 14px; font-weight: 500; color: var(--label); text-underline-offset: 3px; }

/* The sign-in card, set in the accounts site's own paper, ink and wordmark. */
.ofr-acct { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ofr-login { margin: 0; }
.ofr-window { overflow: hidden; background: #f3f0e8; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -34px rgb(23 24 26 / 0.5); }
.ofr-bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; background: var(--board); }
.ofr-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3a4a66; }
.ofr-bar b { margin-left: 10px; padding: 4px 12px; font: 400 0.8rem/1.2 var(--mono); color: #d6deea; background: #2a3a58; border-radius: 4px; overflow-wrap: anywhere; }
/* Body text in the page face: the site loads Archivo from 600 up, and the card sets its body at 400. */
.ofr-card { max-width: 520px; margin: clamp(18px, 3vw, 40px) auto; padding: clamp(20px, 3vw, 36px); font: 400 1rem/1.55 var(--body); color: #17201b; background: #fff; border: 1px solid #cfc8b6; border-radius: 14px; }
.ofr-card p { margin: 0 0 14px; }
.ofr-mark { font: 800 1.15rem/1 var(--display); }
.ofr-mark b { margin-left: 4px; padding: 3px 6px 2px; font-size: 0.7rem; letter-spacing: 0.08em; border: 2px solid currentColor; border-radius: 4px; }
.ofr-card .ofr-mark { margin-bottom: 22px; }
.ofr-eyebrow { font: 700 0.8rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #4a544d; }
.ofr-h { font: 800 clamp(1.6rem, 2.6vw, 2.3rem)/1.05 var(--display); letter-spacing: -0.02em; }
.ofr-card .ofr-google { display: flex; align-items: center; gap: 12px; width: fit-content; margin: 22px 0 18px; padding: 9px 16px 9px 10px; font: 500 0.95rem/1.2 var(--body); color: #1f1f1f; background: #fff; border: 1px solid #c8cccf; border-radius: 4px; }
.ofr-g { display: grid; place-items: center; width: 22px; height: 22px; font: 700 0.85rem/1 var(--body); color: #fff; background: #2d5a3a; border-radius: 50%; }
.ofr-dest { font-size: 0.92rem; color: #4a544d; overflow-wrap: anywhere; }
.ofr-card .ofr-fine { margin: 0; padding-top: 14px; font-size: 0.82rem; color: #4a544d; border-top: 1px solid #e3ded2; }
.ofr-login .co-cap { margin-top: 14px; }

.ofr-keeps .gh-num { margin: 0 0 18px; }
.ofr-keeps dl { margin: 0; }
.ofr-keeps dl div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.ofr-keeps dl div:last-child { border-bottom: 1px solid var(--line); }
.ofr-keeps dt { font: 500 0.82rem/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label); }
.ofr-keeps dd { margin: 0; color: var(--muted); text-wrap: pretty; }
.ofr-never { margin: 22px 0 0; padding: 14px 18px; color: var(--ink); background: var(--bg-lit); border: 1px solid var(--line); border-radius: var(--radius); text-wrap: pretty; }

/* The guides: a pilot's kneeboard with the stall recovery on it, beside the guides it comes from. */
.ofr-learn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ofr-knee { margin: 0; }
.ofr-board { position: relative; padding: clamp(34px, 3.4vw, 44px) clamp(20px, 2.6vw, 32px) clamp(20px, 2.6vw, 30px); color: #dfe6f0; background: var(--board); border-radius: var(--radius); }
/* The clip that holds the card to the board. */
.ofr-board::before { content: ""; position: absolute; top: -10px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: linear-gradient(#8492a6 22px, #5e6f86 0); border-radius: 4px; }
.ofr-knee-h { margin: 0 0 20px; font: 400 1rem/1.3 var(--pixel); text-transform: uppercase; color: var(--hi); }
.ofr-board ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.ofr-board li { position: relative; padding: 0 0 16px 46px; counter-increment: step; text-wrap: pretty; }
.ofr-board li::before { content: counter(step); position: absolute; top: -2px; left: 0; display: grid; place-items: center; width: 30px; height: 30px; font: 500 0.95rem/1 var(--mono); color: var(--board); background: var(--hi); border-radius: 4px; }
.ofr-board li b { display: block; font: 700 1.05rem/1.3 var(--display); color: #fff; }
.ofr-knee-note { margin: 4px 0 0; padding-top: 14px; font-size: 0.92rem; color: #ffc2b8; border-top: 1px dashed #3a4a66; }
.ofr-knee .co-cap { margin-top: 14px; }

.ofr-guides { margin: 0; padding: 0; list-style: none; counter-reset: guide; }
.ofr-guides li { position: relative; padding: clamp(18px, 2.4vw, 26px) 0 clamp(18px, 2.4vw, 26px) 3.4rem; border-top: 1px solid var(--line); counter-increment: guide; }
.ofr-guides li:last-child { border-bottom: 1px solid var(--line); }
.ofr-guides li::before { content: "0" counter(guide); position: absolute; top: clamp(22px, 2.6vw, 30px); left: 0; font: 400 1rem/1 var(--pixel); color: var(--label); }
.ofr-guides a { font: 800 clamp(1.25rem, 1.9vw, 1.6rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ofr-guides a:hover { color: var(--label); }
.ofr-guides p { margin: 8px 0 0; color: var(--muted); text-wrap: pretty; }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .ofr-pin { padding: 4px 6px 3px; }
  .ofr-pin b { margin: 0; }
  .ofr-pin-name, .ofr-minor { display: none; }
  .ofr-areas, .ofr-acct, .ofr-learn { grid-template-columns: minmax(0, 1fr); }
  .ofr-keeps dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* The landing keeps its buttons on one row in portrait; this page's first label is too long for that. */
  .p-openfieldrc .gh-cta .actions { flex-wrap: wrap; }
}

/* The quad flies its racing line, and a trainer passes over the runway on its circuit. */
@media (prefers-reduced-motion: no-preference) {
  .ofr-line { animation: ofr-race 1.6s linear infinite; }
  .ofr-flyer { animation: ofr-pass 9s linear infinite; }

  @keyframes ofr-race { to { stroke-dashoffset: -36; } }

  @keyframes ofr-pass {
    0% { transform: translateX(300px); opacity: 0; }
    8%, 88% { opacity: 1; }
    100% { transform: translateX(80px); opacity: 0; }
  }
}

/* Cult of Claude: the banner's night, cream and terminal orange. The hero is a real search on the
   site, its cards as the site draws them; the search itself is the funnel the Worker narrows. */
.p-cultofclaude {
  --board: #0f0e0c;
  --hi: #f0a35a;
  --label: #9c4a17;     /* 4.9:1 on --bg, 5.9:1 on the paper panels */
  --accent: #b85f25;    /* 3.5:1 on --bg */
  --hero-lit: #efe9df;
  --card: #1a1815;
  --rule: #2e2a25;
  --cream: #efe6d6;
  --dim: #a39d92;       /* 6.6:1 on --card */
  --paper: #fbfaf7;
}

.cc-win {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 28px);
  color: var(--cream);
  background: var(--board);
  border-radius: var(--radius);
  text-align: left;
}

.cc-query {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 18px;
  color: var(--dim);
  background: var(--card);
  border: 1px solid #3a3530;
  border-radius: 10px;
}

.cc-query b { font: 500 1.05rem/1.2 var(--body); color: var(--cream); }
.cc-query b::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -0.2em; background: var(--hi); }

.cc-found { margin: 18px 0 14px; font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }

.cc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }

.cc-cards li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 10px 12px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.cc-cards h3 { margin: 0; font: 600 1.02rem/1.3 var(--body); color: var(--cream); }
.cc-cards b { align-self: start; padding: 3px 8px; font: 500 0.8rem/1.2 var(--mono); color: var(--hi); background: #3a2414; border-radius: 6px; }

/* Two lines, as the site's cards cut them. */
.cc-cards p {
  grid-column: 1 / -1;
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--dim);
}

.cc-cards small { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 0.8rem; color: var(--dim); }
.cc-cards i { font-style: normal; }
.cc-cards i::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--hi); }

/* The query narrowing, one row per file the Worker reads. Bar length is log10 of the count. */
.cc-funnel { margin: 0; padding: clamp(18px, 2.6vw, 30px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }

.cc-funnel figcaption { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font: 500 0.85rem/1.2 var(--mono); color: var(--label); }
.cc-funnel figcaption span { color: var(--muted); }

.cc-funnel ol { margin: 0; padding: 0; list-style: none; }

.cc-funnel li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 6fr) minmax(0, 5fr);
  gap: 4px clamp(14px, 2.4vw, 32px);
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.cc-funnel li > b { font: 900 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; text-align: right; }
.cc-funnel li > p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.cc-funnel li > p::after { content: ""; display: block; width: var(--w); height: 12px; margin-top: 8px; background: var(--accent); border-radius: 2px; }
.cc-funnel li:nth-last-child(-n + 2) > p::after { background: var(--board); }
.cc-funnel li > span { font-size: 0.92rem; color: var(--muted); text-wrap: pretty; }
.cc-funnel code, .cc-forms code, .cc-path code { font: 400 0.9em/1 var(--mono); }

.cc-sent { display: flex; align-items: baseline; gap: 16px; margin: 18px 0 0; padding: 16px 20px; color: var(--cream); background: var(--board); border-radius: 6px; }
.cc-sent b { flex: none; font: 900 2rem/1 var(--display); letter-spacing: -0.03em; color: var(--hi); }

/* Five stations along one rail, a node on the rail for each. */
.cc-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none; counter-reset: station; }
.cc-path li { counter-increment: station; position: relative; padding-top: 26px; border-top: 3px solid var(--board); }
.cc-path li::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; background: var(--hi); border: 3px solid var(--board); }
.cc-path .gh-num { margin: 0 0 10px; }
.cc-path .gh-num::before { content: counter(station) " · "; }
.cc-path p:last-child { margin: 0; font-size: 0.95rem; color: var(--muted); text-wrap: pretty; }

/* The quality gate as a two-column scoresheet: what adds, what takes away. */
.cc-gate { margin-inline: 0; margin-bottom: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.cc-gate figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 2.2vw, 24px); border-bottom: 1px solid var(--line); font: 500 0.85rem/1.3 var(--mono); }
.cc-gate figcaption > span { color: var(--label); }
.cc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-cols dl { margin: 0; padding: 6px clamp(16px, 2.2vw, 24px) 12px; }
.cc-cols div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.cc-cols div:last-child { border-bottom: 0; }
.cc-cols dt { font-size: 0.93rem; }
.cc-cols dd { margin: 0; font: 500 0.9rem/1.3 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-plus dd { color: #2f6b22; }
.cc-minus { border-left: 1px solid var(--line); }
.cc-minus dd { color: #b0301e; }

/* Where each kind lands: the ~/.claude tree beside the three install forms. */
.cc-install { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.cc-term { margin: 0; color: var(--dim); background: var(--board); border-radius: var(--radius); overflow: hidden; }
.cc-term figcaption { padding: 11px 20px; border-bottom: 1px solid var(--rule); font: 500 0.85rem/1.2 var(--mono); color: var(--hi); }
.cc-term pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; font: 400 0.92rem/1.75 var(--mono); }
.cc-term code { font: inherit; }
.cc-term b { font-weight: 500; color: var(--cream); }
.cc-term i { font-style: normal; color: var(--hi); }
.cc-forms { max-width: none; }
.cc-forms div { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); padding-block: 22px; }
.cc-forms dt { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }

.cc-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; }
.cc-count div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 3px solid var(--board); }
.cc-count dd { margin: 0; font: 900 clamp(2rem, 3.8vw, 3.4rem)/0.95 var(--display); letter-spacing: -0.04em; }
.cc-count dt { color: var(--muted); }

/* The category pills, in the site's own dark. */
.cc-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(32px, 5svh, 56px) 0 0; padding: 0; list-style: none; }
.cc-cats li { padding: 7px 14px; font-size: 0.88rem; color: var(--cream); background: var(--board); border-radius: 999px; }
.cc-cats li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--hi); vertical-align: 0.1em; }
.cc-cats b { margin-left: 6px; font: 400 0.8rem/1 var(--mono); color: var(--dim); }

.cc-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.cc-rules li { padding: clamp(18px, 2.2vw, 26px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.cc-rules .gh-num { margin: 0 0 12px; }
.cc-rules p:last-child { margin: 0; color: var(--muted); text-wrap: pretty; }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .cc-cards, .cc-path, .cc-cols, .cc-install, .cc-rules { grid-template-columns: minmax(0, 1fr); }
  .cc-funnel li { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .cc-funnel li > b { font-size: 1.35rem; }
  .cc-funnel li > span { grid-column: 2; }
  .cc-sent { flex-direction: column; gap: 8px; }
  .cc-path { gap: 0; padding-left: 6px; }
  .cc-path li { padding: 0 0 22px 28px; border-top: 0; background: linear-gradient(var(--board), var(--board)) 0 0 / 3px 100% no-repeat; }
  .cc-path li:last-child { padding-bottom: 0; }
  .cc-path li::before { top: 0; left: -9px; }
  .cc-minus { border-left: 0; border-top: 1px solid var(--line); }
  .cc-forms div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cc-count { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-term pre { padding-inline: 16px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .cc-query b::after { animation: caret 1.1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
}

/* Shrimp Crash: the site's ink, paper and cherry red. The hero is its grading chart, one column per colour. */
.p-shrimpcrash {
  --board: #0e0f10;
  --hi: #e0392b;
  --label: #a8151b;     /* 5.9:1 on --bg */
  --accent: #c8102e;    /* 4.6:1 on --bg */
  --hero-lit: #f4f2ec;
}

/* Square columns, no radius and no shadow, as the site draws them. Names run up the column. */
.sc-chart {
  display: flex;
  height: clamp(220px, 38svh, 380px);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--board);
}

.sc-chart li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  color: rgb(255 255 255 / 0.92);
  background: var(--g);
}

.sc-chart li.sc-light { color: rgb(0 0 0 / 0.82); }
.sc-chart b, .sc-chart small { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; }
.sc-chart b { font: 800 clamp(0.72rem, 1.2vw, 1rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.sc-chart small { order: -1; font: 500 0.62rem/1 var(--mono); letter-spacing: 0.06em; opacity: 0.8; }

/* The two Caridina sit outside the cap: a dashed rule sets them apart. */
.sc-chart li:not(.sc-cari) + .sc-cari { border-left: 2px dashed var(--hero-lit); }

.sc-pledge { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.sc-bars dl { display: grid; gap: 18px; margin: 0; }
.sc-bars dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; }
.sc-bars dt { color: var(--muted); }
.sc-bars dd { margin: 0; font: 900 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); color: var(--ink); }

/* Bar length is price over $8; zero still draws a sliver so "free" has a mark. */
.sc-bars dl div::after {
  content: "";
  grid-column: 1 / -1;
  width: max(var(--w), 6px);
  height: 18px;
  background: var(--ink);
}

.sc-bars .sc-cap::after { background: var(--hi); }
.sc-bars .sc-cap dd { color: var(--label); }
.sc-bars .sc-free::after { background: var(--line); }

/* The listing form with the server's refusal under the price field. */
.sc-panel { padding: clamp(18px, 2.4vw, 28px); background: var(--hero-lit); border: 2px solid var(--board); }
.sc-field { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 0 0 8px; border-bottom: 3px solid var(--accent); font: 800 1.3rem/1.1 var(--display); text-transform: uppercase; }
.sc-field b { font: 500 1.1rem/1 var(--mono); }
.sc-err { margin: 14px 0 0; font: 500 0.9rem/1.45 var(--mono); color: var(--label); }
.sc-err::before { content: "× "; font-weight: 700; }

.sc-stats dt { text-wrap: pretty; }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .sc-pledge { grid-template-columns: minmax(0, 1fr); }
  .sc-chart small { display: none; }
  .sc-chart { justify-content: stretch; }
}

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .co-slip li { grid-template-columns: 2rem minmax(0, 1fr); gap: 6px 10px; }
  .co-slip li > span { grid-column: 2; }
  .co-stamp { margin-inline: auto; }

  .sq-track { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sq-track::before { top: clamp(24px, 3.4vw, 40px); bottom: clamp(20px, 3vw, 32px); left: calc(clamp(18px, 2.6vw, 32px) + 8px); right: auto; width: 2px; height: auto; }
  .sq-track li { padding: 0 0 0 32px; }
  .p-sinqro .gh-steps li + li::before { width: 2px; height: clamp(16px, 2.4vw, 32px); top: 0; left: 50%; transform: translate(-50%, -100%); rotate: none; }
  .sq-menu { grid-template-columns: minmax(0, 1fr); }

  .fa-pipe { grid-template-columns: minmax(0, 1fr); }
  .fa-pipe li { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: none; }
  .fa-pipe li + li { border-left: 0; border-top: 1px solid #cfd6d6; }
  .fa-pipe b { border-bottom: 0; border-right: 1px solid #cfd6d6; }

  .rs-path { display: none; }
  .rs-trail { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rs-trail::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 18px; border-left: 3px dotted #a8865a; }
  .rs-trail li { padding: 6px 0 0 56px; text-align: left; }
  .rs-trail li::before, .rs-trail li:nth-child(even)::before { top: 0; left: 0; translate: none; }
  .rs-guide { grid-template-columns: minmax(0, 1fr); }

  .of-log { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 28px; }
  .of-log::before { top: 0; bottom: 0; left: 0; right: auto; border-top: 0; border-left: 2px solid var(--board); }
  .of-t { position: relative; top: auto; display: block; height: auto; margin: 0 0 10px -28px; padding: 0 0 0 14px; line-height: 1.2; }
  .of-t::before { top: 50%; width: 10px; height: 2px; }

  .ov-conn { grid-template-columns: minmax(0, 1fr); }
  .ov-conn li { grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .ov-conn b { font-size: 2rem; }
  .ov-log li { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .ov-log li > span { grid-column: 2; grid-row: auto; margin-top: 6px; }
  .ov-money, .ov-notes, .ov-rules, .ov-net { grid-template-columns: minmax(0, 1fr); }
  .ov-map { height: auto; width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The same running signal as the Greenhouse chain, in each page's own piece. */
  .co-slip li, .sq-track li::before, .fa-pipe b, .rs-trail li::before { animation: 5s steps(1) var(--d, 0s) infinite; }
  .co-slip li { animation-name: slip; }
  .sq-track li::before { animation-name: node; }
  .fa-pipe b { animation-name: cell; }
  .rs-trail li::before { animation-name: mark; }
  :is(.co-slip, .sq-track, .fa-pipe, .rs-trail) li:nth-child(2) { --d: 0.6s; }
  :is(.co-slip, .sq-track, .fa-pipe, .rs-trail) li:nth-child(3) { --d: 1.2s; }
  :is(.co-slip, .sq-track, .fa-pipe, .rs-trail) li:nth-child(4) { --d: 1.8s; }
  :is(.co-slip, .sq-track, .fa-pipe, .rs-trail) li:nth-child(5) { --d: 2.4s; }

  @keyframes slip { 0% { background: rgb(232 116 42 / 0.14); } 12% { background: transparent; } }
  @keyframes node { 0% { background: var(--hi); border-color: var(--hi); } 12% { background: #fbfcfd; border-color: var(--board); } }
  @keyframes cell { 0% { background: var(--board); color: var(--hi); } 12% { background: #eaefef; color: var(--label); } }
  .ov-charging::after { animation: fill 6s linear infinite; }
  @keyframes fill { from { width: 15%; } to { width: 81%; } }
  @keyframes mark { 0% { background: var(--label); color: #fff; } 12% { background: var(--board); color: var(--hi); } }
}