/* tangentsync.com
   Rebuilt 2026-09-06 from direction E (Split) on the design canvas, with the
   one-customer journey figure and the figure-label treatment from direction D.
   Palette per ../Branding/tangentsync-brand-guide.md, every pair measured in
   a11y_audit.py. IBM Plex Sans self-hosted from assets/. No third-party
   requests. First-party JS only (script.js), and the page is complete
   without it. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:       #1C1B19;
  --rust:      #C2542D;  /* button fills and non-text accents only */
  --rust-text: #A8421F;  /* any rust that is text, and the focus ring on paper */
  --rust-deep: #93381A;  /* button active state */
  --paper:     #F7F4F0;
  --white:     #FFFFFF;
  --muted:     #5A5754;
  --rule:      #E2DCD6;

  --measure: 36rem;
  --pad: 1.25rem;
  --radius: 6px;
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow-card: 0 18px 44px rgba(28, 27, 25, 0.08), 0 2px 6px rgba(28, 27, 25, 0.04);
  --shadow-onink: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(247, 244, 240, 0.12);
  --hair-onink: rgba(247, 244, 240, 0.25);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

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

/* --- Focus ------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--rust-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.band :focus-visible { outline-color: var(--paper); }

/* --- Skip link -------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  z-index: 10;
  text-decoration: underline;
}
.skip-link:focus { left: 0; position: fixed; }

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

/* --- Layout ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--pad);
}
section { padding-block: 2.75rem; }

/* Ink band: shared by the hero panel, Running It, and the close. */
.band { background: var(--ink); color: var(--paper); }
/* Text on the band inherits paper. White cards inside it (.fig, .demo) set ink on themselves. */

/* --- Type scale --------------------------------------------------
   Four levels: display (h1), section (h2), item (h3), body. Plus the lede
   above body and two small sizes below it (note, label). */
h1, h2, h3 { font-weight: 700; margin: 0; text-wrap: pretty; }
h1 {
  font-size: clamp(2.875rem, 5.6vw, 4.875rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h3 {
  font-size: clamp(1.375rem, 1.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
p { margin: 0 0 1rem; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.125rem, 1.35vw, 1.1875rem); line-height: 1.5; }
.lede--strong { font-weight: 700; font-size: clamp(1.25rem, 1.55vw, 1.375rem); line-height: 1.4; }
.note { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.note--onink { color: var(--rule); }

/* Small tracked label. Stands in for a mono face, which is not shipped. */
.label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  max-width: none;
}
.label--rust { color: var(--rust-text); }
.label--onink { color: var(--rule); }

main a:not(.cta):not(.masthead__call):not(.masthead__home),
.footer a {
  color: var(--rust-text);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.band a:not(.cta) { color: var(--paper); }

/* --- Masthead --------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.125rem;
}
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.masthead__home { display: block; flex: none; line-height: 0; }
.wordmark { display: block; height: 1.75rem; width: auto; margin: 0; }
.nav { display: none; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  padding-block: 0.625rem;
}
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* The phone number is the only rust in the header, so it is the one thing to tap. */
.masthead__call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--rust-text);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__call:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.masthead__call-long { display: none; }
@media (min-width: 48rem) {
  .masthead { padding-block: 1.375rem; }
  .wordmark { height: 2.5rem; }
  .nav { display: flex; gap: 2rem; align-items: center; }
  .masthead__call-long { display: inline; }
  .masthead__call-short { display: none; }
}

/* --- Call to action --------------------------------------------- */
.cta-block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  max-width: none;
}
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--rust);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  text-align: left;
}
.cta__label { font-size: 0.9375rem; letter-spacing: 0.01em; }
.cta__num { font-size: 1.25rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cta:hover { background: var(--rust-text); }
.cta:active { background: var(--rust-deep); }
.cta svg { flex: none; }

/* Secondary action: outlined, never rust. The text link and the form button. */
.cta--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 1rem;
  padding-inline: 1.375rem;
}
.cta--ghost:hover, .cta--ghost:active { background: var(--ink); color: var(--paper); }
.cta--ghost-onink { color: var(--paper); border-color: var(--paper); }
.cta--ghost-onink:hover, .cta--ghost-onink:active { background: var(--paper); color: var(--ink); }

