/* Shared phone chassis for the two new third-edition sections. */
.media-section-heading{text-align:center;max-width:780px;margin:0 auto 46px;padding:0 24px}
.media-section-heading h2{margin:18px 0 16px;font-size:clamp(44px,5vw,72px)}
.media-section-heading>p[lang]{font-size:16px;color:var(--muted)}
.media-preview-label{font-size:12px;color:#78677d;margin-top:17px}
.video-showcase{background:#fff;max-width:none;border-bottom:1px solid var(--line)}
.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:70px;justify-content:center;margin:auto}
.showcase-grid article{text-align:center;min-width:0}
.phone-frame{position:relative;aspect-ratio:9/16;border-radius:28px;border:3px solid #3c334520;overflow:hidden;background:#292330;box-shadow:0 20px 45px -24px #30233766}
.phone-frame:after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:48px;height:5px;border-radius:999px;background:#18121e50;pointer-events:none;z-index:2}
.video-phone{width:100%}.video-empty{height:100%;position:relative;background:#eee8f2;color:#403245;display:flex;flex-direction:column;justify-content:center}
.video-phone:nth-child(2){background:#fbe7ea}.phone-kicker{position:absolute;top:34px;left:0;right:0;font-size:10px;letter-spacing:.12em}
.video-empty .media{flex:none}.video-empty-caption{position:absolute;bottom:0;left:0;right:0;text-align:left;background:linear-gradient(transparent,#26202ce8 26%);color:white;padding:45px 22px 22px}
.video-empty-caption>span{font-size:10px;letter-spacing:.12em;color:#dccfe1}.video-empty-caption strong{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:34px;line-height:1.2;font-weight:400;margin:10px 0}.video-empty-caption p{font-size:11px;line-height:1.9;color:#e1d4e6}
.video-phone video{display:block;width:100%;height:100%;object-fit:contain;background:#17131b}
.showcase-grid h3{font-size:32px;margin:24px 0 12px}.showcase-grid article>p{font-size:13px;color:var(--muted);line-height:1.8}
.media-footnote{text-align:center;font-size:12px;color:var(--muted);margin:32px 24px 0;line-height:1.9}
.screenshot-wall{padding:90px 0;background:#f4edf5;overflow:hidden}
.wall-pause{border-radius:999px;background:#fff;border:1px solid #d4c4da;padding:10px 20px;margin-top:22px;min-height:44px;font-size:12px}.wall-pause:hover{background:#ece1f1}
.marquee-viewport{overflow:hidden;padding:10px 0 22px}
.marquee-track{display:flex;width:max-content;animation:wall-left 44s linear infinite;will-change:transform}
.reverse .marquee-track{animation:wall-right 50s linear infinite}
.marquee-group{display:flex;gap:18px;padding-right:18px;flex:none}
.screenshot-phone{width:180px;flex:none;display:block;padding:0;text-align:left;border-radius:23px;font:inherit;color:var(--ink)}
.screenshot-phone img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.screenshot-mock{height:100%;position:relative;display:flex;flex-direction:column;background:#fff}
.mock-header{padding:26px 12px 12px;font-size:12px;font-weight:500;background:rgba(var(--tone),.28)}
.mock-badge{padding:8px 9px;font-size:8px;color:#796a7c;letter-spacing:.04em;background:#faf8fb;text-align:center}
.mock-content{display:flex;flex-direction:column;gap:13px;padding:16px 10px;justify-content:center;flex:1}
.mock-bubble{padding:13px 9px;background:#eae5ed;border-radius:9px;width:88%}
.mock-bar{display:block;width:100%;height:5px;border-radius:9px;background:#80738633;margin:5px 0}.mock-bar:last-child{width:65%}
.mock-label{font-size:10px;text-align:center;margin:10px 5px 16px;color:#73637a}
.message-mock{background:#eee6dc}.message-mock .mock-header{background:#17675d;color:#fff}
.message-mock .mock-bubble{background:#fff}.message-mock .mock-bubble:nth-child(2){background:#d4ebc8;align-self:flex-end}
.review-mock .mock-content{justify-content:flex-start;padding-top:25px}.review-mock .mock-bubble{width:100%;background:rgba(var(--tone),.15)}
.paused .marquee-track,.offscreen .marquee-track,.viewing .marquee-track,.marquee-viewport:hover .marquee-track,.marquee-viewport:focus-within .marquee-track{animation-play-state:paused}
@keyframes wall-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wall-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
#screenshot-dialog{width:min(470px,94vw)}#screenshot-dialog h2{font-size:28px;padding-right:30px}#screenshot-full{display:block;max-width:100%;max-height:70dvh;object-fit:contain;margin:auto}.screenshot-close{position:absolute;right:12px;top:10px;width:40px;height:40px;font-size:28px;background:transparent}
@media(max-width:767px){.showcase-grid{gap:36px;grid-template-columns:minmax(0,270px)}.media-section-heading{padding:0;margin-bottom:30px}.media-section-heading h2{font-size:48px}.media-section-heading>p[lang]{font-size:13px}.media-preview-label{font-size:11px}.screenshot-wall{padding:60px 0}.screenshot-wall>.media-section-heading{padding:0 24px}.screenshot-phone{width:154px}.marquee-group{gap:12px;padding-right:12px}.mock-header{font-size:11px}.mock-badge{font-size:7px}.mock-content{padding:10px;gap:8px}.mock-bubble{padding:8px}.media-footnote{font-size:11px}.showcase-grid h3{margin-top:19px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important;transform:none!important;will-change:auto}.marquee-group:nth-child(2){display:none}.marquee-viewport{overflow-x:auto}.wall-pause{display:none}}
/* Keep every placeholder label inside the 9:16 phone at all sizes. */
.mock-content{min-height:0;gap:10px}.mock-bubble{padding:9px}.mock-bar{height:4px;margin:4px 0}.mock-header,.mock-badge,.mock-label{flex-shrink:0}
@media(max-width:767px){.mock-content{gap:8px}.mock-bubble{padding:7px}}