/* ==========================================================================
   Kozachenko · Автоматизація бізнесу — stylesheet

   Direction C4 "Графіт", approved on the design canvas 2026-09-07 and
   written down in ~/automation/DESIGN-BRIEF.md §11. The rules of the
   language, so a new block can be added without re-deciding them:

     · Ink (#1F1D1A) carries text and the dark bands — masthead, hero,
       result panels, footer. Paper (#F5F2EC) is the ground, paper-2 the
       alternating band.
     · Mustard is action and nothing else: every primary button, the arrow
       in the logo. It never marks a heading or a link.
     · Green is the result on paper, mint the result on ink. Numbers that
       carry the argument are set in the mono face.
     · No cards. Sections are columns separated by rules; the only filled
       boxes are the form, the price note and the aside panels.
     · Radii: 4px buttons, 6px panels and fields, 10px the screenshot
       frame, 999px badges.

   Reference widths: 375 mobile, 1440 desktop (1248 of content). Type and
   spacing interpolate with clamp(); the grids fold at two breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #f5f2ec;
  --paper-2: #edeae3;
  --white: #ffffff;

  /* Ink and its dark-band companions */
  --ink: #1f1d1a;
  --muted: #6b665e;      /* secondary text on paper */
  --faint: #726c62;      /* "was" numbers, decoration */
  --rule: #dad5cb;
  --dark-muted: #a8a298; /* secondary text on ink */
  --dark-rule: rgba(245, 242, 236, 0.12);
  --dark-panel: rgba(245, 242, 236, 0.06);

  /* Mustard — action only */
  --amber: #e0a94a;
  --amber-hover: #d09b3c;
  --amber-soft: #f6ead8;
  --amber-ink: #5a3a0c;

  /* Result: green on paper, mint on ink */
  --green: #1f5f4a;
  --green-hover: #174a3a;
  --mint: #7dd3a8;

  --focus: var(--green);

  /* Type. Self-hosted subsets cut by tools/make-fonts.py. */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(1.75rem, 0.9rem + 5.2vw, 4.75rem);      /* 31 → 34 → 76 */
  --fs-h1: clamp(1.875rem, 1.15rem + 3vw, 3.5rem);         /* 30 → 56 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);       /* 28 → 42 */
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);     /* 19 → 22 */
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); /* 17 → 21 */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16 → 18 */
  --fs-small: 0.9375rem;                                   /* 15 */
  --fs-eyebrow: 0.8125rem;                                 /* 13 */
  --fs-number: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);       /* 32 → 52 */

  /* Rhythm */
  --wrap: 78rem;      /* 1248px of content inside a 1440px page */
  --measure: 40rem;
  --gutter: clamp(1.25rem, 0.3rem + 4vw, 6rem);
  --section-y: clamp(3.25rem, 2rem + 4.5vw, 5.5rem);
  --gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
  --r-btn: 4px;
  --r-panel: 6px;
  --r-shot: 10px;
  --tap: 2.75rem;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

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

img {
  height: auto;
}

