/*
 * Lever & Proof: the visual layer of the AI Setup pages (teams, personal, their thanks pages, teams/b and the Legal and
 * privacy page).
 * Wireframe B (decision-first) kept simple. Brand rules (design-sync conventions, spec 4):
 * - one dark emerald field per page (#proof); brass only as hairlines, eyebrows and small labels, never a fill;
 * - Fraunces only for the hero headline, section headings, proof figures and the wordmark; Hanken Grotesk elsewhere;
 * - AA contrast: small brass text uses --brass-ink on light grounds and --brass-soft on the dark field.
 * The pages read without JavaScript: the script reveals the calculator and buttons, and sets html.js once the
 * calculator replaces the full price table. Print shows everything, expanded, without controls (see the end).
 * No vh units, no external loads; the font files are self-hosted under ../fonts/ (fallbacks stand in until then).
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* colours: the Tailwind tokens of the design system (tailwind.config.js) */
  --field: #F7F7F2;
  --field-2: #EFEFE7;
  --field-3: #E7E7DD;
  --ink: #143C2C;
  --ink-deep: #0D281D;
  --ink-warm: #16382A;
  --emerald: #13362A;
  --cream: #F1ECDD;
  --cream-body: #AAB2A5;
  --body: #4A5650;
  --soft: #6C7770;
  --muted: #7C7D70;
  --faint: #9A9488;
  --brass: #9C7A3C;
  --brass-soft: #B89A63;
  --brass-ink: #7A5F2E;
  --line: #DAD9CD;
  --line-soft: #E7E7DD;
  --white: #FFFFFF;
  --line-on-dark: rgba(241, 236, 221, 0.22);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;

  --shell: 1120px;
  --measure: 720px;   /* the reading column; everything else runs the full shell (round 2 L8) */
  --gutter: 32px;
  --pad-x: max(var(--gutter), calc((100% - var(--shell)) / 2));
  --radius: 7px;
  --radius-lg: 14px;
}

/* ---------------------------------------------------------------- base */

html {
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--field);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "opsz" 36;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;   /* no word left alone on a heading's last line, as "has" was in the phone hero (round 3 F8) */
}

/* A number compound ("60-minute", "2-hour") never breaks at its hyphen (round 3 N5); the build wraps each one. */
.nowrap {
  white-space: nowrap;
}

h3, h4 {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

a {
  color: var(--ink);
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink-deep);
  text-decoration-thickness: 2px;
}

button, input, select, textarea {
  font: inherit;
}

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

/* ---------------------------------------------------------------- shared pieces */

.eyebrow {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass-ink);
  margin-bottom: 16px;
}

.eyebrow--wide {
  letter-spacing: 0.26em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.button--primary {
  background: var(--ink);
  color: var(--field);
}

.button--primary:hover {
  background: var(--ink-deep);
  color: var(--field);
}

.button--secondary {
  background: transparent;
  color: var(--ink);
}

.button--secondary:hover {
  background: var(--field-2);
  color: var(--ink);
}

/* A quiet action: ink text on a brass hairline (the brand's ButtonLink). */
.text-button,
.deliverable > button,
.layer > button {
  padding: 4px 0 2px;
  border: 0;
  border-bottom: 1px solid var(--brass);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

.text-button:hover,
.deliverable > button:hover,
.layer > button:hover {
  color: var(--ink-deep);
  border-bottom-width: 2px;
  padding-bottom: 1px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 247, 242, 0.95);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 8px var(--pad-x);
}

.site-header__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  font-family: var(--serif);
  font-variation-settings: "opsz" 36;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-mark {
  display: block;
  flex: none;
}

/* The wordmark on paper, set as in the header: above the eyebrow on page 1 and at the top of the order request (round
   3 A9). The header carries it on screen and does not print, so this one shows in print only. */
.print-wordmark {
  display: none;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 36;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* Where to order, under the facts on page 1 of the printed page (round 4, brand F2); the screen has the form. */
.print-order-line {
  display: none;
}

.site-header__nav ul {
  display: flex;
  gap: 18px;   /* the longest nav (teams, R57) and the actions fit the 1120 px column */
}

.site-header__nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brass);
}

.page-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

.page-actions .text-button {
  font-size: 13.5px;
  white-space: nowrap;
}

/* "Link copied": a small note under the actions; empty, it takes no room and stays a live region. */
.page-actions__status {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.page-actions__status:empty {
  padding: 0;
  border: 0;
}

.site-header__action {
  min-height: 40px;
  padding: 9px 18px;
  font-size: 14px;
  white-space: nowrap;   /* the main action stays one line, however long the nav labels are */
}

/* ---------------------------------------------------------------- sections */

.section {
  padding: 88px var(--pad-x);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section > h2 {
  font-size: clamp(28px, 3.1vw, 36px);
  line-height: 1.12;
  max-width: 24ch;
  margin-bottom: 32px;
}

/* The line under a section heading (the options note, the sentence that opens How it works). */
.section > h2 + p {
  max-width: 62ch;
  margin-top: -14px;
  margin-bottom: 32px;
  font-size: 18px;
}

/* ---------------------------------------------------------------- hero */

.section--hero {
  padding-top: 76px;
  padding-bottom: 80px;
}

#hero-title {
  max-width: 20ch;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
}

.lede {
  max-width: 56ch;
  margin: 24px 0 34px;
  font-size: 19px;
  line-height: 1.6;
}

/* A row of short items (the facts): a hairline sits on the leading edge of each item, in the middle of the gap; the
   row clips its left edge, so the first item of every line shows none and no line ends with a rule. */
.facts {
  --sep-gap: 33px;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sep-gap);
  overflow: hidden;
}

.facts li {
  position: relative;
}

.facts li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: calc(var(--sep-gap) / -2);
  border-left: 1px solid var(--line);
}

.facts {
  row-gap: 8px;
  padding-top: 14px;
  border-top: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}

.section--hero .actions {
  margin-top: 34px;
}

.small-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 22px;
  font-size: 14.5px;
}

.small-links a {
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
  font-weight: 500;
}

.small-links a:hover {
  border-bottom-width: 2px;
}

/* The proof in the first screen (task 17b): a small round portrait beside the name and one line to the proof. */
.hero-proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  max-width: 760px;
  margin-top: 26px;
  font-size: 14.5px;
  line-height: 1.45;
}

.hero-proof__portrait {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
}

.hero-proof__name {
  color: var(--ink);
  font-weight: 600;
}

