/* Card Flip adapted from Kokonut UI (MIT), Dorian Baffier. */
.flipService { perspective:2000px; min-width:0; }
.flipServiceInner { display:grid; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.77,0,.175,1); }
.flipService.isFlipped .flipServiceInner { transform:rotateY(180deg); }
.flipFace { grid-area:1/1; display:flex; flex-direction:column; gap:20px; min-width:0; min-height:370px; padding:25px; border:1px solid var(--border); border-radius:18px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flipFront { background:linear-gradient(145deg,#19191b,#111113); transform:rotateY(0deg); }
.flipBack { background:var(--green,#b8ff5a); color:#0b0b0c; border-color:var(--green,#b8ff5a); transform:rotateY(180deg); }
.flipFace h3 { margin:10px 0 0; font-size:22px; line-height:1.3; letter-spacing:-.025em; }
.flipFace p { margin:0; font-size:14px; line-height:1.7; color:var(--muted,#9b9b9f); }
.flipBack p { color:#293619; }
.flipFace .cardNumber { align-self:flex-start; }
.flipFront h3 { margin-top:16px; }
.flipFace button,.flipFace a { font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.flipOpen { margin-top:auto; padding:12px 0 0; border:0; background:transparent; color:var(--green,#b8ff5a); text-align:left; }
.flipBackTop { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.flipBackTop span { font-size:12px; letter-spacing:.1em; font-weight:700; }
.flipClose { border:1px solid #0b0b0c40; border-radius:8px; padding:8px 10px; color:#0b0b0c; background:transparent; }
.flipBack h3 { margin:0; }
.flipFeatures { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.flipFeatures li { display:flex; gap:9px; font-size:14px; line-height:1.5; opacity:0; transform:translateX(-10px); transition:transform .3s ease,opacity .3s ease; }
.flipFeatures li::before { content:'✓'; font-weight:700; }
.isFlipped .flipFeatures li { opacity:1; transform:none; transition-delay:calc(150ms + var(--i)*50ms); }
.flipCTA { margin-top:auto; display:block; border-top:1px solid #0b0b0c40; padding-top:16px; color:#0b0b0c; text-decoration:none; }
.flipFace :focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:4px; }
@media(prefers-reduced-motion:reduce) {
 .flipServiceInner,.flipFeatures li { transition:none; }
 .flipService.isFlipped .flipServiceInner,.flipFront,.flipBack { transform:none; }
 .flipFace[aria-hidden="true"] { visibility:hidden; }
}