a {
  color: var(--green);
  text-decoration: none;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

a:hover {
  color: var(--green-hover);
}

/* Links in running text are marked, not underlined: green at rest, and on
   hover a mustard highlight lights up behind the words — the rule is left to
   the masthead nav, the one place a line is not noise. box-decoration-break
   keeps the highlight whole when a link wraps across two lines. */
.prose a:not([class]),
p > a:not([class]) {
  font-weight: 500;
  padding-inline: 0.15em;
  margin-inline: -0.15em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* The highlight wipes in from the left rather than fading on: movement is
     what catches a long-sighted eye that a quiet tint alone does not. */
  background-image: linear-gradient(var(--amber), var(--amber));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  transition:
    background-size 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s ease;
}

.prose a:not([class]):hover,
p > a:not([class]):hover {
  color: var(--ink);
  background-size: 100% 100%;
}

strong {
  font-weight: 600;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

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

::selection {
  background: var(--amber);
  color: var(--ink);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Shared pieces
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 800;
}

.skip-link:focus {
  left: 0;
}

/* Bands. A section is either paper, paper-2 or ink; the dark one repaints
   its own links, rules and secondary text, so any block can live in it. */
.section {
  padding-block: var(--section-y);
}

.band--alt {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}

.band--dark {
  background: var(--ink);
  color: var(--paper);
}

.band--dark a {
  color: var(--paper);
}

.band--dark a:hover {
  color: var(--mint);
}

.band--dark .prose a:not([class]),
.band--dark p > a:not([class]) {
  background-image: linear-gradient(var(--mint), var(--mint));
}

.band--dark .prose a:not([class]):hover,
.band--dark p > a:not([class]):hover {
  color: var(--ink);
  background-size: 100% 100%;
}

/* A wipe is decoration; when the reader asks for less motion it just lands. */
@media (prefers-reduced-motion: reduce) {
  .prose a:not([class]),
  p > a:not([class]) {
    transition: none;
  }
}

.band--dark .eyebrow {
  color: var(--mint);
}

.band--dark .quiet,
.band--dark .lead {
  color: var(--dark-muted);
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.4;
}

.label {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiet {
  color: var(--muted);
}

/* Numbers that carry the argument: "≈ 20 с", "22 роки". */
.num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25em 0.85em;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Buttons. Filled is mustard and means "do the thing"; ghost is an outline
   that takes the colour of whatever ground it stands on. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.9375rem 1.75rem;
  border: 1.5px solid var(--amber);
  border-radius: var(--r-btn);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
  background: var(--amber-hover);
  border-color: var(--amber-hover);
  color: var(--ink);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* A filled button keeps its ink text inside a dark band: the rule above
   paints every link in the band paper, and paper on mustard is 1.9:1 —
   the demo band's "Відкрити демо" was unreadable because of it. Placed
   before the ghost rules on purpose: they are as specific as this one and
   win by coming later, which is what a ghost button in a dark band wants. */
.band--dark .btn,
.band--dark .btn:hover {
  color: var(--ink);
}

.band--dark .btn--ghost,
.hero .btn--ghost {
  border-color: rgba(245, 242, 236, 0.4);
  color: var(--paper);
}

.band--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: rgba(245, 242, 236, 0.12);
  border-color: var(--paper);
  color: var(--paper);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.6875rem 1.25rem;
  font-size: 0.9375rem;
}

/* A section's opening: eyebrow, title, lead, sometimes an action on the
   right that drops under the text when there is no room for it. */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.section__intro {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 34em;
}

.section__title {
  font-size: var(--fs-h2);
}

.section__note {
  color: var(--muted);
  font-size: 1.0625rem;
}

.section__coda {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  max-width: var(--measure);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.section__more {
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.section__intro--spaced {
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

.lead {
  max-width: 34em;
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* A bulleted list, green dots, used inside prose and asides. */
.bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bullets li {
  position: relative;
  padding-left: 1.125em;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* --------------------------------------------------------------------------
   4. Masthead
   -------------------------------------------------------------------------- */

header {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--dark-rule);
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  min-height: 4.25rem;
  padding-block: 0.75rem;
}

.masthead__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}

.masthead__mark:hover {
  color: var(--paper);
  text-decoration: none;
}

.masthead__mark .wordmark {
  height: 2.125rem;
  width: auto;
}

.masthead__dot {
  color: var(--dark-muted);
}

.masthead__tagline {
  font-size: 0.875rem;
  color: var(--dark-muted);
}

.masthead__end,
.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.6vw, 1.75rem);
}

.masthead__nav a {
  color: var(--paper);
  text-decoration: none;
  font-size: 1rem;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.masthead__nav a:hover {
  color: var(--paper);
  text-decoration: none;
  border-bottom-color: var(--paper);
}

.masthead__nav [aria-current="page"] {
  font-family: var(--font-heading);
  font-weight: 600;
  border-bottom-color: var(--amber);
}

/* Language switcher, masthead shape: a <details> dropdown, no JavaScript. */
.langpick {
  position: relative;
}

.langpick__toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  padding: 0 0.25rem;
  font-size: 0.875rem;
  color: var(--dark-muted);
}

.langpick__toggle::-webkit-details-marker {
  display: none;
}

.langpick__toggle::after {
  content: "";
  margin-left: 0.4em;
  border: 0.3em solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
  transform: translateY(0.1em);
}

.langpick__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  min-width: 5rem;
  background: var(--white);
  border-radius: var(--r-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.langpick__panel > * {
  padding: 0.6rem 1rem;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  font-size: 0.9375rem;
}

.langpick__panel > * + * {
  border-top: 1px solid var(--rule);
}

.langpick__panel a:hover {
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
}

.langpick__panel [aria-current="true"],
.langs [aria-current="true"] {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Language switcher, list shape: UA · EN */
.langs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: 0.9375rem;
}

.langs__sep {
  color: var(--dark-muted);
}

/* Mobile menu — a <details> element, so it works with zero JavaScript. */
.menu {
  display: none;
}

.menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
  width: var(--tap);
  height: var(--tap);
  margin-right: -0.5rem;
  border-radius: var(--r-btn);
}

.menu__toggle::-webkit-details-marker {
  display: none;
}

/* Three lines drawn in CSS: no glyph to fall back on, no font to cut. */
.menu__glyph {
  position: relative;
  width: 1.375rem;
  height: 2px;
  background: var(--paper);
}

.menu__glyph--open::before,
.menu__glyph--open::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--paper);
}

.menu__glyph--open::before {
  top: -7px;
}

.menu__glyph--open::after {
  top: 7px;
}

.menu__glyph--close {
  background: transparent;
}

.menu__glyph--close::before,
.menu__glyph--close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--paper);
  transform: rotate(45deg);
}