.hero-proof__line {
  color: var(--body);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.hero-proof__line:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ---------------------------------------------------------------- options and prices */

/* One comparison grid in place of the option cards (task 21): a hairline-ruled table, the brand's DataTable. The row
   labels take a column of their own, the three options a column each, every cell left-aligned and free to wrap. Price
   and time come first and read in ink; a tick is drawn in ink, a dash in a hairline, and each says its word to a
   screen reader. No tag and no highlighted column: the Best for row says which option suits whom. */
.compare {
  table-layout: fixed;
  font-size: 15px;
  font-variant-numeric: normal;
}

.compare col {
  width: 24%;
}

.compare col.compare__label-col {
  width: 28%;
}

.compare th,
.compare td,
.compare th:first-child,
.compare td:first-child {
  padding: 12px 20px 12px 0;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.compare thead > tr > * {
  border-bottom: 1.5px solid var(--ink);
}

.compare thead th {
  padding-bottom: 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.compare tbody th {
  color: var(--body);
  font-weight: 500;
}

.compare td {
  color: var(--ink);
}

/* Price and time, the two rows a visitor reads first. */
.compare__row--key td {
  font-weight: 600;
}

.compare tbody tr:first-child td {
  font-size: 19px;
  line-height: 1.3;
}

.compare__note {
  display: block;
  margin-top: 4px;
  color: var(--body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
}

.compare__tick {
  display: inline-block;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -2px;
}

.compare__dash {
  display: inline-block;
  width: 12px;
  border-top: 1.5px solid var(--muted);
  vertical-align: middle;
}

/* The lines under the grid: the price note (teams, task 22), the credit, Keep it running (personal) and the terms
   (personal), each once. */
.compare__price-note,
.compare__credit,
.compare__terms,
.option-addons {
  max-width: 78ch;
  font-size: 15.5px;
}

.compare__price-note,
.compare__credit {
  margin-top: 20px;
}

.compare__price-note + .compare__credit {
  margin-top: 10px;
}

.compare__credit {
  color: var(--ink);
  font-weight: 500;
}

.option-addons,
.compare__terms {
  margin-top: 10px;
}

/* Teams: the first year on one strip (task 18, designer item 3), twelve months a row: solid ink is what you order, the
   tint a fixed add-on, dashed a monthly add-on you can stop. Each segment is one cell across its months, outlined all
   round, with its label lying across it, so no line crosses a label (task 19, brand item 5); "Month" stands in the
   row-label column and each number centred over its month (brand item 6). The cells keep their colours on paper
   (print-color-adjust). On a phone the labels leave the cells for the key under the strip. */
.first-year {
  margin-top: 32px;
}

.first-year__label {
  margin-bottom: 12px;
}

.first-year__row {
  display: grid;
  grid-template-columns: 160px repeat(12, minmax(0, 1fr));
  column-gap: 1px;
}

.first-year__row > * {
  grid-row: 1;
}

.first-year__row + .first-year__row {
  margin-top: 8px;
}

.first-year__row--months span {
  padding-bottom: 6px;
  color: var(--body);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.first-year__row--months {
  align-items: baseline;
}

.first-year__row--months .first-year__name {
  align-self: baseline;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
}

.first-year__name {
  grid-column: 1;
  align-self: center;
  padding-right: 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.first-year__cell {
  min-height: 40px;
}

.first-year__cell,
.first-year__text--setup,
.first-year__swatch {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.first-year__cell--setup {
  background: var(--ink);
}

.first-year__cell--follow-through {
  border: 1px solid var(--ink);
  background: var(--field-3);
}

.first-year__cell--running {
  border: 1px dashed var(--ink);
}

.first-year__text {
  z-index: 1;
  align-self: center;
  padding: 6px 10px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.first-year__text--setup {
  display: flex;
  align-items: center;
  align-self: stretch;
  background: var(--ink);
  color: var(--field);
  font-weight: 500;
}

.first-year__key {
  display: none;
}

.first-year__swatch {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.first-year__swatch--setup {
  background: var(--ink);
}

.first-year__swatch--follow-through {
  border: 1px solid var(--ink);
  background: var(--field-3);
}

.first-year__swatch--running {
  border: 1px dashed var(--ink);
}

.first-year__note {
  max-width: 78ch;
  margin-top: 16px;
  font-size: 15px;
}

/* ---------------------------------------------------------------- investment */

#investment {
  background: var(--field-2);
}

/* Teams (task 22, brand fix 3): on a desktop, once the script runs the calculator, two columns from one top rule: the
   calculator on the left; the total with the VAT line, the year one and the terms on the right, which is wide enough
   for the year-one table to open without a wrapped head or option name (round 3 A11). One column on a phone, without
   the script (the full table by team size) and on paper. */
@media (min-width: 960px) {
  html.js .investment__body {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 720px);
    align-items: start;
    gap: 0 56px;
  }

  html.js .investment__side > .calculator__results {
    margin-top: 0;
  }
}

/* The calculator and the price tables sit on the field-2 band under an ink rule, like the terms, with no box of their
   own (round 2 L3). They scroll sideways on a phone when a table is wider than the screen; position: relative keeps
   the visually hidden captions inside that scroll box, so they cannot widen the page. */
.calculator,
.price-table,
.price-list {
  position: relative;
  min-width: 0;
  padding: 18px 0 0;
  border-top: 1.5px solid var(--ink);
  overflow-x: auto;
}

.calculator h3,
.price-table h3 {
  margin-bottom: 16px;
  font-size: 20px;
}

.price-table > p {
  margin-bottom: 12px;
  font-size: 15px;
}

.price-table > .price-table__note {
  margin: 12px 0 0;
}

/* The price per person, under "Number of people" (round 2 P2). */
.calculator__rule {
  max-width: 46ch;
  margin-bottom: 12px;
  font-size: 14.5px;
}

/* A cell with no figure says so in quieter type (round 2 P2); the phone layout leaves such lines out. */
.not-applicable {
  color: var(--body);
  font-size: 13px;
}

.calculator__size label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: var(--field);
}

.stepper button {
  width: 46px;
  min-height: 46px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.stepper button:hover {
  background: var(--field-2);
}

.stepper input {
  width: 68px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

.calculator__option {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 15.5px;
}

.calculator__size + .calculator__option {
  margin-top: 22px;
}

.calculator__option label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  cursor: pointer;
}

.calculator__option input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.2em 0 0;   /* level with the first line of the label */
  accent-color: var(--ink);
}

.calculator__results {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}

.calculator__line {
  color: var(--body);
  font-size: 15px;
}

/* The amount never splits: "CHF" stays with its figure (round 4, brand B1). Below 480px the figure takes its own line
   under the label (the phone rule after the narrower screens). */
.calculator__line output {
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calculator__line + .calculator__line output {
  font-size: 20px;
}

/* Roy's line on what the prices exclude, small, directly under the total (round 4, compliance FIX 1). */
.calculator__vat {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
}

#calc-quote {
  color: var(--ink);
  font-size: 15.5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

th:first-child,
td:first-child {
  padding-left: 0;
  text-align: left;
  white-space: normal;
}

thead th {
  padding-top: 0;
  border-bottom: 1.5px solid var(--ink);
  color: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: normal;
  vertical-align: bottom;
}

tbody th {
  color: var(--ink);
  font-weight: 600;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

/* The year one of each option behind its disclosure, and the rule under it (task 21). */
.year-one-note {
  max-width: var(--measure);
  margin-top: 14px;
  font-size: 15px;
}

/* The two terms lines under Prices and terms (teams, task 21), on hairlines. */
.investment__terms {
  max-width: var(--measure);
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.investment__terms li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}

/* ---------------------------------------------------------------- situation */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 36px;
}

.cards li {
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}

.cards h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.cards p {
  font-size: 16px;
}

/* ---------------------------------------------------------------- deliverables and their sample panels */

/* The week before and after, above the setup (task 17b): a plain hairline table, the change in ink. It reads across:
   the topic a fifth, Before and After two fifths each (task 18, designer item 4), fixed by the column group, since the
   empty header cell over the topics is a td and took the 40% meant for the two columns. */
.before-after {
  margin-bottom: 48px;
  font-size: 15.5px;
  font-variant-numeric: normal;
  table-layout: fixed;
}

.before-after col {
  width: 40%;
}

.before-after col.before-after__topic {
  width: 20%;
}

.before-after caption {
  padding-bottom: 12px;
  color: var(--brass-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

.before-after th,
.before-after td {
  padding: 12px 24px 12px 0;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.before-after tbody th {
  color: var(--ink);
  font-weight: 600;
}

.before-after td + td {
  color: var(--ink);
  font-weight: 500;
}

/* An example week, right after the table (task 21): three short scenes side by side on a field-2 panel, under a label
   that says it is an example; stacked on a phone. */
.example-week {
  margin: -16px 0 48px;
  padding: 22px 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--field-2);
}

.example-week__label {
  margin-bottom: 14px;
  color: var(--brass-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.example-week__scenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 28px;
}

.example-week__scenes li {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
}

.example-week__day {
  color: var(--ink);
  font-weight: 600;
}

/* The setup drawn as layers (task 18, designer item 1): the AI tool in a dashed frame (the part that can change), then
   the layers top down between two ink rules with hairlines between them, a brass bracket in the left gutter beside the
   base layers and, under the base, what holds for them. The documents sit beside it from 960 px, under their label.
   The base layers are a list of their own, so the bracket is one line from its top tick to its foot on the base rule
   (task 19, brand note 9). */
.setup__figure {
  position: relative;
  padding-left: 16px;
}

.setup__tool {
  padding: 12px 16px;
  border: 1px dashed rgba(20, 60, 44, 0.45);
  border-radius: var(--radius);
}

.setup__tool-label {
  color: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.setup__tool-names {
  color: var(--ink);
  font-size: 15px;
}

.setup__layers {
  margin-top: 12px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.layer {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 24px;
  padding: 16px 0;
}

.layer + .layer,
.setup__stack + .setup__stack {
  border-top: 1px solid var(--line);
}

.layer > h3 {
  font-size: 16px;
  font-weight: 500;
}

.layer > p {
  font-size: 15px;
}

.layer > button {
  justify-self: end;
  white-space: nowrap;
}

/* The person row (teams): numbered cells in the figure's tint across the full row, standing on the shared layers
   below (task 19, brand item 1: "Person 1", the number alone on phones). The tint prints. */
.layer__people {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
}

.layer__people > span {
  flex: 1 1 0;
  height: 28px;
  border-radius: 2px;
  background: var(--field-3);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  white-space: nowrap;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The one brass accent: a bracket beside the base layers, drawn once, from a tick at the first of them down to its foot
   on the base rule. */
.setup__stack--base {
  position: relative;
}

.setup__stack--base::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: -1px;
  left: -12px;
  width: 6px;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  border-left: 1px solid var(--brass);
}

.setup__base {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.setup__base-label,
.setup__documents-label,
.first-year__label {
  color: var(--brass-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.setup__base-label {
  display: block;
  margin-bottom: 2px;
}

.setup__documents {
  margin-top: 40px;
}

.setup__documents-label {
  margin-bottom: 14px;
}

@media (min-width: 960px) {
  .setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 56px;
  }

  .setup__documents {
    margin-top: 0;
  }

  .setup__documents .deliverables {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px 36px;
}

.deliverable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}

.deliverable > h3 {
  margin-bottom: 6px;
  font-size: 17px;
}

.deliverable > p {
  font-size: 15.5px;
}

/* The sample panels live after the questions, so print can set them out there; on screen they open as dialogs and
   this holder shows nothing. */
.samples__heading {
  display: none;
}

.samples + .section {
  border-top: 1px solid var(--line);
}

.deliverable > button {
  margin-top: 12px;
}

dialog {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 34px 38px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--body);
  font-size: 16px;
  box-shadow: 0 24px 64px rgba(13, 40, 29, 0.2);
}

dialog::backdrop {
  background: rgba(13, 40, 29, 0.45);
}

dialog h3 {
  margin-bottom: 14px;
  font-size: 22px;
}

dialog h3:focus-visible {
  outline-offset: 6px;
}

dialog p + p,
dialog p + ul,
dialog ul + p {
  margin-top: 12px;
}

dialog ul {
  padding-left: 20px;
  list-style: disc;
}

dialog li {
  margin-top: 6px;
}

dialog li::marker {
  color: var(--brass);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.panel-actions form {
  margin: 0;
}

.panel-actions button {
  min-height: 42px;
  padding: 9px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

.panel-actions form button {
  background: var(--ink);
  color: var(--field);
}

.panel-actions button:hover {
  background: var(--field-2);
}

.panel-actions form button:hover {
  background: var(--ink-deep);
}

/* ---------------------------------------------------------------- how it runs */

/* Your part and my part on one time ruler (task 18, designer item 2), drawn by the build (aisetup/figures.py) in the
   brand's line vocabulary: hairlines in --line, ink for the lanes and dots, one brass line at the handover. Its x is in
   % and its labels in px, so they keep these sizes on any screen and on paper. The wide build shows from 960 px and in
   print, the narrow one below. Axis labels take --body, not --soft, which falls short of AA at this size. */
.ruler {
  margin: 0 0 40px;
}

.ruler__svg {
  display: block;
}

.ruler__svg--narrow,
.ruler__svg--print {
  display: none;
}

.ruler__svg text {
  fill: currentColor;
  font-family: var(--sans);
}

.ruler__label,
.ruler__total,
.ruler__tail {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

/* The lane's total, under "Your part" (task 19, brand item 2), and the phone's labels after the handover (item 3). */
.ruler__total {
  font-size: 12px;
  font-weight: 600;
}

.ruler__tail {
  font-size: 11px;
}

.ruler__detail,
.ruler__axis {
  color: var(--body);
  font-size: 13px;
}

.ruler__axis {
  font-size: 12px;
}

.ruler__lane {
  color: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ruler__brass-label {
  color: var(--brass-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ruler__svg--narrow .ruler__label,
.ruler__svg--narrow .ruler__total {
  font-size: 12px;
}

.ruler__svg--narrow .ruler__lane,
.ruler__svg--narrow .ruler__axis {
  font-size: 11px;
}

.ruler__hairline {
  stroke: var(--line);
  stroke-width: 1;
}

.ruler__mine {
  stroke: var(--ink);
  stroke-width: 2;
}

.ruler__questions {
  stroke: var(--ink);
  stroke-width: 1;
}

.ruler__dotted {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 0.5 4;
  stroke-linecap: round;
}

.ruler__brass {
  stroke: var(--brass);
  stroke-width: 1;
}

.ruler__dot {
  fill: var(--ink);
}

.ruler__dot--open,
.ruler__check {
  fill: var(--field);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.ruler__check {
  stroke-width: 1;
}

.ruler figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}

/* The key to the dots (task 22, brand fix 1): each dot, drawn as the ruler draws it, before its words. */
.ruler__key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.ruler__key-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ruler__key-item svg {
  flex: none;
  margin-top: 0.25em;
}

.ruler__glyph {
  fill: var(--ink);
}

.ruler__glyph--open {
  fill: var(--field);
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* The numbered spans above the axis (task 21): a hairline over each phase's weeks with its number in a small open
   circle, as the phases under the ruler carry it. */
.ruler__span {
  stroke: var(--ink);
  stroke-width: 1;
}

.ruler__span-dot {
  fill: var(--field);
  stroke: var(--ink);
  stroke-width: 1;
}

.ruler__span-number {
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}

/* The three phases under the ruler (task 21), numbered as its spans: side by side under an ink rule, the brand's
   process steps; stacked on a phone. */
.phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  gap: 28px 36px;
}

.phase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: start;
  column-gap: 12px;
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}

.phase__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.phase h3 {
  font-size: 18px;
}

.phase p {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 16px;
}

.phases__closing {
  max-width: var(--measure);
  margin-top: 28px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}

/* Detail one click away (task 21): "See every step" and "See year one ...", native disclosures, closed on screen and
   open on paper (print). The summary reads as the brand's quiet action, ink on a brass hairline. */
.more {
  margin-top: 28px;
}

.more > summary {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--brass);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.more > summary::-webkit-details-marker {
  display: none;
}

.more > summary::after {
  content: "+" / "";
  color: var(--brass-ink);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.more[open] > summary::after {
  content: "\2212" / "";
}

.more > summary:hover {
  padding-bottom: 1px;
  border-bottom-width: 2px;
}

.more__body {
  margin-top: 24px;
}

@media only screen and (max-width: 959px) {
  .ruler__svg--wide {
    display: none;
  }

  .ruler__svg--narrow {
    display: block;
  }
}

/* The reader's time in total, one line under the steps (task 18, personal). */
.timeline__total {
  max-width: var(--measure);
  margin-top: 18px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
}

.timeline {
  border-top: 1.5px solid var(--ink);
}

.timeline li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 200px 230px;
  gap: 6px 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.timeline h3 {
  font-size: 15.5px;
  line-height: 1.5;
}

.timeline p {
  font-size: 15.5px;
}

.your-part,
.my-part {
  color: var(--ink);
  font-weight: 500;
}

.your-part .label,
.my-part .label,
.timeline__head span {
  display: block;
  color: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Your part" and "My part" (task 17b) head their columns once where the steps run in columns, on a wide screen and on
   paper (round 3 N2); the labels in each row then stay for screen readers only. Narrower screens fold both under each
   step and show the label in each row. */
.timeline__head {
  display: none;
}

.timeline__head span {
  grid-column: 3;
}

.timeline__head span + span {
  grid-column: 4;
}

@media (min-width: 1200px) {
  .timeline__head {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 200px 230px;
    gap: 0 28px;
    padding-bottom: 10px;
  }

  .timeline .your-part .label,
  .timeline .my-part .label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

.notes {
  max-width: var(--measure);
  margin-top: 26px;
}

.notes li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: 15.5px;
}

.notes li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 9px;
  border-top: 1px solid var(--brass);
}

/* ---------------------------------------------------------------- data */

/* Three short statements side by side (task 21), each a title and a line or two under an ink rule, as the situation
   cards; teams' third one opens the IT note sample. */
.data-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 36px;
}

.data-point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}

.data-point h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.data-point p {
  font-size: 16px;
}

.data-point .text-button {
  margin-top: 12px;
}

.works-with {
  margin-top: 72px;
}

.works-with__title {
  margin-bottom: 8px;
  color: var(--brass-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Under the tool row (teams): the tools that are supported but not yet delivered. */
.works-with__note {
  max-width: var(--measure);
  margin-top: 4px;
  font-size: 14.5px;
}

/* The small label over each group of logos (round 2 L8). */
.works-with__group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The tool row: one line of logos per group, each logo above its name. The logos keep their original colours (vendor
   rules forbid recolouring them), so no filter, blend or opacity touches them. Every logo sits in a slot of one height
   (--tool-slot), so the names line up. The marks fill the slot; a wordmark of the same height reads far larger than a
   mark, so the wide work-system wordmarks sit lower (optical sizes, as in the client row), and those two carry no
   caption, since they name their tool (task 22, note N1). Task 22 (brand fix 4): Hermes Agent, OpenClaw and GitHub
   fill the slot as the AI assistants do, one height for the row. */
.works-with__tools {
  --tool-slot: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 34px;
  padding: 12px 0 18px;
}

.works-with__tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.works-with__tool img {
  --tool-height: var(--tool-slot);
  display: block;
  width: auto;
  height: var(--tool-height);
  margin: calc((var(--tool-slot) - var(--tool-height)) / 2) 0;
}

.works-with__tool img[src$="/google-workspace.png"] { --tool-height: calc(var(--tool-slot) * 0.62); }
.works-with__tool img[src$="/hubspot.png"] { --tool-height: calc(var(--tool-slot) * 0.76); }

.works-with__name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

/* ---------------------------------------------------------------- proof: the one dark field */

.section--dark {
  background: var(--emerald);
  color: var(--cream-body);
}

.section + .section--dark,
.section--dark + .section {
  border-top: 0;
}

.section--dark > h2 {
  color: var(--cream);
}

.section--dark a {
  color: var(--cream);
}

.section--dark :focus-visible {
  outline-color: var(--cream);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid rgba(241, 236, 221, 0.35);
}

.stats li {
  padding: 26px 30px 0 0;
}

.stats li + li {
  padding-left: 30px;
  border-left: 1px solid var(--line-on-dark);
}

/* The small key over each figure, as in the homepage receipts (round 2 R3). */
.stat-key {
  margin-bottom: 10px;
  color: var(--brass-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.stat-value {
  margin-bottom: 10px;
  color: var(--cream);
  font-family: var(--serif);
  font-variation-settings: "opsz" 36;   /* the homepage's optical size (round 3 N4) */
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.05;
}

.stat-label {
  color: var(--cream);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: balance;   /* a label that wraps does so evenly, never with one word left on its second line */
}

.proof__foot {
  margin-top: 60px;
  padding-top: 34px;
  border-top: 1px solid var(--line-on-dark);
}

.proof__about {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 760px;
}

.proof__clients {
  margin-top: 44px;
}

.portrait {
  flex: none;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(241, 236, 221, 0.3);
  border-radius: 50%;
  object-fit: cover;
  filter: sepia(0.18) saturate(0.9);   /* a light warm grade toward the field (round 2 L8) */
}

.about {
  color: var(--cream);
  font-size: 16px;
}

.about__signature {
  margin-top: 8px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
}

.references {
  margin-top: 10px;
  font-size: 14px;
}

.clients-caption {
  color: var(--brass-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Client logos in one tone on the palette: each mark becomes a cream (#F1ECDD) silhouette, at reduced opacity, on
   the emerald (round 2 L5). The 11 logos sit in a grid of equal cells, each centred: 6 + 5 on a desktop, 3 columns on
   a phone. */
.client-logos {
  --logo-opacity: 0.8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 26px 24px;
  margin-top: 22px;
}

.client-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
}

.client-logos img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(0.88) sepia(0.22);   /* black, then about cream: rgb(241, 234, 221) */
  opacity: var(--logo-opacity);
}

/* A client without a logo file: the name set as a mark, in the logos' tone (cream at their opacity). */
.client-logos__name {
  color: rgba(241, 236, 221, 0.8);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* Optical sizes, balanced by visual weight: each file has its own proportions and empty margin. The thin marks
   (Breitling, Novo Nordisk, Lectra) sit about 18% larger, so their ink weighs about as much as the others' (round 3
   N3); the negative margins trim the files' empty margin, so the cells keep one height. */
.client-logos img[src$="/coop.svg"] { height: 24px; }
.client-logos img[src$="/nestle.svg"] { height: 22px; }
.client-logos img[src$="/breitling.svg"] { height: 47px; }
.client-logos img[src$="/mercedes-benz.svg"] { height: 30px; }
.client-logos img[src$="/sonova.svg"] { height: 28px; }
.client-logos img[src$="/syngenta.svg"] { height: 28px; }
.client-logos img[src$="/thalia.png"] { height: 22px; }
.client-logos img[src$="/jaegermeister-wordmark.png"] { height: 24px; }
.client-logos img[src$="/novo-nordisk.png"] { height: 78px; max-width: none; margin: -12px 0 -17px; }
.client-logos img[src$="/lectra.png"] { height: 130px; max-width: none; margin: -54px -6px; }

/* ---------------------------------------------------------------- questions */

#faq {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: start;
}

#faq > h2 {
  margin-bottom: 0;
}

.faq__items details {
  border-top: 1px solid var(--line);
}

.faq__items details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq__items summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  color: var(--ink);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq__items summary::-webkit-details-marker {
  display: none;
}

.faq__items summary::after {
  content: "+" / "";
  flex: none;
  color: var(--brass);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.faq__items details[open] > summary::after {
  content: "\2212" / "";
}

.faq__items details > p {
  max-width: 68ch;
  padding-bottom: 22px;
  font-size: 16.5px;
}

/* ---------------------------------------------------------------- get started: the form and what it returns */

#get-started {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 56px;
  align-items: start;
}

/* What the form returns takes the form's column once the form gives way to it (round 3 A4). */
#get-started > #order-output,
#get-started > #start-confirmation {
  grid-column: 2;
}

#get-started > #order-output:empty {
  display: none;
}

.get-started__intro h2 {
  max-width: 16ch;
  margin-bottom: 20px;
  font-size: clamp(28px, 3.1vw, 36px);
  line-height: 1.12;
}

.get-started__intro .talk {
  margin-top: 22px;
  font-weight: 500;
}

/* Three numbered next steps above the form (task 17b), each under a hairline with its number in ink. */
.next-steps {
  counter-reset: next-step;
  max-width: 46ch;
}

.next-steps li {
  position: relative;
  counter-increment: next-step;
  padding: 10px 0 10px 34px;
  border-top: 1px solid var(--line);
}

.next-steps li::before {
  content: counter(next-step) / "";
  position: absolute;
  top: 10px;
  left: 0;
  color: var(--ink);
  font-weight: 600;
}

/* The form sits on the field under an ink rule, with no box of its own (round 2 L3). */
#get-started form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  padding-top: 24px;
  border-top: 1.5px solid var(--ink);
}

#get-started form > * {
  grid-column: 1 / -1;
}

#get-started form > .field {
  grid-column: auto;
}

#get-started form > .field:has(textarea) {
  grid-column: 1 / -1;
}

#get-started form > .visually-hidden {
  position: absolute;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

.field textarea {
  min-height: 104px;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 1px;
}

#get-started form button[type="submit"] {
  justify-self: start;
}

.form-note {
  color: var(--body);
  font-size: 13.5px;
}

/* The line under the submit button: nothing is binding yet (teams), no payment obligation (personal). */
#get-started form .binding-note {
  margin-top: -8px;
}

#form-error {
  padding: 14px 16px;
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--field-2);
  color: var(--ink);
  font-size: 15.5px;
}

#get-started form[aria-busy="true"] button[type="submit"] {
  opacity: 0.7;
  cursor: progress;
}

/* What the form returns: the receipt and success line, the one-page order request (teams) or the confirmation. The
   receipt sits on field-2 under its brass hairline; the order stays white, as paper (round 3 N6). */
.order__receipt,
#start-confirmation {
  max-width: 760px;
  padding: 14px 18px;
  border-left: 2px solid var(--brass);
  background: var(--field-2);
  color: var(--ink);
  font-weight: 600;
}

#start-confirmation p + p {
  margin-top: 6px;
  color: var(--body);
  font-weight: 400;
}

.order__success {
  max-width: 76ch;
  margin: 14px 0 24px;
}

.order {
  max-width: 760px;
  padding: 40px 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  font-size: 15px;
}

.order h3 {
  margin-bottom: 12px;
  font-size: 24px;
}

.order__notice {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.order dl {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 0 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.order dt,
.order dd {
  padding: 4px 0;
}

.order dt {
  color: var(--body);
}

.order dd {
  min-width: 0;
  color: var(--ink);
}

/* The priced items above the total, one PO line each (round 3 A7). */
.order__lines dd {
  font-variant-numeric: tabular-nums;
}

.order__total dd {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order__total dt {
  align-self: center;
  color: var(--ink);
  font-weight: 600;
}

/* With Keep it running: the monthly fee and year one, under the total in the size of the other rows. */
.order__total .order__more {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}

.order__total dt.order__more {
  color: var(--body);
  font-weight: 400;
}

.order__vat {
  margin-top: 8px;
  font-size: 13.5px;
}

#order-output .actions {
  margin-top: 18px;
}

/* ---------------------------------------------------------------- footer, thanks page, phone order bar */

.site-footer {
  padding: 36px var(--pad-x) 48px;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 14px;
}

.site-footer__line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.site-footer__address {
  display: none;
}

.section--thanks {
  padding-top: 112px;
  padding-bottom: 120px;
}

.section--thanks h1 {
  max-width: 18ch;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.08;
}

.section--thanks .actions {
  margin-top: 8px;
}

.back-link {
  margin-top: 26px;
  font-size: 15px;
}

/* The Legal and privacy page: one reading column, its sections under small serif headings. */
.section--legal {
  padding-top: 72px;
}

.section--legal h1 {
  max-width: 18ch;
  margin-bottom: 14px;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
}

.section--legal > p,
.section--legal > ul {
  max-width: 68ch;
}

.section--legal > h1 + p {
  font-size: 14px;
}

.section--legal > h2 {
  max-width: 68ch;
  margin: 40px 0 10px;
  font-size: 22px;
  line-height: 1.25;
}

.section--legal > h2 + p {
  max-width: 68ch;   /* as wide as the other paragraphs: the sales pages' narrower lead line does not apply here */
  margin: 0;
  font-size: inherit;
}

.section--legal > p + p,
.section--legal > p + ul,
.section--legal > ul + p {
  margin-top: 12px;
}

.section--legal ul {
  padding-left: 20px;
  list-style: disc;
}

.section--legal li + li {
  margin-top: 8px;
}

.section--legal li::marker {
  color: var(--brass);
}

/* The way back from the Legal and privacy page: the two pages it serves, side by side. */
.section--legal .back-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-weight: 500;
}

.order-bar {
  display: none;
}

/* ---------------------------------------------------------------- the full price table, on screen */

@media screen {
  /* The calculator replaces the full table once the script runs it; print and pages without JavaScript keep it. */
  html.js #price-table {
    display: none;
  }
}

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1199px) {
  .site-header__nav {
    display: none;
  }

  .timeline li {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .timeline .your-part,
  .timeline .my-part {
    grid-column: 2;
  }
}

@media (max-width: 959px) {
  #faq,
  #get-started {
    grid-template-columns: minmax(0, 1fr);
  }

  #get-started > #order-output,
  #get-started > #start-confirmation {
    grid-column: 1;
  }

  #faq {
    gap: 12px;
  }
}

@media (max-width: 759px) {
  :root {
    --gutter: 20px;
  }

  html {
    scroll-padding-top: 76px;
  }

  body {
    font-size: 16px;
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .site-header__inner {
    gap: 16px;
    min-height: 56px;
  }

  .site-header__wordmark {
    font-size: 17px;
  }

  .site-header__action {
    display: none;
  }

  .page-actions {
    gap: 14px;
  }

  .page-actions .text-button {
    font-size: 13px;
  }

  .section {
    padding-top: 56px;
    padding-bottom: 60px;
  }

  .section > h2 {
    margin-bottom: 24px;
  }

  .section > h2 + p {
    margin-top: -8px;
    font-size: 16.5px;
  }

  .section--hero {
    padding-top: 36px;
    padding-bottom: 44px;
  }

  .lede {
    margin: 18px 0 24px;
    font-size: 17px;
  }

  .facts {
    --sep-gap: 25px;
    font-size: 14px;
  }

  @media screen {
    /* On a phone the facts are a two-column list on hairlines, with no separators to land at random (round 2 L1). */
    .facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 20px;
      row-gap: 0;
      padding-top: 0;
    }

    .facts li {
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
    }

    .facts li::before {
      content: none;
    }
  }

  .section--hero .actions {
    margin-top: 24px;
  }

  .section--hero .actions .button {
    flex: 1 1 auto;
  }


  table {
    font-size: 14px;
  }

  th,
  td {
    padding-left: 12px;
  }

  /* The price list as one block per option on a phone: the table stays a table for assistive technology, and each
     figure carries its column name, so nothing hides off the right edge. */
  .price-list table,
  .price-list tbody,
  .price-list tr,
  .price-list th,
  .price-list td {
    display: block;
  }

  .price-list thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .price-list tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .price-list tbody tr:first-child {
    padding-top: 0;
  }

  .price-list tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .price-list tbody th {
    padding: 0 0 4px;
    border: 0;
    font-size: 15.5px;
  }

  .price-list td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
    border: 0;
    color: var(--ink);
    white-space: normal;
  }

  .price-list td::before {
    content: attr(data-label) / "";
    color: var(--body);
    text-align: left;
  }

  .price-list td:has(> .not-applicable:only-child) {
    display: none;
  }

  .timeline li {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline .your-part,
  .timeline .my-part {
    grid-column: 1;
  }

  @media screen {
    /* The grid on a phone (task 21): each row label on its own line above its three cells; the column heads stay
       pinned under the header while the grid scrolls by. Price and time come first, so they show without scrolling. */
    .compare,
    .compare thead,
    .compare tbody {
      display: block;
    }

    .compare colgroup {
      display: none;
    }

    .compare tr {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }

    .compare thead {
      position: sticky;
      top: 56px;
      z-index: 5;
      background: var(--field);
    }

    .compare thead tr {
      padding: 10px 0;
      border-bottom: 1.5px solid var(--ink);
    }

    .compare th,
    .compare td,
    .compare th:first-child,
    .compare td:first-child {
      display: block;
      padding: 0;
      border: 0;
      font-size: 14.5px;
    }

    .compare thead td:first-child {
      display: none;
    }

    .compare thead > tr > * {
      border: 0;
    }

    .compare thead th {
      font-size: 15px;
    }

    .compare tbody th {
      grid-column: 1 / -1;
      margin-bottom: 6px;
      font-size: 13.5px;
    }

    .compare tbody tr:first-child td {
      font-size: 16px;
    }

    .compare__note {
      font-size: 13px;
    }

    .example-week {
      padding: 18px 18px 20px;
    }

    /* The week before and after on a phone (task 18, designer item 4): Before and After side by side under one header
       row, shown once; each topic spans above its pair. */
    .before-after,
    .before-after thead,
    .before-after tbody,
    .before-after caption {
      display: block;
    }

    .before-after colgroup,
    .before-after thead td {
      display: none;
    }

    .before-after tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }

    .before-after thead tr {
      padding: 0 0 8px;
      border-bottom: 1.5px solid var(--ink);
    }

    .before-after th,
    .before-after td {
      display: block;
      padding: 0;
      border: 0;
      font-size: 15px;
    }

    .before-after thead th {
      font-size: 12px;
    }

    .before-after tbody th {
      grid-column: 1 / -1;
      margin-bottom: 6px;
    }

    /* The layers stack title, text and sample; the bracket keeps a narrower gutter. */
    .setup__figure {
      padding-left: 14px;
    }

    .layer {
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
    }

    .layer > button {
      justify-self: start;
    }

    .setup__stack--base::before {
      left: -10px;
    }

    .layer__person-word {
      display: none;
    }

    /* The first year: each row's name above its twelve cells; the labels move into the key under the strip. */
    .first-year__row {
      grid-template-columns: 0 repeat(12, minmax(0, 1fr));
      row-gap: 4px;
    }

    .first-year__row > * {
      grid-row: 2;
    }

    .first-year__row > .first-year__name {
      grid-row: 1;
      grid-column: 2 / -1;
    }

    .first-year__row--months span {
      font-size: 11px;
      text-align: center;
    }

    .first-year__month-word,
    .first-year__text {
      display: none;
    }

    .first-year__cell {
      min-height: 28px;
    }

    .first-year__key {
      display: block;
      margin-top: 14px;
    }

    .first-year__key li {
      display: flex;
      gap: 10px;
      font-size: 14px;
      line-height: 1.45;
    }

    .first-year__key li + li {
      margin-top: 6px;
    }
  }

  .works-with__tools {
    --tool-slot: 28px;
    gap: 16px 24px;
  }

  .stats li,
  .stats li + li {
    padding: 22px 0 24px;
    border-left: 0;
  }

  .stats li + li {
    border-top: 1px solid var(--line-on-dark);
  }

  .proof__foot {
    margin-top: 28px;
  }

  .proof__about {
    flex-direction: column;
    gap: 18px;
  }

  .proof__clients {
    margin-top: 36px;
  }

  .client-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 16px;
  }

  /* The one name set as text is wider than a third of a phone: it takes the last two cells, beside Lectra. */
  .client-logos__name {
    grid-column: span 2;
  }

  /* A third of a phone holds Lectra's wordmark at its earlier size only; larger, it reaches the page edge. */
  .client-logos img[src$="/lectra.png"] {
    height: 110px;
    margin: -46px -6px;
  }

  #get-started form {
    grid-template-columns: minmax(0, 1fr);
  }

  .order {
    padding: 24px 20px;
  }

  .order dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .order dd {
    padding-top: 0;
  }

  dialog {
    width: calc(100% - 24px);
    padding: 24px 20px 20px;
  }

  .order-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(247, 247, 242, 0.97);
  }

  .order-bar .button {
    flex: 1;
  }

  /* With the script, the bar shows only once the hero button has scrolled out of view (round 2 B1). */
  .order-bar[data-watch]:not(.is-shown) {
    display: none;
  }

  .section--thanks {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .section--legal {
    padding-top: 44px;
  }

  .section--legal > h2 {
    margin: 32px 0 8px;
  }

  .section--legal > h2 + p {
    margin: 0;
    font-size: inherit;
  }
}

/* A phone: the calculator's figures sit under their labels, so the label never pushes the amount onto a line of its
   own half way (round 4, brand B1). */
@media (max-width: 479px) {
  .calculator__line output {
    display: block;
  }
}

/* ---------------------------------------------------------------- reduced motion */

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

/* ---------------------------------------------------------------- print */

@page {
  size: A4;
  margin: 16mm 16mm 20mm;

  @bottom-left {
    content: var(--page-url);
    color: #4A5650;
    font-family: var(--sans);
    font-size: 8pt;
  }

  @bottom-center {
    content: var(--page-contact);
    color: #4A5650;
    font-family: var(--sans);
    font-size: 8pt;
  }

  @bottom-right {
    content: counter(page) " / " counter(pages);
    color: #4A5650;
    font-family: var(--sans);
    font-size: 8pt;
  }
}

@media print {
  html {
    scroll-padding-top: 0;
  }

  body {
    padding: 0;
    background: var(--white);
    color: #2A332E;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* No controls on paper: header, phone bar, calculator, buttons, the form and its leftovers. */
  .site-header,
  .order-bar,
  #calculator,
  #calc-results,
  .page-actions,
  button,
  #get-started form,
  #form-error,
  .section--hero .actions,
  .small-links,
  #order-output .actions,
  .order__receipt,
  .order__success,
  dialog::backdrop {
    display: none !important;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* The closing section stays off paper: page 1 says where to order, in one line under the facts, so the PDF ends on
     the samples, never on a near-empty page (round 4, brand F2). The order request still prints from here: its own
     print rule (end of this block) shows the section again. */
  #get-started {
    display: none;
  }

  .print-order-line {
    display: block;
    margin: 3mm 0 0;
    color: var(--ink);
    font-size: 9.5pt;
    font-weight: 500;
  }

  /* That line names the address and the contact, so a sales page prints no footer line (L6); the thanks and Legal
     and privacy pages keep theirs. */
  body:has(.print-order-line) .site-footer {
    display: none;
  }

  .section,
  .section + .section,
  .section--hero,
  .section--dark,
  #investment {
    padding: 0;
    margin: 0 0 9mm;
    border: 0;
    background: none;
    color: inherit;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--ink);
    break-after: avoid;
  }

  #hero-title {
    font-size: 24pt;
  }

  /* The wordmark: above the eyebrow on page 1, and at the top of the order request (round 3 A9). */
  .print-wordmark {
    display: flex;
    margin: 0 0 7mm;
    font-size: 13pt;
  }

  .section > h2,
  .section--dark > h2 {
    max-width: none;
    margin: 0 0 4mm;
    padding-top: 3mm;
    border-top: 1px solid var(--ink);
    color: var(--ink);
    font-size: 16pt;
  }

  /* A section's intro stays whole and with what follows it, so a heading and its intro never end a page alone (task
     18). */
  .section > h2 + p {
    margin: 0 0 4mm;
    font-size: 10.5pt;
    break-inside: avoid;
    break-after: avoid;
  }

  /* The Legal and privacy page on paper: one column across the page, each section under a small heading with room
     above it, no rule (the rule above a sales page section would run into the text before it). */
  .section--legal > h1 {
    font-size: 22pt;
  }

  .section--legal > p,
  .section--legal > ul,
  .section--legal > h2 {
    max-width: none;
  }

  .section--legal > h2 {
    margin: 7mm 0 2mm;
    padding-top: 0;
    border-top: 0;
    font-size: 13pt;
  }

  .section--legal > h2 + p {
    max-width: none;
    margin: 0;
  }

  .section--legal .back-link {
    display: none;
  }

  .lede {
    margin: 4mm 0;
    font-size: 11.5pt;
  }

  /* The facts stay one line across the page (round 2 L1). */
  .facts {
    --sep-gap: 4mm;
    font-size: 8.5pt;
  }

  /* As many equal columns as there are stats: teams/b prints two, with no empty third column. */
  .stats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4mm;
  }

  .cards,
  .phases,
  .data-points {
    grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr));
    gap: 4mm;
  }

  /* The grid prints as a table (task 21): the option names over their columns, a row per line. Task 22 (brand fix 7):
     it fits one page, so it stays whole under its heading (the headings' break-after keeps them together) and never
     leaves the heading and its first row alone at a page foot; a longer grid would break between its rows, each row
     whole, with the option names again at the top of the next page. */
  .compare {
    font-size: 9.5pt;
    break-inside: auto;
  }

  .compare thead {
    display: table-header-group;
  }

  .compare tr {
    break-inside: avoid;
  }

  .compare th,
  .compare td,
  .compare th:first-child,
  .compare td:first-child {
    padding: 1.5mm 4mm 1.5mm 0;
  }

  .compare thead th {
    padding-bottom: 2mm;
    font-size: 11pt;
  }

  .compare tbody tr:first-child td {
    font-size: 11pt;
  }

  .compare__note {
    margin-top: 0.5mm;
    font-size: 8.5pt;
  }

  .compare__price-note,
  .compare__credit,
  .compare__terms,
  .option-addons,
  .year-one-note {
    margin-top: 2mm;
    font-size: 10pt;
  }

  /* Every disclosure prints open (task 21): a forwarded PDF carries every step and the year-one tables. The link that
     opens it on screen stays off paper. */
  .more::details-content {
    content-visibility: visible;
    display: block;
  }

  .more {
    margin-top: 5mm;
  }

  .more > summary {
    display: none;
  }

  .more__body {
    margin-top: 0;
  }

  .phase {
    padding-top: 2mm;
    break-inside: avoid;
  }

  .phase h3 {
    font-size: 11pt;
  }

  .phase__number {
    width: 5mm;
    height: 5mm;
    font-size: 8pt;
  }

  .phase p {
    margin-top: 1.5mm;
  }

  .phases__closing {
    margin-top: 3mm;
    font-size: 10pt;
  }

  /* The example week on paper: the scenes side by side on white, under its label (task 21). */
  .example-week {
    margin: -2mm 0 6mm;
    padding: 0;
    background: none;
    break-inside: avoid;
  }

  .example-week__label {
    margin-bottom: 2mm;
    font-size: 7.5pt;
  }

  .example-week__scenes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2mm 5mm;
  }

  .example-week__scenes li {
    padding-top: 1.5mm;
    font-size: 9.5pt;
  }

  .data-point {
    padding-top: 2mm;
    break-inside: avoid;
  }

  .data-point h3 {
    margin-bottom: 1.5mm;
    font-size: 11pt;
  }

  .works-with__note {
    font-size: 9pt;
  }

  .phase p,
  .price-table > p,
  .cards p,
  .data-point p,
  .timeline p,
  .notes li,
  .investment__terms li,
  .faq__items details > p {
    font-size: 10pt;
  }

  /* Single rows, cards and answers stay whole; the lists and grids they sit in (How it runs, the Terms, the
     deliverables, the data points) break between them, so no block jumps to the next page and leaves a gap behind
     (round 4, brand F3). Headings stay with what follows them (break-after above). */
  .cards li,
  .deliverable,
  .timeline li,
  .faq__items details,
  .investment__terms li,
  .data-points li,
  table,
  .works-with__tools,
  .stats,
  .proof__about {
    break-inside: avoid;
  }

  /* The grid is the one table that may break between its rows (above). */
  table.compare {
    break-inside: auto;
  }

  #options table.compare {
    break-inside: avoid;
  }

  /* The tool row breaks between its groups, each label with its logos (task 21: kept whole, it jumped to the next page
     and left a third of one empty). */
  .works-with__title,
  .works-with__group {
    break-after: avoid;
  }

  .cards li {
    padding-top: 2mm;
  }

  .cards h3,
  .deliverable > h3 {
    font-size: 11pt;
  }

  /* Prices: the full table (hidden on screen once the calculator runs) and the list, one under the other, in one
     column (task 22: the two screen columns are for the calculator). */
  .investment__body,
  .investment__prices {
    display: block;
  }

  #price-table,
  #price-list {
    display: block;
  }

  .price-table,
  .price-list {
    margin-bottom: 5mm;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .price-table h3 {
    margin-bottom: 2mm;
    font-size: 11.5pt;
  }

  table {
    font-size: 9.5pt;
  }

  th,
  td {
    padding: 1.6mm 0 1.6mm 4mm;
  }

  .investment__terms {
    margin-top: 4mm;
  }

  .investment__terms li {
    padding: 1.5mm 0;
  }

  /* The setup prints as on screen in hairlines, the dashed frame and text, at the full text width; the documents follow
     it, two to a row. Like every list on paper (round 4, brand F3), the stack breaks between its layers, each layer
     whole, the frame with the first and the base line with the last: kept whole, it jumped to the next page and left a
     third of one empty. The samples print as an appendix after the questions (L6). */
  .setup {
    display: block;
  }

  .setup__figure {
    padding-left: 4mm;
  }

  .setup__tool {
    padding: 2mm 4mm;
    break-after: avoid;
  }

  .layer,
  .setup__stack--base {
    break-inside: avoid;
  }

  .setup__base {
    break-before: avoid;
  }

  .setup__tool-label,
  .setup__base-label,
  .setup__documents-label,
  .first-year__label {
    font-size: 7.5pt;
  }

  .setup__tool-names,
  .layer > p {
    font-size: 10pt;
  }

  .setup__layers {
    margin-top: 3mm;
  }

  .layer {
    grid-template-columns: 50mm minmax(0, 1fr);
    gap: 2mm 5mm;
    padding: 2.5mm 0;
  }

  .layer > h3 {
    font-size: 10.5pt;
  }

  .setup__stack--base::before {
    left: -3mm;
  }

  .layer__people > span {
    height: 5mm;
    font-size: 7.5pt;
    line-height: 5mm;
  }

  .setup__base {
    margin-top: 2mm;
    font-size: 9pt;
  }

  /* "With the setup" stays with the layers (task 22, note N8). A document's title is the section's last line, so its
     heading rule would chain the section to the options after it and push the documents onto the next page. */
  .setup__documents {
    margin-top: 6mm;
    break-before: avoid;
  }

  .setup__documents-label {
    margin-bottom: 2mm;
    break-after: avoid;
  }

  .deliverable > h3 {
    break-after: auto;
  }

  .deliverables {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm 8mm;
  }

  /* The ruler: its print build (the wide one, set tighter) across the text width, labels at 8 pt, whole on one page. It
     may stand apart from the head of the steps table: chained to it as well, heading, intro, ruler and head moved as
     one block and left page 1 a third empty. */
  .ruler {
    margin: 0 0 4mm;
    break-inside: avoid;
  }

  .ruler__svg--wide {
    display: none;
  }

  .ruler__svg--print {
    display: block;
  }

  .ruler__key-item svg {
    width: 3mm;
    height: 3mm;
  }

  .ruler__label,
  .ruler__detail {
    font-size: 8pt;
  }

  /* The total at 12/13 of the labels, as on screen, so its width estimate holds on paper too (task 21). */
  .ruler__total {
    font-size: 7.5pt;
  }

  .ruler__lane,
  .ruler__axis,
  .ruler__brass-label,
  .ruler__span-number {
    font-size: 7pt;
  }

  .ruler__mine {
    stroke-width: 1.5;
  }

  .ruler figcaption {
    margin-top: 1.5mm;
    font-size: 9pt;
  }

  .timeline__total {
    margin-top: 3mm;
    font-size: 10pt;
  }

  /* The first-year strip: as on screen, smaller, its cells in their colours, on one page. */
  .first-year {
    margin-top: 6mm;
    break-inside: avoid;
  }

  .first-year__row {
    grid-template-columns: 28mm repeat(12, minmax(0, 1fr));
  }

  .first-year__row + .first-year__row {
    margin-top: 1.5mm;
  }

  .first-year__row--months span,
  .first-year__row--months .first-year__name,
  .first-year__name,
  .first-year__text {
    font-size: 8pt;
  }

  .first-year__cell {
    min-height: 9mm;
  }

  .first-year__text {
    padding: 1mm 2mm;
  }

  .first-year__note {
    margin-top: 3mm;
    font-size: 10pt;
  }

  .deliverable {
    padding-top: 2mm;
    border-top: 1px solid var(--line);
  }

  .samples {
    margin: 0 0 9mm;
  }

  .samples__heading {
    display: block;
    margin: 0 0 4mm;
    padding-top: 3mm;
    border-top: 1px solid var(--ink);
    font-size: 16pt;
  }

  .samples + .section {
    border-top: 0;
  }

  dialog,
  dialog:modal {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0 0 4mm;
    padding: 0 0 0 4mm;
    overflow: visible;
    border: 0;
    border-left: 1px solid var(--brass);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font-size: 9.5pt;
  }

  dialog h3 {
    margin-bottom: 1.5mm;
    font-size: 10pt;
  }

  /* A sample's intro stays with its first lines, as a section's intro does, so a sample's heading and intro never end
     a page alone (task 20: on the shorter teams/b the champion guide's heading and intro ended page 10). */
  dialog h3 + p {
    break-after: avoid;
  }

  /* The samples' bullets set closer on paper (task 18): with the ruler and the layers the appendix ran a few lines onto
     a page of its own. */
  dialog li {
    margin-top: 0.8mm;
  }

  .panel-actions {
    display: none;
  }

  .timeline li {
    grid-template-columns: 26mm minmax(0, 1fr) 34mm 44mm;
    gap: 2mm 4mm;
    padding: 2.5mm 0;
  }

  /* A step's "when" sits beside its text in one grid row, so the headings' break-after: avoid would land after the
     whole row and chain every step to the next: the steps would move as one block and leave page 1 a third empty now
     that How it works follows the situation (task 17). The row itself stays whole (break-inside above). */
  .timeline h3 {
    break-after: auto;
  }

  .timeline .your-part,
  .timeline .my-part {
    grid-column: auto;
  }

  /* Paper runs the steps in columns too: "Your part" and "My part" head their columns once (round 3 N2, task 17b). */
  .timeline__head {
    display: grid;
    grid-template-columns: 26mm minmax(0, 1fr) 34mm 44mm;
    gap: 0 4mm;
    padding-bottom: 1.5mm;
    break-after: avoid;
  }

  .timeline__head span {
    font-size: 8pt;
  }

  .timeline .your-part .label,
  .timeline .my-part .label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* The week before and after stays a table on paper (task 17b). It breaks between its rows, each row whole, so the
     heading above it never takes the whole table to the next page. */
  .before-after {
    margin-bottom: 6mm;
    font-size: 10pt;
    break-inside: auto;
  }

  .before-after tr {
    break-inside: avoid;
  }

  /* Its head never ends a page without a row under it (with the section heading above it, task 18). */
  .before-after caption,
  .before-after thead {
    break-after: avoid;
  }

  .before-after tbody tr:first-child {
    break-before: avoid;
  }

  .before-after caption {
    padding-bottom: 2mm;
    font-size: 8pt;
  }

  .before-after th,
  .before-after td {
    padding: 1.5mm 4mm 1.5mm 0;
  }

  /* The proof in the first screen prints on page 1, small. */
  .hero-proof {
    margin-top: 4mm;
    font-size: 9.5pt;
  }

  .hero-proof__portrait {
    width: 10mm;
    height: 10mm;
  }

  .hero-proof__line {
    text-decoration: none;
  }

  /* The dash before each note sits on the middle of the first line at the print size too (L6). */
  .notes li {
    padding: 1mm 0 1mm 5mm;
  }

  .notes li::before {
    top: calc(1mm + 0.72em);
  }

  .works-with {
    margin-top: 6mm;
  }

  /* Every answer, though the items are closed on screen. */
  .faq__items details::details-content {
    content-visibility: visible;
    display: block;
  }

  .faq__items summary {
    padding: 2.5mm 0 1mm;
    font-size: 11pt;
  }

  .faq__items summary::after {
    display: none;
  }

  .faq__items details > p {
    padding-bottom: 2.5mm;
  }

  #faq,
  .proof__foot {
    display: block;
  }

  /* The proof prints on white: ink figures, logos in one grey. */
  .stats {
    border-top: 1px solid var(--line);
  }

  .stats li,
  .stats li + li {
    padding: 3mm 3mm 0 0;
    border: 0;
  }

  /* The keys share one height, two lines, so the three figures sit on one line (task 22, note N2). */
  .stat-key {
    min-height: 2.8em;
    color: var(--brass-ink);
  }

  .stat-value {
    color: var(--ink);
    font-size: 20pt;
  }

  .stat-label,
  .about,
  .about__signature {
    color: inherit;
    font-size: 10pt;
  }

  .references {
    color: var(--body);
    font-size: 9pt;
  }

  .proof__foot {
    margin-top: 5mm;
    padding-top: 0;
    border: 0;
  }

  .proof__about {
    margin-bottom: 5mm;
  }

  .portrait {
    width: 18mm;
    height: 18mm;
    border-color: var(--line);
  }

  .clients-caption {
    color: var(--brass-ink);
  }

  .proof__clients {
    break-inside: avoid;
  }

  /* The client logos keep the screen's grid on paper (round 4, brand B2): six equal cells, 6 + 5, each logo centred in
     its cell, every logo under one shared height (9mm) and no wider than its cell, so no two touch. The heights are
     the screen's optical sizes at three quarters; paper is narrower than a phone breakpoint, so the phone's grid,
     its two-cell name and its Lectra size are set back here. Novo Nordisk and Lectra carry empty margin in their
     files, which the negative margins trim as on screen; Lectra's wordmark comes down to its neighbours' size. */
  .client-logos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5mm 6mm;
    margin-top: 3mm;
  }

  .client-logos li {
    min-width: 0;
    height: 10mm;
  }

  .client-logos img {
    max-width: 100%;
    max-height: 9mm;
    filter: brightness(0);
    opacity: 0.55;
  }

  .client-logos img[src$="/coop.svg"] { height: 4.8mm; }
  .client-logos img[src$="/nestle.svg"] { height: 4.4mm; }
  .client-logos img[src$="/breitling.svg"] { height: 9mm; }
  .client-logos img[src$="/mercedes-benz.svg"] { height: 6mm; }
  .client-logos img[src$="/sonova.svg"] { height: 5.6mm; }
  .client-logos img[src$="/syngenta.svg"] { height: 5.6mm; }
  .client-logos img[src$="/thalia.png"] { height: 4.4mm; }
  .client-logos img[src$="/jaegermeister-wordmark.png"] { height: 4.8mm; }
  .client-logos img[src$="/novo-nordisk.png"] { height: 14.2mm; max-height: none; margin: -2.1mm 0 -3.1mm; }
  .client-logos img[src$="/lectra.png"] { height: 23.4mm; max-height: none; margin: -9.8mm -1.2mm; }

  .client-logos__name {
    grid-column: auto;
    color: rgba(0, 0, 0, 0.6);
    font-size: 9pt;
  }

  .order {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 10pt;
    line-height: 1.3;
  }

  .order h3 {
    font-size: 16pt;
  }

  .order .print-wordmark {
    margin-bottom: 4mm;
    font-size: 12pt;
  }

  /* Tight rows, so the longest order (every optional field, Keep it running, a long role, the priced items) still fits
     one A4 page. The priced items run straight into the total below them. */
  .order dl {
    padding: 1.2mm 0;
  }

  .order .order__lines {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .order dt,
  .order dd {
    padding: 0.15mm 0;
  }

  .order h3 {
    margin-bottom: 2mm;
  }

  .order__notice {
    padding-bottom: 2.5mm;
  }

  .order__total dd {
    font-size: 13pt;
  }

  .order__total .order__more {
    font-size: 10pt;
  }

  /* "What is included" names the sessions and support behind the price as well (task 18): at 9 pt, as the order's
     other secondary lines, the longest order still fits one page. */
  .order__notice,
  .order__vat,
  .order__included dd {
    font-size: 9pt;
  }

  /* The last line of the printed page: name, contact and the page address, for browsers that leave out the @page
     margin boxes (Safari, Firefox). Chrome and Edge show the address and contact in the margin too. */
  .site-footer {
    margin-top: -4mm;
    padding: 2mm 0 0;
    border-top: 1px solid var(--line);
    color: var(--body);
    font-size: 8.5pt;
    break-before: avoid;
    break-inside: avoid;
  }

  .site-footer__address {
    display: inline;
  }

  /* On paper the footer line stays name, contact and address; the Legal and privacy link is for the screen. */
  .site-footer__legal {
    display: none;
  }

  /* The footer line and the last section become siblings, so the footer's break-before: avoid keeps them on one
     page (with main as a box in between, Chrome breaks before the footer and leaves it alone on a last page). */
  main {
    display: contents;
  }

  /* "Print this note" in a sample panel: only that open panel goes to paper. */
  html[data-print^="panel-"] body :not(:has(dialog[open])):not(dialog[open]):not(dialog[open] *) {
    display: none !important;
  }

  html[data-print^="panel-"] body :has(dialog[open]) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html[data-print^="panel-"] dialog[open] {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 11pt;
  }

  html[data-print^="panel-"] dialog[open] h3 {
    margin-bottom: 4mm;
    font-size: 18pt;
  }

  /* "Save as PDF" on the order request: only the order goes to paper, on one A4 page. */
  html[data-print="order"] body :not(:has(.order)):not(.order):not(.order *) {
    display: none !important;
  }

  html[data-print="order"] body :has(.order) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
}