/* subtractsoftware.com — one stylesheet for the whole site.
 *
 * Part 1 is teal's tokens, copied by value from teal/src/teal/static/tokens.css (light and dark).
 * Names and values are teal's own; nothing here invents a color.
 * Part 2 is the small marketing layer: larger type and a reading column. Teal is sized for
 * application screens (15px body, 36px display), and a company page needs more room than that.
 * Dark mode follows the visitor's system setting until they press the theme button in the
 * header; after that it follows their choice (site/theme.js, kept in their own browser).
 */

/* ---------- the site's typeface, served from the site itself ----------
 * Instrument Sans, SIL Open Font License (site/fonts/OFL.txt). It is the logo's typeface.
 * One variable file holds weights 400 to 700. No request leaves the site.
 * To go back to the system font, delete "Instrument Sans" from --site-font-sans below. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-italic.woff2") format("woff2");
}

/* ---------- 1. teal tokens ---------- */

:root {
  color-scheme: light;

  --teal-color-bg: #f5f8f7;
  --teal-color-surface: #ffffff;
  --teal-color-surface-sunken: #eaf0ee;
  --teal-color-border: #d5dedb;
  --teal-color-border-strong: #a9b8b4;
  --teal-color-text: #16211f;
  --teal-color-text-muted: #52605d;
  --teal-color-text-faint: #6e7c78;
  --teal-color-accent: #0f6b62;
  --teal-color-accent-strong: #0a4f49;
  --teal-color-accent-soft: #d9eae7;
  --teal-color-on-accent: #ffffff;
  --teal-color-ok: #23694b;
  --teal-color-ok-soft: #d9ecdf;
  --teal-color-warn: #8a5a00;
  --teal-color-warn-soft: #f4e6c8;
  --teal-color-danger: #a63a31;
  --teal-color-danger-soft: #f6dfdc;
  --teal-color-focus: #0f6b62;

  --teal-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --teal-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --teal-text-xs: 0.75rem;
  --teal-text-sm: 0.8125rem;
  --teal-text-base: 0.9375rem;
  --teal-text-md: 1.0625rem;
  --teal-text-lg: 1.375rem;
  --teal-text-xl: 1.75rem;
  --teal-text-2xl: 2.25rem;
  --teal-font-regular: 400;
  --teal-font-medium: 500;
  --teal-font-semibold: 600;
  --teal-leading-tight: 1.25;
  --teal-leading-base: 1.5;

  --teal-space-1: 0.25rem;
  --teal-space-2: 0.5rem;
  --teal-space-3: 0.75rem;
  --teal-space-4: 1rem;
  --teal-space-5: 1.5rem;
  --teal-space-6: 2rem;
  --teal-space-7: 3rem;
  --teal-space-8: 4rem;

  --teal-size-page-max: 72rem;
  --teal-size-measure: 42rem;
  --teal-radius-md: 0.5rem;
  --teal-radius-lg: 0.75rem;
  --teal-focus-ring: 0 0 0 2px var(--teal-color-surface), 0 0 0 4px var(--teal-color-focus);

  /* ---------- 2. the marketing layer (sizes only) ---------- */
  --site-text-display: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  --site-text-title: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --site-text-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --site-text-email: clamp(1.25rem, 5.6vw, 3.25rem);
  /* The type scale, in full. Six sizes and nothing between them:
       display / title   the page heading
       lead (24)         an opening paragraph, and the statement that opens a section
       item (20)         the name of a thing in a list
       md (17)           body text, and the section label
       base (15)         small print: notes, captions, tables, nav, footer
       ui (14)           the monospace cells and the one button
     Three weights: 400 body, 500 statements, 600 names and labels. */
  --site-text-item: 1.25rem;
  --site-text-ui: 0.875rem;
  /* One right edge for everything in the reading column: text, tables, lists and notes. */
  --site-measure: 38rem;
  --site-gutter: clamp(1rem, 5vw, 3.5rem);
  --site-section-gap: clamp(2rem, 3.2vw, 3rem);
  --site-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --site-label-col: 13rem;
  --site-page-max: 65rem; /* label column + gap + teal's reading measure + gutters */
  /* The founder's note is the only first-person voice on the site, so it is the only serif. */
  --site-font-letter: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* The site opens light for everyone (founder, 2026-09-21). Dark is the visitor's choice, made with
   the header button; it does not follow the computer's setting. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --teal-color-bg: #0e1514;
  --teal-color-surface: #16201e;
  --teal-color-surface-sunken: #0b100f;
  --teal-color-border: #263230;
  --teal-color-border-strong: #3d4c49;
  --teal-color-text: #e8eeec;
  --teal-color-text-muted: #9db0ab;
  --teal-color-text-faint: #7d8f8a;
  --teal-color-accent: #56c8b8;
  --teal-color-accent-strong: #7fd7ca;
  --teal-color-accent-soft: #123f39;
  --teal-color-on-accent: #06211d;
  --teal-color-ok: #6fcf9a;
  --teal-color-ok-soft: #12352a;
  --teal-color-warn: #e2b25c;
  --teal-color-warn-soft: #3b2d0d;
  --teal-color-danger: #ec8b80;
  --teal-color-danger-soft: #43201c;
  --teal-color-focus: #56c8b8;
}

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

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

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

