/* v1.1: the existing runtime retains exclusive ownership of the arc transform. */
.ring-card{padding:0;overflow:visible}
.flip-surface{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 480ms cubic-bezier(.22,1,.36,1)}
.ring-card.is-flipped .flip-surface{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;box-sizing:border-box;border-radius:24px;background:#fff;color:#1b1113;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;padding:22px}
.flip-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-decoration:none}
.flip-front:focus-visible,.flip-toggle:focus-visible{outline:2px solid #d72e4c;outline-offset:4px}
.flip-back{transform:rotateY(180deg);padding:45px 25px 22px;overflow:auto;user-select:text;text-align:left}
.flip-back h3{font-size:19px;line-height:1.35;letter-spacing:-.03em;margin:0 0 18px}
.flip-back h4{font-size:10px;font-weight:600;color:#856d72;margin:12px 0 4px;letter-spacing:.04em}
.flip-back p{font-size:12px;line-height:1.65;margin:0;color:#45383b}
.flip-toggle{position:absolute;z-index:2;right:13px;top:13px;padding:7px 10px;border:0;border-radius:14px;background:#f5f0f1;color:#725960;font:11px/1.2 system-ui;cursor:pointer;touch-action:manipulation}
.ring-card:not(.is-active) .flip-toggle{visibility:hidden}
@media(max-width:860px),(max-height:740px){.ring-card .flip-toggle{visibility:visible}}
@media(prefers-reduced-motion:reduce){.flip-surface{transition:none}}
/* Both faces own exactly the same box; never inherit the page's section margin. */
.flip-surface{flex:0 0 100%;min-height:0}
.flip-front,.flip-back{margin:0;width:100%;height:100%;min-height:0}
.flip-source{display:inline-block;margin-top:16px;color:#b42a46;font:600 12px/1.4 system-ui;text-decoration:none}
.ring-card:focus-visible{outline:2px solid #d72e4c;outline-offset:5px}
@media(hover:hover) and (pointer:fine){.flip-toggle{display:none}.flip-back{padding-top:25px}}