/* Reverse Engineering Challenge (/challenge). Scoped design system in the
   worth.css idiom: self-contained --ch-* tokens under the .challenge root,
   IBM Plex Sans/Mono (loaded globally via fonts.css), the worth palette —
   cream paper, deep forest, terracotta accents, hard-edged CTAs. Editorial
   and calm; the evidence tags are the one expressive move. Mobile-first:
   single column by default, the desktop grid arrives at 880px. */

.challenge {
  --ch-forest: #1c3d2b;
  --ch-forest-700: #24503a;
  --ch-ink: #1a1c19;
  --ch-body: #4a463d;
  --ch-muted: #5f5a50;
  --ch-faint: #9a9489;
  --ch-paper: #ffffff;
  --ch-cream: #f5f3ec;
  --ch-cream-2: #f1efe8;
  --ch-cream-3: #faf9f5;
  --ch-line: #e7e3d8;
  --ch-line-soft: #f0ece1;
  --ch-terra: #c0612f;
  --ch-green-tint: #f1f6ef;
  --ch-green-border: #d7e3d3;
  --ch-green-ink: #1c7a42;
  --ch-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ch-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ch-paper);
  font-family: var(--ch-sans);
  color: var(--ch-ink);
  -webkit-font-smoothing: antialiased;
}

@keyframes chFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chFloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .challenge * { animation: none !important; transition: none !important; }
}

/* ---- header ---- */
.ch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ch-line-soft);
}
.ch-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ch-ink);
}
.ch-header-alt {
  font-family: var(--ch-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ch-muted);
  white-space: nowrap;
}
.ch-header-alt:hover,
.ch-header-alt:focus-visible { color: var(--ch-forest); }
.ch-header-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }

/* ---- shared type ---- */
.ch-kicker {
  font-family: var(--ch-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ch-terra);
  margin-bottom: 16px;
}
.ch-h1 {
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
}
.ch-h1-accent { color: var(--ch-forest); font-weight: 700; }
.ch-h2 {
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.ch-lede,
.ch-section-lede {
  font-weight: 300;
  font-size: clamp(16.5px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--ch-muted);
  margin: 18px 0 0;
  max-width: 620px;
}
.ch-section-lede { margin-top: 0; }

/* ---- buttons ---- */
.ch-btn {
  font-family: var(--ch-sans);
  font-weight: 600;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.ch-btn:active { transform: translateY(1px); }
.ch-btn:disabled { opacity: 0.55; cursor: default; }
.ch-btn-forest { background: var(--ch-forest); color: #fff; box-shadow: 0 8px 22px rgba(28, 61, 43, 0.22); }
.ch-btn-forest:hover:not(:disabled) { background: var(--ch-forest-700); }
.ch-btn-ghost { background: var(--ch-paper); color: var(--ch-muted); border: 1px solid var(--ch-line); box-shadow: none; }
.ch-btn-ghost:hover { border-color: #d8d1bf; color: var(--ch-ink); }
.ch-btn-lg { padding: 16px 26px; font-size: 15.5px; }
.ch-btn-block { width: 100%; }

/* ---- hero ---- */
.ch-hero {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  animation: chFadeUp 0.5s ease both;
}
/* Hero top row: property image (left), message (center), value counter
   (right). Source order is copy -> art -> stat so the message leads
   above the fold on mobile; the desktop grid reflows to art | copy | stat. */
.ch-hero-row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; width: 100%; }
.ch-hero-copy { display: flex; flex-direction: column; }
.ch-hero-copy .ch-lede { max-width: 560px; }
.ch-hero > .ch-shell { max-width: none; width: 100%; margin-top: 0; }
.ch-trust {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-top: 22px;
  font-family: var(--ch-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-faint);
}
.ch-trust span:not(:first-child)::before { content: "·"; margin: 0 12px; }

.ch-hero-art { width: 100%; }
.ch-scene { max-width: 420px; margin: 0 auto; }
.ch-scene img {
  width: 100%;
  height: auto;
  display: block;
  mask-image: radial-gradient(ellipse 92% 90% at 50% 50%, black 55%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 50% 50%, black 55%, transparent 85%);
}

/* Value counter card (right of the hero row) — big count-up of aggregate
   additional-deduction value; deduction value, never a tax-savings dollar. */
.ch-hero-stat { width: 100%; }
.ch-stat { border: 1px solid var(--ch-green-border); background: var(--ch-green-tint); padding: 26px 22px; text-align: center; }
.ch-stat-eyebrow { font-family: var(--ch-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ch-green-ink); margin-bottom: 10px; }
.ch-stat-num { font-weight: 300; font-size: clamp(34px, 5vw, 50px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ch-forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-stat-sign { font-size: 0.66em; vertical-align: 0.1em; margin-right: 1px; }
.ch-stat-label { margin: 12px auto 0; max-width: 264px; font-size: 13px; line-height: 1.5; color: var(--ch-body); }

.ch-cta-band-btn { display: inline-flex; margin-top: 22px; }
.ch-submit-head { display: flex; flex-direction: column; align-items: flex-start; }
.ch-submit-head .ch-h2 { margin-bottom: 0; }

/* 2026 Challenge progress counter (bottom of page). */
.ch-counter { margin-top: 32px; max-width: 460px; }
.ch-counter-track { height: 8px; background: var(--ch-cream-2); overflow: hidden; }
.ch-counter-fill { display: block; height: 100%; background: var(--ch-forest); min-width: 4px; }
.ch-counter-label {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ch-muted);
}
.ch-counter-label strong {
  font-family: var(--ch-mono);
  color: var(--ch-forest);
  letter-spacing: 0.02em;
}

/* ---- sections ---- */
.ch-section {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 20px 10px;
}
.ch-section--engine {
  background: var(--ch-cream-3);
  max-width: none;
  padding: 40px 20px 44px;
  border-top: 1px solid var(--ch-line-soft);
  border-bottom: 1px solid var(--ch-line-soft);
  margin-top: 40px;
}
.ch-section--engine > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.ch-section--engine .ch-h2,
.ch-section--engine .ch-kicker { margin-left: auto; margin-right: auto; }
.ch-section--engine .ch-section-lede { margin: 0 auto; }

.ch-cards3 { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
.ch-card {
  border: 1px solid var(--ch-line);
  background: var(--ch-paper);
  padding: 22px 22px 8px;
}
.ch-card p { color: var(--ch-body); font-size: 15px; line-height: 1.65; }
.ch-card-k {
  font-family: var(--ch-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-faint);
  margin-bottom: 4px;
}
.ch-card--forest { background: var(--ch-green-tint); border-color: var(--ch-green-border); }
.ch-card--forest .ch-card-k { color: var(--ch-green-ink); }

/* ---- engine exhibit (native "how it works" walkthrough, section 2) ---- */
.ch-eq { margin-top: 20px; --ch-eq-mid: #2f6f58; --ch-eq-shell: #9aa6a0; }
.ch-eq-principle {
  background: var(--ch-forest);
  color: #fff;
  padding: 13px 16px;
  max-width: 520px;
  margin-bottom: 14px;
}
.ch-eq-principle strong { display: block; font-size: 13px; margin-bottom: 4px; }
.ch-eq-principle span { font-size: 12.5px; line-height: 1.5; color: #dfeee6; display: block; }

.ch-eq-stagebar {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--ch-line);
  margin-bottom: 14px;
}
.ch-eq-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--ch-paper);
  border: 0;
  border-bottom: 1px solid var(--ch-line);
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--ch-sans);
  color: var(--ch-ink);
}
.ch-eq-stage:last-child { border-bottom: 0; }
.ch-eq-stage:hover { background: var(--ch-cream); }
.ch-eq-stage--active { background: var(--ch-forest); color: #fff; }
.ch-eq-stage-n {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  background: var(--ch-green-tint);
  color: var(--ch-forest);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12.5px;
}
.ch-eq-stage--active .ch-eq-stage-n { background: #fff; }
.ch-eq-stage strong { display: block; font-size: 13.5px; }
.ch-eq-stage small { display: block; font-size: 11.5px; color: var(--ch-faint); margin-top: 1px; }
.ch-eq-stage--active small { color: #dfeee6; }

/* 3-column live grid: stage/source panel · property model · query panel. */
.ch-eq-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.ch-eq-panel { border: 1px solid var(--ch-line); background: var(--ch-paper); padding: 14px; }
.ch-eq-eyebrow { font-family: var(--ch-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ch-faint); margin-bottom: 6px; }
.ch-eq-panel-h { font-size: 18px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 7px; }
.ch-eq-panel > p { color: var(--ch-body); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }

.ch-eq-sources { display: grid; gap: 6px; }
.ch-eq-source {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--ch-line);
  background: var(--ch-paper);
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--ch-sans);
  color: var(--ch-ink);
}
.ch-eq-source:hover, .ch-eq-source--active { background: var(--ch-green-tint); border-color: var(--ch-green-border); }
.ch-eq-source-ico { width: 28px; height: 28px; border: 1px solid var(--ch-line); display: grid; place-items: center; background: var(--ch-paper); color: var(--ch-forest); font-size: 15px; }
.ch-eq-source-b strong { display: block; font-size: 12px; }
.ch-eq-source-b > span { display: block; font-size: 11px; color: var(--ch-muted); margin-top: 1px; line-height: 1.22; }
.ch-eq-check { color: var(--ch-green-ink); font-weight: 700; flex: none; }
.ch-eq-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ch-eq-metrics > div { border: 1px solid var(--ch-line); background: var(--ch-cream-3); padding: 9px 12px; }
.ch-eq-metrics small { font-family: var(--ch-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ch-faint); display: block; }
.ch-eq-metrics b { font-size: 20px; color: var(--ch-forest); display: block; margin-top: 4px; }

/* Center model card */
.ch-eq-model { border: 1px solid var(--ch-line); background: var(--ch-paper); display: flex; flex-direction: column; }
.ch-eq-model-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--ch-line); }
.ch-eq-model-top b { font-size: 14px; letter-spacing: -0.01em; }
.ch-eq-model-top > div > span { font-size: 12px; color: var(--ch-muted); margin-left: 8px; }
.ch-eq-layers { display: flex; border: 1px solid var(--ch-line); }
.ch-eq-layer { border: 0; border-right: 1px solid var(--ch-line); background: var(--ch-paper); padding: 6px 11px; font-size: 11.5px; cursor: pointer; font-family: var(--ch-sans); color: var(--ch-muted); }
.ch-eq-layer:last-child { border-right: 0; }
.ch-eq-layer--active { background: var(--ch-forest); color: #fff; }
.ch-eq-scene { flex: 1; padding: 10px; display: flex; align-items: center; justify-content: center; }
.ch-eq-artboard { position: relative; width: 100%; }
.ch-eq-artboard > img { display: block; width: 100%; height: auto; aspect-ratio: 775 / 605; border: 1px solid var(--ch-line-soft); }
.ch-eq-hotspots { position: absolute; inset: 0; pointer-events: none; }
.ch-eq-hs {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(21, 36, 29, 0.18), 0 3px 8px rgba(21, 36, 29, 0.22);
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
}
.ch-eq-hs::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 1px dashed rgba(21, 36, 29, 0.28); opacity: 0; transition: opacity 0.15s ease; }
.ch-eq-hs:hover::after, .ch-eq-hs--selected::after { opacity: 1; }
.ch-eq-hs--selected { transform: translate(-50%, -50%) scale(1.18); }
.ch-eq-hs--5 { background: var(--ch-forest); }
.ch-eq-hs--15 { background: var(--ch-eq-mid); }
.ch-eq-hs--39 { background: var(--ch-eq-shell); }
.ch-eq-hs--ind { background: var(--ch-terra); }
.ch-eq-hs-label { position: absolute; left: 18px; top: -9px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--ch-line); padding: 3px 6px; font: 600 10px/1.2 var(--ch-mono); color: var(--ch-ink); white-space: nowrap; box-shadow: 0 1px 2px rgba(30, 32, 29, 0.08); }
.ch-eq-qaflag { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--ch-green-border); color: var(--ch-green-ink); padding: 5px 8px; font: 600 10px/1 var(--ch-mono); box-shadow: 0 1px 2px rgba(30, 32, 29, 0.08); }
.ch-eq-qaflag--warn { border-color: #e3c3ab; color: var(--ch-terra); }
/* Selected-component detail: a static strip UNDER the diorama (not an
   overlay), so the property is never covered and the space below the
   image is used. */
.ch-eq-tip { border-top: 1px solid var(--ch-line); background: var(--ch-cream-3); padding: 13px 15px; }
.ch-eq-tip-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.ch-eq-tip-top h4 { margin: 0; font-size: 15px; line-height: 1.15; font-weight: 600; }
.ch-eq-tip-pill { font: 500 10px/1 var(--ch-mono); text-transform: uppercase; letter-spacing: 0.06em; background: var(--ch-green-tint); color: var(--ch-forest); border: 1px solid var(--ch-green-border); padding: 5px 7px; white-space: nowrap; }
.ch-eq-tip dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; margin: 0; }
.ch-eq-tip dl > div { display: block; }
.ch-eq-tip dt { color: var(--ch-faint); font-family: var(--ch-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.ch-eq-tip dd { margin: 0; font-weight: 600; font-size: 12.5px; }
.ch-eq-tip p { font-size: 12px; margin: 12px 0 0; color: var(--ch-muted); line-height: 1.4; }
.ch-eq-legend { position: absolute; right: 14px; top: 14px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--ch-line); padding: 9px 10px; font: 500 10.5px/1.2 var(--ch-mono); display: grid; gap: 5px; color: var(--ch-muted); box-shadow: 0 1px 2px rgba(30, 32, 29, 0.08); }
.ch-eq-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: -1px; }