.menu__glyph--close::after {
  transform: rotate(-45deg);
}

.menu[open] .menu__glyph--open,
.menu:not([open]) .menu__glyph--close {
  display: none;
}

.menu__panel {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  top: calc(100% + 1px);
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border-bottom: 1px solid var(--dark-rule);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.menu__panel > a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.5rem var(--gutter);
  border-top: 1px solid var(--dark-rule);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
}

.menu__panel > a:first-child {
  border-top: 0;
}

.menu__panel > a:hover {
  background: var(--dark-panel);
  color: var(--paper);
  text-decoration: none;
}

.menu__panel > a[aria-current="page"] {
  color: var(--amber);
}

.menu__panel .btn {
  margin: 1rem var(--gutter);
  border-top: 0;
  color: var(--ink);
}

.menu__panel .langs {
  padding: 0 var(--gutter) 1.25rem;
  color: var(--paper);
}

.menu__panel .langs a {
  color: var(--paper);
}

@media (max-width: 61.99em) {
  .masthead__end {
    display: none;
  }

  .menu {
    display: block;
  }
}

@media (max-width: 30rem) {
  .masthead__dot,
  .masthead__tagline {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Home — hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--ink);
  color: var(--paper);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.125rem, 0.6rem + 1.6vw, 1.625rem);
  padding-top: clamp(2rem, 1rem + 4vw, 4.75rem);
}

.hero__byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--dark-muted);
  text-align: left;
  line-height: 1.35;
}

.hero__avatar {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(245, 242, 236, 0.3);
}

.hero__byline strong {
  color: var(--paper);
  font-weight: 600;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 14em;
}

/* "10 хвилин → 20 секунд" sits on its own line under the noun (hard <br> in
   the content). Each half stays whole so a narrow screen breaks between them,
   never inside them. The old number is struck through in mustard, the new
   one is mint. */
.hero__title s,
.hero__title em {
  white-space: nowrap;
}

.hero__title s {
  color: #6e6a63;
  text-decoration-line: line-through;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 4px;
}

.hero__title em {
  font-style: normal;
  color: var(--mint);
}

/* On phones the two halves stack, so the noun keeps a line of its own and each
   number gets one: «Одне замовлення:» / «10 хвилин» / «20 секунд». */
@media (max-width: 47.99em) {
  .hero__title em {
    display: block;
  }
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--dark-muted);
  max-width: 34em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  padding-top: 0.25rem;
}

/* The screenshot straddles the edge of the dark band: the gradient is ink
   down to 62%, paper below, so the frame sits half in each. */
.hero__shot {
  padding-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  background: linear-gradient(
    180deg,
    var(--ink) 0,
    var(--ink) 62%,
    var(--paper) 62%,
    var(--paper) 100%
  );
}

.shot {
  width: min(100% - 2 * var(--gutter), 72rem);
  margin-inline: auto;
  border-radius: var(--r-shot);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

.shot__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #d3cec4;
}