/* --- Hero: paper left, ink panel right --------------------------- */
.hero { padding-block: 0; }
.hero__grid { display: flex; flex-direction: column; }
.hero__lead {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.25rem var(--pad) 2.5rem;
  max-width: 82rem;
  margin-inline: auto;
  width: 100%;
}
.hero__lead h1 { margin-top: 0.25rem; }
.hero__lead .lede, .hero__lead .note { margin: 0; }

.hero__panel { padding: 2.5rem var(--pad) 2.75rem; }
.hero__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
.before-row { display: flex; flex-direction: column; gap: 0.5rem; }
.before-row__line {
  margin: 0;
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--paper);
}
.steps-mini {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--hair-onink);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.steps-mini li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.9375rem; line-height: 1.4; }
.steps-mini .label { flex: none; width: 4.25rem; }
.hero__claim { text-align: center; max-width: none; }
.hero__caption { text-align: center; }

/* --- The demo phone --------------------------------------------- */
.demo {
  position: relative;
  width: 16.25rem;
  margin-inline: auto;
  border: 8px solid var(--ink);
  border-radius: 2.25rem;
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-onink);
  font-size: 0.75rem;
  line-height: 1.4;
}
.demo p { max-width: none; margin: 0; }
/* The After tag rides on the phone itself, top corner, so it travels with the frame.
   The .tag component is shared with the four after cards in What Gets Fixed. */
.demo__after { position: absolute; top: 0.625rem; left: 0.75rem; }
.demo__top { background: var(--paper); padding: 2.5rem 0.875rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.demo__row { display: flex; justify-content: space-between; align-items: center; }
.demo__name { font-weight: 700; font-size: 0.875rem; letter-spacing: -0.02em; }
.demo__tag { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust-text); }
.demo__notice {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.5625rem 0.6875rem;
}
.demo__ico {
  width: 1.875rem; height: 1.875rem; flex: none;
  border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
}
.demo__notice-text { display: flex; flex-direction: column; line-height: 1.25; }
.demo__notice-text span { color: var(--muted); font-size: 0.6875rem; }
.demo__thread { padding: 0.875rem 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.demo__time { text-align: center; font-size: 0.625rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.demo__out { align-self: flex-end; max-width: 90%; background: var(--rust); color: var(--white); padding: 0.625rem 0.75rem; border-radius: 16px 16px 4px 16px; }
.demo__meta { align-self: flex-end; font-size: 0.625rem; color: var(--muted); }
.demo__in { align-self: flex-start; max-width: 90%; background: var(--paper); padding: 0.625rem 0.75rem; border-radius: 16px 16px 16px 4px; }
.demo__log {
  margin-top: 0.375rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.5625rem 0.6875rem;
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem; color: var(--muted);
}
.demo__logged { display: flex; align-items: center; gap: 0.4375rem; font-weight: 700; color: var(--ink); }
.demo__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rust); }

/* The sequence. CSS only, on a slow loop: missed call, then the text, then
   the reply, then the log line. Every step is fully visible at rest, so with
   animation off (reduced motion) the finished conversation shows. */
