/* Opt-in product screenshots: the Teams reference in Lijix's existing palette. */
.mp-screenshot-page .mp-feature-story { padding-block:76px; border-bottom:1px solid var(--neutral-200); scroll-margin-top:28px; }
.mp-screenshot-page .mp-feature-story:last-child { border-bottom:0; }
.mp-screenshot-page .mp-reference-feature { padding:0; gap:56px; border:0; }
.mp-screenshot-page .mp-reference-feature .mp-feature-copy { order:0; }
.mp-category { display:inline-flex; padding:7px 14px; margin-bottom:22px; border:1px solid #c7ece4; border-radius:100px; color:var(--brand); background:#effbf7; font-size:11px; font-weight:600; line-height:1.5; letter-spacing:1px; text-transform:uppercase; }
.mp-capability-tiles { list-style:none; padding:0; margin:30px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mp-capability-tiles li { display:flex; align-items:flex-start; gap:14px; padding:20px 16px; border:1px solid var(--neutral-200); border-radius:20px; background:#fff; box-shadow:0 8px 24px #122a2405; }
.mp-benefit-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border:1px solid #d4f1e9; border-radius:14px; background:#effbf7; color:var(--brand); }
.mp-benefit-icon svg { width:21px; height:21px; }
.mp-capability-tiles strong { display:block; font-size:14px; font-weight:600; line-height:1.5; }
.mp-capability-tiles p { margin-top:5px; color:var(--secondary); font-size:12px; line-height:1.65; }
.mp-screenshot-page .mp-feature-copy > .mp-chips { margin-top:26px; }
.mp-screenshot-page .mp-feature-copy > .mp-chips > span { padding:9px 12px; border-color:#d4f1e9; border-radius:100px; color:var(--brand); background:#f4fcf9; font-size:11px; }
.mp-web-shot,.mp-mobile-shot { margin:0; min-width:0; }
.mp-shot-frame { position:relative; border:1px solid var(--neutral-200); border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 24px 65px #0f827b12; }
.mp-shot-frame .mp-browser-bar { background:#f7faf9; }
.mp-shot-surface { padding:22px; background:linear-gradient(145deg,#f4fbf8,#fff); }
.mp-shot-label { display:inline-flex; padding:7px 13px; margin-bottom:16px; border:1px solid #d4f1e9; border-radius:100px; background:#fff; color:var(--neutral-800); font-size:11px; line-height:1.5; font-weight:600; }
.mp-shot-link { display:block; color:var(--brand); text-decoration:none; }
.mp-shot-image { display:block; position:relative; overflow:hidden; border-radius:12px; }
.mp-shot-brand { display:block; position:absolute; pointer-events:none; background:url("../images/logo/lijix-icon.svg?v=20261014-brand") center / contain no-repeat; }
.mp-shot-brand[hidden] { display:none; }
.mp-shot-link img { display:block; width:100%; max-width:100%; height:auto; border-radius:12px; }
.mp-shot-link:focus-visible { outline:3px solid var(--brand); outline-offset:6px; border-radius:12px; }
.mp-shot-action { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:14px; font-size:11px; font-weight:600; line-height:1.5; }
.mp-shot-link:hover .mp-shot-action { text-decoration:underline; text-underline-offset:4px; }
.mp-web-shot figcaption,.mp-mobile-shot figcaption { margin-top:16px; text-align:center; color:var(--secondary); font-size:11px; line-height:1.7; }
.mp-mobile-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:64px; margin-top:64px; padding:52px; border:1px solid #e3eeea; border-radius:32px; background:#fff; box-shadow:0 16px 48px #153a2e06; }
.mp-mobile-copy { min-width:0; grid-column:2; grid-row:1; }
.mp-mobile-copy h3 { color:var(--neutral-800); font-size:40px; font-weight:600; line-height:1.15; letter-spacing:-1.3px; }
.mp-mobile-copy > p { margin-top:22px; color:var(--secondary); font-size:15px; line-height:1.8; }
.mp-mobile-benefits { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.mp-mobile-benefits li { display:flex; align-items:flex-start; gap:16px; padding:20px; border:1px solid var(--neutral-200); border-radius:20px; box-shadow:0 8px 22px #142d2204; }
.mp-mobile-benefits h4 { font-size:15px; font-weight:600; line-height:1.5; }
.mp-mobile-benefits p { margin-top:5px; color:var(--secondary); font-size:13px; line-height:1.65; }
.mp-mobile-visual { grid-column:1; grid-row:1; min-width:0; display:flex; justify-content:center; position:relative; }
.mp-mobile-visual::before { content:""; position:absolute; width:80%; height:75%; max-width:380px; top:10%; border-radius:50%; background:radial-gradient(ellipse,#c8f0e5a0,transparent 70%); pointer-events:none; }
.mp-mobile-shot { position:relative; width:280px; max-width:100%; }
.mp-screenshot-page .mp-feature-visual > .mp-mobile-shot { margin-inline:auto; }
.mp-phone-angled .mp-phone-shell { transform:perspective(900px) rotateY(-8deg) rotateZ(-6deg); }
.mp-feature-story[data-accent="amber"] .mp-category { color:#805200; border-color:#f5dfac; background:#fff8e9; }
.mp-feature-story[data-accent="amber"] .mp-benefit-icon { color:#805200; border-color:#f5dfac; background:#fff8e9; }
.mp-feature-story[data-accent="amber"] .mp-shot-frame { box-shadow:0 24px 65px #b17b1614; }
.mp-feature-story[data-accent="amber"] .mp-mobile-visual::before { background:radial-gradient(ellipse,#fce5b580,transparent 70%); }
.mp-phone-shell { padding:6px; border-radius:38px; background:#173432; border:1px solid #39534b; box-shadow:0 28px 55px #103c2d20; }
.mp-phone-shell .mp-shot-link { border-radius:31px; overflow:hidden; background:#f6f6f8; }
.mp-phone-shell .mp-shot-link img { border-radius:0; }
.mp-phone-shell .mp-shot-action { justify-content:center; padding:12px; background:#fff; border-top:1px solid #e4ece8; }
.mp-screenshot-dialog { width:min(1440px,94vw); max-width:94vw; max-height:92dvh; margin:auto; padding:0; border:1px solid #d8e8e2; border-radius:22px; background:#fff; color:var(--neutral-800); box-shadow:0 30px 100px #0003; }
.mp-screenshot-dialog::backdrop { background:#102d2bba; }
.mp-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 22px; border-bottom:1px solid #e4ece8; background:#fff; position:sticky; top:0; z-index:1; }
.mp-dialog-header h2 { font-size:15px; font-weight:600; line-height:1.6; }
.mp-dialog-header button { display:grid; place-items:center; width:42px; height:42px; flex:none; border:1px solid #d4e7df; border-radius:12px; background:#effbf7; color:var(--brand); cursor:pointer; }
.mp-dialog-header button:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.mp-dialog-image { position:relative; padding:20px; background:#f5f8f7; text-align:center; }
.mp-dialog-image img { display:block; width:auto; max-width:100%; height:auto; max-height:calc(92dvh - 120px); margin:auto; object-fit:contain; }
.mp-dialog-image img[hidden] { display:none; }
html[dir="rtl"] .mp-category,html[dir="rtl"] .mp-mobile-copy h3 { letter-spacing:normal; }
html[dir="rtl"] .mp-mobile-copy h3 { line-height:1.45; }
@media(max-width:1199px) {
 .mp-screenshot-page .mp-reference-feature { gap:36px; }
 .mp-capability-tiles { gap:10px; }
 .mp-capability-tiles li { flex-direction:column; padding:16px; gap:10px; }
 .mp-mobile-panel { padding:36px; gap:40px; }
 .mp-mobile-copy h3 { font-size:34px; }
 .mp-mobile-shot { width:260px; }
}
@media(max-width:991px) {
 .mp-screenshot-page .mp-feature-story { padding-block:56px; }
 .mp-screenshot-page .mp-reference-feature { grid-template-columns:1fr; }
 .mp-screenshot-page .mp-reference-feature .mp-feature-visual { width:100%; max-width:100%; }
 .mp-capability-tiles li { flex-direction:row; gap:14px; padding:20px; }
 .mp-mobile-panel { gap:32px; padding:32px; }
 .mp-mobile-copy h3 { font-size:30px; }
 .mp-mobile-benefits li { gap:12px; padding:16px; }
 .mp-mobile-benefits .mp-benefit-icon { width:34px; height:34px; border-radius:11px; }
 .mp-mobile-shot { width:240px; }
}
@media(max-width:767px) {
 .mp-phone-angled .mp-phone-shell { transform:none; }
 .mp-screenshot-page .mp-feature-story { padding-block:44px; }
 .mp-capability-tiles { grid-template-columns:1fr; margin-top:24px; }
 .mp-capability-tiles li { padding:18px; }
 .mp-shot-surface { padding:14px; }
 .mp-shot-frame { border-radius:20px; }
 .mp-mobile-panel { grid-template-columns:1fr; gap:36px; padding:28px 20px; margin-top:40px; border-radius:24px; }
 .mp-mobile-copy,.mp-mobile-visual { grid-column:1; grid-row:auto; }
 .mp-mobile-copy h3 { font-size:30px; }
 .mp-mobile-copy > p { font-size:14px; }
 .mp-mobile-shot { width:280px; }
 .mp-mobile-benefits { gap:12px; }
 .mp-dialog-header { padding:12px; gap:12px; }
 .mp-dialog-image { padding:10px; }
}
@media(prefers-reduced-motion:reduce) { .mp-phone-angled .mp-phone-shell { transform:none; } }