/* ============================================================
   Terranes marketing site — design layer
   Tokens are BRAND.md rev 2 (13 Sep 2026), Direction 10b, sage-led.
   Corrections applied vs. the PM-UI preview:
     --alert fill  #b2622d -> #9e5423   (4.09:1 failed under its own ink)
     focus ring    terracotta -> sage   (1.87:1 on the rail; and it collided
                                         with the "something is wrong" signal)
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted, and that is a data-protection decision rather than
   a performance one: loading these from Google sends every visitor's
   IP to a third party before they have consented to anything, which
   is the opposite of what security.html claims two clicks away.

   Both files are the variable builds already used by the application
   (app/fonts/), so the site and the product render identically.
   Neither family ships an italic here, so <em> is synthesised — it
   was synthesised before this change too, because the Google request
   never asked for an italic axis either.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk.woff2") format("woff2-variations"),
       url("fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree.woff2") format("woff2-variations"),
       url("fonts/Figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- surfaces --- */
  --bg:              #f5ead8;
  --surface:         #ebddc5;
  --elev:            #f9f4ed;
  --line:            rgba(32, 30, 29, .11);
  --line-2:          rgba(32, 30, 29, .07);
  --soft:            rgba(32, 30, 29, .05);

  /* --- type --- */
  --ink:             #201e1d;
  --ink-2:           #645c50;

  /* --- sage: the accent --- */
  --accent:          #56633f;
  --accent-ink:      #f0fae1;
  --accent-text:     #3d472b;
  --accent-tint:     #e1eecc;
  --accent-tint-ink: #2b331e;

  /* --- terracotta: exception only, never decoration --- */
  --alert:           #9e5423;
  --alert-ink:       #fff2eb;
  --alert-text:      #8c491a;
  --alert-tint:      #ffe1d0;
  --alert-tint-ink:  #643312;

  /* --- chrome --- */
  --rail:            rgba(61, 71, 43, .96);
  --rail-ink:        #f0fae1;
  --rail-btn-ink:    #2b331e;   /* fixed: the callout button is pale in BOTH themes */
  --rail-dim:        #ccdbb2;
  --chrome:          rgba(245, 234, 216, .86);
  --field:           rgba(249, 244, 237, .92);

  /* --- the mark's three treads --- */
  --mk-1:            #ccdbb2;
  --mk-2:            #56633f;
  --mk-3:            #3d472b;

  /* --- focus: its own token, sage family, never terracotta --- */
  --focus:           #3d472b;

  --shadow-card:     0 1px 2px rgba(46, 43, 37, .05);
  --shadow-lift:     0 3px 10px rgba(46, 43, 37, .09);
  --shadow-sheet:    0 12px 32px rgba(46, 43, 37, .16);

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --measure: 63ch;
}

/* dark, for the un-stamped (system) viewer */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #241c16;
    --surface:         #2f251d;
    --elev:            #33281f;
    --line:            rgba(246, 236, 221, .15);
    --line-2:          rgba(246, 236, 221, .09);
    --soft:            rgba(246, 236, 221, .06);
    --ink:             #f6ecdd;
    --ink-2:           #c9b8a3;
    --accent:          #8ba169;
    --accent-ink:      #1c2113;
    --accent-text:     #ccdbb2;
    --accent-tint:     #37402a;
    --accent-tint-ink: #e1eecc;
    --alert:           #d67f48;
    --alert-ink:       #2a1a0e;
    --alert-text:      #f6a06b;
    --alert-tint:      #4a2c17;
    --alert-tint-ink:  #ffd6b8;
    --rail:            rgba(26, 20, 15, .94);
    --rail-ink:        #f0fae1;
    --rail-btn-ink:    #2b331e;
    --rail-dim:        #aebf92;
    --chrome:          rgba(36, 28, 22, .88);
    --field:           rgba(51, 40, 31, .92);
    --mk-1:            #ccdbb2;
    --mk-2:            #8ba169;
    --mk-3:            #5e6f45;
    --focus:           #ccdbb2;
    --shadow-card:     0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lift:     0 3px 10px rgba(0, 0, 0, .34);
    --shadow-sheet:    0 12px 32px rgba(0, 0, 0, .44);
  }
}

/* dark, for the viewer who chose it */
:root[data-theme="dark"] {
  --bg:              #241c16;
  --surface:         #2f251d;
  --elev:            #33281f;
  --line:            rgba(246, 236, 221, .15);
  --line-2:          rgba(246, 236, 221, .09);
  --soft:            rgba(246, 236, 221, .06);
  --ink:             #f6ecdd;
  --ink-2:           #c9b8a3;
  --accent:          #8ba169;
  --accent-ink:      #1c2113;
  --accent-text:     #ccdbb2;
  --accent-tint:     #37402a;
  --accent-tint-ink: #e1eecc;
  --alert:           #d67f48;
  --alert-ink:       #2a1a0e;
  --alert-text:      #f6a06b;
  --alert-tint:      #4a2c17;
  --alert-tint-ink:  #ffd6b8;
  --rail:            rgba(26, 20, 15, .94);
  --rail-ink:        #f0fae1;
  --rail-btn-ink:    #2b331e;   /* fixed: the callout button is pale in BOTH themes */
  --rail-dim:        #aebf92;
  --chrome:          rgba(36, 28, 22, .88);
  --field:           rgba(51, 40, 31, .92);
  --mk-1:            #ccdbb2;
  --mk-2:            #8ba169;
  --mk-3:            #5e6f45;
  --focus:           #ccdbb2;
  --shadow-card:     0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lift:     0 3px 10px rgba(0, 0, 0, .34);
  --shadow-sheet:    0 12px 32px rgba(0, 0, 0, .44);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(38px, 5.4vw, 61px); line-height: 1.04; }
h2 { font-size: clamp(27px, 3.3vw, 39px); }
h3 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.22; }
h4 { font-size: 17px; line-height: 1.3; }
/* card headings carry their level for structure and their size from here,
   so promoting an h4 to an h2 never changes what the page looks like */
.card h2, .card h3 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.22; }
.card .h-sm, .h-sm { font-size: 17px; line-height: 1.3; }

