/* BreakAway AI Strategies: additive components for /team, /checkout, /welcome.
   Uses the site.css tokens only. site.css itself is unchanged. */

.team-portrait svg { width: 220px; height: 220px; border-radius: 50%; display: block; border: 4px solid #fff; box-shadow: 0 12px 30px rgba(16,23,40,0.12); }
@media (max-width: 760px) { .team-portrait svg { width: 140px; height: 140px; } }
.team-how { font-size: var(--step-1); color: var(--ink-soft); text-align: center; max-width: 62ch; margin: 18px auto 0; }

/* Half-width tracks (4 at tablet, 8 at desktop) so a lone last card can sit exactly centered at the same width as the rest. */
.agent-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; margin-top: 8px; }
@media (min-width: 640px) {
  .agent-grid { grid-template-columns: repeat(4, 1fr); }
  .agent-grid > .agent-card { grid-column: span 2; }
  .agent-grid > .agent-card:last-child:nth-child(2n+1) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) {
  .agent-grid { grid-template-columns: repeat(8, 1fr); }
  .agent-grid > .agent-card:last-child:nth-child(2n+1) { grid-column: span 2; } /* undo the tablet rule */
  .agent-grid > .agent-card:last-child:nth-child(4n+1) { grid-column: 4 / span 2; }
}
.agent-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 24px 22px 14px; scroll-margin-top: 90px; display: flex; flex-direction: column; }
.agent-card .agent-short { flex: 1 1 auto; }
.agent-card:target { border-color: var(--blue-strong); box-shadow: 0 0 0 1px var(--blue-strong); }
.agent-media { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin: 0 0 14px; background: var(--navy-band); }
.agent-media svg, .agent-media img, .agent-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.agent-card h3 { margin: 0; font-size: 21px; font-weight: 800; }
.agent-role { margin: 2px 0 10px; color: var(--blue-strong); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.agent-short { margin: 0 0 6px; color: var(--ink-soft); font-size: 15px; }
.agent-more { border-top: 1px solid var(--line); margin-top: 12px; }
.agent-more summary { cursor: pointer; list-style: none; padding: 12px 26px 12px 0; font-weight: 750; font-size: 15px; color: var(--blue-strong); position: relative; }
.agent-more summary::-webkit-details-marker { display: none; }
.agent-more summary::after { content: "+"; position: absolute; right: 2px; top: 8px; font-size: 22px; font-weight: 600; }
.agent-more[open] summary::after { content: "\2013"; }
.agent-more p { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; }
.team-disclosure { text-align: center; color: var(--faint); font-size: 14px; margin: 34px auto 0; max-width: 60ch; }