.shot__url {
  flex-grow: 1;
  min-width: 0;
  margin-left: 0.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: var(--r-btn);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot img {
  width: 100%;
  aspect-ratio: 1600 / 786;
  object-fit: cover;
  object-position: center top;
}

/* --------------------------------------------------------------------------
   6. Home — sections
   -------------------------------------------------------------------------- */

/* A section whose text stands on the left and whose material on the right. */
.split {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.split--wide {
  grid-template-columns: 7fr 5fr;
}

.split__text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

/* Roles: four columns of routines, each a heading over hairline rows. */
.roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2vw, 2.25rem) clamp(2rem, 1rem + 3vw, 3rem);
}

.role {
  display: flex;
  flex-direction: column;
}

.role__name {
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.role__list {
  list-style: none;
  padding: 0;
}

.role__list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.45;
}

/* Services: a numbered list, not cards. The row is the link. */
.services {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
}

.service-row {
  display: grid;
  grid-template-columns: 4rem 5fr 6fr 2.5rem;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.625rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.service-row {
  transition: background-color 0.15s ease;
}

.service-row:hover {
  color: var(--ink);
  text-decoration: none;
  background-color: var(--paper-2);
}

.service-row:hover .service-row__title {
  color: var(--green);
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--green);
}

.service-row__title {
  transition: color 0.15s ease;
  font-family: var(--font-heading);
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}

.service-row__note {
  font-size: 1rem;
  color: var(--muted);
}

/* The one link on the site that sits inside a run of muted text. Links are
   marked by movement rather than a line here (DESIGN-BRIEF §11), but a
   marking that only appears on hover leaves a reader who cannot tell green
   from grey nothing at rest — and green on muted grey is 1.3:1, well under
   the 3:1 that WCAG 1.4.1 asks between a link and the text around it. A
   mustard line under this one, in the colour the site already uses for
   action, is the smallest thing that answers it. */
.service-row__note a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.service-row__note a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.service-row__arrow {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  color: var(--green);
  text-align: right;
  transition: transform 0.15s ease;
}

.service-row:hover .service-row__arrow {
  transform: translateX(0.5rem);
}

/* Cases: columns under a thick rule, the "after" number the loudest thing
   on the page after the hero. */
.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3rem);
}

.case-col {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding-top: 1.375rem;
  border-top: 3px solid var(--ink);
  color: var(--ink);
}

.case-col {
  transition: border-top-color 0.15s ease;
}

.case-col:hover {
  color: var(--ink);
  text-decoration: none;
  border-top-color: var(--amber);
}

.case-col__title {
  transition: color 0.15s ease;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.case-col:hover .case-col__title {
  color: var(--green);
}

.case-col__shift {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-family: var(--font-mono);
  line-height: 1.1;
}

.case-col__before {
  font-size: 1.0625rem;
  color: var(--faint);
}

.case-col__after {
  font-size: var(--fs-number);
  color: var(--green);
  letter-spacing: -0.02em;
}

.case-col__note {
  font-size: 1rem;
  color: var(--muted);
}

.case-col__more {
  margin-top: auto;
  padding-top: 0.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--green);
}

/* Why me: text, and beside it the person and three dated facts. */
.person {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.375rem;
  border-bottom: 2px solid var(--ink);
}

.person img {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-panel);
  object-fit: cover;
  object-position: center top;
}

.person__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
}

.person__note {
  font-size: var(--fs-small);
  color: var(--muted);
}

.facts {
  list-style: none;
  padding: 0;
}

.facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  align-items: baseline;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}

.facts .num {
  min-width: 8.75rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  color: var(--green);
}

/* How we work: three steps under hairlines, then the price note. */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
  counter-reset: step;
}

.step {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}

.step::before {
  content: counter(step) ".";
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--green);
}

.step__title {
  font-size: var(--fs-h3);
}

.step p {
  color: var(--muted);
}

.price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  max-width: 52em;
  margin-top: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border-radius: var(--r-panel);
}

.price__label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
}

/* Contact: the ways in beside the form. */
.contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.contact__text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.ways {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ways__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-weight: 700;
}

.ways__link svg {
  flex-shrink: 0;
}

/* "What happens after you write" — a paper-2 panel of numbered lines. */
.after {
  margin-top: 0.75rem;
  padding: 1.25rem 1.375rem;
  background: var(--paper-2);
  border-radius: var(--r-panel);
  font-size: var(--fs-small);
  color: var(--muted);
}

.after__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0;
  counter-reset: after;
}

.after__list li {
  counter-increment: after;
}

.after__list li::before {
  content: counter(after) " · ";
  font-family: var(--font-mono);
}


