/*
 * NEXONOMY · USE-CASE EDITORIAL REGISTER
 * Shared styles for the editorial/case-study use-case pages (npi, vmo, rfp,
 * sourcing). Built on the quiet-article register (pillar.css) — import after it.
 * The article hero is .pillar-hero; the reading column is .prose. These add the
 * use-case kicker, the muted proof mark, the scannable record-gives grid, and
 * the bold breadth finish that sends the reader to the next use case.
 */

/* a quiet kicker above the article hero (use-case context) */
.ed-kicker {
  max-width: 880px; margin: 0 auto; padding: 0 var(--section-px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--color-accent);
}
.prose-lede { font-size: 19px; line-height: 30px; color: var(--color-text-primary); }
.pillar-figure .product-frame { transform: none; }
/* an optional larger closing keyline (the editorial register; technical pages skip it) */
.keyline--close { font-size: clamp(26px, 4.6vw, 31px); line-height: 1.28; margin-top: 30px; }

/* the proving ground, muted to a quiet credit at the foot of the page */
.proofmark { text-align: center; margin-top: 44px; }
.proofmark__label {
  display: block; margin: 0 0 10px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); opacity: 0.7;
}
.proofmark__chip {
  display: inline-flex; align-items: center; background: #E8E4DC;
  border-radius: 8px; padding: 7px 14px; opacity: 0.5;
  transition: opacity var(--duration-base) var(--ease-out);
}
.proofmark__chip:hover { opacity: 0.82; }
.proofmark__chip img { display: block; width: 76px; height: auto; }

/* what the record gives you (scannable, capability-flavored) */
.recordgives { max-width: 760px; margin: 0 auto; padding: 4px var(--section-px) 0; }
.recordgives__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rg-item {
  display: flex; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-0);
}
.rg-item .icon { color: var(--color-accent); width: 18px; height: 18px; flex: none; margin-top: 1px; }
.rg-item b { display: block; font-size: 14px; color: var(--color-text-primary); font-weight: var(--weight-medium); margin-bottom: 3px; }
.rg-item span { font-size: 13px; line-height: 19px; color: var(--color-text-secondary); }

/* the bold finish: elevate to breadth, then send the reader to the next use case */
.ucfinish {
  padding: 92px var(--section-px) 84px; text-align: center;
  background: var(--gradient-section); border-top: 1px solid var(--color-border-accent);
}
.ucfinish__inner { max-width: 1000px; margin-inline: auto; }
.ucfinish__h {
  font-family: var(--font-display); font-size: 44px; line-height: 1.08;
  letter-spacing: -1.6px; font-weight: var(--weight-medium); color: var(--color-text-primary);
}
.ucfinish__h em { font-style: italic; color: var(--color-accent); }
.ucfinish__sub {
  margin: 18px auto 42px; max-width: 600px; font-size: 16px; line-height: 25px;
  color: var(--color-text-secondary);
}
.ucfinish .uc-links { grid-template-columns: repeat(3, 1fr); text-align: left; }
.ucfinish__cta { margin-top: 42px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* the engine beat: a static multi-model advisory panel ("how the call was reached").
 * Shows several frontier models advising the same decision in parallel, the real
 * split, and the reconciled output with the dissent kept. Reuses product.css .advisor
 * cards in a static grid (the homepage orbits them; here they hold still). */
.advpanel { max-width: var(--container-max); margin: 4px auto 0; padding-inline: var(--section-px); }
.advpanel__frame {
  border: 1px solid rgba(140,101,247,0.22); border-radius: 14px;
  background: radial-gradient(92% 80% at 50% 0%, #14121c 0%, var(--color-surface-0) 75%);
  padding: 22px 22px 24px;
}
.advpanel__q { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.advpanel__q-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.advpanel__q-text { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.3px; color: var(--color-text-primary); }
.advpanel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.advpanel .advisor { position: static; width: auto; }
.advpanel__reconciled {
  margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--color-accent);
  background: var(--color-surface-0); border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 22px; color: var(--color-text-secondary);
}
.advpanel__reconciled b { color: var(--color-text-primary); font-weight: var(--weight-medium); }


/* ─── THE NARRATIVE / THESIS REGISTER (the "Company" voice on use-case pages) ─
 * D-066: the use-case pages adopt the About page's narrative register — a single
 * quiet reading column, mono section kickers, italic-accent headings, a calm even
 * rhythm, an understated close. Import about.css after this file. These helpers
 * let that calm column breathe around the two signature product figures (the
 * sealed Record and the multi-model advisory panel) without leaving the register. */

/* the top section: a plain, honest page header (no poetry, no accent, no italic)
   that names the use case for what it is, leads with the problem in plain words,
   and carries the primary CTA. The page's first break before the reading column. */
.uc-hero { max-width: 720px; margin: 0 auto; padding: 150px var(--section-px) 8px; }
.uc-hero__eyebrow {
  display: block; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted);
}
.uc-hero__title {
  margin: 16px 0 0; font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -1.4px;
  font-weight: var(--weight-medium); color: var(--color-text-primary);
}
.uc-hero__standfirst {
  margin-top: 20px; max-width: 600px; font-size: 17px; line-height: 28px;
  color: var(--color-text-secondary);
}
.uc-hero__standfirst b { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.uc-hero__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* the research band: real, sourced figures on the stakes of vendor and partner
   decisions, set right under the page description (Aera-style). Numbers lead,
   the source is cited under each. Restrained color for a Fortune-1000 reader. */
.uc-metrics { max-width: var(--container-max); margin: 0 auto; padding: 40px var(--section-px) 8px; }
.uc-metrics__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden;
}
.uc-metric { background: var(--color-surface-0); padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 9px; }
.uc-metric__num {
  font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1; letter-spacing: -1.6px; font-weight: var(--weight-medium); color: var(--color-text-primary);
}
.uc-metric__label { font-size: 13.5px; line-height: 19px; color: var(--color-text-secondary); }
.uc-metric__src {
  margin-top: 4px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted);
}