p { margin: 0; }

/* the data / label level — Space Grotesk 500, caps, tracked.
   Rule of thumb from the brand doc: if a machine produced it,
   it is set in Space Grotesk. */
.label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.num { font-variant-numeric: tabular-nums; }

.lead {
  font-size: clamp(17px, 1.55vw, 19.5px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}

.muted { color: var(--ink-2); }

/* ---------- layout ---------- */

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

.band { padding-block: clamp(56px, 8vw, 104px); }
.band--tight { padding-block: clamp(40px, 5vw, 64px); }
.band--surface { background: var(--surface); }

/* The seam. A handover is a real object in this product, so the rule
   between sections is drawn as one: a hairline that steps. */
.seam {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--line) 0 62%, transparent 62% 64%, var(--line) 64% 100%);
}

.stack { display: flex; flex-direction: column; }
.stack-6  { gap: 6px; }
.stack-10 { gap: 10px; }
.stack-14 { gap: 14px; }
.stack-20 { gap: 20px; }
.stack-28 { gap: 28px; }
.stack-40 { gap: clamp(28px, 4vw, 44px); }
.stack-64 { gap: clamp(40px, 5.5vw, 68px); }

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

/* ---------- the mark ---------- */

.mark {
  display: flex;
  flex-direction: column;
  gap: .22em;
  width: 2.9em;
  flex: none;
  font-size: var(--mark-size, 12px);
}
.mark i {
  display: block;
  height: .55em;
  width: 1.2em;
  border-radius: 999px;
}
.mark i:nth-child(1) { margin-left: 1.55em; background: var(--mk-1); }
.mark i:nth-child(2) { margin-left: .78em;  background: var(--mk-2); }
.mark i:nth-child(3) { background: var(--mk-3); }

.wordmark {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--ink);
  font-size: 19px;
  white-space: nowrap;
}
.wordmark b { font-weight: 500; color: var(--accent-text); }

.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }

/* In the masthead the mark sits on paper at small size, where the pale top
   tread all but vanished. The tonal ORDER is fixed by the brand — lightest
   tread always on top — so each step moves down the sage ramp rather than
   being re-ordered. */
.masthead .mark {
  --mark-size: 14px;
  --mk-1: #8ba169;
  --mk-2: #4a5636;
  --mk-3: #2b331e;
}
.masthead .wordmark { font-size: 21px; letter-spacing: .15em; }
:root[data-theme="dark"] .masthead .mark,
.masthead .mark { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .masthead .mark {
    --mk-1: #ccdbb2;
    --mk-2: #8ba169;
    --mk-3: #5e6f45;
  }
}
:root[data-theme="dark"] .masthead .mark {
  --mk-1: #ccdbb2;
  --mk-2: #8ba169;
  --mk-3: #5e6f45;
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--chrome);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.masthead__in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding-block: 10px;
  /* The masthead is chrome, not content: it spans the page rather than sitting
     inside the 1160px measure the reading column uses. Same element carries
     .wrap, so this overrides its max-width by source order. */
  max-width: none;
}
.nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: var(--soft);
  border-radius: 999px;
  padding: 4px;
}
.nav a {
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-tint-ink); }

.masthead__cta { display: flex; gap: 10px; align-items: center; flex: none; }

@media (max-width: 940px) {
  .masthead__in { flex-wrap: wrap; row-gap: 8px; padding-bottom: 10px; }
  .masthead__cta { margin-left: auto; }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-lift);
}
.btn--primary:hover { background: var(--accent-text); }

.btn--ghost {
  background: var(--elev);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
.btn--ghost:hover { border-color: var(--ink-2); }

.btn--quiet {
  background: transparent;
  color: var(--accent-text);
  padding-inline: 4px;
  min-height: 32px;
}
.btn--quiet:hover { text-decoration: underline; }

.btn--sm { min-height: 38px; padding: 8px 15px; font-size: 14px; }
.btn--lg { min-height: 54px; padding: 15px 28px; font-size: 16.5px; border-radius: 12px; }
.btn--lg svg.arw { width: 17px; height: 17px; }

.btn svg.arw { width: 15px; height: 15px; flex: none; transition: transform .18s ease; }
.btn:hover svg.arw { transform: translateX(3px); }

/* ---------- chips and badges ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--accent-tint);
  color: var(--accent-tint-ink);
}
.chip--alert { background: var(--alert-tint); color: var(--alert-tint-ink); }
.chip--plain { background: var(--soft); color: var(--ink-2); }

/* ---------- cards ---------- */

.card {
  background: var(--elev);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-card);
}
.card--flat { background: transparent; border-color: var(--line); box-shadow: none; }

.grid { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } }

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
  padding-block: clamp(44px, 6vw, 76px) clamp(48px, 6vw, 84px);
}
@media (max-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.hero__note {
  font-size: 14px;
  color: var(--ink-2);
}

/* The ledger. This is the product's actual claim rendered as an object:
   dated lines, attributed, each carrying its revision. */
.ledger {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}
.ledger__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--rail);
  color: var(--rail-ink);
}
.ledger__head .label { color: var(--rail-dim); }
.ledger__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -.005em;
}
.ledger__rows { display: flex; flex-direction: column; }
.ledger__row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid var(--line-2);
  align-items: baseline;
}
.ledger__row:first-child { border-top: 0; }
.ledger__date {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ledger__what { font-size: 14.5px; line-height: 1.45; }
.ledger__what b { font-weight: 600; }
.ledger__meta { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.ledger__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-2);
}
@media (max-width: 420px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- the promise list ---------- */

.promise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(12px, 2.5vw, 40px);
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.promise:first-of-type { border-top: 0; }
@media (max-width: 780px) { .promise { grid-template-columns: minmax(0, 1fr); } }

.promise__proof {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  font-size: 15px;
  color: var(--ink-2);
}
.promise__proof strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: block;
  margin-bottom: 4px;
}

/* ---------- audience ledger ---------- */

