/* SSFD change over the approved package: tap-to-flip, the same interaction as the Online Petroleum
   cards (rotateY 180deg, .44s cubic-bezier(.4,0,.2,1), tap the card, Enter/Space from the keyboard).
   Replaces the client-preview Front/Back bar. The two approved faces are untouched; only their
   container changes. */
html,body{margin:0;height:100%;background:#0c0b09;overflow:hidden}
.card-flip-host{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
.card-flip{--w:min(760px,calc(100vw - 32px),calc((100svh - 32px) * 1.72));position:relative;width:var(--w);aspect-ratio:1.72;
  perspective:1400px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;border-radius:clamp(18px,4.5%,30px)}
.card-flip:focus-visible{outline:2px solid #cda865;outline-offset:6px}
.card-flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .44s cubic-bezier(.4,0,.2,1)}
.card-flip.is-flipped .card-flip-inner{transform:rotateY(180deg)}
.card-flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-flip-front{transform:rotateY(0deg)}
.card-flip-back{transform:rotateY(180deg)}
/* the approved faces size themselves with --w; inside the flip they take the card's width instead */
.card-flip .nsl-front,.card-flip .nsl-back{width:100%}
/* the back's showcase runs only while the back is showing; it resumes where it paused */
.card-flip:not(.is-flipped) .nsl-back *{animation-play-state:paused!important}
/* portrait phones: the same sideways turn the approved package used, applied to the whole card */
@media (orientation:portrait) and (max-width:760px){
  .card-flip{--w:min(760px,calc(100svh - 36px),calc((100vw - 24px) * 1.72));position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){.card-flip-inner{transition:none}}