/* ==========================================================================
   Slowly Built — site stylesheet
   --------------------------------------------------------------------------
   Direction: paper and ink. Warm stock, hairline rules, a serif that carries
   the argument, mono labels that carry the facts. No drop-shadow cards, no
   gradient buttons, no rounded pills. A tool built by one person should look
   like a document someone signed, not like a SaaS landing page.

   Bump the ?v= query on every page when this file changes: /_shared/* is
   cached for 10 minutes at the edge.
   ========================================================================== */

/* ---------- 0. Reset ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 1. Tokens ---------- */

:root {
  /* paper */
  --paper:        #f4f1e8;
  --paper-deep:   #ebe6d8;
  --card:         #fbf9f3;
  --card-deep:    #f7f4eb;

  /* ink */
  --ink:          #15140f;
  --ink-soft:     #3f3e35;
  --ink-faint:    #6d6a5a;
  --ink-ghost:    #8a8676;

  /* rules */
  --rule:         #d9d3c1;
  --rule-soft:    #e5e0d1;
  --rule-strong:  #c6bfa9;

  /* accent */
  --pine:         #1d4a3b;
  --pine-deep:    #10302a;
  --pine-tint:    #e4ebe4;
  --ochre:        #8a5a1a;
  --ochre-tint:   #f4e9d4;
  --rust:         #8c3222;
  --rust-tint:    #f5e7e2;

  /* type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* metrics */
  --shell: 1120px;
  --gutter: clamp(20px, 5vw, 52px);
  --measure: 64ch;
  --radius: 2px;
}

/* ---------- 2. Base ---------- */

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 0.55vw + 14.4px, 17px);
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Paper grain. Fixed overlay, no pointer capture; removed for reduced-motion
   users only because it costs a compositing layer, not because it moves. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

::selection {
  background: var(--pine);
  color: #f7f4ea;
}

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* Grid and flex children default to min-width:auto, which lets a wide child
   (the comparison table) stretch the whole column and push the page sideways
   on a phone. Every layout container opts out. */
.section-grid > *,
.hero-grid > *,
.duo > *,
.plans > *,
.footer-grid > *,
.steps > li > *,
.limits-list > li > * {
  min-width: 0;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 120;
  background: var(--pine);
  color: #f7f4ea;
  padding: 10px 16px;
  font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 3. Type primitives ---------- */

h1, h2, h3, h4 { margin: 0; }

.display {
  font-family: var(--serif);
  font-weight: 330;
  font-variation-settings: "opsz" 60;
  font-size: clamp(2.45rem, 2.2vw + 1.6rem, 4.15rem);
  line-height: 0.99;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

.display em {
  font-style: italic;
  font-weight: 340;
  color: var(--pine);
}

.display-sm {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.62rem, 1.5vw + 1.1rem, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.03rem, 0.5vw + 0.9rem, 1.16rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 40ch;
}

.mono {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ochre);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ochre);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: breathe 3.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { animation: none; opacity: 1; }
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.prose {
  max-width: var(--measure);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose code,
code {
  font-family: var(--mono);
  font-size: 0.845em;
  letter-spacing: -0.01em;
  background: var(--card-deep);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 0.08em 0.36em;
  color: var(--ink);
  white-space: nowrap;
}

.fine {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--ink-faint);
  max-width: 62ch;
}

/* ---------- 4. Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(244, 241, 232, 0.88);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--rule);
  background: rgba(246, 243, 234, 0.94);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

.wordmark-mark {
  width: 15px;
  height: 15px;
  background: var(--pine);
  position: relative;
  flex: 0 0 auto;
}

.wordmark-mark::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 5px;
  height: 5px;
  background: var(--paper);
}

.wordmark-text {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1;
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.6vw, 30px);
}

@media (min-width: 860px) {
  .nav { display: flex; }
}

.nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav a:hover { color: var(--ink); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.header-cta:hover {
  background: var(--pine);
  border-color: var(--pine);
  color: #f7f4ea;
}

/* ---------- 5. Hero ---------- */

.hero {
  padding-top: clamp(46px, 7vw, 88px);
  padding-bottom: clamp(44px, 6vw, 76px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 60px);
  align-items: start;
}

@media (min-width: 940px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(40px, 4vw, 64px);
  }
}