.demo__step { animation: 14s ease-out infinite both; }
.demo__step--1 { animation-name: demo-1; }
.demo__step--2 { animation-name: demo-2; }
.demo__step--3 { animation-name: demo-3; }
.demo__step--4 { animation-name: demo-4; }
@keyframes demo-1 { 0%, 3% { opacity: 0; transform: translateY(6px); } 9%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes demo-2 { 0%, 22% { opacity: 0; transform: translateY(6px); } 28%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes demo-3 { 0%, 48% { opacity: 0; transform: translateY(6px); } 54%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes demo-4 { 0%, 66% { opacity: 0; transform: translateY(6px); } 72%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* --- Figures: the shared card family ---------------------------- */
.fig {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.125rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.fig__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule);
}
/* The rust After tag. Small, uppercase, no shadow, no hover: never reads as a button.
   Rust marks the fix; the Before label stays plain. */
.tag {
  display: inline-block;
  background: var(--rust);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.3125rem 0.5rem;
  border-radius: 4px;
}
.fig__note { text-align: left; }
@media (min-width: 48rem) { .fig__note { text-align: right; } }
.fig__foot { color: var(--muted); font-size: 0.8125rem; line-height: 1.45; max-width: none; }

/* --- Fig. 1: the journey ---------------------------------------- */
.journey { padding-block: 2rem 0.5rem; }
.fig--journey { border-color: var(--ink); box-shadow: none; }
.ticks {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tick { position: relative; display: flex; flex-direction: column; gap: 0.125rem; line-height: 1.2; }
.tick::before {
  content: "";
  position: absolute;
  left: -1.625rem;
  top: 0.3125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--ink);
}
.tick--leak::before { background: var(--rust); }
.tick__name { font-weight: 700; font-size: 0.9375rem; }
.tick__val { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tick--leak .tick__val { color: var(--rust-text); }

/* --- What gets fixed: before / after rows ------------------------ */
.section-head { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.875rem; }
.section-head--center { align-items: center; text-align: center; }
.fixes { padding-block: 2.5rem 2.75rem; }
.fixes .note { margin-top: 0.5rem; }
.row {
  border-top: 2px solid var(--ink);
  overflow-x: clip; /* the after card slides in from 24px right; never a horizontal scrollbar */
  padding-top: 0.875rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.row__head { display: flex; align-items: baseline; gap: 0.875rem; }
.row__num { font-size: 0.875rem; font-weight: 700; color: var(--rust-text); font-variant-numeric: tabular-nums; }
.row__grid { display: flex; flex-direction: column; gap: 1.5rem; }
.before { display: flex; flex-direction: column; gap: 0.75rem; }
.before p { margin: 0; }
/* The before headline does the selling. It keeps headline weight on every screen. */
.before__h {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--muted);
}

/* The drawn after-states. Each is role="img" with a one-sentence name. */
.thread, .timeline, .cal, .invoice { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.4; }
.thread__meta { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--muted); font-size: 0.75rem; }
.thread p { margin: 0; max-width: none; }
.thread__out { align-self: flex-end; max-width: 88%; background: var(--rust); color: var(--white); padding: 0.5625rem 0.75rem; border-radius: 14px 14px 4px 14px; }
.thread__sent { align-self: flex-end; font-size: 0.75rem; color: var(--muted); }
.thread__in { align-self: flex-start; max-width: 88%; background: var(--paper); padding: 0.5625rem 0.75rem; border-radius: 14px 14px 14px 4px; }
.thread__log { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border-top: 1px dashed var(--rule); padding-top: 0.5rem; font-size: 0.75rem; color: var(--muted); flex-wrap: wrap; }
.thread__log strong { color: var(--ink); }

.timeline__row { display: flex; gap: 0.75rem; align-items: flex-start; }
.timeline__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--rule); flex: none; margin-top: 0.3125rem; }
.timeline__row--hot .timeline__dot { background: var(--rust); }
.timeline__row--hot { font-weight: 700; }
.timeline__t { width: 4.5rem; flex: none; white-space: nowrap; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.cal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; }
.cal__day { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal__dn { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.25rem; }
.cal__slot { height: 1.375rem; border-top: 1px solid var(--rule); }
.cal__blk {
  height: 1.375rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal__blk--2 { height: 2.75rem; }
.chip { background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 0.1875rem 0.5625rem; font-weight: 700; color: var(--ink); }

.invoice__lines { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.625rem 0.75rem; background: var(--paper); border-radius: 4px; }
.invoice__line { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.invoice__line--total { font-weight: 700; border-top: 1px solid var(--rule); padding-top: 0.375rem; }
/* Amounts are drawn as bars on purpose. No dollar figure appears on this page. */
.invoice__amt { width: 3.25rem; height: 0.625rem; background: var(--rule); border-radius: 2px; flex: none; }
.invoice__amt--s { width: 2.5rem; }
.invoice__amt--total { width: 3.75rem; background: var(--muted); }
.invoice__pay { display: flex; align-items: center; justify-content: center; min-height: 2.375rem; background: var(--rust); color: var(--white); font-weight: 700; border-radius: var(--radius); }

/* --- Running it without you: ink band with the Monday sheet ------ */
.running { padding-block: 3rem 3.25rem; }
.running__grid { display: flex; flex-direction: column; gap: 1.75rem; }
.running__text { display: flex; flex-direction: column; gap: 1rem; }
.running__text p { margin: 0; }
.sheet { box-shadow: var(--shadow-onink); }
.sheet__list { margin: 0; display: flex; flex-direction: column; }
.sheet__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.5625rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.sheet__row dt { flex: 1; color: var(--muted); }
.sheet__row dd { margin: 0; display: flex; align-items: baseline; gap: 0.75rem; }
.sheet__num { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet__was { width: 4.75rem; text-align: right; font-size: 0.75rem; color: var(--rust-text); font-weight: 700; white-space: nowrap; }

/* --- Sample diagnostic: a document ------------------------------ */
.sample { padding-block: 3rem; }
.doc {
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
  padding: 1.375rem 1.125rem 1.5rem;
  max-width: 56rem;
  margin-inline: auto;
}
.doc__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.375rem;
  border-bottom: 2px solid var(--ink);
}
.doc__id { display: flex; flex-direction: column; gap: 0.5rem; }
.doc__mark { display: block; line-height: 0; }
.doc__mark .wordmark { height: 1rem; }
.doc__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.doc__meta { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; margin: 0; }
.stamp {
  flex: none;
  margin: 0 0 0 auto;
  max-width: none;
  transform: rotate(-4deg);
  border: 2px solid var(--rust-text);
  color: var(--rust-text);
  border-radius: 4px;
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
}
.doc h3 { margin: 1.5rem 0 0.625rem; font-size: 1.125rem; letter-spacing: -0.01em; }
.doc h3:first-of-type { margin-top: 0; }

.doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.doc__table caption { text-align: left; }
.doc__table th, .doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.75rem 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}
.doc__table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0;
}
.doc__table tbody th { font-weight: 700; white-space: nowrap; width: 1%; }
.doc__table td:last-child, .doc__table th:last-child { padding-right: 0; }

/* Three columns do not fit a phone. Below 48rem each row stacks. */
@media (max-width: 47.98rem) {
  .doc__table--inv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc__table--inv tr { display: block; padding-block: 0.625rem; border-bottom: 1px solid var(--rule); }
  .doc__table--inv th, .doc__table--inv td { display: block; border: 0; padding: 0; width: auto; white-space: normal; }
  .doc__table--inv tbody th { margin-bottom: 0.25rem; }
  .doc__table--inv td { display: flex; gap: 0.5rem; align-items: baseline; }
  .doc__table--inv td::before {
    content: attr(data-label);
    flex: none;
    min-width: 6.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.doc__list { margin: 0; padding-left: 1.25rem; font-size: 0.9375rem; line-height: 1.5; }
.doc__list li { padding-left: 0.25rem; margin-bottom: 0.375rem; }
.doc__list li::marker { font-weight: 700; color: var(--rust-text); }
.doc__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.doc__sig { display: flex; flex-direction: column; gap: 0.375rem; min-width: 12.5rem; }
.doc__sigline { display: block; border-bottom: 1px solid var(--ink); height: 1.75rem; }

/* --- Who's behind it -------------------------------------------- */
.who { border-top: 1px solid var(--rule); padding-block: 3rem; }
.who__grid { display: flex; flex-direction: column; gap: 1.5rem; }
.who__body { display: flex; flex-direction: column; gap: 1rem; }
.who__body p { margin: 0; }
.portrait-wrap { display: block; width: 100%; max-width: 22rem; line-height: 0; }
.portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  background: var(--rule); /* paints the slot while the lazy image arrives */
}

/* --- Work sample ------------------------------------------------ */
.standard { border-top: 1px solid var(--rule); padding-block: 3rem; }
.standard__grid { display: flex; flex-direction: column; gap: 1rem; }
.standard__body { display: flex; flex-direction: column; gap: 0.875rem; }
.standard__body p { margin: 0; }

/* --- Steps ------------------------------------------------------ */
.how { border-top: 1px solid var(--rule); padding-block: 3rem; }
.steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.steps li { counter-increment: step; position: relative; padding-left: 3rem; max-width: var(--measure); }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.125rem;
  height: 2.125rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}
.steps h3 { margin-bottom: 0.375rem; font-size: 1.25rem; }
.steps p { margin: 0; }

/* --- Close, on ink ---------------------------------------------- */
.close { padding-block: 3rem 3.5rem; }
.close__grid { display: flex; flex-direction: column; gap: 2rem; }
.close__lead { display: flex; flex-direction: column; gap: 1.25rem; }
.close__lead p { margin: 0; }
.close h2 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.0; letter-spacing: -0.035em; }

/* --- The form --------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 0.875rem; border-top: 1px solid var(--hair-onink); padding-top: 1.5rem; }
.form p { margin: 0; max-width: none; }
.form__hp { display: none; }
.form__grid { display: flex; flex-direction: column; gap: 0.875rem; }
.form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.form__field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rule);
}
.form input, .form textarea {
  width: 100%;
  min-height: 3.25rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
}
.form textarea { resize: vertical; min-height: 6.5rem; }
.form input:focus-visible, .form textarea:focus-visible { outline-offset: 2px; }
.form__actions { padding-top: 0.25rem; }
.form__actions .cta { width: 100%; }

/* --- Footer ----------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 2.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}
.footer__stack { display: flex; flex-direction: column; gap: 0.5rem; }
.footer p { margin: 0; max-width: none; }
.footer strong { color: var(--ink); }
.footer a { display: inline-block; padding-block: 0.625rem; margin-block: -0.625rem; }

/* --- Secondary pages (thanks, how this site is built) ----------- */
.page { padding-block: 3rem 3.5rem; }
.page--short { min-height: 50vh; }
.page .wrap > * + * { margin-top: 1.25rem; }
.page h1 { font-size: clamp(2.5rem, 4.4vw, 3.75rem); }
.page__grid { display: flex; flex-direction: column; gap: 2rem; }
.page__lead { display: flex; flex-direction: column; gap: 1.125rem; }
.page__lead p { margin: 0; }
.page--notes { border-top: 1px solid var(--rule); }
.page--notes h2 { margin-bottom: 1.5rem; }
.notes { display: flex; flex-direction: column; gap: 1.5rem; }
.notes h3 { font-size: 1.25rem; margin-bottom: 0.375rem; }
.notes p { margin: 0; }

.ledger { margin: 0; display: flex; flex-direction: column; }
.ledger__row { display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.625rem; }
.ledger dt { flex: 1; display: flex; align-items: baseline; font-size: 0.9375rem; line-height: 1.4; color: var(--muted); }
.ledger dt::after {
  content: "";
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--muted);
  margin-left: 0.75rem;
  position: relative;
  top: -0.3em;
}
.ledger dd { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Phone call bar --------------------------------------------- */
/* Duplicate of the hero button. display:none until script.js adds
   .callbar--on once the hero button scrolls off, and only under 48rem.
   Without JS it never appears, and nothing is lost. */
.callbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--rust);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(100%);
  transition: transform 220ms ease-out;
}
.callbar svg { flex: none; }
.callbar .cta__text { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.25rem 0.5rem; }
.callbar .cta__label { font-size: 0.875rem; }
.callbar .cta__num { font-size: 1.125rem; }
@media (max-width: 47.98rem) {
  .callbar--on { display: flex; }
  .callbar--in { transform: none; }
  .has-callbar .footer { padding-bottom: 5.5rem; }
}

