/* Ushiro Labs. Hand-written, no build step. Light theme only. */

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("../fonts/kalam-note.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F6F1E7;
  --cream-deep: #EDE5D4;
  --paper: #FBF8F0;
  --ink: #1F3A40;
  --ink-soft: #47605F;
  --sage: #6B8460;
  --sage-text: #55694C;
  --sage-deep: #475B3F;
  --terra: #C4623F;
  --terra-strong: #A84E2F;
  --terra-strong-hover: #94432A;
  --link: #9E4A2C;
  --dim: #738683;
  --line: rgba(31, 58, 64, 0.16);

  --display: "Literata", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Kalam", cursive;

  --r: 10px;
  --rl: 16px;
  --gutter: 20px;
  --max: 1120px;
}

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

html {
  color-scheme: light;
  -webkit-tap-highlight-color: rgba(107, 132, 96, 0.25);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 7.6vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--terra-strong-hover); }

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

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

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: var(--r);
  z-index: 10;
}
.skip:focus { top: 12px; color: var(--cream); }

section { padding: 64px 0; }
section[id] { scroll-margin-top: 8px; }
.on-deep { background: var(--cream-deep); }

.lead { font-size: 1.1875rem; color: var(--ink-soft); max-width: 46ch; }
.small { font-size: 0.9375rem; color: var(--ink-soft); }
.prose p + p { margin-top: 1em; }
.prose { max-width: 62ch; }
.prose.spaced { margin-top: 24px; }
.lead.spaced { margin-top: 16px; }