.hero h1 { margin: 20px 0 22px; }

/* The hero shares its width with the readout panel, so the display type runs
   a full step smaller than the home page headline. */
.hero .display {
  font-size: clamp(2.2rem, 1.95vw + 1.3rem, 3.5rem);
  line-height: 1.02;
}

.hero .lede { max-width: 46ch; }

.hero-sub {
  margin-top: 18px;
  font-size: 0.93rem;
  color: var(--ink-faint);
  max-width: 44ch;
}

.hero-sub strong { color: var(--ink-soft); font-weight: 600; }

/* ---------- 6. Form ---------- */

.lead-form {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: clamp(24px, 3vw, 32px) 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.lead-form:focus-within {
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(29, 74, 59, 0.1);
}

.lead-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 0.97rem;
  color: var(--ink);
}

.lead-form input[type="email"]::placeholder { color: var(--ink-ghost); }
.lead-form input[type="email"]:focus { outline: none; }

.lead-form button {
  flex: 0 0 auto;
  min-height: 50px;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--pine);
  color: #f7f4ea;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lead-form button:hover { background: var(--pine-deep); }
.lead-form button:disabled { opacity: 0.62; cursor: default; }

@media (min-width: 560px) {
  .lead-form { flex-direction: row; }
  .lead-form button {
    border-top: 0;
    border-left: 1px solid var(--rule-strong);
    min-height: 52px;
  }
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-note {
  font-size: 0.845rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0;
  max-width: 48ch;
}

.form-note.ok  { color: var(--pine); }
.form-note.err { color: var(--rust); }

.plan-hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 14px 0 0;
  min-height: 0;
}

/* ---------- 7. Readout panel (hero figure) ---------- */

.readout {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow:
    0 1px 0 rgba(21, 20, 15, 0.03),
    0 28px 56px -44px rgba(21, 20, 15, 0.55);
  position: relative;
}

.readout::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pine) 0%, var(--pine) 46%, var(--ochre) 46%, var(--ochre) 100%);
  opacity: 0.85;
}

.readout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule-soft);
}

.readout-file {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-ghost);
  text-transform: none;
}

.curve {
  display: block;
  width: 100%;
  height: auto;
  margin: 14px 0 4px;
  overflow: visible;
}

.curve .grid    { stroke: var(--rule-soft); stroke-width: 1; }
.curve .axis    { stroke: var(--rule-strong); stroke-width: 1; }
.curve .trace   { fill: none; stroke: var(--pine); stroke-width: 1.9; stroke-linecap: round; }
.curve .thresh  { stroke: var(--ochre); stroke-width: 1.2; stroke-dasharray: 4 4; }
.curve .drop    { stroke: var(--pine); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.55; }
.curve .dot     { fill: var(--pine); stroke: var(--card); stroke-width: 2.4; }
.curve .tick    { font-family: var(--mono); font-size: 7.5px; fill: var(--ink-ghost); letter-spacing: 0.04em; }
.curve .tag     { font-family: var(--mono); font-size: 8px; fill: var(--ochre); letter-spacing: 0.06em; }

.readout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}

.readout-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  padding: 0 0 7px;
  border-bottom: 1px solid var(--rule-soft);
}

.readout-table th:last-child,
.readout-table td:last-child { text-align: right; }

.readout-table td {
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule);
  color: var(--ink-soft);
}

.readout-table td:last-child {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.readout-table tr:last-child td {
  border-bottom: 0;
  padding-top: 11px;
  color: var(--ink);
  font-weight: 500;
}

.readout-table tr:last-child td:last-child { color: var(--pine); }

.readout figcaption {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
  color: var(--ink-ghost);
}

/* ---------- 8. Section frame ---------- */

.section {
  padding: clamp(52px, 7vw, 92px) 0;
  border-top: 1px solid var(--rule);
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
}

@media (min-width: 900px) {
  .section-grid {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
  }
}

.gutter {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

@media (min-width: 900px) {
  .gutter {
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 104px;
    align-self: start;
  }
}

.sec-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--og, var(--ochre));
}