.who { border-top: 1px solid var(--line); }
.who__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 28px);
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.who__role {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -.005em;
}
.who__now { font-size: 14.5px; color: var(--ink-2); }
.who__then { font-size: 14.5px; }
@media (max-width: 820px) {
  .who__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .who__then { color: var(--accent-text); }
}

/* ---------- numbered sequence (used only where order is real) ---------- */

.seq { counter-reset: step; }
.seq__item { position: relative; padding-left: 54px; }
.seq__item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-tint-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- pricing ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  align-items: start;
}
@media (max-width: 880px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price small {
  font-family: var(--body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-2);
}

/* Block list items, not grid ones: an inline <strong> inside a grid
   container becomes its own grid item and the line falls apart. */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.45;
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-text);
  font-size: 13px;
  line-height: 1.6;
}
.ticks li.no::before { content: "—"; color: var(--ink-2); }

.toggle {
  display: inline-flex;
  background: var(--soft);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.toggle button {
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 16px;
  min-height: 38px;
  border-radius: 999px;
  cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* ---------- table ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 560px;
}
table.data th, table.data td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.005em;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 500;
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 20px; max-width: var(--measure); color: var(--ink-2); font-size: 15px; }

/* ---------- callout ---------- */

.callout {
  border-radius: 18px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--rail);
  color: var(--rail-ink);
}
.callout h2, .callout h3 { color: var(--rail-ink); }
.callout p { color: var(--rail-dim); }
.callout .btn--primary { background: var(--rail-ink); color: var(--rail-btn-ink); }
.callout .btn--primary:hover { background: #ccdbb2; }
.callout .btn--ghost { background: transparent; color: var(--rail-ink); border-color: rgba(240, 250, 225, .34); }
.callout .btn--ghost:hover { border-color: var(--rail-ink); }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(36px, 4vw, 56px);
  font-size: 14.5px;
}
.foot__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 820px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .foot__cols { grid-template-columns: minmax(0, 1fr); } }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- theme switch ---------- */

.themebtn {
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--ink-2);
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: none;
}
.themebtn:hover { color: var(--ink); }

/* ---------- language switcher ----------
   A <details> so it opens, closes and takes the keyboard with no script,
   and so the four routes are four real crawlable links rather than a
   control that rewrites the page. */
.lang { position: relative; flex: none; }
.lang > summary {
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--elev); color: var(--ink-2);
  font-family: var(--display); font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; cursor: pointer; user-select: none;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary svg { width: 16px; height: 16px; }
.lang > summary:hover { color: var(--ink); }
.lang > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lang[open] > summary { color: var(--ink); border-color: var(--accent); }
.lang > ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 178px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--elev); box-shadow: var(--shadow-sheet);
}
.lang > ul a {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 11px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink-2); text-decoration: none;
}
.lang > ul a b {
  font-family: var(--display); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; color: var(--ink-2); opacity: .75;
}
.lang > ul a:hover { background: var(--surface); color: var(--ink); }
.lang > ul a[aria-current] { background: var(--accent-tint); color: var(--accent-tint-ink); }
.lang > ul a[aria-current] b { color: inherit; opacity: 1; }
/* On a narrow masthead the control sits left of centre, so a panel anchored
   to its right edge runs off the screen — anchor it to the left instead. */
@media (max-width: 640px) { .lang > ul { right: auto; left: 0; } }
@media (max-width: 420px) { .lang > summary span { display: none; } .lang > summary { padding: 0 11px; } }


/* motion lives in the section below */

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 80;
  text-decoration: none;
}
.skip:focus { left: 16px; }

/* the header CTA loses its middle words before it loses its meaning */
@media (max-width: 560px) {
  .hidesm { display: none; }
  .wordmark { font-size: 16px; letter-spacing: .12em; }
  .masthead__in { gap: 10px; }
}

/* ============================================================
   AIRY SECTION SYSTEM + MOTION
   Reference rhythm: one idea per screen, a visual carrying it, and
   text blocks that stay short. Motion paces the scroll; it never
   hides anything from a crawler or a reader with JavaScript off.
   ============================================================ */

/* ---------- scroll progress ---------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  z-index: 60;
  pointer-events: none;
}
.no-js .progress { display: none; }

/* ---------- big airy bands ---------- */

.scene { padding-block: clamp(72px, 11vw, 148px); }
/* The first scene is a whole frame: it fills the viewport under the masthead
   and centres its content, so the graph behind it has room and is not sliced
   at the top and bottom. `overflow: clip` is what `overflow-x: clip` already
   computed to on both axes; it is written out so nobody re-discovers that. */
.scene--first {
  padding-block: clamp(48px, 7vw, 96px) clamp(36px, 4.5vw, 60px);
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* ---------- hero backdrop: the record drawn as a graph ---------- */

.herograph {
  position: absolute;
  z-index: 0;
  top: 50%; left: 50%;
  /* Scales with the page rather than stopping at a fixed height: the scene is
     a backdrop, so it should keep its share of a wide screen. Aspect-ratio
     below holds the proportions while width drives the size. */
  width: clamp(720px, 105vw, 2200px);
  height: auto;
  aspect-ratio: 1200 / 760;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .55;
  /* quiet in the middle, where the headline sits, and faded at the rim */
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.28) 18%, rgba(0,0,0,.72) 42%, #000 64%, transparent 100%);
          mask-image: radial-gradient(closest-side, rgba(0,0,0,.28) 18%, rgba(0,0,0,.72) 42%, #000 64%, transparent 100%);
}
.herograph svg { width: 100%; height: 100%; display: block; }

.hg-edge { stroke: var(--ink-2); stroke-width: 1.1; opacity: .5; }
.hg-edge--hot { stroke: var(--accent); stroke-width: 2; opacity: .95; }
.hg-edge--dash { stroke-dasharray: 5 7; opacity: .42; }
.hg-node { fill: none; stroke: var(--ink-2); stroke-width: 1.3; opacity: .62; }
.hg-node--soft { fill: var(--accent-tint); stroke: var(--accent); opacity: .55; }
.hg-pip { fill: var(--accent); }
.hg-hub { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2; opacity: .8; }
.hg-hub-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .35; }
@media (max-width: 760px) { .herograph { opacity: .3; width: 150%; height: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .herograph { animation: hg-in 1.1s ease-out both; }
  @keyframes hg-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.965); } }
}

