/* ------------------------------------------------------------
   synappro design system — synappro workshop
   Requires tokens.css, chrome.css, components.css.
   ------------------------------------------------------------ */

/* The testimonial and "held workshops at" strip now sit in the same
   section with nothing separating them — needs its own gap since neither
   component has a margin baked in for this specific pairing. */
.quote-panel + .supported-strip { margin-top: 32px; }

/* ===== Evidence cards ===== */

.evidence-intro { max-width: 62ch; margin-top: 8px; }
.evidence-card { display: flex; flex-direction: column; }
.evidence-card .t-numeral-sm { color: var(--terracotta-500); margin: 0 0 12px; }
.evidence-card .t-numeral-sm span { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--ink-500); margin-left: 4px; }
.evidence-card .t-numeral-sm.evidence-word { font-size: var(--fs-33); text-transform: lowercase; }
.evidence-card .t-small { margin: 0 0 20px; flex: 1; }
.evidence-card .t-metadata { margin: 0; }

/* ===== Format cards ===== */

.format-cards { margin-bottom: 24px; }
.format-card { position: relative; }
.format-card .t-numeral-sm { color: var(--terracotta-500); margin: 0 0 12px; }
.format-card .t-numeral-sm span { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink-500); margin-left: 4px; }
.format-card .t-h4 { margin: 0 0 10px; }
/* Fixed to a 2-line height (this font/size renders at 28px per line) so
   "Best for:" starts at the same position in every card regardless of
   whether its own tagline wraps to one line or two. */
.format-tagline { font-family: var(--font-heading); font-size: 17px; line-height: 28px; color: var(--ink-700); min-height: 56px; margin: 0 0 16px; }
.format-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--terracotta-700);
    background: var(--terracotta-50);
    border-radius: var(--r-pill);
    padding: 5px 10px;
    margin: 0 0 16px;
}
.format-card.is-popular { border: 1.5px solid var(--terracotta-200); }

/* ===== Train the trainer card ===== */

.ttt-card { margin-top: 24px; }
.ttt-card-header { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.ttt-numeral { color: #FAFBFC; flex-shrink: 0; }
.ttt-numeral span { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: rgba(250, 251, 252, 0.6); margin-left: 4px; }
.ttt-card-header .t-eyebrow { color: rgba(250, 251, 252, 0.6); margin-bottom: 8px; }
.ttt-card-header .t-h3 { color: #FAFBFC; }

.ttt-columns { gap: 32px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 28px; }
.ttt-columns .t-metadata { color: rgba(250, 251, 252, 0.6); margin: 0 0 12px; }
.ttt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ttt-list li {
    position: relative;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(250, 251, 252, 0.86);
    padding-left: 18px;
}
.ttt-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--terracotta-300);
}
.ttt-tagline { color: rgba(250, 251, 252, 0.86); max-width: 62ch; margin-bottom: 0; }