html{scroll-behavior:smooth}
body{margin:0;background:#FBF6E4;color:#1E2756;font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1E2756;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#4A52A8}
*{box-sizing:border-box}

/* Images: fill their frame by default (equivalent to the design's image-slot "cover") */
.fill{display:block;width:100%;height:100%;object-fit:cover}
/* Hand-framed crops from the design: centered at left/top, sized by width or height */
.crop{position:absolute;max-width:none;transform:translate(-50%,-50%)}

/* Pill buttons (hover states from the design's style-hover attributes) */
.btn{text-decoration:none;padding:14px 24px;border-radius:999px;font-weight:700;transition:background-color .2s,color .2s}
.btn-nav{text-decoration:none;background:#1E2756;color:#F7E9A8;padding:10px 18px;border-radius:999px;transition:background-color .2s,color .2s}
.btn-nav:hover{background:#4A52A8;color:#FBF6E4}
.btn-solid{background:#F7E9A8;color:#1E2756}
.btn-solid:hover{background:#FBF6E4;color:#1E2756}
.btn-outline{border:1.5px solid #F7E9A8;color:#F7E9A8}
.btn-outline:hover{background:#F7E9A8;color:#1E2756}
.email-link{color:#FBF6E4}
.email-link:hover{color:#F7E9A8}

/* Sound on/off button next to the social reel's stats (outside the flip card, so hovering to reach it doesn't flip the reel) */
.sound-toggle{margin-left:auto;align-self:center;flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid #F7E9A8;background:rgba(30,39,86,0.85);color:#F7E9A8;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color .2s,color .2s}
.sound-toggle:hover{background:#F7E9A8;color:#1E2756}
.sound-toggle:focus-visible{outline:2px solid #F7E9A8;outline-offset:3px}
.sound-toggle .icon-on,.sound-toggle[aria-pressed="true"] .icon-off{display:none}
.sound-toggle[aria-pressed="true"] .icon-on{display:block}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#1E2756;color:#F7E9A8;padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* Flip cards on the organic social posts: tap/click to see the assignment behind each post */
.flip{aspect-ratio:3/4;position:relative;perspective:1200px;cursor:pointer;container-type:inline-size}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:6px solid #F7E9A8;border-radius:18px;overflow:hidden}
.flip-front{background:#2A3470}
.flip-back{transform:rotateY(180deg);background:#F7E9A8;color:#1E2756;padding:22px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.flip-back h3{margin:0;font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.flip-back p{margin:0;font-size:15px;line-height:1.5}
.flip-btn{position:absolute;left:10px;bottom:10px;height:40px;padding:0 14px;border-radius:999px;border:1.5px solid #F7E9A8;background:rgba(30,39,86,0.85);color:#F7E9A8;font:700 13px Figtree,system-ui,sans-serif;display:flex;align-items:center;gap:6px;cursor:pointer;transition:background-color .2s,color .2s}
.flip-btn:hover{background:#F7E9A8;color:#1E2756}
.flip-btn:focus-visible{outline:2px solid #F7E9A8;outline-offset:3px}
/* The front button stays for keyboard users but only shows when focused */
.flip-front .flip-btn:not(:focus-visible){opacity:0;pointer-events:none}
.flip-back .flip-btn{position:static;margin-top:auto;align-self:flex-start;border-color:#1E2756;background:#1E2756}
.flip-back .flip-btn:hover{background:#FBF6E4;color:#1E2756}
.flip-back .flip-btn:focus-visible{outline-color:#1E2756}
/* Narrow cards (mid-size screens): tighten so the text fits without scrolling */
@container (max-width:240px){.flip-back{padding:16px;gap:8px}.flip-back p{font-size:13.5px;line-height:1.45}.flip-back .flip-btn{height:34px}}
/* Note above the posts: "hover" with a mouse, "tap" on touch screens */
.hint-tap{display:none}
@media (hover: none){.hint-hover{display:none}.hint-tap{display:inline}}
@media (prefers-reduced-motion: reduce){.flip-inner{transition:none}}