/* ---------- header ---------- */
.site-header { padding: 18px 0 6px; }
.site-header .wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lockup {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.lockup img { display: block; height: 36px; width: auto; }
.lockup span { font: 500 1.25rem/1 var(--display); letter-spacing: -0.01em; }
.lockup:hover { color: var(--ink); }
.site-header .btn { flex: none; white-space: nowrap; }
.site-nav { display: none; }
@media (max-width: 359px) {
  .lockup { gap: 8px; }
  .lockup img { height: 30px; }
  .lockup span { font-size: 1.0625rem; }
  .site-header .btn-sm { padding: 8px 10px; font-size: 0.875rem; }
}
@media (min-width: 900px) {
  .site-header .wrap { gap: 28px; }
  .site-nav { display: flex; gap: 28px; margin-left: auto; white-space: nowrap; }
  .site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
  .site-nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
  .lockup span { font-size: 1.375rem; }
  .site-header .btn-sm { min-height: 44px; padding: 10px 18px; }
}

/* ---------- buttons and form fields ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 24px;
  font: 600 1.0625rem/1.2 var(--body);
  color: var(--cream);
  background: var(--terra-strong);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--terra-strong-hover); color: var(--cream); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 0.9375rem; border-radius: var(--r); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.7; cursor: progress; }
a, button, summary, input, textarea { touch-action: manipulation; }

.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .hint { font-weight: 400; color: var(--ink-soft); }
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: var(--r);
  padding: 12px 14px;
  min-height: 48px;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #5F7473; opacity: 1; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

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

.form-status { margin-top: 4px; }
.form-status[hidden] { display: none; }
.form-status p { padding: 14px 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--sage); }
.form-status.is-error p { border-color: var(--terra-strong); }
form.is-done .form-fields { display: none; }

/* ---------- hero ---------- */
/* Top-down: the diagram sits above the text on small screens and behind it from 900px. */
.hero { padding: 20px 0 56px; }
.hero-stage { display: grid; }
.hero-copy { text-align: center; margin-top: 12px; }
.hero h1 { max-width: 14ch; margin-inline: auto; }
.hero .lead { margin: 16px auto 0; text-wrap: balance; }

.hero-form { margin: 26px auto 0; max-width: 560px; text-align: left; }
.hero-form .form-fields { display: grid; gap: 14px; }
.hero-form .row { display: grid; gap: 14px; }
@media (min-width: 640px) {
  .hero-form .row { grid-template-columns: 1fr 1fr; }
}
.hero-form .btn { width: 100%; }
.form-note { margin-top: 2px; font-size: 0.9375rem; color: var(--ink-soft); text-align: center; text-wrap: balance; }
.alt-link { margin-top: 14px; font-size: 0.9375rem; text-align: center; }

.hero-art { position: relative; pointer-events: none; }
.hero-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.hero-diagram.m { display: block; max-width: 400px; margin: 0 auto; }
.hero-diagram.d { display: none; }
@media (min-width: 900px) {
  .hero { padding: 8px 0 72px; }
  .hero-stage > * { grid-area: 1 / 1; }
  .hero-diagram.m { display: none; }
  .hero-diagram.d { display: block; }
  .hero-copy { position: relative; margin: 0 auto; padding-top: 18.5%; width: min(620px, 56%); }
  .hero .lead { max-width: 44ch; }
}

/* hero diagram parts */
.hero-diagram .link { fill: none; stroke: var(--sage); stroke-width: 1.5; }
.hero-diagram .disc { fill: var(--cream); stroke: var(--sage); stroke-width: 1.5; }
.hero-diagram .chip rect { fill: var(--paper); stroke: var(--sage); stroke-width: 1; }
.hero-diagram .chip text { fill: var(--ink); font-family: var(--body); font-weight: 600; }
.hero-diagram .chip-icon { fill: var(--sage-text); }
.hero-diagram .note { fill: var(--sage-deep); font-family: var(--hand); }
.hero-diagram .note-arrow { fill: none; stroke: var(--sage-deep); stroke-width: 1.6; stroke-linecap: round; }
.hero-diagram .flow {
  fill: none;
  stroke: var(--sage-text);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 120;
  stroke-dashoffset: 9;
}
.hero-diagram .flow[data-i="0"] { --i: 0; }
.hero-diagram .flow[data-i="1"] { --i: 1; }
.hero-diagram .flow[data-i="2"] { --i: 2; }
.hero-diagram .flow[data-i="3"] { --i: 3; }
.hero-diagram .flow[data-i="4"] { --i: 4; }
/* Plays once on load, about 5 seconds in total, so it never runs as endless motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-diagram .flow {
    animation: flow 0.9s ease-in-out 1 both;
    animation-delay: calc(0.3s + var(--i) * 0.9s);
  }
}
@keyframes flow {
  from { stroke-dashoffset: 9; }
  to { stroke-dashoffset: -109; }
}

/* ---------- problem: a cluttered desk ---------- */
/* Four problem cards with paper scraps around them, over a side-view desk (laptop
   under sticky notes, phone, mug, pen cup) whose legs stand on the bottom rule.
   Scraps are decoration (aria-hidden). The scattered layout is the static state;
   motion only adds the pop-in. The desk art is cropped to viewBox 150 10 900 212,
   so the band is 23.56cqw tall and desk scraps use cqw to track it. */
#problem { overflow-x: clip; border-top: 1px solid var(--sage); border-bottom: 1px solid var(--sage); padding-bottom: 0; }
.problem-grid { display: grid; gap: 32px; }
.problem-grid h2 {
  max-width: 16ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(2rem, 6.4vw, 3.25rem);
}
.desk { position: relative; container-type: inline-size; }
.pile { position: relative; }
.problem-list { position: relative; z-index: 1; display: grid; gap: 22px; list-style: none; }
.problem-list li {
  align-self: start;
  max-width: 92%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(31, 58, 64, 0.08), 0 6px 18px rgba(31, 58, 64, 0.06);
  padding: 18px 20px 20px;
  rotate: var(--r, 0deg);
}
.problem-list li:nth-child(1) { --r: -1.4deg; }
.problem-list li:nth-child(2) { --r: 1.2deg; justify-self: end; }
.problem-list li:nth-child(3) { --r: 0.9deg; }
.problem-list li:nth-child(4) { --r: -1.1deg; justify-self: end; }
.problem-list strong { display: block; font: 500 1.3125rem/1.25 var(--display); margin-bottom: 6px; }
.problem-list p { color: var(--ink-soft); }

/* small screens: the scraps are a loose pile above the cards, and the desk is a
   deliberate edge-to-edge crop of the laptop and phone */
.clutter { display: flex; flex-wrap: wrap; gap: 10px 6px; margin-bottom: 22px; }
.clutter-desk { display: none; }
.scrap {
  padding: 8px 12px;
  font: 600 0.875rem/1.3 var(--body);
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(31, 58, 64, 0.08);
  white-space: nowrap;
  rotate: var(--r, 0deg);
}
.scrap:nth-child(1) { --r: 3deg; border-top: 6px solid var(--sage); }
.scrap:nth-child(2) { --r: -4deg; }
.scrap:nth-child(3) { --r: 2deg; }
.scrap:nth-child(4) { --r: -2deg; border-top: 6px solid var(--sage); }
.scrap:nth-child(5) { --r: 4deg; }
.desk-band { position: relative; overflow: hidden; margin: 28px calc(-1 * var(--gutter)) 0; }
.desk-art { display: block; width: 214%; max-width: none; height: auto; margin-left: -66.7%; }

/* from 760px: scraps scatter around and behind the cards; three land on the desk */
@media (min-width: 760px) {
  .desk { --out: -14px; }
  .pile { padding-top: 64px; }
  .clutter { display: block; position: absolute; inset: 0; margin: 0; }
  .clutter .scrap { position: absolute; }
  .problem-list { grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 32px; max-width: 880px; margin-inline: auto; }
  .problem-list li { max-width: none; justify-self: stretch; }
  .problem-list li:nth-child(even) { margin-top: 48px; }
  .clutter .scrap:nth-child(1) { top: 10px; left: 30%; }
  .clutter .scrap:nth-child(2) { top: 46%; left: var(--out); z-index: 2; --r: -5deg; }
  .clutter .scrap:nth-child(3) { display: none; top: 30%; right: var(--out); }
  .clutter .scrap:nth-child(4) { top: 18px; right: var(--out); }
  .clutter .scrap:nth-child(5) { top: 30px; left: 4%; --r: -3deg; }

  .desk-band { overflow: visible; margin: 0; }
  .desk-art { width: 100%; margin-left: 0; }
  .clutter-desk { display: block; position: absolute; inset: 0; z-index: 2; }
  .clutter-desk .scrap { position: absolute; }
  .clutter-desk .scrap:nth-child(1) { left: 4%; bottom: 2.6cqw; --r: -4deg; }
  .clutter-desk .scrap:nth-child(2) { left: 36%; bottom: 3.4cqw; }
  .clutter-desk .scrap:nth-child(3) { left: 77.5%; bottom: 8.6cqw; --r: 5deg; }
}
@media (min-width: 1100px) {
  .clutter-desk .scrap:nth-child(1) { left: 14.5%; bottom: 8.6cqw; }
}
/* wide: outer scraps spill past the content column; the SOP scrap sits clear of the card edge */
@media (min-width: 1200px) {
  .desk { --out: -64px; }
  .clutter .scrap:nth-child(2) { left: auto; right: calc(50% + 448px); }
  .clutter .scrap:nth-child(3) { display: block; }
  .clutter .scrap:nth-child(4) { right: 8%; }
  .clutter .scrap:nth-child(5) { left: var(--out); }
}

/* Each item runs on its own view timeline, measured against its own height, so it
   is fully visible by the time it has fully entered the viewport, well before the
   section's bottom edge arrives. Cards finish by half-entered; scraps start later
   and trail with a short stagger, finishing before they have fully entered. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scrap, .problem-list li {
      animation: drop linear both;
      animation-timeline: view();
    }
    .problem-list li { animation-range: entry 0% entry calc(45% + var(--d, 0%)); }
    .problem-list li:nth-child(even) { --d: 5%; }
    .scrap { animation-range: entry calc(15% + var(--d, 0%)) entry calc(75% + var(--d, 0%)); }
    .scrap:nth-child(2n) { --d: 8%; }
    .scrap:nth-child(3n) { --d: 15%; }
    @keyframes drop {
      from { opacity: 0; scale: 0.86; translate: 0 18px; }
      to { opacity: 1; scale: 1; translate: 0 0; }
    }
  }
}

/* ---------- brightening statement ---------- */
.statement { padding: 88px 0; }
.statement p {
  font: 500 clamp(1.625rem, 4.4vw, 2.75rem)/1.25 var(--display);
  letter-spacing: -0.01em;
  max-width: 18.5em;
  margin-inline: auto;
  text-wrap: balance;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bright { view-timeline: --stmt block; }
    .bright span {
      color: var(--dim);
      animation: lit linear both;
      animation-timeline: --stmt;
      animation-range: cover calc(6% + var(--i) * 1.1%) cover calc(16% + var(--i) * 1.1%);
    }
    @keyframes lit { to { color: var(--ink); } }
  }
}
.bright span:nth-child(1) { --i: 0; }
.bright span:nth-child(2) { --i: 1; }
.bright span:nth-child(3) { --i: 2; }
.bright span:nth-child(4) { --i: 3; }
.bright span:nth-child(5) { --i: 4; }
.bright span:nth-child(6) { --i: 5; }
.bright span:nth-child(7) { --i: 6; }
.bright span:nth-child(8) { --i: 7; }
.bright span:nth-child(9) { --i: 8; }
.bright span:nth-child(10) { --i: 9; }
.bright span:nth-child(11) { --i: 10; }
.bright span:nth-child(12) { --i: 11; }
.bright span:nth-child(13) { --i: 12; }
.bright span:nth-child(14) { --i: 13; }
.bright span:nth-child(15) { --i: 14; }
.bright span:nth-child(16) { --i: 15; }
.bright span:nth-child(17) { --i: 16; }
.bright span:nth-child(18) { --i: 17; }
.bright span:nth-child(19) { --i: 18; }
.bright span:nth-child(20) { --i: 19; }
.bright span:nth-child(21) { --i: 20; }
.bright span:nth-child(22) { --i: 21; }
.bright span:nth-child(23) { --i: 22; }
.bright span:nth-child(24) { --i: 23; }
.bright span:nth-child(25) { --i: 24; }
.bright span:nth-child(26) { --i: 25; }
.bright span:nth-child(27) { --i: 26; }
.bright span:nth-child(28) { --i: 27; }
.bright span:nth-child(29) { --i: 28; }
.bright span:nth-child(30) { --i: 29; }
.bright span:nth-child(31) { --i: 30; }
.bright span:nth-child(32) { --i: 31; }

