.mk-section{--mk-accent:#d63825;max-width:1280px;margin:80px auto;padding:0 40px;color:inherit;box-sizing:border-box}.mk-section *{box-sizing:border-box}.mk-heading{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:26px}.mk-eyebrow{font-size:11px;letter-spacing:2px;margin:0 0 16px}.mk-section h2{font-size:clamp(28px,3.2vw,46px);line-height:1.2;letter-spacing:-.025em;margin:0}.mk-heading>p{font-size:15px;line-height:1.8;margin:0;max-width:470px}.mk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid #909c9940}.mk-select{display:flex;gap:22px}.mk-section button{font:inherit;color:inherit;cursor:pointer;box-shadow:none;border-radius:0;background:none}.mk-select button{padding:10px 0;border:0;border-bottom:2px solid transparent;font-size:14px}.mk-select button[aria-pressed=true]{color:var(--mk-accent);border-bottom-color:var(--mk-accent)}.mk-section .mk-play{border:1px solid #909c9955;padding:8px 12px;font-size:12px;min-height:36px}.mk-section button:hover{background:#909c9912}.mk-section button:focus-visible{outline:2px solid var(--mk-accent);outline-offset:3px}.mk-frame{position:relative;aspect-ratio:2;background:#e8ebe8;overflow:hidden;border:1px solid #909c9955;--split:50%;isolation:isolate}.mk-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;user-select:none}.mk-frame .mk-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:1}.mk-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:2px;background:white;box-shadow:0 0 4px #0009;pointer-events:none}.mk-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#243b32;border:1px solid #ccd3d0;font:23px Arial;box-shadow:0 3px 18px #0003}.mk-section .mk-range{position:absolute;z-index:5;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;appearance:none;border:0;background:transparent}.mk-range::-webkit-slider-thumb{appearance:none;width:1px;height:100%}.mk-range::-moz-range-thumb{width:1px;border:0}.mk-frame:has(.mk-range:focus-visible) .mk-divider span{outline:2px solid #263d35;outline-offset:3px}.mk-label{position:absolute;z-index:4;top:12px;background:#fffef2ed;color:#25372f;font-size:11px;letter-spacing:1px;padding:8px 12px;pointer-events:none}.mk-label-before{left:12px}.mk-label-after{right:12px;background:#163c32ed;color:white}.mk-track{height:2px;background:#b9c5c14d}.mk-progress{height:100%;width:0;background:var(--mk-accent)}.mk-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0 12px}.mk-case{font-size:19px;font-weight:600;margin:0}.mk-detail{font-size:13px;margin:6px 0 0;line-height:1.6}.mk-count{font:12px monospace;white-space:nowrap}.mk-note{font-size:12px;line-height:1.6;color:#576964;margin:8px 0}.mk-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #909c9940;padding-top:15px}.mk-bottom a{color:inherit;font-size:14px;text-decoration:none;border-bottom:1px solid;padding-bottom:4px}.mk-help{font-size:12px;margin:0;color:#576964}@media(max-width:700px){.mk-section{margin:45px auto;padding:0 20px}.mk-heading{grid-template-columns:1fr;gap:16px}.mk-heading>p{font-size:14px}.mk-select{gap:14px}.mk-select button{font-size:13px}.mk-label{font-size:9px;padding:5px 8px;top:8px}.mk-label-before{left:8px}.mk-label-after{right:8px}.mk-divider span{width:40px;height:40px}.mk-caption{gap:10px}.mk-case{font-size:17px}.mk-bottom{align-items:start;flex-direction:column;gap:10px}.mk-note{font-size:11px}}@media(prefers-reduced-motion:reduce){.mk-section *{scroll-behavior:auto!important;transition:none!important}}
.mk-section .mk-play{white-space:nowrap;flex-shrink:0}@media(max-width:400px){.mk-toolbar{gap:10px}.mk-select{gap:12px}.mk-select button{font-size:12px;white-space:nowrap}.mk-section .mk-play{font-size:11px;padding:8px}}

.mk-section{scroll-margin-top:110px}

/* Corner ribbons belong to the comparison, not the sample sites. */
.mk-section .mk-label{top:0;width:100px;height:100px;padding:0;letter-spacing:.06em;background:#333b3c;color:white;font-size:12px;clip-path:polygon(0 0,100% 0,0 100%)}
.mk-section .mk-label-before{left:0;right:auto}.mk-section .mk-label-after{right:0;left:auto;background:#315849;clip-path:polygon(0 0,100% 0,100% 100%)}
.mk-label span{position:absolute;display:block;width:80px;left:-3px;top:27px;text-align:center;transform:rotate(-45deg)}.mk-label-after span{left:auto;right:-3px;transform:rotate(45deg)}
.mk-select button{white-space:nowrap}.mk-section .mk-play{white-space:nowrap}.mk-frame:focus-within{outline:none}
@media(max-width:600px){.mk-section .mk-label{width:65px;height:65px;font-size:9px}.mk-label span{width:56px;left:-4px;top:17px}.mk-label-after span{left:auto;right:-4px}.mk-toolbar{gap:8px}.mk-select{gap:10px}.mk-select button{font-size:12px}.mk-section .mk-play{padding:7px;font-size:11px}}