/* The routine calculator: sliders in a white panel on the left, the result
   in an ink panel on the right with the number in mint — the one place the
   green family appears on the home page besides the case numbers. The
   track is painted by hand so the filled part is ink, not the browser's
   blue; --pos is the thumb's position and comes from the script (the
   markup carries the default). */
.calc {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
}

.calc__inputs {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.calc__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.calc__row label {
  font-size: 1rem;
}

.calc__row .num {
  font-size: 1.125rem;
}

.calc__hint {
  margin-top: -0.25rem;
  font-size: var(--fs-small);
}

.calc input[type="range"] {
  --pos: 50%;
  width: 100%;
  height: 1.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.calc input[type="range"]:focus {
  outline: none;
}

/* The default position of each thumb, matching the `value` each input
   carries in home.njk — 600 orders, 10 minutes, 500 items. It lives here
   and not in a style attribute on the input because `style-src 'self'`
   refuses inline styles: with the attribute Chrome logged a CSP violation
   per slider on every visit. calc.js appends its own rules for these three
   selectors to this stylesheet and overwrites the values from there. */
.calc input[data-calc-input="orders"] {
  --pos: 54%;
}

.calc input[data-calc-input="minutes"] {
  --pos: 28.6%;
}

.calc input[data-calc-input="positions"] {
  --pos: 39%;
}

.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ink) var(--pos), var(--paper-2) var(--pos));
}

.calc input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--paper-2);
}

.calc input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--ink);
}

.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.625rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--ink);
  transition: box-shadow 0.15s;
}

.calc input[type="range"]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--ink);
  box-sizing: border-box;
  transition: box-shadow 0.15s;
}

.calc input[type="range"]:hover::-webkit-slider-thumb,
.calc input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(31, 29, 26, 0.12);
}

.calc input[type="range"]:hover::-moz-range-thumb,
.calc input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(31, 29, 26, 0.12);
}

.calc__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.875rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-panel);
}

.calc__total {
  font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem);
  line-height: 1;
  color: var(--mint);
  letter-spacing: -0.02em;
}

.calc__after {
  color: var(--dark-muted);
}

.calc__after .num {
  color: var(--paper);
}

.calc__note {
  font-size: var(--fs-small);
  color: var(--dark-muted);
}

.calc__result .btn {
  margin-top: 0.25rem;
}

/* The label demo (/demo/labels/, TZ §5B): the fields in a white panel on
   the left, the label itself on ink on the right — a white sticker on a
   dark ground, with the mustard "print" under it. The label is built by
   /assets/js/labels.js at its printer size, styled inline so it prints
   black on white whatever this sheet says, and scaled down to fit the
   stage. The tabs and the size switch are buttons, so the block needs the
   script to do anything; without it the stage says so. */
.demo {
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.labels {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1.5rem;
  align-items: start;
}

.labels__panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.labels__tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.labels__tab {
  padding: 0 0 0.75rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

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

.labels__tab.is-on {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.labels__fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* The panel of the other tab. Spelled out because the display above would
   otherwise win over the browser's own rule for the attribute. */
.labels__fields[hidden] {
  display: none;
}

.labels__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.labels__label {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
}

.labels__hint {
  font-weight: 400;
  color: var(--muted);
}

.labels__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.labels textarea {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.6;
  min-height: 8rem;
  resize: vertical;
}

.labels__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.labels__count {
  font-size: var(--fs-small);
}

/* The size switch: two states in one outlined control, ink when on. */
.seg {
  display: inline-flex;
  align-self: flex-start;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-btn);
  overflow: hidden;
}

.seg button {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.seg button + button {
  border-left: 1.5px solid var(--ink);
}

.seg button:hover {
  background: var(--paper-2);
}

.seg button.is-on {
  background: var(--ink);
  color: var(--paper);
}

.labels__preview {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-panel);
}

.labels__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.labels__head .label {
  color: var(--dark-muted);
}

.labels__stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20rem;
  padding: 0.5rem 1rem;
}

.labels__noscript {
  margin: 0;
  max-width: 24em;
  text-align: center;
  color: var(--dark-muted);
}

.labels__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.labels__note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--dark-muted);
}

/* The shipping demo (/demo/shipping/, TZ §5B step 4): the order in a white
   panel on the left — customer, goods with a quantity stepper, totals, the
   optional company name, the mustard button — and the documents on the
   right. Before the button the right column is a dashed stage that says
   what will appear; after it, two white panels (the invoice, the box
   label), the list of steps filling in one by one, and the seconds it
   took in a paper-2 bar. Built by /assets/demo/shipping.js; the label is
   inline-styled at printer size like the label demo's and prints through
   the same .labels-print rules. */
.ship {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.ship [hidden] {
  display: none !important;
}

.ship__form {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.ship__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ship__label {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
}

.ship__hint {
  font-weight: 400;
  color: var(--muted);
}

.ship__meta {
  font-size: var(--fs-small);
  color: var(--muted);
}

.ship__error {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-btn);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: var(--fs-small);
}

/* The select shares the fields' look; the chevron is drawn here because
   the browser's own is not the same twice. */
.ship select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231f1d1a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  cursor: pointer;
}

.ship__goods {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ship__goods-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.ship__lines {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}

.ship__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 6.5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.ship__name {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 1rem;
  line-height: 1.35;
}

.ship__ref {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The stepper: minus, the number, plus — one outlined control. */
.ship__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-btn);
  overflow: hidden;
}

.ship__qty button {
  width: 2.5rem;
  min-height: 2.5rem;
  border: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s;
}

.ship__qty button:hover {
  background: var(--paper-2);
}

.ship__qty input {
  width: 3.25rem;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  border-left: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.ship__qty input::-webkit-outer-spin-button,
.ship__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ship__qty input:focus {
  outline: none;
  background: var(--paper);
}

.ship__sum {
  text-align: right;
  font-size: 1rem;
}

.ship__totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.375rem 1.5rem;
  align-items: baseline;
  font-size: var(--fs-small);
}

.ship__totals .num {
  text-align: right;
}

.ship__total {
  margin-top: 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
}

.ship__total-num {
  margin-top: 0.25rem;
  font-size: 1.5rem;
}

.ship__go {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.ship__go .btn {
  align-self: stretch;
}

.ship__result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ship__idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 26rem;
  padding: 2rem;
  border: 1px dashed var(--rule);
  border-radius: var(--r-panel);
  text-align: center;
  color: var(--muted);
}

.ship__idle svg {
  color: var(--faint);
}

.ship__idle p {
  max-width: 24em;
}

.ship__done {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ship__docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ship__doc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

/* A picture of the invoice, so the panel is not a bare link: its number,
   three ruled lines standing in for the table, and the total. */
.ship__sheet {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
}

.ship__sheet-title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.3;
}

.ship__sheet-line {
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
}

.ship__sheet-line:nth-child(2) {
  width: 90%;
}

.ship__sheet-line:nth-child(3) {
  width: 70%;
}

.ship__sheet-line:nth-child(4) {
  width: 80%;
}

.ship__sheet-sum {
  align-self: flex-end;
  padding-top: 0.25rem;
  font-size: 0.8125rem;
}

.ship__stage {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
}

.ship__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: auto;
}

.ship__link {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
}

.ship__steps {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 1.25rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.ship__step {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}

.ship__step.is-on {
  opacity: 1;
  transform: none;
}

.ship__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: #e4efea;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
}

.ship__dot::before {
  content: "✓";
}

.ship__step--demo .ship__dot {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

.ship__step-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ship__step-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.35;
}

.ship__step-note {
  font-size: var(--fs-small);
  color: var(--muted);
}

.ship__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.ship__time .num {
  color: var(--green);
}

/* The live-demo band on the home page: the argument on the left, a
   picture of the demo — the order and its result, two dark panels — on
   the right. The picture is decoration and links nowhere; the buttons in
   the text do. */
.demo-band {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: center;
}

.demo-band__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.demo-band__note {
  font-size: var(--fs-small);
  color: var(--dark-muted);
}

.demo-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.demo-band__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.demo-panel {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.375rem;
  background: var(--dark-panel);
  border: 1px solid var(--dark-rule);
  border-radius: var(--r-panel);
}

.demo-panel .label {
  color: var(--dark-muted);
}

.demo-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--dark-rule);
  font-size: var(--fs-small);
}

.demo-panel__total {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
}

.demo-panel__btn {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-btn);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  text-align: center;
}

.demo-panel__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-small);
}

.demo-panel__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
}

.demo-panel__dot--demo {
  background: var(--amber);
}

/* A barcode-shaped ornament, in paper on ink. Not a real code. */
.demo-panel__bars {
  height: 2.75rem;
  margin-top: 0.5rem;
  background: repeating-linear-gradient(
    90deg,
    var(--paper) 0 2px, transparent 2px 4px,
    var(--paper) 4px 9px, transparent 9px 11px,
    var(--paper) 11px 13px, transparent 13px 17px,
    var(--paper) 17px 20px, transparent 20px 24px,
    var(--paper) 24px 26px, transparent 26px 27px,
    var(--paper) 27px 31px, transparent 31px 33px
  );
}

.demo-panel__time {
  font-size: 0.8125rem;
  color: var(--dark-muted);
}

/* --------------------------------------------------------------------------
   7. Inner pages
   -------------------------------------------------------------------------- */

.pagehead {
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.pagehead .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.pagehead h1 {
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 18em;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.crumbs a {
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--green);
}

.crumbs__sep {
  color: var(--rule);
}

/* The body of a service, a case or a page: reading column, aside beside. */
.layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.layout--plain {
  grid-template-columns: minmax(0, var(--measure));
}

.layout__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 1.5rem;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 40em;
}

.prose > h2 {
  font-size: var(--fs-h3);
  margin-bottom: -1rem;
}

.prose > h3 {
  font-size: 1.125rem;
  margin-bottom: -1rem;
}

.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-left: 1.25em;
}

/* The markdown body writes plain lists; the green marker is what makes
   them the same lists as .bullets elsewhere. */
.prose li::marker {
  color: var(--green);
}

.prose figure img {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.prose figcaption {
  margin-top: 0.625rem;
  font-size: var(--fs-small);
  color: var(--muted);
}

.prose--intro {
  color: var(--muted);
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.prose .btn {
  align-self: flex-start;
}

/* Small print under the reading column: what the work plugs into, the
   stack, the related service. */
.stack,
.related {
  font-size: var(--fs-small);
  color: var(--muted);
}

.stack {
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
}

.stack__label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink);
}

/* Aside: the case a service produced, in ink with a mint number. */
.aside-case {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  border-radius: var(--r-panel);
  background: var(--ink);
  color: var(--paper);
}

.aside-case .label {
  color: var(--dark-muted);
}

.aside-case__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.aside-case__shift {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono);
  line-height: 1.1;
}

.aside-case__before {
  font-size: 1rem;
  color: var(--dark-muted);
}

.aside-case__after {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  color: var(--mint);
  letter-spacing: -0.02em;
}

.aside-case a {
  color: var(--mint);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
}

/* Aside: a screenshot with its caption. */
.aside-shot {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--white);
}

.aside-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
}

.aside-shot figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Aside: the other cases, as a list of rows. */
.aside-list {
  display: flex;
  flex-direction: column;
}

.aside-list__label {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}

.aside-list__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.aside-list__row {
  transition: background-color 0.15s ease;
}

.aside-list__row:hover {
  color: var(--ink);
  text-decoration: none;
  background-color: var(--paper-2);
}

.aside-list__row:hover .aside-list__name {
  color: var(--green);
}

.aside-list__name {
  transition: color 0.15s ease;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
}

.aside-list__row .num {
  flex-shrink: 0;
  color: var(--green);
}

/* A case's headline shift: two panels, before on paper-2, after in ink. */
.shift {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.shift__panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem;
  border-radius: var(--r-panel);
  background: var(--paper-2);
}

.shift__panel--after {
  background: var(--ink);
  color: var(--paper);
}

.shift__panel--after .label {
  color: #9fc4b4;
}

.shift__panel--after .shift__note {
  color: #b9d3c7;
}

.shift__value {
  font-family: var(--font-mono);
  font-size: clamp(1.875rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--green);
}

.shift__panel--after .shift__value {
  color: var(--paper);
}

.shift__note {
  color: var(--muted);
}

.shift__estimate {
  padding-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Table of contents on a long page, in the aside. */
.toc {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: var(--fs-small);
}

.toc a {
  color: var(--ink);
}

.toc a:hover {
  color: var(--green);
}

/* FAQ on a service page: question and answer side by side, no disclosure
   widgets — a closed <details> hides text from a skim and from search. */
.faq {
  display: flex;
  flex-direction: column;
}

.faq__item {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq__q {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.faq__a {
  color: var(--muted);
}

/* "What else is automated", under a list page. */
.also {
  margin-top: var(--section-y);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--rule);
}

.also__title {
  font-size: var(--fs-h3);
  margin-bottom: 1.25rem;
}

.also__text {
  max-width: 44em;
  color: var(--muted);
}

.also__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem 3rem;
  max-width: 60rem;
  color: var(--muted);
}

.also__list li {
  position: relative;
  padding-left: 1.125em;
}

.also__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* 404 */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: clamp(4rem, 2rem + 8vw, 8rem);
}

