/* Components use the existing site's typography and palette. */
.vo-case-section { margin: 36px 0; }
.vo-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vo-case-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e4e4ea; border-radius: 14px; overflow: hidden; color: #2e363e; background: #fff; text-decoration: none !important; transition: border-color .15s ease; }
.vo-case-card:hover { border-color: #6836b8; color: #2e363e; }
.vo-case-card:focus-visible, .vo-article-offer a:focus-visible { outline: 3px solid #6836b8; outline-offset: 4px; }
.vo-case-media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #f1f1f6; }
.vo-case-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; margin: 0; }
.vo-case-placeholder { color: #626269; text-align: center; padding: 24px; }
.vo-case-body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.vo-case-body time { font-size: 13px; color: #626269; }
.vo-case-body h3 { font-size: 18px; font-weight: 700; line-height: 1.4; margin: 10px 0 16px; text-align: left; overflow-wrap: anywhere; }
.vo-case-more { margin-top: auto; font-size: 14px; font-weight: 600; color: #6836b8; }
.vo-article-offer { margin: 32px 0; padding: 26px; border: 1px solid #d8c8f1; border-left: 4px solid #975dfb; border-radius: 12px; background: #faf8ff; }
.vo-article-offer h2 { margin-top: 0; font-size: 24px; line-height: 1.35; }
.vo-article-offer p { text-align: left; }
.vo-article-offer .vo-offer-link { display: inline-flex; align-items: center; min-height: 46px; color: #6836b8; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
#mypopup_405e28906322882c5be9b4b27f4c35fd .mypopup-modal-close { min-width: 44px; min-height: 44px; padding: 13px; top: 3px; right: 3px; cursor: pointer; }
#mypopup_405e28906322882c5be9b4b27f4c35fd .mypopup-modal-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 1024px) {
    #mypopup_405e28906322882c5be9b4b27f4c35fd { display: none !important; }
    .hp-hero .hp-hero-subtitle { text-align: left; }
}
@media (max-width: 900px) { .vo-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .vo-case-grid { grid-template-columns: 1fr; }
    .vo-article-offer { padding: 20px; }
    .vo-article-offer h2 { font-size: 21px; }
    .vo-article-offer .vo-offer-link { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .vo-case-card { transition: none; } }