/* ---------- what we take on ---------- */
/* <details name> is the only control, so it works without JS and by keyboard.
   Small screens: an accordion, with the open item's example right under it.
   From 900px: three column heads over one example strip; the open item's example
   is bright and the others dim. With everything closed, all three show at full strength. */
.takeon-head { margin-bottom: 32px; }
.scope-line { margin-top: 14px; max-width: 34ch; font: 500 clamp(1.1875rem, 2.4vw, 1.4375rem)/1.35 var(--display); color: var(--ink-soft); }
.takeon { display: grid; }
.takeon-list, .takeon-strip { display: contents; }
.takeon details { border-top: 1px solid var(--line); }
.takeon details:nth-child(3) { border-bottom: 1px solid var(--line); }
.takeon details:nth-child(1) { order: 1; }
.takeon details:nth-child(2) { order: 3; }
.takeon details:nth-child(3) { order: 5; }
.takeon .ex-1 { order: 2; }
.takeon .ex-2 { order: 4; }
.takeon .ex-3 { order: 6; }
.takeon .example { display: none; margin: 0 0 24px; }
.takeon:has(details:nth-child(1)[open]) .ex-1,
.takeon:has(details:nth-child(2)[open]) .ex-2,
.takeon:has(details:nth-child(3)[open]) .ex-3 { display: block; }
.takeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  font: 500 1.375rem/1.2 var(--display);
}
.takeon summary::-webkit-details-marker { display: none; }
.takeon summary:hover, .faq summary:hover { color: var(--link); }
.takeon summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--sage-text);
  border-bottom: 2px solid var(--sage-text);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}