.sec-kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.section h2 { margin-bottom: 22px; }

.section h2 + .prose { margin-top: 4px; }

/* ---------- 9. Evidence blocks ---------- */

.evidence { margin-top: 34px; }

.evidence-intro {
  font-size: 0.92rem;
  color: var(--ink-faint);
  margin-bottom: 26px;
  max-width: 52ch;
}

.doc {
  border-left: 1px solid var(--rule-strong);
  padding: 2px 0 2px 22px;
  margin-bottom: 30px;
}

.doc:last-child { margin-bottom: 0; }

.doc-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin: 0 0 10px;
}

.doc blockquote {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 340;
  font-variation-settings: "opsz" 24;
  font-size: clamp(1.06rem, 0.5vw + 0.96rem, 1.22rem);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 44ch;
}

.doc blockquote .hl {
  font-weight: 500;
  background-image: linear-gradient(transparent 64%, var(--ochre-tint) 64%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.doc-note {
  font-size: 0.885rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 50ch;
  margin: 0;
}

/* ---------- 10. Numbered feature list ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 26px 0;
  border-top: 1px solid var(--rule-soft);
}

.steps > li:first-child {
  border-top: 1px solid var(--rule-strong);
  padding-top: 22px;
}

.steps > li:last-child { padding-bottom: 0; }

@media (min-width: 640px) {
  .steps > li {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 20px;
  }
}

.step-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-ghost);
  padding-top: 3px;
}

.steps h3 {
  font-family: var(--sans);
  font-size: 1.005rem;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.004em;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}

.steps p {
  font-size: 0.945rem;
  line-height: 1.66;
  color: var(--ink-soft);
  margin: 0 0 0.7em;
  max-width: 58ch;
}

.steps p:last-child { margin-bottom: 0; }

.steps .fine { margin-top: 10px; }

/* Supported-format grid: extension in mono, vendor in plain, hairline rows.
   Reads like a spec sheet instead of a sentence full of inline code chips. */
.formats {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 24px;
  max-width: 52ch;
}

@media (min-width: 520px) {
  .formats { grid-template-columns: 1fr 1fr; }
}

.formats li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--rule-soft);
}

.formats .ext {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: 0 0 auto;
  white-space: nowrap;
}

.formats .vendor {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-left: auto;
  text-align: right;
}

/* ---------- 11. Limits panel ---------- */

.limits-panel {
  background: var(--ochre-tint);
  border: 1px solid #e6d3af;
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 46px);
  position: relative;
}

.limits-panel::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(138, 90, 26, 0.16);
  border-radius: 1px;
  pointer-events: none;
}