.notfound__glyph {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 2rem + 6vw, 6rem);
  line-height: 1;
  color: var(--rule);
}

/* --------------------------------------------------------------------------
   8. The request form
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form__field label {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
}

.form__hint {
  font-weight: 400;
  color: var(--muted);
}

.form input,
.form textarea,
.labels input,
.labels textarea,
.ship input[type="text"],
.ship select {
  width: 100%;
  min-height: var(--tap);
  padding: 0.625rem 0.875rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.form textarea {
  resize: vertical;
  min-height: 6.75rem;
}

.form input:hover,
.form textarea:hover,
.labels input:hover,
.labels textarea:hover,
.ship input[type="text"]:hover,
.ship select:hover {
  border-color: var(--faint);
}

.form input:focus,
.form textarea:focus,
.labels input:focus,
.labels textarea:focus,
.ship input[type="text"]:focus,
.ship select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(31, 29, 26, 0.08);
}

.form__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.form__note {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* The trap. Off-screen rather than display:none, and out of the tab order:
   a person never reaches it, a script that fills every input does. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.colophon {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  font-size: var(--fs-small);
}

.colophon__inner {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 1.2fr;
  gap: var(--gap);
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--dark-rule);
}

.colophon__col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.colophon__col .label {
  color: var(--dark-muted);
}

.colophon__mark {
  color: var(--paper);
}

.colophon__mark .wordmark {
  height: 2.125rem;
  width: auto;
}

.colophon__pitch {
  max-width: 24em;
  color: var(--dark-muted);
}

.colophon a {
  color: var(--paper);
  width: fit-content;
}

.colophon a:hover {
  color: var(--mint);
}

.colophon__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--dark-muted);
}

/* --------------------------------------------------------------------------
   10. Folding
   -------------------------------------------------------------------------- */

@media (max-width: 61.99em) {
  .split,
  .split--wide,
  .contact,
  .calc,
  .labels,
  .ship,
  .demo-band,
  .layout {
    grid-template-columns: 1fr;
  }

  .layout__aside {
    position: static;
  }

  .cases,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-row {
    grid-template-columns: 3rem 1fr 2rem;
  }

  .service-row__note {
    grid-column: 2 / 4;
  }

  .colophon__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99em) {
  .roles,
  .cases,
  .steps,
  .shift,
  .also__list,
  .form__row,
  .labels__row,
  .ship__docs,
  .demo-band__panels,
  .colophon__inner {
    grid-template-columns: 1fr;
  }

  /* The order line folds: the name on its own row, the stepper and the
     sum under it. */
  .ship__line {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ship__name {
    grid-column: 1 / -1;
  }

  .faq__item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .hero__actions {
    align-self: stretch;
    flex-direction: column;
  }

  .calc__result .btn {
    align-self: stretch;
  }

  .hero__byline {
    align-self: flex-start;
  }

  .facts .num {
    min-width: 0;
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------------
   11. Print
   -------------------------------------------------------------------------- */

@media print {
  header,
  .menu,
  .skip-link,
  .toc,
  .colophon,
  .form,
  .hero__shot {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .hero,
  .band--dark,
  .shift__panel--after {
    background: #fff;
    color: #000;
  }

  .section,
  .layout {
    padding-block: 1rem;
  }
}

/* Printing labels from /demo/labels/. The script builds one page per
   label in .labels-print at the end of <body>, puts @page at the label's
   size and marks <body> as printing labels; then only the labels come
   out, black on white, flush to the page. On screen the area is hidden. */
.labels-print {
  display: none;
}

@media print {
  body.printing-labels {
    margin: 0;
    background: #fff;
  }

  body.printing-labels > :not(.labels-print) {
    display: none !important;
  }

  body.printing-labels .labels-print {
    display: block;
  }

  .labels-print__page {
    overflow: hidden;
    break-after: page;
    page-break-after: always;
  }

  .labels-print__page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .labels-print * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}