/*
  WWC credibility card, "Who builds WWC". One small card for the product marketing pages:
  the three facts about the people behind Western Web Co., one protection line that fits the
  page it sits on.
  Every class starts with wwc-cred- so page CSS never collides with it.
  Copy rules: describe the PEOPLE ("Engineers from ..."), never the company doing that work.
  Protection lines use only controls that are in the code today: emailed 2-step sign-in codes,
  the pause after 5 wrong passwords, the 30-day sign-in cap, private waiver links that expire
  in 5 minutes, and card numbers handled by the payment provider.
  Visual rules (AGENTS.md "WWC Visual Baseline"): flat fills only, white card on the #f7f7f7
  page, neutral gray panel, brand brown only as solid icons and link text.

  Placement modifiers:
  - (none)        its own full-width section between two page sections
  - .is-contained dropped inside an existing .container, so it uses that width
*/

.wwc-cred {
  --wwc-cred-ink: #242424;
  --wwc-cred-muted: #68625d;
  --wwc-cred-brown: #cd7b36;
  --wwc-cred-brown-dark: #ae591c;
  --wwc-cred-line: #e4e2df;
  --wwc-cred-soft: #f1f1f1;
  --wwc-cred-paper: #ffffff;
  --wwc-cred-display: "Signika", "Arial Narrow", sans-serif;
  --wwc-cred-body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  display: block;
  margin: 0;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  color: var(--wwc-cred-ink);
  font-family: var(--wwc-cred-body);
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.wwc-cred,
.wwc-cred *,
.wwc-cred *::before,
.wwc-cred *::after {
  box-sizing: border-box;
}

.wwc-cred.is-contained {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.wwc-cred-wrap {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.wwc-cred.is-contained > .wwc-cred-wrap {
  width: 100%;
}

.wwc-cred-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(1.25rem, 3.2vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 2.1rem);
  border: 1px solid var(--wwc-cred-line);
  border-radius: 10px;
  background: var(--wwc-cred-paper);
}

.wwc-cred-people {
  min-width: 0;
}

.wwc-cred-label {
  margin: 0 0 0.85rem;
  color: var(--wwc-cred-brown);
  font-family: var(--wwc-cred-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.wwc-cred-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wwc-cred-facts li {
  min-width: 0;
  padding: 0.72rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--wwc-cred-line);
  color: var(--wwc-cred-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.wwc-cred-facts li:last-child {
  padding-bottom: 0;
}

.wwc-cred-proof {
  min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  display: grid;
  align-content: start;
  gap: 0.7rem;
  border-radius: 8px;
  background: var(--wwc-cred-soft);
}

.wwc-cred-proof-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--wwc-cred-brown-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.wwc-cred-line {
  margin: 0;
  color: var(--wwc-cred-ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.wwc-cred-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--wwc-cred-brown-dark);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.wwc-cred-link:hover,
.wwc-cred-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.wwc-cred-link:focus-visible {
  outline: 2px solid var(--wwc-cred-brown);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Icons: one brown mask per fact, so the markup stays a single empty span. */
.wwc-cred-icon {
  width: 22px;
  height: 22px;
  flex: none;
  display: inline-block;
  background-color: var(--wwc-cred-brown);
  -webkit-mask: var(--wwc-cred-mask) center / contain no-repeat;
  mask: var(--wwc-cred-mask) center / contain no-repeat;
}

.wwc-cred-proof-label .wwc-cred-icon {
  width: 15px;
  height: 15px;
  background-color: var(--wwc-cred-brown-dark);
}

.wwc-cred-icon.is-code {
  --wwc-cred-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M7 20h10M9 16v4M15 16v4M9 8l-2 2 2 2M15 8l2 2-2 2'/%3E%3C/svg%3E");
}

.wwc-cred-icon.is-shield {
  --wwc-cred-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21 12 12 0 0 1 3.5 6 12 12 0 0 0 12 3'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.wwc-cred-icon.is-horse {
  --wwc-cred-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10-.85 8.507A1.357 1.357 0 0 0 7.5 20h.146a2 2 0 0 0 1.857-1.257l.994-2.486A2 2 0 0 1 12.354 15h1.292a2 2 0 0 1 1.857 1.257l.994 2.486A2 2 0 0 0 18.354 20h.146a1.37 1.37 0 0 0 1.364-1.494L19 9h-8c0-3-3-5-6-5l-3 6 2 2 3-2'/%3E%3Cpath d='M22 14v-2a3 3 0 0 0-3-3'/%3E%3C/svg%3E");
}

.wwc-cred-icon.is-lock {
  --wwc-cred-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0 1 1 0 0 0-2 0M8 11V7a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  .wwc-cred-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .wwc-cred-facts li {
    font-size: 0.92rem;
  }
}