.limits-panel .mono { color: var(--ochre); margin-bottom: 14px; }
.limits-panel h2 { color: #6d4510; }
.limits-panel > p { max-width: 58ch; color: #5f4a29; }

.limits-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 15px;
  max-width: 66ch;
}

.limits-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.limits-list .x {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  line-height: 1.7;
}

.limits-list p {
  margin: 0;
  font-size: 0.945rem;
  line-height: 1.6;
  color: #4b3a1e;
}

.limits-list strong { color: #3d2d12; font-weight: 600; }
.limits-list em { font-style: italic; }

/* ---------- 12. Duo columns ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 6px;
}

@media (min-width: 780px) {
  .duo {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .duo-col { padding-right: clamp(24px, 3vw, 44px); }
  .duo-col + .duo-col {
    border-left: 1px solid var(--rule);
    padding-right: 0;
    padding-left: clamp(24px, 3vw, 44px);
  }
}

.duo-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.duo-yes .duo-label { color: var(--pine); }
.duo-no  .duo-label { color: var(--rust); }

.duo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.duo li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.duo li:last-child { margin-bottom: 0; }

.duo li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
}

.duo-yes li::before { content: "+"; color: var(--pine); }
.duo-no  li::before { content: "−"; color: var(--rust); }

.duo strong { color: var(--ink); font-weight: 600; }

/* ---------- 13. Comparison table ---------- */

.table-wrap {
  margin-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13.2px;
  line-height: 1.5;
}

.cmp th {
  text-align: left;
  vertical-align: bottom;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.cmp th:first-child { padding-left: 0; }
.cmp th.ours { color: var(--pine); }

.cmp td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  color: var(--ink-soft);
}

.cmp td:first-child {
  padding-left: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
}

.cmp tbody tr:hover td { background: rgba(255, 253, 246, 0.7); }

.cmp td.ours {
  background: var(--pine-tint);
  color: var(--ink);
  font-weight: 500;
}

.cmp tbody tr:last-child td { border-bottom-color: var(--rule-strong); }

/* ---------- 14. Pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: clamp(26px, 3vw, 34px) 0 20px;
}

@media (min-width: 700px) {
  .plans { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .plan + .plan { border-left: 0; }
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
}

@media (min-width: 700px) {
  .plan { border-radius: 0; }
  .plans .plan:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .plans .plan:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
  .plan + .plan { margin-left: -1px; }
}

.plan-featured {
  background: var(--card);
  border-color: var(--pine);
  position: relative;
  z-index: 1;
  box-shadow: 0 22px 44px -38px rgba(16, 48, 42, 0.7);
}

@media (min-width: 700px) {
  .plan-featured { margin-top: -10px; margin-bottom: -10px; padding-top: 32px; padding-bottom: 30px; }
}

.plan-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

.plan-featured .plan-name { color: var(--pine); }

.plan-price {
  font-family: var(--serif);
  font-weight: 330;
  font-variation-settings: "opsz" 40;
  font-size: clamp(2rem, 2vw + 1.4rem, 2.55rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}

.plan-price span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-left: 5px;
  text-transform: uppercase;
}

.plan-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin: 0 0 18px;
}

.plan ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  flex: 1 1 auto;
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
}

.plan li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--rule-strong);
}

.plan-featured li::before { background: var(--pine); opacity: 0.55; }

.plan-btn {
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.plan-btn:hover {
  border-color: var(--pine);
  color: var(--pine);
  background: rgba(228, 235, 228, 0.5);
}

.plan-featured .plan-btn {
  background: var(--pine);
  border-color: var(--pine);
  color: #f7f4ea;
}

.plan-featured .plan-btn:hover { background: var(--pine-deep); color: #f7f4ea; }

.plan-btn.chosen,
.plan-featured .plan-btn.chosen {
  background: var(--ink);
  border-color: var(--ink);
  color: #f7f4ea;
}

/* ---------- 15. FAQ ---------- */

.faq { margin-top: 8px; }

.faq details {
  border-top: 1px solid var(--rule-soft);
}

.faq details:first-of-type { border-top: 1px solid var(--rule-strong); }

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 21px 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.004em;
  color: var(--ink);
  transition: color 0.2s ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pine); }

.faq summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-faint);
  flex: 0 0 auto;
  transition: transform 0.25s ease, color 0.2s ease;
}

.faq details[open] summary::after {
  content: "−";
  color: var(--pine);
}

.faq-body {
  padding: 0 0 24px;
  max-width: 66ch;
}

.faq-body p {
  font-size: 0.945rem;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0 0 0.9em;
}

.faq-body p:last-child { margin-bottom: 0; }
.faq-body strong { color: var(--ink); font-weight: 600; }

/* ---------- 16. Closing panel ---------- */

.finale {
  background: var(--pine);
  color: #f2efe3;
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 64px);
  margin: clamp(56px, 8vw, 96px) 0 0;
  position: relative;
  overflow: hidden;
}

.finale::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(242, 239, 227, 0.13);
  border-radius: 1px;
  pointer-events: none;
}

.finale-inner { position: relative; max-width: 620px; }

.finale .mono { color: rgba(242, 239, 227, 0.52); margin-bottom: 16px; }