.takeon details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.takeon .detail-body { padding: 0 4px 24px; max-width: 46ch; }
.takeon .outcome { font-size: 1.1875rem; font-weight: 600; }
.takeon .modules { margin-top: 10px; color: var(--ink-soft); }

.example {
  margin-top: 20px;
  background: var(--cream);
  border-radius: var(--rl);
  padding: 20px;
}
.example-label { font-size: 0.9375rem; font-weight: 600; color: var(--sage-text); margin-bottom: 14px; }

.sms { display: grid; gap: 10px; max-width: 360px; }
.bubble { background: var(--paper); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 12px 14px; max-width: 90%; }
.bubble.reply { justify-self: end; background: var(--ink); color: var(--cream); border-color: var(--ink); border-radius: 16px 16px 4px 16px; max-width: 60%; }

.note-sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.note-sheet .note-title { margin: 0 0 8px; font: 500 1.125rem/1.2 var(--display); }
.note-sheet ul { list-style: none; display: grid; gap: 10px; }
.note-sheet li { padding-top: 10px; border-top: 1px solid var(--line); }
.note-sheet li:first-child { padding-top: 0; border-top: 0; }
.note-sheet strong { display: block; }

.ranked { list-style: none; display: grid; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.ranked li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.ranked li:first-child { border-top: 0; }
.ranked .rank { font: 500 1.5rem/1 var(--display); color: var(--sage-text); }
.ranked strong { display: block; }
.ranked span { color: var(--ink-soft); font-size: 0.9375rem; }

@media (min-width: 900px) {
  .takeon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }
  .takeon::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 8px calc(-1 * var(--gutter)) 0;
    background: var(--cream);
    border-radius: var(--rl);
  }
  .takeon details, .takeon .example { order: 0; }
  .takeon details:nth-child(3) { border-bottom: 0; }
  .takeon details { border-top: 2px solid var(--line); align-self: start; }
  .takeon details[open] { border-top-color: var(--ink); }
  .takeon details:nth-child(1), .takeon .ex-1 { grid-column: 1; }
  .takeon details:nth-child(2), .takeon .ex-2 { grid-column: 2; }
  .takeon details:nth-child(3), .takeon .ex-3 { grid-column: 3; }
  .takeon details { grid-row: 1; }
  .takeon summary { font-size: 1.3125rem; }
  .takeon .detail-body { padding-bottom: 28px; }
  .takeon .example, .takeon .example:nth-child(n) {
    display: block;
    grid-row: 2;
    margin: 8px 0 0;
    padding: 28px 0;
    background: transparent;
    transition: opacity 0.25s ease;
  }
  .takeon:has(details[open]) summary { color: var(--ink-soft); }
  .takeon:has(details[open]) details[open] summary { color: var(--ink); }
  .takeon:has(details[open]) .example { opacity: 0.3; }
  .takeon:has(details:nth-child(1)[open]) .ex-1,
  .takeon:has(details:nth-child(2)[open]) .ex-2,
  .takeon:has(details:nth-child(3)[open]) .ex-3 { opacity: 1; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .takeon .example { transition: none; }
}