h2.big { font-size: clamp(30px, 4.4vw, 53px); line-height: 1.02; letter-spacing: -.02em; }
h2.mid { font-size: clamp(26px, 3.2vw, 38px); }

.say {
  font-size: clamp(16.5px, 1.4vw, 18.5px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
}
.say--wide { max-width: 46ch; }

/* one feature per screen: text one side, the thing itself on the other */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.feature--flip .feature__text { order: 2; }
.feature--flip .feature__art  { order: 1; }
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature--flip .feature__text { order: 1; }
  .feature--flip .feature__art  { order: 2; }
}

.feature__text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* ---------- the art frame every product visual sits in ---------- */

.art {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}
.art__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--rail);
  color: var(--rail-ink);
}
.art__bar .label { color: var(--rail-dim); }
.art__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -.005em;
}
.art__body { padding: clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 14px; }

/* board */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board__col { display: flex; flex-direction: column; gap: 8px; }
.board__head {
  font-family: var(--display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 2px;
}
.tile {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 12.5px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tile__meta { display: flex; flex-wrap: wrap; gap: 5px; }
.tile .chip { font-size: 9.5px; padding: 3px 7px; letter-spacing: .06em; }

/* report card */
.rep { display: flex; flex-direction: column; gap: 12px; }
.rep__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px;
}
.rep__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rep__k { color: var(--ink-2); }
.rep__v { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.rep__note {
  background: var(--accent-tint);
  color: var(--accent-tint-ink);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* toggle rows (toolbox) */
.tog { display: flex; flex-direction: column; gap: 8px; }
.tog__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 13.5px;
}
.tog__row b { font-weight: 600; }
.tog__sw {
  margin-left: auto;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--soft);
  position: relative;
  flex: none;
}
.tog__sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--ink-2);
}
.tog__row[data-on] .tog__sw { background: var(--accent); }
.tog__row[data-on] .tog__sw::after { left: 17px; background: var(--accent-ink); }
.tog__row[data-off] { opacity: .62; }

/* two-column say / never-say */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.pair__box {
  border-radius: 12px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
}
.pair__box--yes { background: var(--accent-tint); color: var(--accent-tint-ink); }
.pair__box--no  { background: var(--alert-tint); color: var(--alert-tint-ink); }

/* thread (guest seat) */
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
}
.av {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  background: var(--accent-tint);
  color: var(--accent-tint-ink);
}
.av--guest { background: var(--surface); color: var(--ink-2); }
.msg__who { font-weight: 600; }
.msg__who span { font-weight: 400; color: var(--ink-2); font-size: 12.5px; }

/* ---------- the numbers strip ---------- */

.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 32px);
}
@media (max-width: 760px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fig { display: flex; flex-direction: column; gap: 4px; }
.fig__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.fig__t { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }

/* ---------- tabbed control panel ---------- */

.tabs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3.4vw, 48px); }
@media (max-width: 860px) { .tabs { grid-template-columns: minmax(0, 1fr); } }

.tabs__list { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) {
  .tabs__list { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .tabs__list::-webkit-scrollbar { display: none; }
}
.tabs__btn {
  text-align: left;
  border: 0;
  background: transparent;
  border-left: 2px solid var(--line);
  padding: 13px 16px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.005em;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn[aria-selected="true"] { color: var(--ink); border-left-color: var(--accent); }
@media (max-width: 860px) {
  .tabs__btn {
    border-left: 0;
    border-bottom: 2px solid var(--line);
    border-radius: 8px 8px 0 0;
    font-size: 14.5px;
    padding: 11px 14px;
  }
  .tabs__btn[aria-selected="true"] { border-bottom-color: var(--accent); background: var(--soft); }
}

.tabs__panel {
  background: var(--elev);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.tabs__panel p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.tabs__panel .label { color: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .js .tabs__panel > * { animation: riseIn .34s cubic-bezier(.32,.72,0,1) both; }
  .js .tabs__panel > *:nth-child(2) { animation-delay: .05s; }
  .js .tabs__panel > *:nth-child(3) { animation-delay: .1s; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- motion ----------
   Only a page that has booted JS hides anything, and the observer plus
   a scroll sweep plus a load sweep all reveal. No JS, or reduced
   motion, means everything is simply visible. */

@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(18px); }
  .js .rise.in {
    opacity: 1;
    transform: none;
    transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .js .rise.in.d1 { transition-delay: .07s; }
  .js .rise.in.d2 { transition-delay: .14s; }
  .js .rise.in.d3 { transition-delay: .21s; }

  .js .art-in { opacity: 0; transform: translateY(26px) scale(.985); }
  .js .art-in.in {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }

  /* parallax-lite: the visual drifts a little against the text */
  .js .drift { will-change: transform; }
}

.no-js .rise, .no-js .art-in { opacity: 1; transform: none; }

/* [hidden] is a UA rule at the lowest specificity, so any display
   declaration on the element beats it. Say it explicitly. */
.tabs__panel[hidden] { display: none !important; }

/* ---- the miniature views inside the small tiles ---- */

.mini { display: flex; flex-direction: column; height: 100%; }
.mini__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: var(--rail);
  color: var(--rail-ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex: none;
}
.mini__body { flex: 1; padding: 9px; display: flex; flex-direction: column; gap: 5px; min-height: 0; }

.ln { height: 6px; border-radius: 999px; background: var(--soft); }
.ln--w { background: var(--line); }
.ln--a { background: var(--accent-tint); }
.ln--s { background: var(--accent); opacity: .55; }
.ln--x { background: var(--alert-tint); }

.lnrow { display: flex; align-items: center; gap: 5px; }
.lnrow .ln { flex: 1; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: none; }
.dot--x { background: var(--alert); }
.dot--m { background: var(--accent-tint); }

.bars { display: flex; flex-direction: row; align-items: flex-end; gap: 5px; flex: 1; min-height: 0; }
.bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .5; }
.bars i.hi { opacity: .9; }
.bars i.al { background: var(--alert); opacity: .8; }

.gantt { display: flex; flex-direction: column; gap: 6px; }
.gantt span { height: 7px; border-radius: 999px; background: var(--accent); opacity: .55; }

.nodes { position: relative; flex: 1; min-height: 0; }
.nodes i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .75;
}
.nodes u {
  position: absolute;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}

/* ---- the evidence strip (third-party figures, cited) ---- */

.evid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
}
@media (max-width: 760px) { .evid { grid-template-columns: minmax(0, 1fr); } }
.evid__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.evid__t { font-size: 15px; line-height: 1.45; margin-top: 8px; max-width: 30ch; }
.evid__s { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }

/* ---- pain → mechanism ---- */

.against { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 760px) { .against { grid-template-columns: minmax(0, 1fr); } }

.pain {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--elev);
}
.pain__p {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--alert-text);
}
.pain h3 { font-size: 19px; }
.pain p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pain__fix {
  border-top: 1px solid var(--line-2);
  padding-top: 12px;
  font-size: 14.5px;
  line-height: 1.5;
}
.pain__fix b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 5px;
}