/* Right query panel — beside the model, so the SQL changes as you select. */
.ch-eq-qtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ch-eq-qtab {
  border: 1px solid var(--ch-line);
  background: var(--ch-paper);
  padding: 6px 9px;
  font-size: 11px;
  color: var(--ch-muted);
  cursor: pointer;
  font-family: var(--ch-sans);
}
.ch-eq-qtab--active { background: var(--ch-forest); color: #fff; border-color: var(--ch-forest); }
.ch-eq-title { font-size: 14.5px; font-weight: 600; margin-bottom: 10px; }
.ch-eq-sql {
  background: #10251d;
  color: #f0f6f1;
  border: 1px solid #10251d;
  padding: 12px;
  overflow: auto;
  margin: 0 0 12px;
  max-height: 230px;
}
.ch-eq-sql code { font-family: var(--ch-mono); font-size: 11px; line-height: 1.5; white-space: pre; background: transparent; color: inherit; padding: 0; border: 0; }
.ch-eq-result { border: 1px solid var(--ch-line); background: var(--ch-paper); padding: 12px; }
.ch-eq-result .ch-list { margin: 0; }

.ch-eq-output {
  border: 1px solid var(--ch-line);
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--ch-paper);
}
.ch-eq-output-h { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.ch-eq-output-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ch-eq-output-grid > div { border: 1px solid var(--ch-line); background: var(--ch-paper); padding: 11px; }
.ch-eq-output-grid small { font-family: var(--ch-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ch-faint); display: block; margin-bottom: 5px; }
.ch-eq-output-grid b { font-size: 12.5px; display: block; margin-bottom: 4px; }
.ch-eq-output-grid span { font-size: 11.7px; color: var(--ch-muted); line-height: 1.35; display: block; }

/* Component library (receipt replacement) — 1-col mobile, 3-across desktop. */
.ch-lib { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
.ch-lib-card { padding-bottom: 14px; }
/* Category icon banner at the top of each library card — line icon on a
   forest-tint tile, pulled to the card edges like the case-study thumbs. */
.ch-lib-ico {
  height: 58px;
  margin: -22px -22px 14px;
  background: var(--ch-green-tint);
  border-bottom: 1px solid var(--ch-line-soft);
  display: grid;
  place-items: center;
  color: var(--ch-forest);
}
.ch-lib-ico svg { width: 28px; height: 28px; }
.ch-lib-card p { font-size: 13.5px; margin: 8px 0 0; }
.ch-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ch-lib-head .ch-card-k { margin-bottom: 0; color: var(--ch-ink); }
.ch-lib-cls {
  font-family: var(--ch-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ch-green-ink);
  background: var(--ch-green-tint);
  border: 1px solid var(--ch-green-border);
  padding: 3px 7px;
  white-space: nowrap;
  flex: none;
}

/* "What we've found" — 1-col mobile, 4-across at desktop (see 880px block). */
.ch-found { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
.ch-found-card { padding-bottom: 18px; }
/* Small property render at the top of a case-study card — the webp on a
   crisp white tile, capped so it reads as a thumbnail, not a hero. */
.ch-found-img {
  background: #fff;
  border-bottom: 1px solid var(--ch-line-soft);
  margin: -22px -22px 14px;
  padding: 14px;
  display: flex;
  justify-content: center;
}
.ch-found-img img { width: auto; height: 150px; max-width: 100%; object-fit: contain; }

/* Before/after year-one-deduction bars inside a found-card. */
.ch-bars { margin-top: 14px; border-top: 1px solid var(--ch-line-soft); padding-top: 12px; }
.ch-bar { margin-bottom: 10px; }
.ch-bar-label {
  display: block;
  font-family: var(--ch-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ch-faint);
  margin-bottom: 4px;
}
.ch-bar-track { display: block; background: var(--ch-cream-2); height: 14px; }
.ch-bar-fill { display: block; height: 100%; background: var(--ch-forest); min-width: 3px; }
.ch-bar-fill--before { background: var(--ch-terra); opacity: 0.55; }
.ch-bar-value {
  display: block;
  font-family: var(--ch-mono);
  font-size: 12.5px;
  color: var(--ch-ink);
  margin-top: 3px;
}
.ch-bar-delta {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ch-green-ink);
  margin-top: 6px;
}
.ch-found-card .ch-bar-note { font-size: 12px; color: var(--ch-faint); line-height: 1.5; margin: 10px 0 0; }

/* Timber Ridge — disposition + remodel "simple math" breakdown. */
.ch-math { margin-top: 14px; border-top: 1px solid var(--ch-line-soft); padding-top: 12px; }
.ch-math-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ch-line-soft);
}
.ch-math-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ch-ink); }
.ch-math-ref {
  display: block;
  font-family: var(--ch-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ch-faint);
  margin-top: 2px;
}
.ch-math-value {
  font-family: var(--ch-mono);
  font-size: 16px;
  color: var(--ch-green-ink);
  white-space: nowrap;
  flex: none;
}
/* Combined total under the two math rows — reads as their sum. */
.ch-math .ch-bar-delta { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ch-line); font-size: 16.5px; }
.ch-found-meta {
  font-size: 13px;
  color: var(--ch-muted);
  margin-bottom: 10px;
}
.ch-found-card--you {
  display: block;
  text-decoration: none;
  background: var(--ch-green-tint);
  border-color: var(--ch-green-border);
}
.ch-found-card--you .ch-card-k { color: var(--ch-green-ink); }
.ch-found-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--ch-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-forest);
  border-bottom: 1px solid var(--ch-forest);
  padding-bottom: 2px;
}
.ch-found-card--you:hover .ch-found-cta { color: var(--ch-terra); border-color: var(--ch-terra); }

