.cf-story-is-open { overflow: hidden; }
.cf-story { display: inline-block; }
.cf-story__launcher { min-height: 48px; padding: 12px 18px; border: 2px solid #d4a63f; border-radius: 5px; color: #153b2b; background: #f2c75c; font: 750 14px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.cf-story__launcher:hover { transform: translateY(-1px); }
.cf-story__launcher:focus-visible, .cf-story button:focus-visible { outline: 3px solid #2d7454; outline-offset: 3px; }
.cf-story__backdrop { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2, 18, 12, .86); backdrop-filter: blur(10px); }
.cf-story__dialog { width: min(1020px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: #173d2c; background: #f5f1e8; box-shadow: 0 38px 110px rgba(0,0,0,.5); }
.cf-story__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 25px; color: #fff; background: #173d2c; }
.cf-story__header div > * { display: block; }
.cf-story__header small { color: #efca73; font: 900 10px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .13em; }
.cf-story__header strong { margin-top: 5px; font: 500 19px/1.3 Georgia, serif; }
.cf-story__header button { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: transparent; font-size: 25px; cursor: pointer; }
.cf-story__tabs { display: grid; grid-template-columns: repeat(var(--cf-story-steps, 5), minmax(0, 1fr)); gap: 8px; padding: 17px 24px; border-bottom: 1px solid #d9dbd4; background: #fff; }
.cf-story__tabs button { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid transparent; border-radius: 8px; color: #65736b; background: transparent; text-align: left; cursor: pointer; }
.cf-story__tabs i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border: 1px solid #cbd3cd; border-radius: 50%; font: 900 10px/1 Inter, sans-serif; font-style: normal; }
.cf-story__tabs span { font: 800 11px/1.3 Inter, sans-serif; }
.cf-story__tabs button.is-active { border-color: #3e7858; color: #fff; background: #3e7858; }
.cf-story__tabs button.is-active i, .cf-story__tabs button.is-complete i { border-color: #3e7858; color: #fff; background: #3e7858; }
.cf-story__panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 38px; align-items: center; min-height: 430px; padding: clamp(28px, 5vw, 52px); }
.cf-story__copy > small { color: #397557; font: 900 10px/1.3 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cf-story__copy h2 { margin: 15px 0 14px; color: #173d2c; font: 500 clamp(31px, 4vw, 44px)/1.06 Georgia, serif; }
.cf-story__copy p { margin: 0; color: #52665b; font: 400 15px/1.65 Inter, ui-sans-serif, system-ui, sans-serif; }
.cf-story__evidence { min-height: 250px; display: flex; flex-direction: column; justify-content: center; padding: clamp(25px, 4vw, 42px); border: 1px solid #d2dbd4; border-top: 5px solid #d3a13e; border-radius: 14px; background: #fff; box-shadow: 0 16px 38px rgba(24,58,40,.1); }
.cf-story__evidence small { color: #65776d; font: 900 10px/1.3 Inter, sans-serif; letter-spacing: .1em; }
.cf-story__evidence strong { display: block; margin: 16px 0 10px; color: #173d2c; font: 500 27px/1.12 Georgia, serif; }
.cf-story__evidence p { margin: 0; color: #53665c; font: 500 13px/1.55 Inter, sans-serif; }
.cf-story__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 25px; border-top: 1px solid #d7dcd7; background: #fff; }
.cf-story__footer p { max-width: 650px; margin: 0; color: #52665b; font: 400 12px/1.5 Inter, sans-serif; }
.cf-story__footer p strong { color: #173d2c; }
.cf-story__footer > div { display: flex; gap: 8px; }
.cf-story__footer button { min-height: 44px; padding: 0 14px; border: 1px solid #cbd2cc; border-radius: 6px; color: #173d2c; background: #fff; font: 850 11px/1 Inter, sans-serif; cursor: pointer; }
.cf-story__footer button:last-child { border-color: #173d2c; color: #fff; background: #173d2c; }
.cf-story__footer button:disabled { opacity: .38; cursor: not-allowed; }
[hidden].cf-story__backdrop, [hidden].cf-story__panel { display: none; }
@media (max-width: 760px) {
    .cf-story__backdrop { padding: 8px; }
    .cf-story__dialog { max-height: calc(100vh - 16px); border-radius: 14px; }
    .cf-story__header { padding: 15px 17px; }
    .cf-story__tabs { gap: 4px; padding: 9px; }
    .cf-story__tabs button { justify-content: center; padding: 5px; }
    .cf-story__tabs span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cf-story__panel { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 25px 18px; }
    .cf-story__evidence { min-height: 180px; }
    .cf-story__footer { align-items: stretch; flex-direction: column; padding: 14px 17px; }
    .cf-story__footer > div { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-story *, .cf-story *::before, .cf-story *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .cf-story__launcher:hover { transform: none; }
}