/* ---- digest visual ---- */

.digest { display: flex; flex-direction: column; gap: 8px; }
.dig {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  font-size: 13px;
}
.dig--now { background: var(--accent-tint); color: var(--accent-tint-ink); border-color: transparent; }
.dig__t { margin-left: auto; font-size: 11px; color: inherit; opacity: .75; white-space: nowrap; }

/* ============================================================
   THE JOURNEY — one camera over a field of panes.

   The page never really scrolls through content: it flies. Each
   pane is zoomed to fill the frame, then the camera pulls back far
   enough to show the whole field, travels, and zooms into the next.

   The resting state — no JS, reduced motion, or a viewport too
   small to fly over — is the same panes stacked as ordinary
   sections. Everything here is additive on top of that.
   ============================================================ */

.journey { position: relative; }
.journey__sticky { position: relative; }

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

.pane {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
  padding-block: clamp(56px, 8vw, 96px);
  padding-inline: var(--gutter);
  max-width: 1160px;
  margin-inline: auto;
  width: 100%;
  border-top: 1px solid var(--line);
}
.world > .pane:first-child { border-top: 0; }

.pane__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.pane__head h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 20ch;
}
.pane__head .say { max-width: 56ch; text-align: center; }
.pane__head .bigzero { justify-content: center; }

.pane__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.pane__body > .art,
.pane__body > .meters,
.pane__body > .painlist { width: 100%; max-width: 780px; margin-inline: auto; }
.pane__body > .painlist { max-width: 1000px; }
.pane__foot {
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
  max-width: 56ch;
}

/* The record pane leads with the product, so the first thing that enters
   the frame as the flight begins is the ledger rather than an empty panel. */
.pane--hero .pane__head h2 { max-width: 24ch; }

.pane__split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  flex: 1;
  min-height: 0;
}
@media (max-width: 900px) { .pane__split { grid-template-columns: minmax(0, 1fr); } }
.pane--narrow .pane__split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.journey--live .pane { justify-content: center; }
.journey--live .pane__head { gap: clamp(6px, calc(var(--pane-h) * 0.018), 14px); }

/* ---------- live mode: the camera ---------- */

/* one leg of scroll per pane change, plus a tail so the last pane is held
   as long as every other one before the frame lets go */
.journey--live { height: calc((var(--legs, 8) + var(--tail, 0)) * 150vh + 100vh); }

.journey--live .journey__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.journey--live .world {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--world-w);
  height: var(--world-h);
  transform-origin: 0 0;
  will-change: transform;
}

.journey--live .pane {
  position: absolute;
  left: calc(var(--x) * (var(--pane-w) + var(--pane-gap)));
  top: calc(var(--y) * (var(--pane-h) + var(--pane-gap)));
  width: var(--pane-w);
  height: var(--pane-h);
  max-width: none;
  margin: 0;
  padding: clamp(22px, calc(var(--pane-w) * 0.042), 52px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--elev);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
  will-change: opacity;
}
.journey--live .pane--record { background: var(--surface); }

/* the pane the camera is on gets the paper; the field behind stays quiet */
.journey--live .pane__head h2 {
  font-size: clamp(22px, calc(var(--pane-w) * 0.037), 40px);
  max-width: 20ch;
}
.journey--live .pane { gap: clamp(10px, calc(var(--pane-h) * 0.03), 26px); }
.journey--live .pane__head { gap: clamp(6px, calc(var(--pane-h) * 0.016), 14px); }
.journey--live .pane .say { font-size: clamp(13px, calc(var(--pane-w) * 0.0155), 18px); }
.journey--live .pane--narrow .painlist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
.journey--live .pane--narrow .painline { padding-top: 8px; }
.journey--live .pane--narrow .painline b { font-size: 13px; }
.journey--live .pane--narrow .painline span { font-size: 11.5px; line-height: 1.35; }
.journey--live .pane--narrow .evid__n { font-size: clamp(26px, calc(var(--pane-w) * 0.055), 44px); }
.journey--live .pane--narrow .evid__t { font-size: 13px; }

/* a small marker so a reader knows where they are in the flight */
.flightpath {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: none;
  gap: 7px;
  z-index: 3;
}
.journey--live .flightpath { display: flex; }
.flightpath i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
  opacity: .18;
  transition: opacity .25s ease, transform .25s ease;
}
.flightpath i.on { opacity: .8; transform: scale(1.5); }

/* ---------- pane-local pieces ---------- */

.figrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); }
@media (max-width: 760px) { .figrow { grid-template-columns: minmax(0, 1fr); } }

.painlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; }
@media (max-width: 760px) { .painlist { grid-template-columns: minmax(0, 1fr); } }
.painline { display: flex; flex-direction: column; gap: 5px; padding-top: 13px; border-top: 1px solid var(--line); }
.painline b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.005em;
}
.painline span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.painline em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--alert-text);
}

.bigzero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 5vw, 62px);
  letter-spacing: -.02em;
  line-height: 1;
}
.bigzero small { font-family: var(--body); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--ink-2); }

