/* =========================================================
   CALBRA SOURCING — About page
   Only the components this page introduces. Everything else
   (prose, versus, checklist, callout, quote, split) is reused
   from guide.css so the two pages stay visually consistent.
   ========================================================= */

/* ---------- who pays whom ---------- */
.flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(.6rem, 2vw, 1.4rem); align-items: stretch;
  margin-top: 2rem;
}
.flow__node {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.3rem;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.flow__node--you { background: var(--alt); }
.flow__node--us  { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.flow__ico {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--alt); color: var(--ink);
  display: grid; place-items: center; margin: 0 auto .9rem;
}
.flow__node--us .flow__ico { background: rgba(246,242,236,.12); color: var(--gold); }
.flow__node h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.flow__node--us h3 { color: var(--paper); }
.flow__node p { font-size: .86rem; color: var(--muted); line-height: 1.55; margin: 0; }
.flow__node--us p { color: rgba(246,242,236,.72); }

.flow__link {
  display: grid; place-items: center; gap: .4rem;
  min-width: 92px; padding: .4rem 0;
}
.flow__link svg { color: var(--clay); }
.flow__link span {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--clay); font-weight: 600; text-align: center; line-height: 1.35;
}

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
  .flow__link { min-width: 0; }
  .flow__link svg { transform: rotate(90deg); }
}

/* ---------- credentials ---------- */
.cred-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 2vw, 1.2rem);
}
.cred {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.3rem;
  display: flex; flex-direction: column;
}
.cred__ico { color: var(--clay); margin-bottom: .9rem; }
.cred h3 { font-size: 1rem; margin-bottom: .35rem; }
.cred p { font-size: .87rem; color: var(--muted); line-height: 1.55; margin: 0 0 1rem; }
.cred__ref {
  margin-top: auto; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--muted);
}
.cred__ref b { color: var(--ink); font-weight: 600; }

@media (max-width: 880px) { .cred-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .cred-grid { grid-template-columns: 1fr; } }

/* ---------- principles list ---------- */
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.principle {
  display: grid; grid-template-columns: 26px 1fr; gap: .9rem;
  background: rgba(246,242,236,.06);
  border: 1px solid rgba(246,242,236,.14);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.3rem;
}
.principle__tick {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(246,242,236,.12); color: var(--gold);
  display: grid; place-items: center; margin-top: .1rem;
}
.principle h3 { font-size: .98rem; margin-bottom: .3rem; color: var(--paper); }
.principle p { font-size: .87rem; color: rgba(246,242,236,.7); line-height: 1.58; margin: 0; }

@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }