samples-cards.css

.sample-card-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
.sample-card { min-width: 0; perspective: 1200px; }
.sample-card-inner { height: 565px; position: relative; transform-style: preserve-3d; transition: transform 560ms cubic-bezier(.2, .75, .3, 1); }
.sample-card[data-flipped="true"] .sample-card-inner { transform: rotateY(180deg); }
.sample-card-face { backface-visibility: hidden; background: #fff; border: 1px solid #e5e1eb; border-radius: 12px; box-sizing: border-box; height: 100%; inset: 0; overflow: hidden; position: absolute; width: 100%; }
.sample-card-front { display: flex; flex-direction: column; }
.sample-card-back { opacity: 0; pointer-events: none; transform: rotateY(180deg); visibility: hidden; }
.sample-card[data-flipped="true"] .sample-card-front { pointer-events: none; transition: visibility 0s linear 280ms; visibility: hidden; }
.sample-card[data-flipped="true"][data-active-path="api"] .sample-card-back[data-sample-path="api"], .sample-card[data-flipped="true"][data-active-path="endpoint"] .sample-card-back[data-sample-path="endpoint"] { opacity: 1; pointer-events: auto; visibility: visible; }
.sample-card-preview { border-bottom: 1px solid #e5e1eb; display: block; width: 100%; }
.sample-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.sample-card-body h2, .sample-path-body h2 { color: #49378b; font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.sample-path-body h2 { text-align: center; }
.sample-card-body > p { color: #5f5966; font-size: 14px; line-height: 1.55; margin: 0; min-height: 66px; }
.sample-card-actions { display: flex; gap: 8px; margin-top: 20px; }
.sample-card-actions button { background: #fff; border: 1px solid #cfc8de; border-radius: 6px; color: #49378b; cursor: pointer; flex: 1; font-size: 13px; font-weight: 700; padding: 10px 12px; }
.sample-card-links { border-top: 1px solid #eeeaf1; display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; }
.sample-card-links a { color: #625b6c; font-size: 12px; font-weight: 650; text-decoration: none; }
.sample-card-links span { color: #b3adba; }
.sample-path-body { padding: 20px; }
.sample-path-body > button { background: transparent; border: 0; color: #625b6c; cursor: pointer; font-size: 12px; font-weight: 700; padding: 0; }
.sample-path-eyebrow { color: #857a9e; font-size: 10px; font-weight: 700; letter-spacing: .08em; margin: 19px 0 5px; text-align: center; text-transform: uppercase; }
.sample-path-body > p:not(.sample-path-eyebrow) { color: #5f5966; font-size: 12px; line-height: 1.5; margin: 0 0 15px; }
.sample-path-steps { display: grid; gap: 8px; }
.sample-path-step { align-items: center; background: #faf9fc; border: 1px solid #e5e1ea; border-radius: 8px; display: flex; gap: 10px; padding: 10px 11px; }
.sample-path-number { align-items: center; background: #49378b; border-radius: 999px; color: #fff; display: inline-flex; flex: 0 0 21px; font-size: 11px; font-weight: 700; height: 21px; justify-content: center; }
.sample-path-copy { flex: 1; min-width: 0; }
.sample-path-copy strong { color: #312c36; display: block; font-size: 12px; }
.sample-path-copy span { color: #706a75; display: block; font-size: 11px; line-height: 1.35; margin-top: 2px; }
.sample-path-step a { color: #49378b; flex: 0 0 auto; font-size: 11px; font-weight: 700; text-decoration: none; }
@media (max-width: 768px) { .sample-card-grid { grid-template-columns: 1fr; } .sample-card-inner { height: clamp(620px, 180vw, 760px); } }