/* ═══════════════════════════════════════════════════════════════════════════
   kf-brain.css — the star tool, dressed as what it produces.

   KF Brain came out looking like every other calculator on the platform: a
   stack of identical cards, so a refusal looked like a timeline and a diagnosis
   looked like a KPI list. That is fine for a tool that returns a number. It is
   wrong for the one that returns a strategy, because a strategy is read rather
   than checked, and reading needs hierarchy.

   So: two statements a page apart, then a document. The problem is the largest
   thing on the page and the only red thing. The strategy answers it in the same
   voice. Everything after that is supporting material, and looks like it.

   Scoped to .kfb, so nothing here can leak into the other eleven tools.
   ═══════════════════════════════════════════════════════════════════════════ */

/* These map to the platform's tokens, which is what makes the tool follow the
   theme. They were written against --tx-primary / --bd / --bg-card, which this
   codebase has never defined — so every one of them silently fell through to
   its hard-coded light-mode fallback, and the whole document rendered in near
   black ink on the near black card of dark mode. The real names are --text,
   --text-dim, --border and --card, and the accents come from the brand ramp so
   a theme change moves them too. */
.kfb {
  --kfb-ink:    var(--heading);
  --kfb-dim:    var(--text-dim);
  --kfb-line:   var(--border);
  --kfb-paper:  var(--card);
  --kfb-accent: var(--kf-purple);
  --kfb-warn:   var(--warn);
  --kfb-good:   var(--success);
  --kfb-mono:   var(--font-mono);
}

/* ── The two statements ──────────────────────────────────────────────────
   A step label, a verdict, one paragraph. Nothing else competes with them. */

.kfb-problem,
.kfb-strategy {
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--kfb-line);
  margin-bottom: 26px;
}
.kfb-problem { border-top: 3px solid var(--kfb-warn); padding-top: 26px; }
.kfb-strategy { border-top: 3px solid var(--kfb-accent); padding-top: 26px; margin-top: 40px; }

.kfb-step {
  font: 600 11px/1 var(--kfb-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kfb-dim);
  margin-bottom: 14px;
}
html[dir="rtl"] .kfb-step { letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 12.5px; }

.kfb-verdict {
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -.025em;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--kfb-ink);
  max-width: 26ch;
}
html[dir="rtl"] .kfb-verdict { letter-spacing: 0; line-height: 1.32; max-width: 30ch; }
.kfb-problem .kfb-verdict { color: var(--kfb-warn); }

.kfb-lede {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--kfb-dim);
  max-width: 62ch;
  margin: 0;
}

/* ── The document below them ─────────────────────────────────────────── */

.kfb .kft-card { border-radius: 14px; }
.kfb .kft-card > h3 {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kfb-dim);
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kfb-line);
}
html[dir="rtl"] .kfb .kft-card > h3 { letter-spacing: 0; text-transform: none; font-size: 14.5px; }

/* ── The tracks: the part a client reads twice ────────────────────────── */

.kfb-track {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--kfb-line);
}
.kfb-track:first-of-type { border-top: 0; padding-top: 4px; }

.kfb-track-n {
  font: 600 20px/1 var(--kfb-mono);
  color: var(--kfb-accent);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--kfb-accent) 32%, transparent);
  border-radius: 50%;
}
.kfb-track-body h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  margin: 8px 0 10px; color: var(--kfb-ink);
}
html[dir="rtl"] .kfb-track-body h3 { letter-spacing: 0; }
.kfb-track-body p { margin: 0 0 7px; font-size: 14.6px; line-height: 1.66; color: var(--kfb-dim); }
.kfb-track-body p b { color: var(--kfb-ink); font-weight: 600; }

@media (max-width: 560px) {
  .kfb-track { grid-template-columns: 1fr; gap: 10px; }
  .kfb-track-n { width: 38px; height: 38px; font-size: 17px; }
}

/* ── The refusal ─────────────────────────────────────────────────────────
   The section that makes this advice rather than a menu, so it is allowed to
   look unlike the others. */