/* ---------- proof ---------- */
.proof-kicker { margin-bottom: 10px; font-weight: 600; color: var(--sage-text); }
.proof h2 { max-width: 20ch; }
.proof-body { margin-top: 24px; display: grid; gap: 28px; align-items: center; }
.proof-body p { max-width: 60ch; }
.proof-note { margin-top: 1em; font-size: 0.9375rem; color: var(--ink-soft); }
.proof .proof-note { border-left: 0; padding-left: 0; }
.proof-link { margin-top: 24px; }
.btn-quiet { color: var(--ink); background: transparent; border: 1.5px solid var(--ink); }
.btn-quiet:hover, .btn-quiet:focus-visible { color: var(--cream); background: var(--sage-deep); border-color: var(--sage-deep); }
.proof-art-wrap { max-width: 400px; justify-self: center; width: 100%; }
.proof-art { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 900px) {
  .proof-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
}
.privacy-line { border-left: 3px solid var(--sage); padding-left: 16px; color: var(--ink-soft); }

/* visible markers for facts the owner still has to confirm. Remove before launch. */
.todo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font: 600 0.8125rem/1.5 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 1px dashed var(--ink);
  border-radius: 6px;
  vertical-align: baseline;
}

/* ---------- how it works ---------- */
.how-grid { display: grid; gap: 32px; }
.founding { margin-top: 18px; padding-left: 16px; border-left: 3px solid var(--sage); max-width: 34ch; font-weight: 600; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); font: 500 2rem/1 var(--display); color: var(--sage-text); }
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
}

/* ---------- questions ---------- */
.faq { margin-top: 28px; max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  font: 500 1.1875rem/1.3 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--sage-text);
  border-bottom: 2px solid var(--sage-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .answer { padding: 0 4px 22px; max-width: 60ch; color: var(--ink); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 28px; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rl); padding: 24px 20px; }
