/* ════════════════════════════════════════════════════════════════
   contact-v2.css — page-scoped styles for contact.html (Contact v2)
   Depends on tokens from theme.css / home-v2.css / workflowos-v2.css.
   Only contains the contact-specific primitives (.ct-*) that are not
   shared across other v2 pages.
   ════════════════════════════════════════════════════════════════ */

/* ── Two-up contact layout ── */
.ct-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg); align-items: start;
}
@media (max-width: 820px) { .ct-grid { grid-template-columns: 1fr; } }

.ct-card {
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px);
}
.ct-card--primary { border-color: var(--wos-border-strong); box-shadow: var(--wos-shadow-md); }
.ct-card__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wos-text-tertiary); margin: 0 0 var(--sp-md);
}
.ct-card__label::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--wos-accent); }
.ct-card h2 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(20px, 2.1vw, 25px); letter-spacing: -0.014em;
  color: var(--wos-text-primary); margin: 0 0 10px;
}
.ct-card h2::before { display: none; }
.ct-card p {
  font-size: 15px; line-height: 1.58; color: var(--wos-text-secondary);
  margin: 0 0 var(--sp-lg); max-width: 46ch;
}

.ct-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.ct-email {
  font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--wos-accent);
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 500;
}
.ct-email::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wos-ok); }
.ct-fine { font-size: 12.5px; color: var(--wos-text-tertiary); margin: var(--sp-md) 0 0; }

/* ── What-to-include checklist ── */
.ct-list { list-style: none; margin: 0; padding: 0; }
.ct-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--wos-border);
}
.ct-list li:last-child { border-bottom: none; }
.ct-list .n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wos-accent-subtle); color: var(--wos-accent); border: 1px solid var(--wos-border);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
}
.ct-list .t {
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 14.5px;
  color: var(--wos-text-primary); letter-spacing: -0.005em;
}
.ct-list .s { display: block; font-size: 13px; line-height: 1.5; color: var(--wos-text-secondary); margin-top: 2px; }
.ct-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.ct-tag {
  font-size: 11.5px; font-weight: 500; color: var(--wos-text-secondary);
  border: 1px solid var(--wos-border-strong); border-radius: var(--r-pill); padding: 3px 11px;
}

/* ── Security / vendor callout band ── */
.ct-callout {
  background: var(--wos-accent-subtle); border: 1px solid var(--wos-border);
  border-radius: var(--r-lg); padding: clamp(24px, 3.2vw, 38px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 30px); align-items: center;
}
.ct-callout__mark {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wos-canvas); border: 1px solid var(--wos-border); color: var(--wos-accent);
}
.ct-callout__mark svg { width: 23px; height: 23px; }
.ct-callout h2 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(19px, 2.1vw, 24px); letter-spacing: -0.014em;
  color: var(--wos-text-primary); margin: 0 0 8px;
}
.ct-callout h2::before { display: none; }
.ct-callout p {
  font-size: 14.5px; line-height: 1.58; color: var(--wos-text-secondary);
  margin: 0; max-width: 72ch;
}
.ct-callout strong { color: var(--wos-text-primary); font-weight: 600; }
@media (max-width: 620px) { .ct-callout { grid-template-columns: 1fr; } }