/* A narrow pane is still a whole frame, so its furniture tightens rather
   than its content being cut off. Measured: without this, six of the nine
   panes overflowed their box by 10-37px at 720x620 and the last line of
   each was silently clipped. */
.journey--live .pane--narrow .art__body { padding: 10px; gap: 8px; }
.journey--live .pane--narrow .ledger__row { padding: 8px 12px; gap: 10px; grid-template-columns: 66px minmax(0, 1fr); }
.journey--live .pane--narrow .ledger__what { font-size: 12.5px; }
.journey--live .pane--narrow .ledger__meta { font-size: 11px; }
.journey--live .pane--narrow .ledger__foot { padding: 8px 12px; font-size: 11px; }
.journey--live .pane--narrow .art__bar { padding: 8px 12px; }
.journey--live .pane--narrow .rep__row { padding-bottom: 7px; font-size: 12px; }
.journey--live .pane--narrow .rep__note { padding: 8px 10px; font-size: 11px; }
.journey--live .pane--narrow .tog__row { padding: 7px 10px; font-size: 12px; }
.journey--live .pane--narrow .dig { padding: 7px 10px; font-size: 11.5px; }
.journey--live .pane--narrow .msg { font-size: 12px; grid-template-columns: 26px minmax(0, 1fr); }
.journey--live .pane--narrow .av { width: 26px; height: 26px; font-size: 10px; }
.journey--live .pane--narrow .tile { font-size: 11px; padding: 7px 8px; }
.journey--live .pane--narrow .board { gap: 7px; }
.journey--live .pane--narrow .pair__box { font-size: 11.5px; padding: 10px 12px; }
.journey--live .pane--narrow .bigzero { font-size: 38px; }
.journey--live .pane--narrow .thread { gap: 7px; }
.journey--live .pane--narrow .tog { gap: 6px; }
.journey--live .pane--narrow .digest { gap: 6px; }
.journey--live .pane--narrow .figrow { gap: 12px; }
.journey--live .pane--narrow .evid__t { font-size: 11.5px; line-height: 1.35; margin-top: 5px; }
.journey--live .pane--narrow .evid__s { font-size: 10.5px; margin-top: 4px; }

/* ---------- the writing index ---------- */

.postlist { display: flex; flex-direction: column; }
.post {
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post:first-child { border-top: 0; padding-top: 0; }
.post__meta { font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.post__meta .label { color: var(--accent-text); }
.post h2 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; max-width: 24ch; }
.post h2 a { text-decoration: none; }
.post h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }

/* a quiet link inside a card is a link, not a centred button */
.card .btn--quiet { align-self: flex-start; justify-content: flex-start; }

/* ---------- stat tiles with meters ----------
   Three independent percentages, so this is a stat tile with a magnitude
   meter rather than a chart: one series, one hue, no legend to read, and
   the value stated in type as well as in length. Ink stays ink — the bar
   carries the magnitude, never the words. */

.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 34px); }
@media (max-width: 760px) { .meters { grid-template-columns: minmax(0, 1fr); } }