.kfb-refuse {
  background: color-mix(in srgb, var(--kfb-warn) 5%, var(--kfb-paper));
  border-inline-start: 3px solid var(--kfb-warn);
}
.kfb-refuse ul { list-style: none; padding: 0; margin: 0 0 12px; }
.kfb-refuse li {
  padding: 11px 0 11px 26px;
  border-bottom: 1px dashed var(--kfb-line);
  font-size: 14.6px; line-height: 1.6; color: var(--kfb-dim);
  position: relative;
}
html[dir="rtl"] .kfb-refuse li { padding: 11px 26px 11px 0; }
.kfb-refuse li:last-child { border-bottom: 0; }
.kfb-refuse li::before {
  content: '×';
  position: absolute; inset-inline-start: 0;
  color: var(--kfb-warn); font-weight: 700; font-size: 17px; line-height: 1.4;
}
.kfb-refuse li b { color: var(--kfb-ink); }

/* ── What is already working, and what was ruled out ─────────────────── */

.kfb-good ul, .kfb-ruled ul { list-style: none; padding: 0; margin: 0 0 12px; }
.kfb-good li, .kfb-ruled li {
  padding: 8px 0 8px 24px; position: relative;
  font-size: 14.5px; line-height: 1.6; color: var(--kfb-dim);
}
html[dir="rtl"] .kfb-good li, html[dir="rtl"] .kfb-ruled li { padding: 8px 24px 8px 0; }
.kfb-good li::before  { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--kfb-good); font-weight: 700; }
.kfb-ruled li::before { content: '–'; position: absolute; inset-inline-start: 0; color: var(--kfb-dim); font-weight: 700; }
.kfb-ruled { opacity: .82; }

/* ── The timeline ───────────────────────────────────────────────────────
   A phased plan is a sequence, and a plain table renders it as a list of four
   unrelated rows. */

.kfb-timeline table { border-collapse: collapse; width: 100%; }
.kfb-timeline thead th {
  font: 600 10.5px/1 var(--kfb-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--kfb-dim); text-align: start; padding: 0 12px 10px 0; border-bottom: 1px solid var(--kfb-line);
}
html[dir="rtl"] .kfb-timeline thead th { letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 12px; padding: 0 0 10px 12px; }
.kfb-timeline tbody td {
  padding: 15px 12px 15px 0; border-bottom: 1px solid var(--kfb-line);
  font-size: 14.4px; line-height: 1.6; color: var(--kfb-dim); vertical-align: top;
}
html[dir="rtl"] .kfb-timeline tbody td { padding: 15px 0 15px 12px; }
.kfb-timeline tbody tr:last-child td { border-bottom: 0; }
.kfb-timeline tbody td:first-child {
  font-family: var(--kfb-mono); font-weight: 600; color: var(--kfb-accent); white-space: nowrap;
}
.kfb-timeline tbody td:nth-child(2) { color: var(--kfb-ink); font-weight: 600; }

/* ── KPIs ───────────────────────────────────────────────────────────────── */

.kfb-kpis .kft-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.kfb-kpis .kft-tag {
  font: 500 12.5px/1 var(--kfb-mono);
  padding: 7px 11px; border-radius: 7px;
  background: color-mix(in srgb, var(--kfb-accent) 8%, transparent);
  color: color-mix(in srgb, var(--kfb-accent) 78%, var(--kfb-ink));
  border: 1px solid color-mix(in srgb, var(--kfb-accent) 18%, transparent);
}
html[dir="rtl"] .kfb-kpis .kft-tag { font-family: inherit; }

/* ── The note that ends most sections ───────────────────────────────────
   These carry the reasoning, which is the difference between this and a
   generated report, so they are readable rather than fine print. */

.kfb .kft-note {
  font-size: 13.4px; line-height: 1.66; color: var(--kfb-dim);
  border-inline-start: 2px solid var(--kfb-line);
  padding-inline-start: 12px; margin: 14px 0 0;
}

/* ── Print. A strategy gets printed and handed over. ─────────────────── */

