/* ==========================================================================
   THE CHALLENGE  ·  the Engine page's band 2
   ==========================================================================
   Without PULSAR / with PULSAR, on one integration question. Content is the
   pitch deck's "A generic LLM is not a shortcut" slide; the shape is the
   before/after comparison that band wanted all along — a transcript, the
   numbers that come out of it, and the strongest three bullets. Not prose.

   THIS IS THE ONLY PLACE ON THE PAGE WHERE THE LLM ARGUMENT APPEARS, and it
   is also where "from traces, logs and metrics — not from specifications,
   documentation or source code" is stated. Both used to live elsewhere: the
   claim in a pair of grey hero chips nobody could read, the argument in a
   prose band at the foot of the page, after everything it was meant to
   frame. Do not restate either anywhere else on this page.

   THE BAND ENDS AT THE NUMBERS — four a side, on one line, in their own
   column. It used to carry
   three bullets a side and a delta summary after them; both restated what the
   row already says, and the last thing on a comparison should be the
   comparison.

   EVERY NUMBER HERE IS OURS. 0.015% and ~200k are the deck's, 128 runs is the
   demo's dataset. Do not add a figure that cannot be sourced to one of those
   — a made-up benchmark on the band that argues for auditable answers is the
   worst possible place to put one.
   ========================================================================== */

/* THE HEADING SITS ON THE SAME TWO COLUMNS AS THE PANES BELOW IT, and the
   beats are dealt to the side they belong to: the symptom over "Without
   PULSAR", the position over "With PULSAR". Stacked on the left it left half
   the band empty and said nothing about what was coming; split this way the
   composition states the comparison before a word of it is read.

   Bottom-aligned, so both beats sit on the same baseline however many lines
   each takes. */
.iac__lede {
  max-width: 30ch;
  margin: 0 0 clamp(30px, 3.6vw, 50px);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Each sentence is its own block, so a new sentence always starts a new line.
   Run on, the second beat began on the tail of the first and the three read as
   a paragraph that happened to be large. */
.iac__lede span,
.iac__lede b { display: block; }

/* The turn. Everything above it is the problem, everything from here is the
   answer, and the colour change is the whole transition — no size change is
   needed and one was tried and looked like two headings. */
.iac__lede b {
  margin-top: 0.35em;
  font-weight: 600;
  color: var(--color-teal-ink, var(--accent));
}

.iac__cols {
  display: grid;
  margin-top: clamp(26px, 3.4vw, 44px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  align-items: stretch;
}

.iac__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.iac__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iac__head::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Red is failure and teal is the working system — the brand's functional
   colour rule applied to the two columns rather than decorating them. */
.iac__col--without .iac__head { color: var(--color-red-ink, #b3343d); }
.iac__col--with .iac__head { color: var(--color-teal-ink, #147c72); }

/* --------------------------------------------------------------------------
   THE TRANSCRIPT
   What actually happens when the question is asked, set as a terminal. It is
   here because the numbers below it are otherwise unearned: a reader who has
   not seen the answer come out has no reason to believe a count of what was
   cited in it.
   -------------------------------------------------------------------------- */

.iac__term {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--radius-md, 10px);
  background: var(--surface-night, #0c1524);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.85;
  color: #aab4c5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.iac__term b { color: #e8e9ed; font-weight: 500; }      /* what the tool said */
.iac__term i { color: #74819a; font-style: normal; }     /* commentary */
.iac__term u { text-decoration: none; color: #d64550; }  /* the failure */
.iac__term s { text-decoration: none; color: #4ecdc4; }  /* the working path */

/* --------------------------------------------------------------------------
   WHAT CAME OUT, COUNTED
   Three a side, under the transcript they were counted from, on ONE line. The
   two columns are the comparison, so the figures stay in their column —
   lifting them into one shared table put a wall between each number and the
   answer it came out of. One line rather than two because four figures in a
   row read as a single verdict where five over two rows read as a list.
   -------------------------------------------------------------------------- */

.iac__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: auto;          /* pinned to the foot, so both sides start level */
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line, var(--border));
}

.iac__stat { margin: 0; }

.iac__stat b {
  display: block;
  /* As large as a third of a column allows, which is about seven characters
     — "0.015%" is the longest and sets this ceiling. The values were kept
     short to buy this size; lengthening one shrinks the whole row. */
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.iac__col--without .iac__stat b { color: var(--color-red-ink, #b3343d); }
.iac__col--with .iac__stat b { color: var(--color-teal-ink, #147c72); }

/* The labels take as many lines as they need — the figures above them have
   already aligned, so a third line costs nothing but the block's own height.
   Three lines are reserved so both sides stay the same height and the
   transcripts above them stay level. */
.iac__stat span {
  display: block;
  min-height: 4.1em;
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

@media (max-width: 860px) {
  .iac__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .iac__lede { max-width: none; }
  .iac__lede { max-width: none; }

  /* The columns stack, so the two sides are read one after the other rather
     than across. Nothing else can be done at this width, and the transcripts
     carry the contrast on their own. */
  /* Three still fit across a stacked column; the figures shrink with the
     viewport rather than wrapping, which keeps each side one line at every
     width. */
  .iac__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
}