.contact-card .form-fields { display: grid; gap: 16px; }
.contact-card .btn { width: 100%; }
.microcopy { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-soft); }
.mailto { margin-top: 18px; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .contact-card { padding: 32px; }
  .contact-card .btn { width: auto; justify-self: start; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: 48px 0 40px; }
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--cream-deep); }
.site-footer :focus-visible { outline-color: var(--cream); }
.footer-grid { display: grid; gap: 28px; }
.footer-brand { font: 500 1.375rem/1.2 var(--display); }
.site-footer address { font-style: normal; margin-top: 8px; }
.footer-links { list-style: none; display: grid; gap: 8px; }
.copyright { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(246, 241, 231, 0.24); font-size: 0.9375rem; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

/* ---------- case study page ---------- */
.cs-hero { padding: 28px 0 24px; }
.back-link { font-size: 0.9375rem; margin-bottom: 20px; }
.cs-hero h1 { max-width: 18ch; font-size: clamp(2.125rem, 6.4vw, 3.25rem); }
.cs-hero .lead { margin-top: 18px; max-width: 48ch; }

.cs-split { display: grid; gap: 32px; }
.cs-split .asked h3 { margin-bottom: 12px; }
.asked ul { list-style: none; display: grid; gap: 12px; }
.asked li { border-left: 3px solid var(--sage); padding-left: 16px; max-width: 44ch; }
@media (min-width: 900px) {
  .cs-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
}

.cs-intro { margin-top: 16px; max-width: 54ch; color: var(--ink-soft); }
.cs-build-grid { margin-top: 28px; display: grid; gap: 28px; }
.cs-build .steps { max-width: 760px; }
.cs-example { background: var(--cream-deep); margin-top: 0; align-self: start; }
@media (min-width: 900px) {
  .cs-build-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: start; }
  .cs-example { margin-top: 1px; padding: 28px; }
}
.cs-build .steps h3 { margin-bottom: 4px; }
.cs-build .privacy-line { margin-top: 12px; max-width: 54ch; }

.spaced-top { margin-top: 16px; }
.result-line { font: 500 clamp(1.5rem, 4vw, 2.25rem)/1.25 var(--display); max-width: 24em; text-wrap: balance; }
.result-text { margin-top: 16px; max-width: 54ch; color: var(--ink-soft); }
/* Metrics strip: one panel. Top, time as units: "by hand" is 10 solid ink cells
   plus 3 fading cells for "more than"; "with the automation" is a thin sliver.
   Below, a left to right flow: 13 physician dots (5, 5, 3), a field of comment
   slips, 41 applicant dots (7 columns). Visuals are aria-hidden; the text carries
   every figure. Drawn in the cat and scrap style: flat fills, ink, sage accents;
   the automation mark is terra-strong, a shape only. */
.metrics {
  margin-top: 32px;
  max-width: 880px;
  padding: 24px 20px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  view-timeline: --metrics block;
}
.bar-row + .bar-row { margin-top: 18px; }
.bar-label strong { font-weight: 600; }
.cells { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; max-width: 560px; margin-top: 8px; }
.cells i { height: 18px; border-radius: 3px; background: var(--ink); transform-origin: left center; }
.cells i:nth-child(11) { opacity: 0.45; }
.cells i:nth-child(12) { opacity: 0.25; }
.cells i:nth-child(13) { opacity: 0.12; }
.sliver { width: 4px; min-width: 4px; height: 18px; margin-top: 8px; border-radius: 1px; background: var(--terra-strong); }
.bar-caption { margin-top: 16px; max-width: 60ch; font-size: 0.9375rem; color: var(--ink-soft); }
.scale-note { margin-top: 6px; font-size: 0.875rem; color: var(--ink-soft); }

.flow { list-style: none; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 24px; }
.flow li { display: grid; gap: 12px; align-content: start; }
.flow p { max-width: 26ch; }
.flow strong { font-weight: 700; }
.dots { display: grid; grid-template-columns: repeat(5, 10px); gap: 6px; align-content: start; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--sage-deep); }
.dots-41 { grid-template-columns: repeat(7, 10px); }
.dots-41 i { background: var(--ink); }
.slips { display: flex; flex-wrap: wrap; align-content: flex-start; width: 132px; padding: 2px 0 8px 2px; }
.slips i {
  width: 19px;
  height: 13px;
  margin: 0 -4px -5px 0;
  background: var(--cream);
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(31, 58, 64, 0.08);
  rotate: -7deg;
}
.slips i:nth-child(2n) { rotate: 11deg; translate: 0 -2px; }
.slips i:nth-child(3n) { rotate: -16deg; translate: 2px 1px; background: var(--cream-deep); }
.slips i:nth-child(4n) { border-top: 3px solid var(--sage); }
.slips i:nth-child(5n) { rotate: 22deg; translate: -1px 3px; }
.slips i:nth-child(7n) { rotate: 3deg; translate: 3px -3px; }
.slips i:nth-child(11n) { rotate: -24deg; }
/* the three visuals share one box height with their tops aligned, so the labels line up */
@media (min-width: 760px) {
  .metrics { padding: 32px; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .flow-art { height: 96px; align-content: start; overflow: visible; }
}

/* by hand: the cells fill in one after another as the panel enters, all done by
   the time 60% of the panel is on screen */
.cells i:nth-child(1) { --n: 0; }
.cells i:nth-child(2) { --n: 1; }
.cells i:nth-child(3) { --n: 2; }
.cells i:nth-child(4) { --n: 3; }
.cells i:nth-child(5) { --n: 4; }
.cells i:nth-child(6) { --n: 5; }
.cells i:nth-child(7) { --n: 6; }
.cells i:nth-child(8) { --n: 7; }
.cells i:nth-child(9) { --n: 8; }
.cells i:nth-child(10) { --n: 9; }
.cells i:nth-child(11) { --n: 10; }
.cells i:nth-child(12) { --n: 11; }
.cells i:nth-child(13) { --n: 12; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cells i {
      animation: fill-cell linear both;
      animation-timeline: --metrics;
      animation-range: entry calc(8% + var(--n) * 3.5%) entry calc(16% + var(--n) * 3.5%);
    }
    @keyframes fill-cell { from { scale: 0 1; } to { scale: 1 1; } }
  }
}