@media print {
  .kfb-problem, .kfb-strategy { break-inside: avoid; border-top-width: 2px; }
  .kfb-track, .kfb .kft-card { break-inside: avoid; }
  .kfb-refuse { background: none; }
}

/* ── The build button ────────────────────────────────────────────────────
   Manual mode needs somewhere to press. It sits at the end of the form rather
   than floating, because the point is that it comes after the questions. */
.kfb-go { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--bd, #e4e6ea); }
.kfb-go .btn { width: 100%; padding: 14px 18px; font-size: 15px; font-weight: 600; }
.kfb-go small { display: block; margin-top: 10px; font-size: 13px; color: var(--tx-muted, #6b7280); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   Version 2 sections — the document got longer because the knowledge did.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full width now that the split shell is gone for this tool. The document is
   the page, so it gets a reading measure rather than a panel width. */
.kfb { max-width: 860px; margin-inline: auto; }
.kfb .kft-card { margin-bottom: 22px; padding: 26px 28px; }
@media (max-width: 640px) { .kfb .kft-card { padding: 20px 17px; } }

.kfb-sub {
  color: var(--text-dim); font-size: 14px; line-height: 1.65;
  margin: -6px 0 18px; max-width: 62ch;
}

/* ── What the plan understood ─────────────────────────────────────────── */

.kfb-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 22px; margin: 0; }
.kfb-dl dt {
  font: 600 10.5px/1 var(--kfb-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--kfb-dim); margin-bottom: 5px;
}
html[dir="rtl"] .kfb-dl dt { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.kfb-dl dd { margin: 0; font-size: 14.6px; line-height: 1.5; color: var(--kfb-ink); font-weight: 600; }

.kfb-list { list-style: none; padding: 0; margin: 0; }
.kfb-list li {
  padding: 9px 0 9px 20px; position: relative;
  font-size: 14.6px; line-height: 1.66; color: var(--kfb-dim);
}
html[dir="rtl"] .kfb-list li { padding: 9px 20px 9px 0; }
.kfb-list li::before {
  content: ''; position: absolute; inset-inline-start: 2px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--kfb-accent);
}
.kfb-list li b { color: var(--kfb-ink); }

/* ── Track scope chips ────────────────────────────────────────────────── */

.kfb-scope { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px !important; }
.kfb-scope span {
  font-size: 12.4px; line-height: 1.4;
  padding: 5px 10px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--kfb-line);
  color: var(--kfb-dim);
}

/* ── Projections — the arithmetic, and the part read twice ────────────── */

.kfb-proj table { border-collapse: collapse; width: 100%; }
.kfb-proj thead th {
  font: 600 10.5px/1 var(--kfb-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--kfb-dim); text-align: start; padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--kfb-line);
}
html[dir="rtl"] .kfb-proj thead th { letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 12px; padding: 0 0 10px 12px; }
.kfb-proj tbody td {
  padding: 14px 12px 14px 0; border-bottom: 1px solid var(--kfb-line);
  font-size: 14.3px; line-height: 1.6; color: var(--kfb-dim); vertical-align: top;
}
html[dir="rtl"] .kfb-proj tbody td { padding: 14px 0 14px 12px; }
.kfb-proj tbody tr:last-child td { border-bottom: 0; }
.kfb-proj tbody td:first-child { color: var(--kfb-ink); font-weight: 600; }
.kfb-proj .kfb-fig {
  font-family: var(--kfb-mono); font-weight: 600; color: var(--kfb-accent);
  white-space: nowrap; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .kfb-proj .kfb-fig { font-family: inherit; }

.kfb-measured {
  font-size: 13.8px; line-height: 1.65; margin: 16px 0 0;
  padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--kfb-good) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--kfb-good) 24%, transparent);
  color: var(--kfb-dim);
}
.kfb-measured b { color: var(--kfb-good); }

.kfb-versus {
  font-size: 15px; line-height: 1.62; margin: 14px 0 0;
  color: var(--kfb-ink); font-weight: 600;
}