/* The evidence trail under the engine stages. */
.ch-trace {
  list-style: none;
  margin: 26px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--ch-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-family: var(--ch-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ch-muted);
}
.ch-trace li { display: inline-flex; align-items: center; }
.ch-trace li + li::before { content: "→"; margin: 0 10px; color: var(--ch-faint); }

.ch-steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.ch-steps li { display: flex; gap: 16px; align-items: flex-start; }
.ch-step-n {
  font-family: var(--ch-mono);
  font-size: 14px;
  color: var(--ch-terra);
  border: 1px solid var(--ch-line);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
}
.ch-step-h { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.ch-steps p { margin: 0; color: var(--ch-body); font-size: 14.5px; line-height: 1.6; }

.ch-layers { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
.ch-layer {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--ch-line);
}
.ch-layer:last-child { border-bottom: 1px solid var(--ch-line); }
.ch-layer-k {
  font-family: var(--ch-mono);
  font-size: 13px;
  color: var(--ch-terra);
  flex: none;
  width: 34px;
  margin-top: 3px;
}
.ch-layer-h { font-weight: 600; font-size: 16.5px; margin-bottom: 6px; }
.ch-layer p { margin: 0; color: var(--ch-body); font-size: 14.5px; line-height: 1.68; max-width: 860px; }

/* ---- offer ---- */
.ch-offer { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
.ch-offer-col { border: 1px solid var(--ch-line); padding: 24px; background: var(--ch-paper); }
.ch-offer-col--price { background: var(--ch-cream); }
.ch-offer-h {
  font-family: var(--ch-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-faint);
  margin-bottom: 14px;
}
.ch-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ch-price-was { font-size: 20px; color: var(--ch-faint); text-decoration: line-through; }
.ch-offer-mechanics { font-size: 13.5px; line-height: 1.6; color: var(--ch-body); margin: 0 0 14px; }
.ch-price-now { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--ch-forest); }
.ch-price-note { font-family: var(--ch-mono); font-size: 12px; color: var(--ch-muted); }
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch-list li {
  position: relative;
  padding: 6px 0 6px 22px;
  color: var(--ch-body);
  font-size: 14.5px;
  line-height: 1.55;
}
.ch-list li::before { content: "—"; position: absolute; left: 0; color: var(--ch-terra); }
.ch-honest {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ch-terra);
  max-width: 640px;
}

