/* /example/the-buying-group: the proof view that /what-we-build/buying-group
   ends on. Layers on top of base.css.

   Section order matches src/views/example-the-buying-group.ejs.

   Two files set the precedent this one follows. example.segments.css for
   the page shape: hero with a run line, a method grid, the findings, a
   dark band carrying the argument, a closing block. And
   example.account.css for how a sourced claim is set: plain English
   first, the recorded evidence underneath on a quieter ground, the
   source and its link below that. The reader does not sell to banks, so
   a block that opens with the evidence has already lost them.

   The type scale is the one the built pages use rather than the seven
   roles listed in DESIGN.md. Every size here also appears in
   build.segments.css, build.ranking.css or example.account.css. See the
   note in build.buying-group.css. */

/* ── Hero ───────────────────────────────────────────────────────── */

.xb-hero { padding: 70px 0 76px; }

.xb-hero h1 .line { display: block; }
.xb-hero h1 .line + .line { margin-top: 0.1em; }

.xb-hero h1 {
  font-size: clamp(33px, 4.5vw, 57px);
  max-width: 21em;
}

.xb-hero-lede { font-size: 19.5px; max-width: 38em; }

/* Job metadata. Instrument type: chrome reporting what the run did, not
   copy. Carries the re-check figure, which is the one number on this
   page that says a name list was verified rather than just collected. */
.xb-run {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.xb-run span { margin: 0 6px; color: var(--rule); }

/* Shared measure for a paragraph sitting under a section headline. */
.xb-measure { max-width: 40em; }

/* Shared small label, used above every field inside a person card. */
.xb-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.xb-note {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── How the group was found ────────────────────────────────────── */

.xb-how h2 { max-width: 16em; }
.xb-how-grid { margin-top: 42px; }

@media (min-width: 901px) {
  .xb-how-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── The company ────────────────────────────────────────────────── */

.xb-company h2 { max-width: 15em; }

.xb-company-card {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 28px 28px;
}

.xb-company-card h3 { margin-bottom: 18px; text-wrap: balance; }

.xb-company-stats {
  margin: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}

/* Five figures across once there is room. Fit and timing sit next to
   each other but are never combined, per SITE-ARCHITECTURE section 4. */
@media (min-width: 721px) {
  .xb-company-stats { grid-template-columns: repeat(5, auto); gap: 30px; }
}

.xb-stat dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  white-space: nowrap;
}

.xb-stat-num {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.xb-company-situation { margin-top: 20px; }

.xb-company-situation p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 46em;
}

/* ── The group ──────────────────────────────────────────────────── */

.xb-people h2 { max-width: 15em; }

.xb-cards {
  margin-top: 32px;
  display: grid;
  gap: 20px;
}

/* One up, full width. Two across would set the evidence quote at a size
   nobody reads, and the quote is what makes a placement checkable. */
.xb-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 28px 24px;
}

.xb-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

@media (min-width: 681px) {
  .xb-card-head {
    grid-template-columns: auto minmax(0, 1fr) 200px;
    gap: 20px;
  }
}

.xb-card-rank {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.xb-card-who h3 { margin: 0 0 3px; text-wrap: balance; }

.xb-card-title {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--body);
}

/* Below the three-column breakpoint the confidence reading moves under
   the name rather than squeezing beside it. */
@media (max-width: 680px) {
  .xb-card-conf { grid-column: 2; margin-top: 12px; }
}

.xb-card-conf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xb-card-conf .xb-label { flex: 0 0 100%; margin-bottom: 6px; }

.xb-bar {
  display: block;
  flex: 1 1 auto;
  min-width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

/* Teal, the same fill the fit and timing bars use. Confidence is another
   0 to 100 reading, so a second color would imply it measures something
   of a different kind. */
.xb-bar-fill { display: block; height: 100%; background: var(--teal); }

.xb-card-conf .xb-stat-num { font-size: 14px; min-width: 24px; text-align: right; }

.xb-card-role { margin-top: 18px; }

.xb-card-role p {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}

.xb-block { margin-top: 20px; }

.xb-block > p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 54em;
}

/* The recorded evidence. Quieter ground, so it reads as quoted material
   rather than as our sentence about the person. Same treatment as the
   account page's record panel. */
.xb-quote {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  max-width: 54em;
}

.xb-quote p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.xb-quote footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin-top: 11px;
}

.xb-source {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.xb-block .xb-source { display: block; margin-top: 10px; }

.xb-quote footer a,
.xb-block .xb-source a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.xb-block .xb-source a { margin-left: 14px; }

.xb-quote footer a:hover,
.xb-block .xb-source a:hover { border-bottom-color: var(--teal-deep); }

.xb-quote footer a span,
.xb-block .xb-source a span,
.xb-card-foot a span { margin-left: 3px; }

/* The profile note. Lowest-weight block on the card: useful context, not
   part of the reason the person is in the group. */
.xb-block-note > p { color: var(--muted); font-size: 15px; }

.xb-card-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.xb-card-foot a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.xb-card-foot a:hover { border-bottom-color: var(--teal-deep); }

.xb-order-note {
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── The roles that aren't there ────────────────────────────────── */

.xb-gap { padding: 78px 0 84px; }
.xb-gap h2 { max-width: 13em; }

.xb-gap-grid {
  margin-top: 44px;
  display: grid;
  gap: 34px;
  max-width: 52em;
}

@media (min-width: 761px) {
  .xb-gap-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}

.xb-gap-col { padding-top: 18px; border-top: 1px solid var(--rule-dark); }

.xb-gap-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.xb-gap-col p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--dark-body);
}

.xb-gap-body {
  margin-top: 40px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: #FFFFFF;
}

/* ── What the six cover ─────────────────────────────────────────── */

.xb-coverage h2 { max-width: 15em; }

.xb-coverage-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  max-width: 46em;
}

@media (min-width: 761px) {
  .xb-coverage-list { grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
}

.xb-coverage-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* Teal mark: these functions were confirmed covered, so the positive
   accent is earned here in a way it is not on a list of topics. */
.xb-coverage-mark {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--teal);
}

/* ── Closing ────────────────────────────────────────────────────── */

.xb-cta-inner { text-align: center; }
.xb-cta h2 { max-width: 18em; margin: 0 auto; }

.xb-cta .lede {
  max-width: 40em;
  margin: 18px auto 0;
}

.xb-cta .actions { justify-content: center; }

.xb-cta-quiet {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal-deep);
  text-decoration: none;
}

.xb-cta-quiet span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}

.xb-cta-quiet:hover span { transform: translateX(3px); }

/* ── Narrow ─────────────────────────────────────────────────────── */

@media (max-width: 460px) {
  .xb-card { padding: 22px 20px 20px; }
  .xb-company-card { padding: 22px 20px 24px; }
  .xb-company-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ── Motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .xb-cta-quiet span { transition: none; }
}