/* ============================================================================
   COMPOSITION v4 — hero split + the arithmetic band.
   ----------------------------------------------------------------------------
   The v2/v3 hero was a centred stack: badge, headline, sub, CTA, note — the
   reference implementation of a SaaS opening. The claim ("2x") floated free of
   any evidence, and the only proof on the page (a curl box) sat below it doing
   nothing.

   v4 keeps the typographic system and every token, and changes the STRUCTURE:
     * asymmetric split grid — claim left, live arithmetic right
     * the right column is a data artifact: $5 -> $10 -> token counts per model,
       computed server-side from the price rows the API actually bills at
     * the code artifact became tabbed (curl/Python/Node) so a developer can
       take the snippet instead of photograph it
     * a comparison band that states savings only as list ÷ effective, from a
       table the reader can audit

   The accent rule still holds: one chromatic element per view. In the hero it
   is the headline span; in the math card it is the credited row; the table's
   save column is the only colour in the cmp band.
   ========================================================================== */

.hero-v3 {
  position: relative;
  padding: clamp(64px, 9vh, 104px) 0 0;
}
.hero-v3 .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 1240px;
}
.hero-v3 .hero-copy h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 620;
  color: var(--paper);
  margin: 18px 0 0;
  max-width: 15ch;
}
.hero-v3 .hero-lead { max-width: 56ch; }
.hero-v3 .hero-cta { justify-content: flex-start; }
.hero-v3 .hero-note { justify-content: flex-start; }

/* ---- the math card: a figure, not a testimonial ---- */
.hero-math {
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* the one elevated object in the hero; no ambient colour behind it */
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.hero-math .hm-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--obsidian);
}
.hero-math .hm-title {
  font: 600 11px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fog);
}
.hero-math .hm-src { font-size: 11px; color: var(--ash);
  /* the base URL is long and unbreakable; without this it stretched the whole card
     wider than a 390px viewport (caught in mobile review) */
  min-width: 0; overflow-wrap: anywhere; text-align: right; }
.hero-math .hm-bar { flex-wrap: wrap; }
.hero-math .hm-sum { padding: 6px 18px 12px; }
.hero-math .hm-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  font-size: 14px; color: var(--mist);
}
.hero-math .hm-row:last-child { border-bottom: 0; }
.hero-math .hm-row b { color: var(--paper); font-weight: 620; font-size: 16px; }
.hero-math .hm-row b.accent { color: var(--accent); }

.hero-math .hm-tbl { width: 100%; border-collapse: collapse; }
.hero-math .hm-tbl th {
  font: 500 10.5px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ash);
  text-align: left; padding: 10px 18px 8px; border-bottom: 1px solid var(--line);
}
.hero-math .hm-tbl th.n { text-align: right; }
.hero-math .hm-tbl td {
  padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px;
  color: var(--bone); vertical-align: baseline;
}
.hero-math .hm-tbl tr:last-child td { border-bottom: 0; }
.hero-math .hm-tbl td.n { text-align: right; color: var(--paper); }
.hero-math .hm-m { display: block; color: var(--bone); font-weight: 560; }
.hero-math .hm-v { display: block; font-size: 11px; color: var(--ash); margin-top: 2px; }
.hero-math .hm-foot {
  margin: 0; padding: 12px 18px; font-size: 12px; line-height: 1.55;
  color: var(--fog); background: var(--obsidian); border-top: 1px solid var(--line);
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .hero-v3 .hero-grid { grid-template-columns: 1fr; }
  .hero-v3 .hero-copy h1 { max-width: none; }
  /* the math card was built as a beside-the-copy figure; stacked, it must not
     inherit desktop table padding — model names truncate on 390px screens */
  .hero-math .hm-tbl th, .hero-math .hm-tbl td { padding-left: 12px; padding-right: 12px; }
  .hero-math .hm-m { font-size: 12.5px; }
  /* on mobile the note would otherwise spill a pipe-broken line like the hero-note */
  .hero-v3 .hero-note { flex-wrap: wrap; row-gap: 6px; }
  .hero-v3 .hero-note .sep { display: none; }
}

/* ---- tabbed hero code artifact ---- */
.hero-code .tabs { margin-bottom: -1px; position: relative; z-index: 1; padding: 0 4px; }
.hero-code .tabs + div > .codeblock { border-top-left-radius: 0; }

/* ---- the comparison band ---- */
/* Local helpers: .mono/.fog exist in console.css only, which the public pages do
   not load. Redefining them here (same values as the system tokens) beats leaking
   a console stylesheet into the marketing bundle. */
.hero-math .mono, .cmp-tbl .mono { font-family: var(--mono); font-size: 13px; }
.hero-math .hm-tbl td.n { font-variant-numeric: tabular-nums; }
.cmp-tbl td.fog, .cmp-band .fog { color: var(--fog); }
.hero-math .accent, .cmp-tbl td.accent { color: var(--accent); }

.cmp-band { padding: clamp(72px, 9vw, 112px) 0; border-top: 1px solid var(--line); }
.cmp-band .cmp-head { max-width: 640px; margin-bottom: 40px; }
.cmp-band h2 { margin: 10px 0 12px; }
.cmp-band .cmp-sub { color: var(--fog); font-size: 15px; line-height: 1.65; margin: 0; }
.cmp-tbl { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp-tbl th {
  font: 500 10.5px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ash);
  padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: right;
}
.cmp-tbl th:first-child { text-align: left; }
.cmp-tbl tr.subhead th {
  font-size: 9.5px; letter-spacing: .14em; padding-top: 0; border-bottom: 1px solid var(--line);
}
.cmp-tbl td {
  padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px;
  text-align: right; color: var(--bone);
}
.cmp-tbl td:first-child { text-align: left; }
.cmp-tbl td.fog { color: var(--fog); }
.cmp-tbl td.accent { color: var(--accent); }
.cmp-tbl tr:last-child td { border-bottom: 0; }
.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg);
              background: var(--carbon); }
.cmp-foot { margin: 16px 2px 0; font-size: 12.5px; color: var(--ash); }
.cmp-foot a { color: var(--fog); }

/* ---- entrance: reuse the v2 stagger on the v3 hero ---- */
.js .hero-v3 .anim {
  opacity: 0; transform: translateY(14px);
  animation: heroIn 800ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-v3 .anim, .js .floor { opacity: 1 !important; transform: none !important; animation: none !important; }
}