.finale h2 {
  font-family: var(--serif);
  font-weight: 330;
  font-variation-settings: "opsz" 52;
  font-size: clamp(1.7rem, 2.1vw + 1.05rem, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: #fbf8ee;
  margin-bottom: 18px;
  text-wrap: balance;
}

.finale p {
  color: rgba(242, 239, 227, 0.78);
  font-size: 0.96rem;
  line-height: 1.66;
  max-width: 54ch;
}

.finale .lead-form {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(242, 239, 227, 0.28);
  margin-bottom: 14px;
}

.finale .lead-form:focus-within {
  border-color: rgba(242, 239, 227, 0.7);
  box-shadow: 0 0 0 3px rgba(242, 239, 227, 0.12);
}

.finale .lead-form input[type="email"] { color: #fbf8ee; }
.finale .lead-form input[type="email"]::placeholder { color: rgba(242, 239, 227, 0.45); }

.finale .lead-form button {
  background: #f2efe3;
  color: var(--pine-deep);
  border-color: rgba(242, 239, 227, 0.28);
}

.finale .lead-form button:hover { background: #ffffff; color: var(--pine-deep); }

.finale .form-note { color: rgba(242, 239, 227, 0.6); }
.finale .form-note.ok  { color: #b9dcc4; }
.finale .form-note.err { color: #f0b6a5; }
.finale .plan-hint { color: rgba(242, 239, 227, 0.72); }

/* ---------- 17. Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(36px, 5vw, 54px) 0 clamp(40px, 5vw, 56px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 780px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) auto auto;
    gap: clamp(32px, 5vw, 72px);
  }
}

.footer-brand .wordmark-text { font-size: 20px; }

.footer-tagline {
  margin: 14px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 30ch;
}

.footer-col .mono { display: block; margin-bottom: 14px; }

.footer-col a {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 9px;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--pine); text-decoration: underline; }

.legal {
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  gap: 8px;
}

.legal p {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--ink-faint);
  margin: 0;
  max-width: 78ch;
}

.legal strong { color: var(--ink-faint); font-weight: 500; }

/* ---------- 18. Motion ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.72s cubic-bezier(0.22, 0.8, 0.24, 1),
    transform 0.72s cubic-bezier(0.22, 0.8, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 19. Home page pieces ---------- */

.home-hero {
  padding-top: clamp(56px, 9vw, 112px);
  padding-bottom: clamp(46px, 6vw, 78px);
}

.home-hero .display { max-width: 17ch; }

.home-hero .lede { margin-top: 24px; max-width: 48ch; }

.home-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.home-meta span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* "At a glance" spec list — fills the right column on the home hero and gives
   the same facts the meta strip used to carry, in a form that reads. */
.spec-wrap { align-self: end; }

.spec-wrap > .mono { display: block; margin-bottom: 6px; }

.spec {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.spec-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.spec dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}

.spec dd {
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.spec dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.spec dd a:hover { border-bottom-color: var(--pine); color: var(--pine); }

.shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.work {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease;
  position: relative;
}

@media (min-width: 840px) {
  .work {
    grid-template-columns: 118px minmax(0, 1fr) 148px;
    gap: clamp(20px, 3vw, 40px);
    align-items: baseline;
  }
}

.work::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--pine);
  transition: width 0.5s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.work:hover::after { width: 100%; }

.work-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.work-title {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.4rem, 1.2vw + 1.05rem, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.work-desc {
  font-size: 0.925rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 54ch;
}

.work-side {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-side::after {
  content: "→";
  font-family: var(--sans);
  font-size: 13px;
  transition: transform 0.25s ease;
}

.work:hover .work-side { color: var(--pine); }
.work:hover .work-side::after { transform: translateX(4px); }

.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 780px) {
  .principles { grid-template-columns: repeat(3, 1fr); }
  .principle + .principle {
    border-left: 1px solid var(--rule);
    padding-left: clamp(20px, 2.6vw, 34px);
  }
  .principle { padding-right: clamp(20px, 2.6vw, 34px); }
}

.principle {
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 780px) {
  .principle { border-bottom: 0; }
}

.principle .mono { display: block; margin-bottom: 12px; color: var(--ochre); }

.principle h3 {
  font-family: var(--sans);
  font-size: 0.965rem;
  font-weight: 600;
  letter-spacing: -0.003em;
  margin: 0 0 8px;
  color: var(--ink);
}

.principle p {
  font-size: 0.885rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- 20. Utility ---------- */

.stack-lg > * + * { margin-top: clamp(28px, 4vw, 44px); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.center-note {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--ink-ghost);
  max-width: 70ch;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 22px;
}

.back-link:hover { color: var(--pine); }

/* ---------- 21. Mail link ---------- */

.mailto {
  font-family: var(--serif);
  font-weight: 330;
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.35rem, 2.3vw + 0.6rem, 2rem);
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 5px;
  background-image: linear-gradient(var(--pine), var(--pine));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color 0.25s ease, background-size 0.35s ease;
}

.mailto:hover {
  color: var(--pine);
  background-size: 100% 2px;
}

.mt-lg { margin-top: clamp(24px, 3vw, 34px); }
.mt-xl { margin-top: clamp(28px, 4vw, 44px); }
.mt-md { margin-top: 16px; }

/* ---------- 22. Long-form article ----------
   Landing pages argue; articles explain. Same paper, same rules, but the
   reading column is fixed and the headings live inside the text instead of
   sitting in the left gutter. `.article` sets --measure, which .prose already
   consumes, so one container controls the whole column. */

.article {
  --measure: 64ch;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.article-head {
  padding: clamp(44px, 6vw, 72px) 0 clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.article-head .display {
  max-width: 26ch;
  margin-top: 14px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.article-standfirst {
  max-width: var(--measure);
  margin-top: 18px;
  font-size: clamp(1.02rem, 0.5vw + 0.9rem, 1.14rem);
  line-height: 1.62;
  color: var(--ink-soft);
}

.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > blockquote,
.article-body > h2,
.article-body > h3,
.article-body > .callout,
.article-body > .table-wrap,
.article-body > .article-note {
  max-width: var(--measure);
}

.article-body > p {
  font-size: 1.02rem;
  line-height: 1.74;
  color: var(--ink-soft);
  margin-bottom: 1.15em;
}

.article-body h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 30;
  font-size: clamp(1.36rem, 1.1vw + 1.05rem, 1.78rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 2.2em 0 0.62em;
  text-wrap: balance;
}

.article-body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 1.9em 0 0.45em;
}

.article-body > h2:first-child,
.article-body > h3:first-child { margin-top: 0; }

.article-body ul,
.article-body ol {
  margin: 0 0 1.25em;
  padding-left: 1.15em;
  color: var(--ink-soft);
}

.article-body li {
  font-size: 1.01rem;
  line-height: 1.7;
  margin-bottom: 0.5em;
}

.article-body li::marker { color: var(--ink-ghost); }

.article-body blockquote {
  margin: 1.7em 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--ochre);
  font-family: var(--serif);
  font-weight: 340;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
}

.article-body blockquote p { margin-bottom: 0.5em; font-size: inherit; color: inherit; }
.article-body blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.article-body .callout {
  margin: 1.9em 0;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--rule);
}

.article-body .callout > .mono { display: block; margin-bottom: 9px; }
.article-body .callout p { font-size: 0.98rem; line-height: 1.66; color: var(--ink-soft); }
.article-body .callout p:last-child { margin-bottom: 0; }

.article-note {
  margin-top: 2.4em;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.article-tail {
  max-width: var(--measure);
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rule);
}

.article-tail h2 { margin-top: 0; }

/* Inline code is set nowrap globally so short tokens stay on one line.
   In running text that rule breaks the page: a long error string
   (list index out of bounds, cannot convert variant of type...) pushes the
   whole document sideways and the phone user cannot scroll back. Article
   prose is the one place where code must be allowed to wrap. */
.article-body code {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .article-head .display { max-width: none; }
  .article-body blockquote { padding-left: 14px; font-size: 1.03rem; }
}