.paired-introduction{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;margin-top:64px;padding-top:48px;border-top:1px solid var(--flush-border)}
.pairing-copy{display:flex;flex-direction:column;gap:24px;max-width:480px}
.pairing-demo{width:100%;max-width:520px;min-width:0;margin:auto}
.pairing-example summary{display:flex;list-style:none;cursor:pointer;margin:24px auto 0;width:max-content;max-width:100%;min-width:220px}
.pairing-example summary::-webkit-details-marker{display:none}
.pairing-example summary:focus-visible{outline:2px solid var(--flush-dark);outline-offset:4px;box-shadow:0 0 0 2px white}
.pairing-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:12px 8px}
.introduction-card{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0;min-height:248px;padding:24px;border:1px solid var(--flush-border);border-radius:var(--flush-radius);background:var(--flush-surface);transform:rotate(-3deg);transition:transform .35s ease,background-color .35s ease}
.introduction-card+ .introduction-card{transform:rotate(3deg)}
.card-label{color:var(--flush-action)}
.card-story,.card-brand{font-family:'Instrument Serif',Georgia,serif;font-size:32px;line-height:38px;font-weight:400}
.card-brand{font-size:24px;line-height:30px}
.pairing-open-label,.card-after{display:none}
.pairing-explanation{margin-top:24px;color:var(--flush-muted)}
.pairing-demo:has(details[open]) .introduction-card{transform:rotate(0)}
.pairing-example[open] .pairing-closed-label,.pairing-demo:has(details[open]) .card-before{display:none}
.pairing-example[open] .pairing-open-label{display:inline}
.pairing-demo:has(details[open]) .card-after{display:block;animation:card-reveal .35s ease both}
@keyframes card-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.paired-introduction{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:48px;padding-top:32px}.pairing-copy{max-width:none}.introduction-card{padding:16px}.card-story{font-size:28px;line-height:32px}}
@media(prefers-reduced-motion:reduce){.introduction-card{transition:none;transform:none}.introduction-card+ .introduction-card{transform:none}.pairing-demo:has(details[open]) .card-after{animation:none}}