/* --- Scroll reveal ---------------------------------------------- */
/* Only when script.js has confirmed IntersectionObserver and no
   reduced-motion preference. Otherwise .reveal is plain content. The
   after card slides in a beat after its row. */
.js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms ease-out, transform 480ms ease-out; }
.js-motion .reveal .after { opacity: 0; transform: translateX(24px); transition: opacity 520ms ease-out 160ms, transform 520ms ease-out 160ms; }
.js-motion .reveal.is-in, .js-motion .reveal.is-in .after { opacity: 1; transform: none; }

/* --- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .demo__step { animation: none !important; }
}

/* --- Wider screens ---------------------------------------------- */
@media (min-width: 48rem) {
  :root { --pad: 2.5rem; }
  body { font-size: 1.09375rem; }
  section { padding-block: 3.5rem; }
  .cta { display: inline-flex; }
  .cta-block { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cta-block .cta { width: auto; }
  .hero__lead { padding-block: 3.5rem; }
  .hero__panel { padding: 3rem var(--pad); }
  .steps-mini { flex-direction: row; gap: 1rem; }
  .steps-mini li { flex: 1; flex-direction: column; gap: 0.125rem; }
  .ticks { flex-direction: row; border-left: 0; border-top: 1px solid var(--ink); padding: 0; gap: 1rem; }
  .tick { flex: 1; padding-top: 1rem; }
  .tick::before { left: 0; top: -0.4375rem; }
  .fig { padding: 1.5rem 1.625rem 1.5rem; }
  .fig--journey { padding: 1.625rem 2rem 1.75rem; }
  .fixes { padding-block: 4rem 3.5rem; }
  .row { margin-bottom: 3.5rem; gap: 1.5rem; }
  .row__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: stretch; }
  .row--flip .before { order: 2; }
  .row--flip .after { order: 1; }
  .after { align-self: stretch; }
  .thread, .timeline, .cal, .invoice { font-size: 0.875rem; }
  .cal__blk, .cal__dn { font-size: 0.6875rem; }
  .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .form__actions .cta { width: auto; }
  .doc { padding: 2.25rem 2.5rem 2.5rem; }
  .doc__table { font-size: 1rem; }
  .doc__table th, .doc__table td { padding: 0.75rem 1.25rem 0.75rem 0; }
  .doc__title { font-size: 1.75rem; }
  .footer { font-size: 0.875rem; }
  .notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
}