/* ---- FAQ ---- */
.ch-faq { margin-top: 22px; border-top: 1px solid var(--ch-line); }
.ch-faq-item { border-bottom: 1px solid var(--ch-line); }
.ch-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 30px 16px 0;
  font-weight: 600;
  font-size: 15.5px;
  position: relative;
}
.ch-faq-item summary::-webkit-details-marker { display: none; }
.ch-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ch-mono);
  font-weight: 400;
  font-size: 18px;
  color: var(--ch-terra);
}
.ch-faq-item[open] summary::after { content: "–"; }
.ch-faq-item p { margin: 0 0 18px; color: var(--ch-body); font-size: 14.5px; line-height: 1.65; max-width: 760px; }

/* ---- intake ---- */
.ch-section--submit { padding-bottom: 72px; }
.ch-shell {
  margin-top: 26px;
  border: 1px solid var(--ch-line);
  background: var(--ch-cream-3);
  padding: 26px 20px 24px;
  max-width: 720px;
}
.ch-shell-title { font-weight: 600; font-size: 18px; }
.ch-shell-sub { color: var(--ch-muted); font-size: 14px; line-height: 1.6; margin: 8px 0 18px; }
.ch-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ch-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ch-field { display: flex; flex-direction: column; gap: 6px; }
.ch-label {
  font-family: var(--ch-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ch-muted);
}
.ch-opt { color: var(--ch-faint); text-transform: none; letter-spacing: 0; }
.ch-input {
  font-family: var(--ch-sans);
  font-size: 15px;
  color: var(--ch-ink);
  background: var(--ch-paper);
  border: 1px solid var(--ch-line);
  border-radius: 0;
  padding: 12px 13px;
  width: 100%;
}
.ch-input:focus { outline: 2px solid var(--ch-forest); outline-offset: -1px; }
.ch-textarea { resize: vertical; min-height: 74px; }
.ch-field--ac { position: relative; }
.ch-ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: 4px;
  padding: 4px;
  background: var(--ch-paper);
  border: 1px solid var(--ch-line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ch-ac-item {
  font-family: var(--ch-sans);
  font-size: 14px;
  color: var(--ch-ink);
  background: var(--ch-paper);
  border: none;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}
.ch-ac-item--active,
.ch-ac-item:hover { background: var(--ch-line-soft); }
.ch-ac-meta { color: var(--ch-faint); }
.ch-ac-ok {
  color: var(--ch-forest-700);
  font-size: 12px;
  font-family: var(--ch-mono);
  letter-spacing: 0.04em;
}
.ch-terms-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ch-body);
  cursor: pointer;
}
.ch-terms-row input { margin-top: 3px; accent-color: var(--ch-forest); flex: none; }
.ch-terms-row a { color: var(--ch-forest); }
.ch-err { color: #a03518; font-size: 13.5px; margin: 14px 0 0; }
.ch-shell .ch-btn-block { margin-top: 18px; }
.ch-disc { color: var(--ch-faint); font-size: 12.5px; line-height: 1.6; margin: 14px 0 0; }

/* ---- upload step ---- */
.ch-drop-group { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ch-drop {
  border: 1.5px dashed var(--ch-line);
  background: var(--ch-paper);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ch-drop:hover { border-color: var(--ch-forest); background: var(--ch-green-tint); }
.ch-drop[data-required="true"] { border-color: var(--ch-terra); }
.ch-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ch-drop-h { font-weight: 600; font-size: 15px; }
.ch-drop-s { font-family: var(--ch-mono); font-size: 11.5px; color: var(--ch-faint); }
.ch-drop-note { font-family: var(--ch-mono); font-size: 11.5px; color: var(--ch-faint); margin: 10px 0 0; }
.ch-files { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ch-file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--ch-paper);
  border: 1px solid var(--ch-line);
  padding: 10px 12px;
  font-size: 13.5px;
}
.ch-file--ok { border-color: var(--ch-green-border); }
.ch-file--error { border-color: #d8a08c; }
.ch-file-name { font-weight: 600; overflow-wrap: anywhere; }
.ch-file-meta { font-family: var(--ch-mono); font-size: 11px; color: var(--ch-faint); }
.ch-file-status { margin-left: auto; color: var(--ch-muted); font-size: 12.5px; }
.ch-file--ok .ch-file-status { color: var(--ch-green-ink); }
.ch-file--error .ch-file-status { color: #a03518; }
.ch-file-retry {
  background: none;
  border: 1px solid var(--ch-line);
  font-family: var(--ch-mono);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--ch-forest);
}
.ch-file-x {
  background: none;
  border: none;
  color: var(--ch-faint);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
}

/* ---- done ---- */
.ch-done { display: flex; gap: 14px; align-items: flex-start; }
.ch-done-check {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ch-forest);
  color: #fff;
  font-size: 16px;
}
.ch-done-h { font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.ch-done-p { color: var(--ch-body); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* ---- terms ---- */
.ch-terms-page {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 20px 72px;
  flex: 1 1 auto;
}
.ch-terms-version { font-family: var(--ch-mono); font-size: 12px; color: var(--ch-faint); margin: 0 0 26px; }
.ch-terms-doc { border-top: 1px solid var(--ch-line); padding-top: 20px; }
.ch-terms-preamble,
.ch-terms-clause { font-size: 14px; line-height: 1.7; color: var(--ch-body); margin: 0 0 16px; }
.ch-terms-clause strong { color: var(--ch-ink); }

/* ---- desktop ---- */
@media (min-width: 880px) {
  .ch-header { padding: 16px 48px; }
  .ch-hero {
    padding: 52px 32px 42px;
    gap: 36px;
  }
  .ch-hero-row {
    grid-template-columns: 0.82fr 1.22fr 0.96fr;
    grid-template-areas: "art copy stat";
    gap: 40px;
  }
  .ch-hero-art { grid-area: art; }
  .ch-hero-copy { grid-area: copy; }
  .ch-hero-stat { grid-area: stat; }
  .ch-scene { max-width: 100%; }
  .ch-section { padding: 64px 32px 10px; }
  .ch-section--engine { padding: 72px 32px 78px; }
  .ch-cards3 { grid-template-columns: repeat(3, 1fr); }
  .ch-found { grid-template-columns: repeat(2, 1fr); }
  .ch-submit-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .ch-submit-head .ch-cta-band-btn { margin-top: 0; flex: none; }
  .ch-eq-stagebar { grid-template-columns: repeat(5, 1fr); }
  .ch-eq-stage { border-bottom: 0; border-right: 1px solid var(--ch-line); }
  .ch-eq-stage:last-child { border-right: 0; }
  .ch-eq-grid { grid-template-columns: 260px minmax(0, 1fr) 330px; }
  .ch-eq-tip dl { grid-template-columns: repeat(4, 1fr); }
  .ch-eq-output-grid { grid-template-columns: repeat(5, 1fr); }
  .ch-lib { grid-template-columns: repeat(3, 1fr); }
  .ch-steps { grid-template-columns: repeat(2, 1fr); gap: 26px 34px; }
  .ch-offer { grid-template-columns: 1fr 1fr; }
  .ch-drop-group { grid-template-columns: 1fr 1fr; }
  .ch-shell { padding: 30px 30px 28px; }
  .ch-fields { grid-template-columns: 1fr 1fr; }
  .ch-field--wide { grid-column: 1 / -1; }
}