.kfb-target-ok, .kfb-target-no {
  font-size: 14.4px; line-height: 1.6; margin: 14px 0 0;
  padding: 12px 14px; border-radius: 10px; font-weight: 600;
}
.kfb-target-ok {
  background: color-mix(in srgb, var(--kfb-good) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kfb-good) 26%, transparent);
  color: var(--kfb-good);
}
.kfb-target-no {
  background: color-mix(in srgb, var(--kfb-warn) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kfb-warn) 26%, transparent);
  color: var(--kfb-warn);
}

/* ── Channels ─────────────────────────────────────────────────────────── */

.kfb-chan-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.kfb-chan-item {
  border: 1px solid var(--kfb-line); border-radius: 12px;
  padding: 16px 17px; position: relative;
}
.kfb-chan-item.is-live { border-color: color-mix(in srgb, var(--kfb-good) 38%, transparent); }
.kfb-chan-item h4 { margin: 0 0 7px; font-size: 15.4px; font-weight: 600; color: var(--kfb-ink); }
.kfb-chan-item p { margin: 0 0 10px; font-size: 13.4px; line-height: 1.58; color: var(--kfb-dim); }
.kfb-vol {
  font: 600 12.6px/1.5 var(--kfb-mono); color: var(--kfb-accent);
  padding: 7px 9px; border-radius: 7px; margin-bottom: 9px;
  background: color-mix(in srgb, var(--kfb-accent) 7%, transparent);
}
html[dir="rtl"] .kfb-vol { font-family: inherit; font-size: 13.4px; }
.kfb-chan-tag {
  font-size: 11.4px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--kfb-dim); font-weight: 600;
}
html[dir="rtl"] .kfb-chan-tag { text-transform: none; letter-spacing: 0; font-size: 12.4px; }
.kfb-chan-item.is-live .kfb-chan-tag { color: var(--kfb-good); }

/* ── Timeline tasks inside the table ──────────────────────────────────── */

.kfb-tasks { list-style: none; padding: 0; margin: 0; }
.kfb-tasks li {
  padding: 3px 0 3px 15px; position: relative; font-size: 13.8px; line-height: 1.55;
}
html[dir="rtl"] .kfb-tasks li { padding: 3px 15px 3px 0; }
.kfb-tasks li::before {
  content: '·'; position: absolute; inset-inline-start: 3px;
  color: var(--kfb-accent); font-weight: 700; font-size: 17px; line-height: 1.2;
}

/* ── Risks ────────────────────────────────────────────────────────────── */

.kfb-risks table { border-collapse: collapse; width: 100%; }
.kfb-risks thead th {
  font: 600 10.5px/1 var(--kfb-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--kfb-dim); text-align: start; padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--kfb-line);
}
html[dir="rtl"] .kfb-risks thead th { letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 12px; padding: 0 0 10px 12px; }
.kfb-risks tbody td {
  padding: 13px 12px 13px 0; border-bottom: 1px solid var(--kfb-line);
  font-size: 14.2px; line-height: 1.6; color: var(--kfb-dim); vertical-align: top;
}
html[dir="rtl"] .kfb-risks tbody td { padding: 13px 0 13px 12px; }
.kfb-risks tbody tr:last-child td { border-bottom: 0; }
.kfb-risks tbody td:first-child { color: var(--kfb-ink); font-weight: 600; }

/* ── They said the problem was ────────────────────────────────────────── */

.kfb-said blockquote {
  margin: 0; padding: 14px 16px;
  border-inline-start: 3px solid var(--kfb-accent);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
  font-size: 15.2px; line-height: 1.66; color: var(--kfb-ink); font-style: italic;
}
html[dir="rtl"] .kfb-said blockquote { border-radius: 10px 0 0 10px; font-style: normal; }

.kfb-asked { color: var(--kfb-warn); font-style: normal; font-weight: 600; font-size: 13px; }

.kfb-foot {
  margin: 30px 0 0; padding-top: 20px;
  border-top: 1px solid var(--kfb-line);
  font-size: 13.4px; line-height: 1.66; color: var(--kfb-dim);
}

/* A scrollable region a keyboard cannot reach is a region half of which cannot
   be read. Every table above is wrapped in one of these. */
