/* Compact, balanced composition scoped to the Event App. */
html body #app .story-design-app-events .section-shell{width:calc(100% - 48px);max-width:1040px;margin-inline:auto}
html body #app .story-design-app-events .product-story-hero{padding-block:64px;min-height:0}
html body #app .story-design-app-events .product-story-hero-visual{min-height:530px}
html body #app .story-design-app-events .product-story-block{padding-block:64px;min-height:0;opacity:1;visibility:visible;transform:none}
html body #app .story-design-app-events .story-block-head{margin-bottom:28px;max-width:700px}
html body #app .story-design-app-events .story-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
html body #app .story-design-app-events .story-card-grid article{min-height:0;padding:26px;border-radius:20px}
html body #app .story-design-app-events .story-card-grid h3{margin-top:18px}
html body #app .story-design-app-events .story-card-grid p{max-width:42ch;margin-bottom:0}
html body #app .story-design-app-events .story-steps{background:#eaf6ed}
html body #app .story-design-app-events .story-stepper{grid-template-columns:.9fr 1.1fr;gap:24px;padding:24px;border:1px solid #c9dfd0;border-radius:24px;background:#fff;opacity:1;visibility:visible;transform:none}
html body #app .story-design-app-events .story-stepper nav{justify-content:center;gap:12px}
html body #app .story-design-app-events .story-stepper nav button{min-height:74px;transform:none}
html body #app .story-design-app-events .story-step-panels{min-height:290px;border-radius:18px;background:#083e2e}
html body #app .story-design-app-events .story-step-panels article{padding:30px;justify-content:center}
html body #app .story-design-app-events .story-step-panels small{color:#b9f065}
html body #app .story-design-app-events .story-step-panels h3{color:#fff;font-size:32px;line-height:1.15}
html body #app .story-design-app-events .story-step-panels p{color:#d3e5dc;line-height:1.65}
html body #app .story-design-app-events .story-faq{padding-block:64px}
html body #app .story-design-app-events .story-faq>.section-shell{grid-template-columns:.8fr 1.2fr;gap:40px}
html body #app .story-design-app-events .faq-list{padding:8px 24px;border:1px solid #d5e5d9;border-radius:20px;background:#fff}
html body #app .story-design-app-events .story-closing{padding-block:64px}
@media(max-width:767px){
 html body #app .story-design-app-events .section-shell{width:calc(100% - 32px)}
 html body #app .story-design-app-events .story-stepper{grid-template-columns:1fr;padding:16px;gap:16px}
 html body #app .story-design-app-events .story-step-panels{min-height:280px}
 html body #app .story-design-app-events .story-step-panels article{padding:24px}
 html body #app .story-design-app-events .story-faq>.section-shell{grid-template-columns:1fr;gap:24px}
 html body #app .story-design-app-events .product-story-hero-visual{min-height:0}
}
/* The localized pages retain the original Events component markup. */
.ep-page .ep-shell{width:min(1040px,calc(100% - 40px));margin-inline:auto}
.ep-page :is(.ep-problem,.ep-flow,.ep-lifecycle,.ep-faq,.ep-cta){padding-block:72px}
.ep-page .ep-problem-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.ep-page .ep-problem-card,.ep-page .ep-problem-card:nth-child(2){min-height:0;padding:22px}
.ep-page .ep-card-visual,.ep-page .ep-problem-card:nth-child(2) .ep-card-visual{height:200px}
.ep-page .ep-flow-console{grid-template-columns:170px minmax(0,360px) minmax(0,1fr);padding:24px;gap:24px}
.ep-page .ep-live-app{width:100%;max-width:360px}
.ep-page .ep-life-stage{min-height:0;padding:30px;gap:30px;grid-template-columns:.8fr 1.2fr}
.ep-page .ep-life-ui{min-height:360px;transform:none}
.ep-page .ep-life-copy h3{font-size:36px}
.ep-page .ep-faq-grid{gap:40px}
@media(max-width:1000px){
 .ep-page .ep-problem-grid{grid-template-columns:1fr}
 .ep-page .ep-flow-console{display:flex;flex-wrap:wrap;justify-content:center}
 .ep-page .ep-life-stage{grid-template-columns:1fr}
}
@media(max-width:767px){
 html body #app .story-design-app-events .product-story-nav{position:relative;top:auto}
 html body #app .story-design-app-events .story-stepper nav{display:flex!important;flex-direction:column!important;overflow:visible!important}
 html body #app .story-design-app-events .story-stepper nav button{width:100%!important;min-width:0!important;flex:auto!important;min-height:60px;text-align:start}
 .ep-page :is(.ep-problem,.ep-flow,.ep-lifecycle,.ep-faq,.ep-cta){padding-block:44px}
}