/* /example: the hub for the real example. Layers on top of base.css.

   Section order matches src/views/example.ejs and SITE-ARCHITECTURE.md
   section 6. */

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

.ex-hero { padding: 70px 0 76px; }
.ex-hero h1 { max-width: 11em; }
.ex-hero-lede { font-size: 19.5px; max-width: 40em; }

/* ── What is invented, what is not ──────────────────────────────── */

.ex-honesty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
}
@media (max-width: 860px) {
  .ex-honesty-grid { grid-template-columns: 1fr; gap: 20px; }
}

.ex-side {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 28px 28px;
}
.ex-side p {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

/* The two labels carry the distinction, so they are the one place on
   this page color does real work. Slate is the palette's "ruled out
   or unknown"; teal deep is confirmed, and readable as text. */
.ex-side-label {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 5px;
  margin-bottom: 16px;
}
.ex-side-invented .ex-side-label {
  background: var(--pill-none-bg);
  color: var(--muted);
}
.ex-side-real .ex-side-label {
  background: var(--pill-yes-bg);
  color: var(--teal-deep);
}

/* ── The figures ────────────────────────────────────────────────── */

.ex-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 46px;
}
@media (max-width: 900px) {
  .ex-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 520px) {
  .ex-stats { grid-template-columns: 1fr; gap: 26px; }
}

.ex-stats b {
  display: block;
  font-family: var(--display);
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
  /* On the dark ground plain teal is legible and is the accent of
     record. --teal-deep is for teal text on a light ground. */
  color: var(--teal);
}
.ex-stats span {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dark-body);
}

.ex-figures-note {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
  font-size: 14.5px;
  color: var(--dark-body);
}

/* ── The map ────────────────────────────────────────────────────

   The eight views are a .hub-grid of .hub-card, which lives in base.css
   because /what-we-build is built from the same grammar. The numbered
   mark (.hub-card-num) and the dashed not-yet-built state
   (.hub-card-soon) are both there too. Nothing page-specific is left
   here, which is the point: the two hubs should read as one kind of
   page. */

/* ── One finding ────────────────────────────────────────────────

   The site's signature component, in its single-row form. The account
   page carries nineteen of these; this page carries one, as the payoff
   after the map.

   Deliberately the same grammar as .ac-row on /example/an-account
   rather than a new invention: claim and verdict pill on one baseline,
   plain English under it, the recorded text inset, then the source and
   the date. Kept as its own rules rather than shared because the two
   differ where it matters: this one stands alone on a tinted ground
   with a color-coded left border, where the account page's rows are
   stacked inside one bordered card and the border would repeat
   nineteen times. If a third page ever needs one, lift the common
   parts into base.css then. */

.ex-finding {
  margin-top: 38px;
  max-width: 62em;
  background: var(--surface);
  border: 1px solid var(--rule);
  /* The one thicker stroke in the system, and it carries the verdict
     rather than decorating the card. Teal confirmed, slate where
     nothing was found. */
  border-left: 3px solid var(--slate);
  border-radius: 12px;
  padding: 22px 26px 24px;
}
.ex-finding-yes { border-left-color: var(--teal); }
@media (max-width: 700px) {
  .ex-finding { padding: 18px 18px 20px; }
}

.ex-finding-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}
.ex-finding-top h3 {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.25;
}
.ex-finding-pill {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
  background: var(--pill-none-bg);
  color: var(--muted);
}
.ex-finding-yes .ex-finding-pill {
  background: var(--pill-yes-bg);
  color: var(--teal-deep);
}

/* Plain English first, the recorded text underneath as the proof.
   Nobody reading this site sells to banks. */
.ex-finding-meaning {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

.ex-finding-record {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.ex-finding-record-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ex-finding-quote {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.ex-finding-src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 13px;
  font-size: 13.5px;
  color: var(--muted);
}
.ex-finding-src a {
  font-weight: 600;
  color: var(--teal-deep);
  border-bottom: 1px solid transparent;
}
.ex-finding-src a:hover { border-bottom-color: var(--teal-deep); }
/* The only thing in the row anyone taps, and 23px is a small thing to
   hit with a thumb. Padded to 44 on phones, with the margin pulled back
   so the row does not grow around it. */
@media (max-width: 900px) {
  .ex-finding-src a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
  }
}

.ex-proof-closer {
  margin-top: 30px;
  max-width: 40em;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
}

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

.ex-cta-inner { text-align: center; }
.ex-cta h2 { max-width: 14em; margin: 0 auto; }
/* 40em at the lede's 18.5px is 740px, which lands on the 728px the h2's
   14em cap gives it, so the paragraph and the headline above it share an
   edge instead of the copy sitting in a narrower column under a wider
   line. Without it the lede keeps the site-wide 32em, which is right for
   a left-aligned lede and too narrow centered: four short ragged-both-
   sides lines rather than three. build.css and together.css widen their
   closing lede for the same reason. */
.ex-cta .lede { margin-left: auto; margin-right: auto; max-width: 40em; }
.ex-cta .actions { justify-content: center; }