.kfb .kft-scroll { overflow-x: auto; }
.kfb .kft-scroll:focus-visible { outline: 2px solid var(--kfb-accent); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   The result, drawn.

   A table of ranges is correct and unreadable. These are the same numbers with
   the shape put back: where the volume goes, how the money splits, and how much
   of a market each channel actually reaches.

   All CSS, no SVG and no script — the rendered result doubles as the shared
   document, so anything that needed JavaScript to draw itself would arrive at
   the client as an empty box.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Where the money splits ─────────────────────────────────────────────── */

.kfb-split { margin-bottom: 26px; }
.kfb-split-bar {
  display: flex; height: 46px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--kfb-line);
}
.kfb-split-media, .kfb-split-work {
  display: grid; place-items: center; min-width: 0;
  font-size: 12.6px; font-weight: 600; white-space: nowrap; padding: 0 8px;
}
.kfb-split-media { background: var(--kfb-accent); color: #fff; }
.kfb-split-work  { flex: 1; background: color-mix(in srgb, var(--kfb-accent) 12%, transparent); color: var(--kfb-ink); }
.kfb-split-media span, .kfb-split-work span { overflow: hidden; text-overflow: ellipsis; }

/* ── The funnel ───────────────────────────────────────────────────────────
   Two bars per step: the pale one is the optimistic end of the range, the
   solid one the cautious end. The drop between steps is the number that
   actually matters, so it is written rather than left to be inferred. */

.kfb-funnel { margin: 6px 0 4px; }

.kfb-fn-row { padding: 14px 0; border-top: 1px solid var(--kfb-line); }
.kfb-fn-row:first-child { border-top: 0; padding-top: 4px; }

.kfb-fn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.kfb-fn-label { font-size: 14.6px; font-weight: 600; color: var(--kfb-ink); }
.kfb-fn-val {
  font-family: var(--kfb-mono); font-size: 15px; font-weight: 600;
  color: var(--kfb-accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
html[dir="rtl"] .kfb-fn-val { font-family: inherit; }

.kfb-fn-track {
  position: relative; height: 22px; border-radius: 7px;
  background: color-mix(in srgb, var(--kfb-accent) 6%, transparent);
  overflow: hidden;
}
.kfb-fn-band, .kfb-fn-core {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: 7px;
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.kfb-fn-band { background: color-mix(in srgb, var(--kfb-accent) 28%, transparent); }
.kfb-fn-core { background: var(--kfb-accent); }

.kfb-fn-drop {
  font-size: 12.4px; color: var(--kfb-warn); font-weight: 600; margin-top: 7px;
}
.kfb-fn-note { font-size: 13px; line-height: 1.55; color: var(--kfb-dim); margin-top: 6px; }

/* ── Channel reach ────────────────────────────────────────────────────────
   The bar is the share of the population the platform reaches in the chosen
   market. It is here so a recommendation can be argued with on evidence rather
   than on taste. */

.kfb-reach { display: grid; gap: 4px; }

.kfb-reach-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) 3fr auto;
  align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 9px;
}
.kfb-reach-row.is-rec { background: color-mix(in srgb, var(--kfb-accent) 6%, transparent); }

.kfb-reach-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 14.2px; font-weight: 600; color: var(--kfb-ink); min-width: 0;
}
.kfb-tag-live, .kfb-tag-rec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
html[dir="rtl"] .kfb-tag-live, html[dir="rtl"] .kfb-tag-rec { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.kfb-tag-live { background: color-mix(in srgb, var(--kfb-good) 16%, transparent); color: var(--kfb-good); }
.kfb-tag-rec  { background: color-mix(in srgb, var(--kfb-accent) 16%, transparent); color: var(--kfb-accent); }

.kfb-reach-track {
  height: 10px; border-radius: 99px; min-width: 0;
  background: color-mix(in srgb, var(--kfb-accent) 7%, transparent);
}
.kfb-reach-fill {
  height: 100%; border-radius: 99px;
  background: color-mix(in srgb, var(--kfb-accent) 45%, transparent);
}
.kfb-reach-row.is-rec .kfb-reach-fill { background: var(--kfb-accent); }
.kfb-reach-row.is-live .kfb-reach-fill { background: var(--kfb-good); }

.kfb-reach-val {
  font-family: var(--kfb-mono); font-size: 13.4px; font-weight: 600;
  color: var(--kfb-dim); font-variant-numeric: tabular-nums; white-space: nowrap;
}
html[dir="rtl"] .kfb-reach-val { font-family: inherit; }

.kfb-reach-vol {
  grid-column: 1 / -1;
  font-size: 12.4px; color: var(--kfb-dim);
  padding-inline-start: 2px;
}

@media (max-width: 600px) {
  .kfb-reach-row { grid-template-columns: 1fr auto; gap: 8px; }
  .kfb-reach-track { grid-column: 1 / -1; }
}

@media print {
  .kfb-fn-band, .kfb-fn-core, .kfb-reach-fill, .kfb-split-media { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   What Launch Plan left behind — Aug 2026
   ───────────────────────────────────────────────────────────────────────────
   Launch Plan was retired into KF Brain, which researches competitors and
   prices properly with a web search. Four things it knew never needed a
   search, and they came here instead: a goal with a number on it, pillars that
   each name the gap they close, the shape of an offer ladder, and a timeline
   that says who does each thing.

   All four are drawn in the tokens already declared on .kfb, so they follow the
   theme with everything else.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The goal. One number, set larger than body copy because a goal nobody can
   find on the page is a goal nobody is held to. */
.kfb-goal-line {
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--kfb-ink);
  margin: 0 0 12px;
  max-width: 34ch;
}
html[dir="rtl"] .kfb-goal-line { line-height: 1.55; }

/* The gap a track closes. Marked rather than run in with the other lines: it
   is the sentence that justifies the track being in the plan at all. */
.kfb-closes {
  border-inline-start: 2px solid var(--kfb-warn);
  padding-inline-start: 10px;
  margin: 10px 0 0;
}

/* ── The offer ladder ─────────────────────────────────────────────────────
   Three rungs, and they are drawn as rungs: stepped, so the shape says what
   the words say. Stacked on a narrow screen, where a stagger reads as a
   mistake rather than as a ladder. */

.kfb-rungs { display: grid; gap: 12px; }

.kfb-rung {
  border: 1px solid var(--kfb-line);
  border-radius: 12px;
  padding: 15px 17px;
  background: var(--kfb-paper);
  border-inline-start: 3px solid var(--kfb-accent);
}
@media (min-width: 760px) {
  .kfb-rung:nth-child(2) { margin-inline-start: 26px; }
  .kfb-rung:nth-child(3) { margin-inline-start: 52px; }
}

.kfb-rung h4 { margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--kfb-ink); }
.kfb-rung p  { margin: 0 0 7px; font-size: 14px; line-height: 1.65; color: var(--kfb-dim); }
.kfb-rung p:last-child { margin-bottom: 0; }

.kfb-rung-here { color: var(--kfb-ink) !important; }

/* What the rung must never be. Every other rule sheet in this tool carries one
   of these and they are the most quoted lines in the document. */
.kfb-rung-never {
  color: var(--danger) !important;
  font-size: 13px !important;
  opacity: .9;
}

/* ── Who does each thing ──────────────────────────────────────────────────
   The column exists so that the rows the plan stalls on are visible from
   across the table. So "You" is the only one that is coloured. */

.kfb-owners { text-align: start; }
.kfb-owners li { white-space: nowrap; }

.kfb-owner {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--kfb-line);
  color: var(--kfb-dim);
}
.kfb-owner.is-you {
  color: var(--kfb-warn);
  border-color: color-mix(in srgb, var(--kfb-warn) 45%, transparent);
  background: color-mix(in srgb, var(--kfb-warn) 10%, transparent);
}
.kfb-owner.is-both { color: var(--kfb-accent); border-color: color-mix(in srgb, var(--kfb-accent) 40%, transparent); }