/* segmented .about columns, so the figures can interleave between reading blocks */
.about--lead { padding-bottom: 0; }                     /* opening column: 150 top, no bottom */
.about--seg  { padding-top: 0; padding-bottom: 0; }     /* interior continuation column */
.about--tail { padding-top: 0; padding-bottom: 80px; }  /* final column: bottom breathing room */

/* the page-level use-case kicker carries the single accent; section kickers stay muted */
.about__kicker--accent { color: var(--color-accent); }

/* a signature product figure embedded in the reading flow: centered, quiet caption */
.uc-figure { max-width: var(--container-max); margin: 40px auto 0; padding-inline: var(--section-px); }
.uc-figure .product-frame { transform: none; }
.uc-figure__cap { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-muted); }
.uc-figure__cap .icon { color: var(--color-accent); width: 16px; height: 16px; }

/* the advisory panel, sized to sit inside the reading rhythm */
.advpanel--uc { max-width: var(--container-max); margin: 40px auto 0; }

/* breadth handoff as a calm linked list (reuses .about__list), not product cards */
.about__listlink {
  display: block; color: var(--color-text-primary); font-weight: var(--weight-medium);
  text-decoration: none; transition: color var(--duration-fast) var(--ease-out);
}
.about__listlink:hover { color: var(--color-accent); }
.about__item--link { transition: border-color var(--duration-fast) var(--ease-out); }
.about__item--link:hover { border-left-color: var(--color-accent); }

@media (max-width: 900px) {
  .recordgives__grid { grid-template-columns: 1fr; }
  .ucfinish { padding-top: 64px; }
  .ucfinish__h { font-size: 31px; letter-spacing: -1px; }
  .ucfinish .uc-links { grid-template-columns: 1fr; }
  .advpanel__grid { grid-template-columns: 1fr 1fr; }
  .uc-figure, .advpanel--uc { margin-top: 32px; }
  .about--tail { padding-bottom: 64px; }
  .uc-hero { padding-top: 128px; }
  .uc-hero__title { font-size: 30px; letter-spacing: -1px; }
  .uc-metrics__grid { grid-template-columns: 1fr 1fr; }
}