body {
  margin: 0;
  background: var(--teal-color-bg);
  color: var(--teal-color-text);
  font-family: var(--site-font-sans);
  font-size: var(--teal-text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a {
  color: var(--teal-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--teal-color-accent-strong); text-decoration-thickness: 2px; }
a:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--teal-focus-ring); }

strong { font-weight: var(--teal-font-semibold); }
sup.tm { font-size: 0.55em; vertical-align: super; line-height: 0; font-weight: var(--teal-font-regular); }

.wrap {
  width: 100%;
  max-width: var(--site-page-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.skip {
  position: absolute; left: var(--teal-space-4); top: -4rem;
  padding: var(--teal-space-2) var(--teal-space-4);
  background: var(--teal-color-surface); color: var(--teal-color-text);
  border-radius: var(--teal-radius-md);
}
.skip:focus { top: var(--teal-space-3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- header and footer ---------- */

.site-header { border-bottom: 1px solid var(--teal-color-border); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--teal-space-2) var(--teal-space-6);
  padding-block: var(--teal-space-5);
}
.wordmark {
  color: var(--teal-color-text);
  font-size: var(--teal-text-md);
  font-weight: var(--teal-font-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark:hover { color: var(--teal-color-text); }
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; }
.wordmark .mark { display: block; flex: none; height: 1.35em; width: auto; color: var(--teal-color-accent); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--teal-space-1) var(--teal-space-5); }

/* The theme button. It shows the theme a press would switch to: a moon in the light theme, a sun in
   the dark one. Which icon shows is decided here, by the same selectors that choose the tokens, so
   the icon can never disagree with the page. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--teal-radius-md);
  background: none; color: var(--teal-color-text-muted); cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--teal-color-text); border-color: var(--teal-color-border-strong); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--teal-focus-ring); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun, .shot .shot-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .sun, :root[data-theme="dark"] .shot .shot-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .moon, :root[data-theme="dark"] .shot .shot-light { display: none; }
.site-nav a {
  display: inline-block;
  padding-block: var(--teal-space-1);
  color: var(--teal-color-text-muted);
  font-size: var(--teal-text-base);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--teal-color-text); }
.site-nav a[aria-current="page"] {
  color: var(--teal-color-text);
  border-bottom-color: var(--teal-color-accent);
}

/* On a phone the header is two tidy rows: the name and the theme button on the first, the menu
   on the second. Left to wrap on its own it ran to three, with the button stranded under the menu. */
@media (max-width: 40rem) {
  .site-header .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: var(--teal-space-2); padding-block: var(--teal-space-4); }
  .theme-toggle { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  .site-nav ul { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .site-nav a { font-size: var(--site-text-ui); }
}
/* the very narrowest phones cannot hold five words on one line; there the menu may wrap */
@media (max-width: 21.5rem) {
  .site-nav ul { flex-wrap: wrap; justify-content: flex-start; gap: var(--teal-space-1) var(--teal-space-3); }
}

.site-footer {
  margin-top: var(--site-section-gap);
  border-top: 1px solid var(--teal-color-border);
  color: var(--teal-color-text-muted);
  font-size: var(--teal-text-base);
}
.site-footer .wrap { padding-block: var(--teal-space-6); }

/* ---------- page head ---------- */

.page-head { padding-top: clamp(1.5rem, 2.5vw, 2rem); }
.page-head h1 {
  font-size: var(--site-text-title);
  font-weight: var(--teal-font-semibold);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.page-head--home h1 { font-size: var(--site-text-display); line-height: 1.04; letter-spacing: -0.034em; }
.page-head--home h1 span { display: block; }
.page-head .tagline {
  margin-top: var(--teal-space-5);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: var(--teal-font-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.page-head .lead {
  margin-top: var(--teal-space-5);
  max-width: var(--teal-size-measure);
  color: var(--teal-color-text-muted);
  font-size: var(--site-text-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

/* The list of sections on a long page. On a phone or a narrow window it sits under the offer at
   the top. On a wide screen it moves into the empty margin on the right and stays there while the
   page scrolls, so any section is one click away from anywhere. */
.toc { margin-top: var(--teal-space-6); }
.toc-box {
  padding: var(--teal-space-4) var(--teal-space-5);
  border: 1px solid var(--teal-color-border-strong);
  border-radius: var(--teal-radius-md);
  background: var(--teal-color-surface);
}
.toc-title { color: var(--teal-color-text-muted); font-size: var(--teal-text-sm); font-weight: var(--teal-font-semibold); }
.toc ul { margin-top: var(--teal-space-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 var(--teal-space-5); }
.toc a {
  display: block;
  padding-block: 0.3rem;
  color: var(--teal-color-text);
  font-size: var(--teal-text-base);
  text-decoration: none;
}
.toc a:hover { color: var(--teal-color-accent); }
.toc a:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--teal-focus-ring); }
/* "Request a demo" is the one action in the list, so it is a button, not another link. */
.toc .toc-offer { margin-block: var(--teal-space-2); }
.toc .toc-offer a {
  padding: var(--teal-space-2) var(--teal-space-3);
  border-radius: var(--teal-radius-md);
  background: var(--teal-color-accent);
  color: var(--teal-color-on-accent);
  font-weight: var(--teal-font-semibold);
  text-align: center;
}
.toc .toc-offer a:hover { background: var(--teal-color-accent-strong); color: var(--teal-color-on-accent); }
/* Where the list runs in rows, the button would break a row; it goes on its own line below them. */
@media (max-width: 99.99rem) {
  .toc .toc-offer { grid-column: 1 / -1; order: 1; margin: var(--teal-space-3) 0 0; }
  .toc .toc-offer a { display: inline-block; }
}
@media (min-width: 100rem) {
  .toc { margin: 0; }
  .toc .wrap { max-width: none; padding: 0; }
  .toc-box {
    position: fixed;
    top: 7rem;
    right: max(var(--teal-space-5), calc((100vw - var(--site-page-max)) / 2 - 15.5rem));
    width: 14rem;
    z-index: 1;
  }
  .toc ul { display: block; }
}

/* ---------- sections: a label column beside a reading column ---------- */

.section { margin-top: var(--site-section-gap); }
/* A link to a section lands on the section itself, with its divider just below the top of the
   window. It must not land on the heading: the heading is sticky, and a browser cannot reliably
   scroll to something that moves with the page. */
main [id] { scroll-margin-top: var(--teal-space-4); }
.section > .wrap { display: grid; gap: var(--teal-space-5); }
/* A section is one band. The hairline is drawn as the first thing inside the band, so it starts
   and ends exactly on the text's own edges rather than running out into the page margin. */
.section > .wrap::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--teal-color-border); }
.section h2 {
  color: var(--teal-color-text-muted);
  font-size: var(--teal-text-md);
  font-weight: var(--teal-font-semibold);
  line-height: 1.4;
}
.section .body { min-width: 0; max-width: var(--site-measure); text-wrap: pretty; }
/* One rhythm inside every section: whatever follows, follows at the same distance. Components
   that need more or less say so themselves, further down. */
.section .body > * + * { margin-top: var(--teal-space-4); }
.prose p + p { margin-top: var(--teal-space-4); }

/* The statement. Every section on the product page opens with one: the claim, said once, before
   the evidence. It is also the sum line under a ledger and the last line of a long section. */
.closing, .glance-kicker, .ledger-result {
  font-size: var(--site-text-lead);
  font-weight: var(--teal-font-medium);
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

@media (min-width: 60rem) {
  /* A section is one band, not two loose columns. The hairline runs across both, so the heading
     on the left and the content on the right are visibly inside the same thing. Before this the
     heading floated in an empty column with nothing tying it to what it introduced.
     The heading sticks while its own section scrolls past, so on a long section the reader can
     always see which question they are still inside. */
  .section > .wrap {
    grid-template-columns: var(--site-label-col) minmax(0, 1fr);
    column-gap: var(--teal-space-6);
  }
  .section h2 {
    position: sticky;
    top: var(--teal-space-5);
    align-self: start;
    padding-top: 0.35rem; /* sits on the first line of the statement beside it */
  }
  .section > .wrap:has(> .span) h2 { position: static; } /* a full-width block would pass under it */
  .section > .wrap > h2.visually-hidden { position: absolute; } /* a hidden heading takes no room in the band */
  .section .body { grid-column: 2; } /* holds its column even when the heading is hidden */
}

/* ---------- the subtraction: five lines taken away, one line left ---------- */

.ledger:not(:first-child) { border-top: 1px solid var(--teal-color-border); }
.ledger:first-child .row:first-child { padding-top: 0; }
.ledger .row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--teal-space-2);
  padding-block: var(--teal-space-4);
  border-bottom: 1px solid var(--teal-color-border);
}
.ledger .sign {
  grid-row: span 2;
  color: var(--teal-color-accent);
  font-size: var(--teal-text-xl);
  font-weight: var(--teal-font-regular);
  line-height: 1;
}
.ledger dt { font-size: var(--site-text-item); font-weight: var(--teal-font-semibold); line-height: 1.3; letter-spacing: -0.01em; }
.ledger dd { grid-column: 2; color: var(--teal-color-text-muted); }
.ledger .row:last-of-type { border-bottom: 0; }
.ledger-result {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--teal-space-2);
  padding-top: var(--teal-space-5);
  border-top: 2px solid var(--teal-color-text);
}
.section .body > .ledger-result { margin-top: 0; }
.ledger-result .sign { color: var(--teal-color-accent); font-weight: var(--teal-font-regular); }

@media (min-width: 44rem) {
  .ledger .row { grid-template-columns: 2.25rem 10rem minmax(0, 1fr); align-items: baseline; }
  .ledger .sign { grid-row: auto; }
  .ledger dd { grid-column: 3; }
}

/* "What it is" lists the four things an institution would otherwise buy separately, each one
   opening like every other detail on the page. The names keep the ledger's larger size. */
.more--sum summary { font-size: var(--site-text-item); letter-spacing: -0.01em; }
.more--sum + .ledger-result { column-gap: 0; } /* the result lines up with the names above it */

/* ---------- the pledge ---------- */

.pledge { counter-reset: pledge; }
.pledge li {
  counter-increment: pledge;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--teal-space-2);
  padding-block: var(--teal-space-4);
  border-top: 1px solid var(--teal-color-border);
}
.pledge li:first-child { padding-top: 0; border-top: 0; }
.pledge li::before {
  content: counter(pledge) ".";
  color: var(--teal-color-accent);
  font-size: var(--site-text-item);
  font-weight: var(--teal-font-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.pledge h3 {
  font-size: var(--site-text-item);
  font-weight: var(--teal-font-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.pledge p { grid-column: 2; margin-top: var(--teal-space-2); color: var(--teal-color-text-muted); text-wrap: pretty; }

.next {
  margin-top: var(--teal-space-7);
  font-size: var(--site-text-lead);
  font-weight: var(--teal-font-medium);
  letter-spacing: -0.012em;
}

/* ---------- product page ---------- */

.terms .row { padding-block: var(--teal-space-4); border-top: 1px solid var(--teal-color-border); }
.terms .row:first-child { padding-top: 0; border-top: 0; }
.terms dt { font-weight: var(--teal-font-semibold); }
.terms dd { color: var(--teal-color-text-muted); text-wrap: pretty; }
@media (min-width: 44rem) {
  .terms .row { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: var(--teal-space-5); align-items: baseline; }
}

.figure { margin-top: var(--teal-space-6); }
.figure figcaption { margin-top: var(--teal-space-3); color: var(--teal-color-text-muted); font-size: var(--teal-text-base); max-width: var(--site-measure); text-wrap: pretty; }

/* the life of the data, drawn inside one boundary */
.life {
  position: relative;
  padding: var(--teal-space-6) var(--teal-space-5) var(--teal-space-5);
  border: 1px solid var(--teal-color-border-strong);
  border-radius: var(--teal-radius-lg);
  background: var(--teal-color-surface);
}
.life .edge {
  position: absolute; top: -0.75em; left: var(--teal-space-4);
  padding-inline: var(--teal-space-2);
  background: var(--teal-color-bg);
  color: var(--teal-color-text-muted);
  font-size: var(--teal-text-base);
  line-height: 1.5;
}
.life ol { display: flex; flex-direction: column; gap: var(--teal-space-2); }
.life li { display: flex; align-items: center; gap: var(--teal-space-3); }
.life li + li::before { content: "\2193"; display: inline-block; width: 1em; text-align: center; color: var(--teal-color-accent); font-weight: var(--teal-font-regular); }
.life li:first-child { padding-left: calc(1em + var(--teal-space-3)); }
@media (min-width: 44rem) {
  .life ol { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .life li:first-child { padding-left: 0; }
  .life li + li::before { content: "\2192"; }
}

/* one column, read by three people */
/* A table is ruled like the ledger: hairlines between rows, a firmer line under the headings, and
   no box. The first column starts on the same edge as the paragraph above it, and the last column
   ends on the same edge, so a table reads as part of the text and not as a widget dropped into it. */
.scroll-x { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--teal-text-base); }
th, td { padding: var(--teal-space-3) var(--teal-space-4); text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--teal-color-border); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { padding-top: 0; border-bottom-color: var(--teal-color-border-strong); color: var(--teal-color-text-muted); font-weight: var(--teal-font-semibold); }
tbody th { font-weight: var(--teal-font-semibold); }
.masks td { font-family: var(--teal-font-mono); font-size: var(--site-text-ui); white-space: nowrap; }
/* text-faint measures 4.36:1 here, just under the 4.5:1 that WCAG AA asks of text this size.
   Muted clears it and still reads as the quietest of the three states. */
.masks .hidden { color: var(--teal-color-text-muted); }
.masks .part { color: var(--teal-color-warn); }
.masks .clear { color: var(--teal-color-ok); }
.measured td.num { white-space: nowrap; font-weight: var(--teal-font-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.measured th[scope="col"].num { text-align: right; }

/* The machines named under a row in a cost table. Quieter than the row, so the price still leads,
   but present, because a reader who knows AWS wants to see which machines we actually mean. */
.measured .spec { display: block; margin-top: 0.2em; color: var(--teal-color-text-muted); }

/* Footnotes under a table, marked with asterisks in the table itself. Deliberately smaller than the
   body text: the table is what a scanning reader should land on first. */
.footnotes { margin-top: var(--teal-space-5); display: grid; gap: var(--teal-space-4); }
.footnotes > div { display: grid; grid-template-columns: 1.4em 1fr; gap: var(--teal-space-2); font-size: var(--teal-text-base); }
.footnotes .mark { color: var(--teal-color-accent); font-weight: var(--teal-font-semibold); }
.footnotes p { color: var(--teal-color-text-muted); text-wrap: pretty; }
.footnotes strong { color: var(--teal-color-text); }
.footnotes + p { margin-top: var(--teal-space-5); }

/* "In one minute": what the product does, and what we believe, side by side at the top of the
   page, sized to sit in one screen beside the product name. Both columns use the interface
   typeface: an earlier version set the principles in the letter serif, and side by side the two
   read as an inconsistency rather than as a decision. The difference is carried by the heading
   colour and by the teal bar, which the product column has and the principles column does not.
   The anchor wraps only the headline, never the sentence under it, so a screen reader announces
   a short link rather than a paragraph. */
.glance { display: grid; gap: var(--teal-space-5); }
@media (min-width: 52rem) {
  .glance { grid-template-columns: 1fr 1fr; column-gap: var(--teal-space-7); }
}
.glance-kicker { grid-column: 1 / -1; }
/* No rules in this block. The band's own hairline above it is the only line. The claims are set at
   the size of a name, the sentences stay quiet, and space separates the items. An earlier version
   ruled every item and underlined every headline, and the ruling was louder than the message. */
.glance h3 { color: var(--teal-color-text-muted); font-size: var(--teal-text-base); font-weight: var(--teal-font-semibold); }
.glance ul { margin-top: var(--teal-space-4); display: grid; gap: var(--teal-space-5); list-style: none; }
.glance a { text-decoration: none; color: inherit; }
.glance strong {
  display: block;
  font-size: var(--site-text-item);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--teal-color-text);
  text-wrap: balance;
}
/* Each headline is a link into the page. It says so on hover and on keyboard focus, in the accent
   colour, rather than carrying an underline all the time. */
.glance a:hover strong, .glance a:focus-visible strong {
  color: var(--teal-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.glance li > span { display: block; margin-top: var(--teal-space-1); color: var(--teal-color-text-muted); text-wrap: pretty; }

/* Detail a reader can open. The answer stays on the page for anyone who wants it, and out of the
   way of anyone who does not. It is the browser's own <details>, so it needs no script and opens
   for a keyboard and a screen reader as it does for a mouse. The marker is the site's own sign:
   a plus to open, a minus to close, drawn with the same bars as the ledgers. */
.more { border-top: 1px solid var(--teal-color-border-strong); }
.more details { border-bottom: 1px solid var(--teal-color-border); }
.more summary {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center;
  padding-block: var(--teal-space-3);
  font-weight: var(--teal-font-semibold);
  cursor: pointer; list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before {
  content: ""; width: 1.125rem; height: 1.125rem;
  background:
    linear-gradient(var(--teal-color-accent), var(--teal-color-accent)) center / 100% 0.1875rem no-repeat,
    linear-gradient(var(--teal-color-accent), var(--teal-color-accent)) center / 0.1875rem 100% no-repeat;
}
.more details[open] summary::before {
  background: linear-gradient(var(--teal-color-accent), var(--teal-color-accent)) center / 100% 0.1875rem no-repeat;
}
.more summary:hover { color: var(--teal-color-accent); }
.more summary:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--teal-focus-ring); }
.more details > p { margin: 0 0 var(--teal-space-4) 2.25rem; color: var(--teal-color-text-muted); font-size: var(--teal-text-base); text-wrap: pretty; }
.more details > p strong { color: var(--teal-color-text); }
@media print { .more details > p { display: block; } }

/* The invitation, right after the page has said what the product is, before the principles. It stays
   closed so it does not interrupt. It is a tinted panel, like the callout, so it reads as one thing to
   act on rather than a row between two loose lines. */
.more--offer {
  margin-bottom: var(--teal-space-4);
  padding-inline: var(--teal-space-5);
  border: 0;
  border-left: 3px solid var(--teal-color-accent);
  border-radius: var(--teal-radius-md, 8px);
  background: var(--teal-color-accent-soft);
}
.more--offer summary { padding-block: var(--teal-space-4); }
#offer { scroll-margin-top: 6.5rem; } /* the link opens the panel and lands with its heading in view */
.more--offer details { border-bottom: 0; }
.more--offer summary { color: var(--teal-color-accent); font-size: var(--site-text-item); }
.more--offer details > p { max-width: var(--site-measure); }
.more--offer details > p a { font-weight: var(--teal-font-semibold); }

/* A teal callout. Used where a number on the page needs its caveat and an invitation to talk,
   rather than a footnote nobody reads. Both accent tokens flip in dark mode, so it follows. */
.callout {
  margin-top: var(--teal-space-6);
  padding: var(--teal-space-5);
  background: var(--teal-color-accent-soft);
  border-left: 3px solid var(--teal-color-accent);
  border-radius: var(--teal-radius-md, 8px);
  text-wrap: pretty;
}
.callout p { margin: 0; }
.callout p + p { margin-top: var(--teal-space-3); }

/* Bold and underlined, for the one sentence in a block that must not be skimmed past. The
   underline is teal and offset so it reads as emphasis rather than as a link. */
.underline {
  text-decoration: underline;
  text-decoration-color: var(--teal-color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.note, .section .body > .note { margin-top: var(--teal-space-3); color: var(--teal-color-text-muted); font-size: var(--teal-text-base); text-wrap: pretty; }

.two-up { display: grid; gap: var(--teal-space-4) var(--teal-space-5); }
.two-up li { padding-top: var(--teal-space-3); border-top: 1px solid var(--teal-color-border-strong); }
@media (min-width: 44rem) { .two-up { grid-template-columns: 1fr 1fr; } }

/* the papers a reader can ask for */
.asks, .section .body > .asks { margin-top: var(--teal-space-6); border-top: 1px solid var(--teal-color-border-strong); }
.asks li { padding-block: var(--teal-space-4); border-bottom: 1px solid var(--teal-color-border); }

/* Where two parts meet, one line. A line under the last item would sit just above the next
   section's own divider; a list's top line would sit just under the line that closes a detail
   above it; a detail's top line would sit just under a table's last row. Each of those pairs read
   as a double rule. The line that stays is the one that belongs to what comes first. */
.asks li:last-child { border-bottom: 0; padding-bottom: 0; }
.more + .asks, .section .body > .more + .asks { margin-top: 0; border-top: 0; }
@media (min-width: 44rem) { .scroll-x + .more { border-top: 0; } }
.asks h3 { font-size: var(--teal-text-md); font-weight: var(--teal-font-semibold); }
.asks p { margin-top: var(--teal-space-1); color: var(--teal-color-text-muted); text-wrap: pretty; }
.asks .ask { margin-top: var(--teal-space-2); color: var(--teal-color-text); }
.asks a { font-weight: var(--teal-font-semibold); }

.cta {
  margin-top: var(--site-section-gap);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--teal-color-accent-soft);
}
.cta h2 { font-size: var(--site-text-title); font-weight: var(--teal-font-semibold); line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
.cta p { margin-top: var(--teal-space-4); font-size: var(--site-text-lead); }
.cta a { color: var(--teal-color-text); font-weight: var(--teal-font-semibold); overflow-wrap: anywhere; }
.cta a:hover { color: var(--teal-color-accent-strong); }
.ends-with-cta .site-footer { margin-top: 0; border-top: 0; }

/* ---------- about: the founder's note ---------- */

.letter {
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 2px solid var(--teal-color-accent);
  font-family: var(--site-font-letter);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  line-height: 1.7;
  text-wrap: pretty;
}
.letter p + p { margin-top: 1.1em; }
.letter .signature {
  margin-top: var(--teal-space-6);
  font-family: var(--site-font-sans);
  font-size: var(--teal-text-md);
  line-height: 1.6;
}

/* ---------- contact and 404 ---------- */

.contact { padding-top: var(--teal-space-6); }
.contact p { max-width: var(--teal-size-measure); color: var(--teal-color-text-muted); font-size: var(--site-text-lead); line-height: 1.45; text-wrap: pretty; }
.contact .email { margin-block: clamp(2.5rem, 7vw, 5rem); max-width: none; }
.contact .email a {
  color: var(--teal-color-accent);
  font-size: var(--site-text-email);
  font-weight: var(--teal-font-semibold);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
}
.contact .email a:hover { color: var(--teal-color-accent-strong); text-decoration-thickness: 4px; }

@media print {
  .site-nav, .skip { display: none; }
  body { background: #fff; color: #000; }
}

/* the opening paragraphs on About read a size up from body text */
.lede { font-size: var(--site-text-lead); line-height: 1.5; }
.lede p + p { margin-top: var(--teal-space-5); }

/* on a phone the measured table stacks: the work on one line, the number under it */
@media (max-width: 43.99rem) {
  .measured thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .measured tbody tr { display: block; padding: var(--teal-space-3) var(--teal-space-4); border-top: 1px solid var(--teal-color-border); }
  .measured tbody tr:first-child { border-top: 0; }
  .measured tbody td { display: block; padding: 0; border: 0; }
  .measured td.num { margin-top: var(--teal-space-1); text-align: left; white-space: normal; font-size: var(--teal-text-md); }
}

/* on a phone the "who sees what" table stacks too: the column name on top, then one labelled line
   for each of the three readers. Side by side it needed a sideways swipe to reach the third
   reader, and the third reader is the point of the table. */
@media (max-width: 43.99rem) {
  .masks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .masks tbody tr { display: block; padding-block: var(--teal-space-3); border-bottom: 1px solid var(--teal-color-border); }
  .masks tbody th, .masks tbody td { display: block; padding: 0; border: 0; white-space: normal; }
  .masks tbody th { margin-bottom: var(--teal-space-1); }
  .masks tbody td { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; padding-block: 0.15rem; }
  .masks tbody td::before { content: attr(data-label); color: var(--teal-color-text-muted); font-family: var(--site-font-sans); font-size: var(--teal-text-base); }
}

/* ---------- pictures ---------- */

/* a block that runs the full width of the page, past the reading column */
.section .span { grid-column: 1 / -1; min-width: 0; }

/* the product, shown under the headline. The picture is allowed to run wider than the text
   column: it is the one thing on the page a reader needs to see large. */
.shot .wrap { max-width: 82rem; }
.shot { margin-top: var(--site-section-gap); }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--teal-color-border-strong);
  border-radius: var(--teal-radius-lg);
  box-shadow: 0 8px 24px rgba(10, 26, 23, 0.14);
}
.shot figcaption { margin-top: var(--teal-space-3); max-width: var(--site-measure); color: var(--teal-color-text-muted); font-size: var(--teal-text-base); text-wrap: pretty; }

/* before and after */
.before-after { display: grid; gap: var(--teal-space-4); margin-top: var(--teal-space-4); }
.before-after .before, .before-after .after {
  position: relative;
  padding: var(--teal-space-5);
  border: 1px solid var(--teal-color-border);
  border-radius: var(--teal-radius-lg);
  background: var(--teal-color-surface);
}
.before-after .panel-title { font-size: var(--teal-text-base); font-weight: var(--teal-font-semibold); }
.before-after .before .panel-title { color: var(--teal-color-danger); }
.before-after .after .panel-title { color: var(--teal-color-accent); }
.before-after .before ul { position: relative; height: 17rem; margin-top: var(--teal-space-3); }
.before-after .before li {
  position: absolute; left: var(--x); top: var(--y);
  transform: translateY(-50%) rotate(var(--r));
  padding: var(--teal-space-2) var(--teal-space-3);
  border: 1px solid var(--teal-color-border-strong);
  border-radius: var(--teal-radius-md);
  background: var(--teal-color-bg);
  color: var(--teal-color-text-muted);
  font-size: var(--site-text-ui);
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(10, 26, 23, 0.10);
}
.before-after .before li strong { display: block; color: var(--teal-color-text); font-size: var(--teal-text-base); }
.before-after .tangle {
  position: absolute; inset: 3.5rem var(--teal-space-5) var(--teal-space-5);
  width: calc(100% - 2 * var(--teal-space-5)); height: calc(100% - 5rem);
  fill: none; stroke: var(--teal-color-danger); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
.before-after .after { display: flex; flex-direction: column; }
.before-after .after .life { margin-top: var(--teal-space-5); flex: 1; display: grid; align-content: center; background: var(--teal-color-accent-soft); border-color: var(--teal-color-accent); }
.before-after .after .life .edge { background: var(--teal-color-surface); color: var(--teal-color-accent); font-weight: var(--teal-font-semibold); border-radius: var(--teal-radius-md); }
.before-after .after .life ol { flex-direction: column; align-items: flex-start; gap: var(--teal-space-2); }
.before-after .after .life li:first-child { padding-left: calc(1em + var(--teal-space-3)); }
.before-after .after .life li + li::before { content: "\2193"; }
.before-after .panel-foot { margin-top: var(--teal-space-4); font-weight: var(--teal-font-semibold); }
.before-after .arrow { display: grid; place-items: center; color: var(--teal-color-accent); font-size: var(--teal-text-xl); line-height: 1; }
.before-after .arrow::before { content: "\2193"; }
@media (min-width: 52rem) {
  .before-after { grid-template-columns: minmax(0, 1.5fr) 2.5rem minmax(0, 1fr); align-items: stretch; }
  .before-after .arrow::before { content: "\2192"; }
}

/* three people */
.personas { display: grid; gap: var(--teal-space-4); margin-top: var(--teal-space-2); }
.personas { column-gap: var(--teal-space-6); }
.personas li { padding-top: var(--teal-space-4); border-top: 1px solid var(--teal-color-border-strong); }
.personas svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--teal-color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.personas h3 { margin-top: var(--teal-space-3); font-size: var(--teal-text-base); font-weight: var(--teal-font-semibold); color: var(--teal-color-text-muted); }
.personas .q { margin-top: var(--teal-space-1); font-size: var(--site-text-item); font-weight: var(--teal-font-semibold); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.personas .q + p { margin-top: var(--teal-space-2); color: var(--teal-color-text-muted); text-wrap: pretty; }
@media (min-width: 52rem) { .personas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cta .offer { max-width: var(--site-measure); font-size: var(--teal-text-md); line-height: 1.6; }

/* the button copy.js adds: copy the email address */
.copy {
  display: inline-block;
  margin-left: var(--teal-space-3);
  padding: var(--teal-space-1) var(--teal-space-3);
  border: 1px solid var(--teal-color-border-strong);
  border-radius: var(--teal-radius-md);
  background: var(--teal-color-surface);
  color: var(--teal-color-text-muted);
  font: inherit;
  font-size: var(--site-text-ui);
  font-weight: var(--teal-font-medium);
  letter-spacing: 0;
  line-height: 1.5;
  vertical-align: middle;
  cursor: pointer;
}
.copy:hover { color: var(--teal-color-text); border-color: var(--teal-color-accent); }
.copy:focus-visible { outline: none; box-shadow: var(--teal-focus-ring); }
.contact .email .copy, .cta .copy { display: block; margin: var(--teal-space-4) 0 0; }

/* The minus and equals signs on Home are drawn as bars, not typed, so they keep their
   weight whatever the typeface. The typed glyph stays in the HTML, hidden from view. */
.ledger .sign, .ledger-result .sign {
  display: block;
  align-self: start;
  width: 1.125rem;
  height: 0.1875rem;
  margin-top: 0.72rem;
  border-radius: 1px;
  background: var(--teal-color-accent);
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.ledger-result .sign {
  height: 0.625rem;
  margin-top: 0.7rem;
  border-radius: 0;
  background: linear-gradient(var(--teal-color-accent) 0 30%, transparent 30% 70%, var(--teal-color-accent) 70% 100%);
}

/* the ByteCustodian mark beside the product name. Drawn by us from the designer's
   Held C, with the four squares pulled inward (design/logos/bytecustodian-mark.svg). */
.product-name { display: flex; align-items: center; gap: 0.3em; }
.product-mark { display: block; flex: none; width: 0.95em; height: 0.95em; color: var(--teal-color-accent); }

/* ---------- the reading measure ----------
   The reading column is the measure (--site-measure). Body text fills it at about 74 characters a
   line, inside the 45 to 75 that reads comfortably, and everything else in the column (tables,
   lists, notes) ends on the same edge. The founder's note is set larger and in a serif, so it
   gets a narrower column of its own to hold the same count. */
.letter p { max-width: 34rem; }