/* Original media, a single control layer, and motion that supports the story. */
#main-content .mq-cinema {
 --cinema-accent:#6b5bc8;
 max-width:1040px; margin:0 auto; overflow:hidden;
 background:#fff; border:1px solid #e1deea; border-radius:24px;
 box-shadow:0 18px 56px #34294c0b;
}
.mq-cinema-topline {
 display:flex; align-items:center; justify-content:space-between; gap:16px;
 padding:17px 24px; border-bottom:1px solid #eeeaf3;
 font-size:12px; color:#77717e; line-height:1.5;
}
.mq-cinema-topline>span:first-child {font-weight:600; color:#514460; letter-spacing:.1em}
.mq-cinema-screen {position:relative; background:#f8fafc}
.mq-cinema-screen video {display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#f8fafc}
.mq-cinema.is-enhanced video {cursor:pointer}
.mq-cinema-controls {
 display:grid; grid-template-columns:auto auto minmax(60px,1fr) auto;
 gap:16px; align-items:center; padding:12px 22px;
 border-top:1px solid #e9e6ef; background:#fff;
}
.mq-cinema-controls button {
 min-height:44px; border:0; border-radius:24px; padding:0;
 background:transparent; color:#36313f; display:inline-flex;
 align-items:center; justify-content:center; gap:7px;
}
.mq-cinema-controls .mq-cinema-toggle {padding:0 15px 0 12px; background:#292631; color:#fff; min-width:94px; font-size:14px; font-weight:550}
.mq-cinema-controls button:hover {background:#eeebf5}
.mq-cinema-controls .mq-cinema-toggle:hover {background:#514460}
.mq-cinema-controls svg {width:20px; height:20px; flex-shrink:0}
.mq-cinema-toggle svg {fill:currentColor}
.mq-cinema .mq-icon-pause,.mq-cinema.is-playing .mq-icon-play {display:none}
.mq-cinema.is-playing .mq-icon-pause {display:block}
.mq-cinema-time {font-size:12px; font-variant-numeric:tabular-nums; color:#746c7e; white-space:nowrap}
.mq-cinema-controls .mq-cinema-expand {width:44px}
.mq-cinema-seek {
 --played:0%; width:100%; min-width:0; height:44px; padding:0; margin:0;
 appearance:none; -webkit-appearance:none; cursor:pointer;
 background:transparent; border:0; border-radius:4px; accent-color:var(--cinema-accent);
}
.mq-cinema-seek::-webkit-slider-runnable-track {height:4px; border-radius:4px; background:linear-gradient(to right,var(--cinema-accent) var(--played),#e7e3ed var(--played))}
.mq-cinema-seek::-webkit-slider-thumb {appearance:none; -webkit-appearance:none; width:12px; height:12px; border:2px solid #fff; margin-top:-4px; border-radius:50%; background:var(--cinema-accent); box-shadow:0 0 0 1px #6b5bc833}
.mq-cinema-seek::-moz-range-track {height:4px; border-radius:4px; background:#e7e3ed}
.mq-cinema-seek::-moz-range-progress {height:4px; background:var(--cinema-accent)}
.mq-cinema-seek::-moz-range-thumb {width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:var(--cinema-accent)}
.mq-cinema-chapters {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #e9e6ef; background:#faf9fc}
.mq-cinema-chapters button {
 position:relative; display:flex; align-items:center; gap:13px; min-width:0;
 padding:23px 22px 26px; border:0; border-right:1px solid #e9e6ef;
 background:transparent; text-align:left; color:#6d6676;
 transition:background .25s,color .25s;
}
.mq-cinema-chapters button:last-child {border-right:0}
.mq-cinema-chapters button:hover {background:#f0edf8}
.mq-cinema-chapters button[aria-pressed=true] {background:#f0ecfa; color:#5745ae}
.mq-chapter-number {font-size:12px; letter-spacing:.03em; display:grid; place-items:center; border:1px solid #ddd6ea; background:#fff; width:30px; height:30px; border-radius:50%; flex-shrink:0}
.mq-cinema-chapters button[aria-pressed=true] .mq-chapter-number {color:#fff; background:#6b5bc8; border-color:#6b5bc8}
.mq-cinema-chapters strong {font-size:16px; font-weight:550; line-height:1.35; display:block; color:inherit}
.mq-cinema-chapters small {font-size:12px; color:#74697f; display:block; margin-top:5px; line-height:1.4}
.mq-chapter-track {position:absolute; bottom:0; left:0; right:0; height:3px; background:#e9e3f2; overflow:hidden}
.mq-chapter-track:after {content:""; display:block; width:100%; height:100%; background:var(--cinema-accent); transform:scaleX(var(--chapter-progress,0)); transform-origin:left}
#main-content .mq-cinema figcaption {padding:14px 22px; color:#7d7485; font-size:12px; line-height:1.5; text-align:center; background:#fff}
#main-content .mq-cinema-message,#main-content .mq-cinema-fallback {font-size:14px; padding:0 22px 16px; line-height:1.5}
.mq-cinema-fallback a {text-decoration:underline; color:var(--cinema-accent)}
.mq-cinema.is-buffering .mq-cinema-time {opacity:.55}
.mq-cinema :is(button,input):focus-visible {outline:3px solid #8b79d8; outline-offset:-4px}
#main-content .mq-cinema:fullscreen {display:flex; flex-direction:column; width:100%; max-width:none; height:100%; border-radius:0; background:#f8fafc; border:0; overflow:auto}
.mq-cinema:fullscreen .mq-cinema-screen {flex:1; min-height:0; display:flex; align-items:center; justify-content:center}
.mq-cinema:fullscreen video {width:100%; height:100%; min-height:0; object-fit:contain}
.mq-cinema:fullscreen .mq-cinema-topline,.mq-cinema:fullscreen .mq-cinema-controls,.mq-cinema:fullscreen .mq-cinema-chapters,.mq-cinema:fullscreen figcaption {flex-shrink:0}

/* Touch-safe feedback; motion never carries essential content or pricing. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .mq-prelaunch .mq-reserve-device,.mq-prelaunch .mq-reserve-phone,.mq-prelaunch .mq-kit-art img {transition:transform .7s cubic-bezier(.2,.7,.2,1)}
 .mq-prelaunch .mq-reserve-visual:hover .mq-reserve-device {transform:translateY(-7px) rotate(-2deg)}
 .mq-prelaunch .mq-reserve-visual:hover .mq-reserve-phone {transform:translateY(-4px) rotate(5deg)}
 .mq-prelaunch .mq-kit-art:hover img {transform:translateY(-6px)}
 .mq-prelaunch .mq-bundle {transition:border-color .25s,box-shadow .25s}
 .mq-prelaunch .mq-bundle:hover {border-color:#baabd7; box-shadow:0 12px 32px #5b457513}
 .mq-prelaunch .mq-flow-image>img {transition:transform .65s cubic-bezier(.2,.7,.2,1)}
 .mq-prelaunch .mq-flow-step:hover .mq-flow-image>img {transform:scale(1.035)}
}
@media(max-width:700px) {
 #main-content .mq-cinema {border-radius:16px}
 .mq-cinema-topline {padding:12px 14px; gap:10px; flex-wrap:wrap; font-size:12px}
 .mq-cinema-topline>span:first-child {letter-spacing:.07em}
 .mq-cinema-controls {grid-template-columns:auto minmax(0,1fr) auto; padding:9px 12px; gap:6px 10px}
 .mq-cinema-controls .mq-cinema-toggle {min-width:82px; padding-inline:10px; font-size:13px}
 .mq-cinema-time {justify-self:center; font-size:12px}
 .mq-cinema-seek {grid-column:1/-1; grid-row:2; height:24px}
 .mq-cinema-controls .mq-cinema-expand {grid-column:3; grid-row:1}
 .mq-cinema-chapters button {padding:16px 10px 19px; flex-direction:column; align-items:flex-start; gap:9px}
 .mq-cinema-chapters strong {font-size:14px}
 .mq-cinema-chapters small {font-size:12px}
 .mq-chapter-number {width:26px; height:26px; font-size:12px}
 #main-content .mq-cinema figcaption {font-size:12px; padding:12px 14px}
 .mq-cinema:fullscreen .mq-cinema-chapters small {display:none}
 .mq-cinema:fullscreen .mq-cinema-chapters button {flex-direction:row; align-items:center; padding-block:10px}
}
@media(prefers-reduced-motion:reduce) {
 .mq-cinema *,.mq-cinema *:after,.mq-prelaunch .mq-reserve-visual img {animation:none!important; transition:none!important}
}