.meter { display: flex; flex-direction: column; gap: 9px; }
.meter__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.meter__track {
  height: 8px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.meter__t { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.meter__s { font-size: 12.5px; color: var(--ink-2); }

.journey--live .pane--narrow .meter__n { font-size: clamp(24px, calc(var(--pane-w) * 0.05), 40px); }
.journey--live .pane--narrow .meter__t { font-size: 12px; line-height: 1.35; }
.journey--live .pane--narrow .meter__s { font-size: 11px; }
.journey--live .pane--narrow .meter { gap: 6px; }
.journey--live .pane--narrow .pane__foot { font-size: 12px; }

/* the complaint list, without the source counts */
.painline em { display: none; }
.journey--live .pane--narrow .painlist { gap: 6px 14px; }
.journey--live .pane--narrow .painline { padding-top: 6px; gap: 3px; }
.journey--live .pane--narrow .painline span { font-size: 10.8px; line-height: 1.32; }
.journey--live .pane--narrow .painline b { font-size: 12.5px; }
.journey--live .pane--narrow .meter__track { height: 6px; }
.journey--live .pane--narrow .meters { gap: 12px; }
.journey--live .pane--narrow .pane__body { gap: 10px; }
.journey--live .pane--narrow .meter { gap: 4px; }
.journey--live .pane--narrow .meter__t { font-size: 11.5px; }
/* the pane's own body must never let its art grow past the frame */
.pane__body > .art { min-height: 0; }
.journey--live .pane--narrow .pane__foot { font-size: 11px; line-height: 1.35; }
/* At 720px the expanded complaint copy and the meters' closing line were
   still running past the frame. Measured, not guessed — see clip check. */
.journey--live .pane--narrow .painline span { font-size: 10.2px; line-height: 1.28; }
.journey--live .pane--narrow .painlist { gap: 5px 12px; }
.journey--live .pane--narrow .painline { padding-top: 5px; }
.journey--live .pane--narrow .meter__n { font-size: clamp(22px, calc(var(--pane-w) * 0.044), 36px); }
.journey--live .pane--narrow .meter__t { font-size: 11px; line-height: 1.3; }
.journey--live .pane--narrow .pane__head .say { font-size: 12px; }
.journey--live .pane--narrow .pane__body { gap: 8px; }
.journey--live .pane--narrow .meter { gap: 3px; }
.journey--live .pane--narrow .meter__s { font-size: 10px; }
.journey--live .pane--narrow .pane__foot { font-size: 10.5px; }

/* The record pane opens with the product sitting high in the frame, so the
   first thing that enters as the flight begins is the ledger — not the
   empty top of a panel, which is what a reader was seeing before. */
.pane--hero .pane__body { justify-content: flex-start; }
.pane--hero { justify-content: flex-start; }
.journey--live .pane--hero { justify-content: center; }

/* ---------- the three views of one task list ---------- */

.vtabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}
.vtabs span {
  font-family: var(--display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--ink-2);
}
.vtabs span[data-on] { background: var(--accent-tint); color: var(--accent-tint-ink); }

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

.gantt2 { display: flex; flex-direction: column; gap: 8px; }
.gantt2 .grow {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  font-size: 11.5px;
}
.gantt2 .gname {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt2 .gtrack {
  position: relative;
  height: 12px;
  background: var(--soft);
  border-radius: 999px;
}
.gantt2 .gbar {
  position: absolute;
  top: 2px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}
.gantt2 .gbar.al { background: var(--alert); }
.gantt2 .gdia {
  position: absolute;
  top: 1px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
  border-radius: 2px;
}

.journey--live .pane--narrow .vtabs { padding: 6px 9px; }
.journey--live .pane--narrow .vtabs span { font-size: 9px; padding: 4px 8px; }
.journey--live .pane--narrow .gantt2 { gap: 5px; }
.journey--live .pane--narrow .gantt2 .grow { grid-template-columns: 84px minmax(0, 1fr); font-size: 10px; gap: 8px; }
.journey--live .pane--narrow .gsplit { padding-top: 8px; }
/* the views pane carries two visuals in one frame, so it runs tighter */
.journey--live .pane .vtabs + .art__body { gap: 10px; }
.journey--live .pane .gantt2 { gap: 6px; }
.journey--live .pane .gsplit { padding-top: 9px; }
.journey--live .pane--narrow .gantt2 .gtrack { height: 10px; }
.journey--live .pane--narrow .gantt2 .gbar { height: 6px; }
.journey--live .pane--narrow .gantt2 .gdia { width: 8px; height: 8px; top: 1px; }
.journey--live .pane--narrow .gantt2 { gap: 4px; }
.journey--live .pane--narrow .gsplit { padding-top: 6px; }
@media all {
  .journey--live .pane--narrow .board__head { font-size: 9px; padding-bottom: 0; }
  .journey--live .pane--narrow .gantt2 .grow:nth-child(4) { display: none; }
  .journey--live .pane--narrow .gsplit .label { margin-bottom: 5px !important; font-size: 9.5px; }
  .journey--live .pane--narrow .art__body { padding: 8px; }
  .journey--live .pane--narrow .tile { padding: 6px 7px; }
  .journey--live .pane--narrow .board { gap: 5px; }
}

/* ---------- the relationship graph ----------
   The claim on that pane is "one record"; this is the mechanism behind it.
   A project, its tasks, and the documents they carry — with one drawing
   pack attached to two tasks, which is the whole reason it is a graph and
   not a folder tree. Every value is a token, so it holds in both themes. */

.graph { margin: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.graph svg { display: block; width: 100%; height: auto; max-width: 100%; }
.graph figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

.g-edge { stroke: var(--line); stroke-width: 1.6; fill: none; }
.g-edge--hot { stroke: var(--accent); stroke-width: 2.2; }
.g-head { fill: var(--ink-2); }

.g-gap {
  fill: var(--ink-2);
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .09em;
}

.g-proj { fill: var(--accent); }
.g-proj-t {
  fill: var(--accent-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}
.g-proj-s {
  fill: var(--accent-ink);
  opacity: .8;
  font-family: var(--body);
  font-size: 12px;
}

.g-node { fill: var(--elev); stroke: var(--line); stroke-width: 1.2; }
.g-file { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.g-label { fill: var(--ink); font-family: var(--body); font-size: 13.5px; }
.g-dot { fill: var(--accent); }
.g-dot--alert { fill: var(--alert); }

/* a narrow pane gets the picture, not the caption — the caption's claim is
   already carried by the pane's own heading */
.journey--live .pane--narrow .graph figcaption { display: none; }
.journey--live .pane--narrow .graph { gap: 0; }
/* The record pane carries the most: a heading, the ledger and the graph.
   Its heading runs wider so it sets on two lines instead of four, which is
   the room the graph needs. */
.pane--record .pane__head h2 { max-width: 30ch; }
.journey--live .pane--record .pane__head h2 { font-size: clamp(20px, calc(var(--pane-w) * 0.032), 34px); }
.journey--live .pane--record .pane__body { gap: 12px; }
.journey--live .pane--narrow .g-label { font-size: 15px; }
.journey--live .pane--narrow .g-proj-t { font-size: 18px; }
.journey--live .pane--narrow .g-gap { font-size: 12px; }
.journey--live .pane--narrow .vtabs { padding: 5px 9px; }
.journey--live .pane--narrow .board__col { gap: 5px; }
/* the notifications art carries two lists in one frame */
.journey--live .pane .digest { gap: 6px; }
.journey--live .pane .dig { padding: 8px 11px; }
.journey--live .pane .tog { gap: 6px; }
/* the notifications pane runs closest to its ceiling of any pane */
.journey--live .pane__foot { font-size: 13px; line-height: 1.4; }
.journey--live .pane .art__body { gap: 11px; }
.journey--live .pane--narrow .dig { padding: 6px 9px; font-size: 11px; }
.journey--live .pane--narrow .digest { gap: 5px; }
.journey--live .pane--narrow .tog__row { padding: 6px 9px; font-size: 11px; }
.journey--live .pane--narrow .tog__sw { width: 28px; height: 17px; }
.journey--live .pane--narrow .tog__sw::after { width: 11px; height: 11px; top: 3px; left: 3px; }
.journey--live .pane--narrow .tog__row[data-on] .tog__sw::after { left: 14px; }
.journey--live .pane--narrow .art__body { gap: 8px; }

/* ============================================================
   The early-access form — contact.html
   The only place on the site that collects anything. Tokens only,
   so both themes follow without a second set of colours.
   ============================================================ */

.formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  align-items: start;
}
@media (max-width: 860px) {
  .formwrap { grid-template-columns: 1fr; }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3vw, 32px);
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

.field label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(86, 99, 63, .45); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* :user-invalid, not :invalid — an empty required field is invalid from the
   moment the page loads, and marking it red before anyone has typed accuses
   the visitor of a mistake they have not made yet. */
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--alert); }
.field input:user-invalid:focus-visible,
.field textarea:user-invalid:focus-visible { box-shadow: 0 0 0 3px var(--alert-tint); }

.field__hint { font-size: 13px; color: var(--ink-2); margin: 0; }

/* The honeypot is hidden from sight and from assistive technology, but left
   in the tab order's blind spot rather than display:none — some bots skip
   anything display:none, which is the opposite of what it is for. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 2px;
}

.form__status { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.form__status.is-ok  { color: var(--accent-text); font-weight: 600; }
.form__status.is-bad { color: var(--alert-text); font-weight: 600; }

.formnote { align-self: start; }

/* The terrane note reads as a gloss on the wordmark above it rather than a
   caption tight against it, so it is given its own breathing room. */
.foot__note { margin-top: 10px; }
.formnote p + p { margin-top: 10px; }

/* ============================================================
   Pricing — the billing-period switch, equal-height plan cards,
   and Plus as an add-on band rather than a fourth plan.
   ============================================================ */

.billing {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.toggle--lg button { font-size: 13px; padding: 11px 26px; min-height: 46px; }

/* The saving is the reason to look at the yearly side, so it rides on the
   control rather than sitting in a sentence underneath it. */
.save {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-tint-ink);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.toggle button[aria-pressed="true"] .save { background: var(--accent-ink); color: var(--accent-text); }

/* Equal height: the cards stretch to the tallest, and each one's control is
   pushed to its own foot so the three buttons land on one line. */
.price-grid { align-items: stretch; }
.price-grid .card { display: flex; flex-direction: column; }
.price-grid .card > .btn { margin-top: auto; }

/* Plus sits under the three, laid out horizontally, because it is bought on
   top of a seat and reading it as a fourth column made it look like a choice
   between plans. */
.addon {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 18px;
}
@media (max-width: 880px) {
  .addon { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.addon__head { display: flex; flex-direction: column; gap: 4px; }
.addon__head .price { font-size: 34px; }
.addon__body { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 62ch; }

/* The trial is not a purchase, so it states itself above the table of
   purchases instead of occupying a row in it. */
.always {
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: var(--accent-tint);
  color: var(--accent-tint-ink);
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  max-width: var(--measure);
}


/* ---- article pages (feature 02) ------------------------------------------
   The body of a Field note. Everything below uses the same tokens as the
   rest of the site; the only new rule is measure and vertical rhythm. */
.article__head { max-width: 62ch; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { font-size: clamp(16.5px, 1.3vw, 17.5px); line-height: 1.62; color: var(--ink); }
.prose h2 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; max-width: 24ch; margin-top: 2em; }
.prose h3 { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.25; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--accent); color: var(--ink-2); }
.prose blockquote p { color: inherit; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-family: var(--display); font-size: .92em; background: var(--soft); padding: .1em .35em; border-radius: 5px; }
.prose hr { height: 1px; border: 0; background: var(--line); margin: 2em 0; }
.related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.related a { text-decoration: underline; text-underline-offset: 3px; font-size: 15.5px; }


/* ---- the free tools (feature 03) ------------------------------------------
   Built on the contact form's .field family. A tool is a long form with
   sections, optional repeating rows, one action row, and a result block
   that appears only after a document exists. */
.tool { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.tool__section { border: 1px solid var(--line); border-radius: 18px; background: var(--elev); box-shadow: var(--shadow-card);
  padding: clamp(18px, 2.6vw, 28px); margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tool__section > legend { font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.5vw, 18px); color: var(--ink);
  padding: 0 6px; margin-left: -6px; }
.tool__section > .field__hint { margin-top: -6px; }
.tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 18px; }
.tool__grid .field--wide { grid-column: 1 / -1; }
.field select { font-family: var(--body); font-size: 15.5px; color: var(--ink); background: var(--field); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; width: 100%; }
.field select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--alert); }
.field__error { display: none; font-size: 13px; color: var(--alert-text); margin: 0; }
.field--bad .field__error { display: block; }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.field--check label { text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 400; font-size: 14.5px; color: var(--ink); }

/* repeating rows: one <template> per block, rows numbered by tool.js */
.repeat__rows { display: flex; flex-direction: column; gap: 12px; }
.repeat__row { display: grid; gap: 12px 14px; align-items: end; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); }
.repeat__row .field { gap: 5px; }
.repeat__row .field label { font-size: 10.5px; }
.repeat__n { font-family: var(--display); font-size: 12px; color: var(--accent-text); letter-spacing: .06em; align-self: center; }
.repeat__rm { justify-self: end; align-self: center; }
.btn--quiet { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.btn--quiet:hover { border-color: rgba(86, 99, 63, .45); color: var(--ink); }
.repeat__add { align-self: flex-start; }

.tool__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.tool__actions .btn input[type="file"] { display: none; }
.tool__privacy { font-size: 14px; color: var(--ink-2); max-width: 62ch; margin: 0; padding-left: 14px; border-left: 3px solid var(--accent); }
.tool__status { font-size: 14.5px; color: var(--accent-text); font-weight: 600; margin: 0; }
.tool__status--bad { color: var(--alert-text); }
.tool__msgs { display: none; }
.is-busy { opacity: .6; cursor: progress; }

.tool__result { border: 1px solid var(--accent); border-radius: 18px; padding: clamp(18px, 2.6vw, 28px); background: var(--elev);
  display: flex; flex-direction: column; gap: 16px; }
.tool__result h2 { font-size: clamp(19px, 2vw, 24px); }
.tool__result .row { align-items: center; }
.tool__send { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
@media (max-width: 640px) { .tool__send { grid-template-columns: 1fr; } }

/* the index */
.toolgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.toolcard { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line);
  border-radius: 18px; background: var(--elev); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
a.toolcard:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.toolcard h2 { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.2; }
.toolcard p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.toolcard .chip { align-self: flex-start; }

/* the calculator's result */
.calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.calc__tile { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.calc__tile .label { color: var(--ink-2); }
.calc__tile .big { font-size: clamp(24px, 3vw, 36px); font-family: var(--display); font-weight: 500; letter-spacing: -.01em; }
.calc__tile--sum { border-color: var(--accent); }
.calc__tile--sum .big { color: var(--accent-text); }
.calc__formula { font-family: var(--display); font-size: 13.5px; color: var(--ink-2); }