.gp-lead { font: 500 clamp(1.3125rem, 3vw, 1.625rem)/1.4 var(--display); max-width: 30em; margin-top: 16px; }
.gp-text { margin-top: 16px; max-width: 58ch; }
/* one panel, split down the middle (stacked with a rule on small screens) */
.compare {
  margin-top: 32px;
  display: grid;
  max-width: 880px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rl);
}
.compare > div { padding: 24px 20px; }
.compare > div + div { border-top: 1px solid var(--line); }
.compare h3 { margin-bottom: 12px; }
.compare ul { list-style: none; display: grid; gap: 10px; }
.compare li { border-left: 3px solid var(--sage); padding-left: 16px; max-width: 40ch; }
.compare .before li { border-left-color: var(--ink-soft); color: var(--ink-soft); }
@media (min-width: 760px) {
  .compare { grid-template-columns: 1fr 1fr; }
  .compare > div { padding: 32px; }
  .compare > div + div { border-top: 0; border-left: 1px solid var(--line); }
}

/* ---------- legal and 404 pages ---------- */
.legal { padding: 40px 0 72px; }
.legal h1 { font-size: clamp(2.125rem, 6vw, 3rem); }
.legal .wrap > * { max-width: 68ch; }
.legal h2 { font-size: 1.5rem; margin-top: 40px; margin-bottom: 12px; }
.legal p + p { margin-top: 1em; }
.legal .small { margin-top: 8px; }
.short-list { list-style: none; display: grid; gap: 10px; }
.short-list li { border-left: 3px solid var(--sage); padding-left: 16px; }
.nf-actions { margin-top: 24px; margin-bottom: 20px; }
.notfound { padding: 56px 0 96px; }

/* 404: footer sits at the bottom at every width */
.is-404 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.is-404 main { flex: 1 0 auto; }

/* ---------- intake page (unlisted) ---------- */
.intake { padding: 40px 0 72px; }
.intake h1 { font-size: clamp(2.125rem, 6vw, 3rem); }
.intake .wrap > * { max-width: 62ch; }
.intake-note { margin-top: 12px; }
.intake-card { margin-top: 28px; }
.intake .wrap > .intake-row { max-width: none; }
.intake-row > .intake-card { max-width: 62ch; }
.intake-art { display: none; }
@media (min-width: 960px) {
  .intake-row { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); column-gap: 48px; align-items: stretch; }
  .intake-art { display: block; padding-top: 28px; }
  .intake-art img { position: sticky; top: 32px; display: block; width: 100%; max-width: 360px; height: auto; margin: 24px auto 0; }
}
.intake-card .form-fields { gap: 18px; }
.intake-warning { border-left: 3px solid var(--sage); padding-left: 16px; font-weight: 600; }
.form-section {
  font: 600 0.9375rem/1.3 var(--body);
  letter-spacing: 0;
  color: var(--sage-text);
  margin-top: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.field input.num { max-width: 10rem; }
.group { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 12px; }
.group legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 0.9375rem; }
.group legend .hint { font-weight: 400; color: var(--ink-soft); }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px 10px 14px;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: var(--r);
  cursor: pointer;
}
.option input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.limit-msg { font-size: 0.9375rem; color: var(--ink); }
.limit-msg:empty { display: none; }
.intake-card .btn { margin-top: 8px; }
.intake .mailto { margin-top: 24px; }