@media (min-width: 64rem) {
  :root { --pad: 4rem; }
  section { padding-block: 4.5rem; }

  .hero { padding-block: 0; }
  /* Four tracks: left gutter, 7/12 and 5/12 of the same 82rem container the
     masthead and every .wrap use, right gutter. The paper column's left edge
     lines up with the wordmark; the ink panel spans its track plus the right
     gutter, so it bleeds to the page edge while its content (a subgrid child
     in the first track) stops at the container's right edge. */
  .hero__grid {
    --hero-content: calc(min(82rem, 100%) - 2 * var(--pad)); /* .wrap's inner width: its 82rem max includes the padding */
    display: grid;
    grid-template-columns: minmax(var(--pad), 1fr) calc(var(--hero-content) * 7 / 12) calc(var(--hero-content) * 5 / 12) minmax(var(--pad), 1fr);
    align-items: stretch;
  }
  .hero__lead { grid-column: 2; padding: 5.5rem 3.5rem 5.5rem 0; justify-content: center; gap: 1.5rem; margin: 0; max-width: none; }
  .hero__lead .lede { max-width: 34rem; }
  .hero__panel { grid-column: 3 / -1; display: grid; grid-template-columns: subgrid; align-content: center; padding: 4rem 0; }
  .hero__panel-inner { grid-column: 1; padding-left: 3rem; justify-content: center; align-items: center; gap: 1.5rem; }
  .hero__panel-inner > * { width: 100%; }
  .demo { width: 16.5rem; }

  .journey { padding-block: 3.5rem 0; }

  .fixes { padding-block: 5.5rem 4.5rem; }
  .section-head { margin-bottom: 3.5rem; }
  .row { margin-bottom: 4.5rem; }
  .row__grid { gap: 3.5rem; }
  .before { padding-top: 0.5rem; }

  .running { padding-block: 5.5rem; }
  .running__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
  .running__text { grid-column: 1 / span 6; gap: 1.25rem; }
  .sheet { grid-column: 8 / span 5; }
  .sheet__row { padding-block: 0.6875rem; font-size: 0.9375rem; }
  .sheet__num { font-size: 1.5rem; }

  .sample { padding-block: 5.5rem; }

  .who { padding-block: 5rem; }
  .who__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
  .portrait-wrap { grid-column: 1 / span 4; max-width: none; }
  .who__body { grid-column: 6 / span 7; gap: 1.125rem; }

  .standard { padding-block: 5rem; }
  .standard__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
  .standard__grid h2 { grid-column: 1 / span 4; }
  .standard__body { grid-column: 6 / span 6; }

  .how { padding-block: 5rem; }
  .steps { flex-direction: row; gap: 2.5rem; }
  .steps li { flex: 1; padding-left: 0; padding-top: 3rem; }
  .steps li::before { top: 0; }

  .close { padding-block: 6rem 6.5rem; }
  .close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
  .close__lead { grid-column: 1 / span 6; }
  .form { grid-column: 8 / span 5; border-top: 0; padding-top: 0; }

  .page { padding-block: 5rem; }
  .page__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
  .page__lead { grid-column: 1 / span 5; }
  .ledger { grid-column: 7 / span 6; }
  .ledger__row { padding-block: 0.8125rem; }
  .ledger dt { font-size: 1.0625rem; }
  .ledger dd { font-size: 1.375rem; }
}

/* --- Print ------------------------------------------------------ */
@media print {
  .cta { border: 2px solid #000000; color: #000000; background: none; }
  .skip-link, .callbar, .form { display: none; }
  .band { background: none; color: #000000; }
  .band h2, .band p, .band .lede { color: #000000; }
  .js-motion .reveal, .js-motion .reveal .after { opacity: 1; transform: none; }
  .demo__step { animation: none; }
}