/* MediaMirko V1.56: mobile focus + consistent readable preview */
/* On small screens the primary action and practical value come first; retain original hero photo on desktop. */
@media(max-width:730px){
 .mm-public .hero-visual{display:none!important}
 .mm-public .hero{padding-bottom:34px;gap:0}
}
/* Explicit legible text colors for EACH interactive tab in the light theme. */
html[data-mm-site-theme=light] .mm-public .demo-main,
html[data-mm-site-theme=light] .mm-public .demo-panel{color:#282124}
html[data-mm-site-theme=light] .mm-public .demo-feature-intro h2,
html[data-mm-site-theme=light] .mm-public .demo-after h2,
html[data-mm-site-theme=light] .mm-public .demo-intro h1,
html[data-mm-site-theme=light] .mm-public .mm-guide-sample-heading h3,
html[data-mm-site-theme=light] .mm-public .mm-guide-intro h2,
html[data-mm-site-theme=light] .mm-public .mm-topic-title strong,
html[data-mm-site-theme=light] .mm-public .demo-check-head strong{color:#292226}
html[data-mm-site-theme=light] .mm-public .mm-topic-title>small:last-child,
html[data-mm-site-theme=light] .mm-public .mm-guide-sample-heading p,
html[data-mm-site-theme=light] .mm-public .mm-topic-body p,
html[data-mm-site-theme=light] .mm-public .demo-feature-intro p{color:#62565a}
html[data-mm-site-theme=light] .mm-public .demo-feature-intro>span,
html[data-mm-site-theme=light] .mm-public .mm-guide-sample-heading>span{color:#a83b40}
html[data-mm-site-theme=light] .mm-public .demo-check-card label,
html[data-mm-site-theme=light] .mm-public .demo-check-card label>span,
html[data-mm-site-theme=light] .mm-public .demo-budget-inputs label{color:#32292d}
html[data-mm-site-theme=light] .mm-public .demo-locked p,
html[data-mm-site-theme=light] .mm-public .demo-budget-card small{color:#6d5c60}
html[data-mm-site-theme=light] .mm-public .mm-guide-topic[open] summary{background:#fff8f6}
html[data-mm-site-theme=light] .mm-public .mm-guide-topic summary:focus-visible{outline:2px solid #b94648;outline-offset:-2px}
/* Animated but keyboard-accessible native-sized checkbox control. */
.mm-public .demo-check-card input.demo-check{
 appearance:none;-webkit-appearance:none;position:relative;width:21px;height:21px;flex:0 0 21px;
 margin:0;border:1.5px solid #a4878c;border-radius:6px;background:transparent;
 cursor:pointer;transition:background-color .22s,border-color .22s,transform .2s,box-shadow .2s
}
.mm-public .demo-check-card input.demo-check::after{
 content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
 border-right:2px solid #24191b;border-bottom:2px solid #24191b;
 transform:rotate(45deg) scale(.45);opacity:0;
 transition:transform .2s cubic-bezier(.18,.87,.22,1.2),opacity .15s
}
.mm-public .demo-check-card input.demo-check:checked{background:#ff7972;border-color:#ff7972}
.mm-public .demo-check-card input.demo-check:checked::after{opacity:1;transform:rotate(45deg) scale(1)}
.mm-public .demo-check-card input.demo-check:checked{animation:mmCheckPop .3s cubic-bezier(.23,.9,.32,1.35)}
.mm-public .demo-check-card input.demo-check:focus-visible{outline:3px solid #ffada6;outline-offset:3px}
.mm-public .demo-check-card label>span{transition:color .24s,opacity .24s}
.mm-public .demo-check-card label:has(input:checked)>span{opacity:.7}
.mm-public .demo-check-card .demo-check-track i{transition:width .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mmCheckPop{0%{transform:scale(.8)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.mm-public .demo-check-card input.demo-check,.mm-public .demo-check-card input.demo-check::after,.mm-public .demo-check-card label>span{transition:none!important;animation:none!important}}