/* Real app pixels stay complete. All hardware sits outside the captured screen. */
.mobile-showcase { width:min(1440px,100vw); padding:80px 100px; overflow:clip; color:#ececeb; background:var(--ink); }
.mobile-showcase-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:end; gap:80px; }
.mobile-showcase .eyebrow { margin-bottom:28px; }
.mobile-showcase h2 { margin:0; color:#f0f0ee; font-size:48px; font-weight:400; line-height:1.2; letter-spacing:-1.9px; }
.mobile-showcase-intro { max-width:420px; margin:0 0 4px; color:#aaa9a8; font-size:16px; font-weight:300; line-height:26px; }
.mobile-showcase-body { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:center; gap:64px; margin-top:42px; }
.mobile-showcase-notes { max-width:340px; margin:0; padding:0; list-style:none; }
.mobile-showcase-notes li { padding:20px 0; border-top:1px solid var(--hairline-soft); }
.mobile-showcase-notes li:last-child { padding-bottom:0; }
.mobile-showcase-notes h3 { margin:0 0 7px; color:#deddda; font-size:16px; line-height:24px; font-weight:400; letter-spacing:-.2px; }
.mobile-showcase-notes p { margin:0; color:#a8a7a5; font-size:14px; line-height:23px; font-weight:300; }
/* The transparent border preserves the approved composition's exact geometry. */
.mobile-showcase-figure { position:relative; min-width:0; width:100%; margin:0; padding:22px 22px 19px; border:1px solid transparent; border-radius:22px; background:none; box-shadow:none; isolation:isolate; }
.mobile-showcase-figure::before { content:""; position:absolute; z-index:-1; inset:-55px -48px -20px -70px; background:radial-gradient(ellipse at 58% 44%,#343a3f99 0%,#252b3070 29%,#191e2345 49%,transparent 73%); pointer-events:none; }
.mobile-screen-selector { display:flex; justify-content:center; gap:20px; }
.mobile-screen-selector button { min-height:44px; padding:8px 0; border:0; border-bottom:1px solid transparent; background:transparent; color:#a09fa0; font:400 12px/20px Inter,system-ui,sans-serif; cursor:pointer; }
.mobile-screen-selector button:hover { color:#e5e5e2; }
.mobile-screen-selector [aria-selected="true"] { border-bottom-color:#c4c3c1; color:#efeeeb; }
.mobile-screen-tools { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; margin:0 0 20px; }
.mobile-scene-replay { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:44px; padding:5px 0; border:0; background:none; color:#a09fa0; font:400 11px/20px Inter,system-ui,sans-serif; cursor:pointer; }
.mobile-scene-replay:hover { color:#e7e7e3; }
.mobile-showcase [hidden] { display:none!important; }
.mobile-product-scene { position:relative; display:grid; grid-template-columns:minmax(0,280px) minmax(0,238px); align-items:center; justify-content:center; gap:26px; }
.mobile-screen-panel { min-width:0; width:100%; margin:0; outline-offset:6px; border-radius:35px; }
.mobile-handset { position:relative; width:100%; margin:0; padding:6px 7px 16px; border:1px solid #858588; border-radius:35px; background:#0c0d0e; box-shadow:0 0 0 1px #090a0b,inset 0 0 0 2px #444648,inset 0 0 0 3px #151618,0 24px 42px #0007; }
.mobile-handset::before { content:""; position:absolute; top:111px; right:-3px; width:2px; height:44px; border-radius:0 2px 2px 0; background:linear-gradient(#76777a,#494a4c 70%,#707174); box-shadow:0 1px 2px #0008; pointer-events:none; }
.mobile-handset::after { content:""; position:absolute; inset:-1px; padding:1px; border-radius:inherit; background:linear-gradient(120deg,transparent 37%,#e8eaedc2 49%,transparent 61%); background-size:300% 100%; background-position:140% 0; opacity:0; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.mobile-hardware { position:relative; display:flex; align-items:center; justify-content:center; height:29px; margin-bottom:5px; }
.mobile-hardware::before { content:""; width:66px; height:17px; border-radius:12px; background:#020304; box-shadow:inset 0 1px 2px #000,0 1px #e0e2e60a; }
.mobile-hardware::after { content:""; position:absolute; left:calc(50% + 23px); top:50%; width:5px; height:5px; transform:translate(-50%,-50%); border:1px solid #202a34; border-radius:50%; background:radial-gradient(circle at 40% 35%,#354a60,#080d13 65%); box-shadow:0 0 0 1px #05070a; }
.mobile-real-screen { display:block; overflow:hidden; border-radius:11px; background:#191c1f; }
.mobile-real-screen img { display:block; width:100%; height:auto; }
.mobile-proposal { position:relative; min-width:0; width:100%; padding:19px; border:1px solid #d5d6d723; border-radius:13px; background:linear-gradient(135deg,#303132,var(--graphite) 75%); color:#e9e8e5; box-shadow:0 12px 28px #0003,inset 0 1px #faf8f008; }
.mobile-proposal-eyebrow { margin:0 0 16px; color:#adaba9; font-size:10px; line-height:18px; }
.mobile-proposal-person { display:flex; align-items:center; gap:9px; font-size:12px; line-height:20px; }
.mobile-proposal-person>span { display:grid; place-items:center; flex:none; width:29px; height:29px; border-radius:50%; background:#f4f3ed09; border:1px solid #e7e6e014; color:#c4c2be; font-size:10px; }
.mobile-proposal-person small { display:block; color:#aaa8a3; font-size:10px; line-height:17px; }
.mobile-proposal-value { margin-top:20px; }
.mobile-proposal-value>span { display:block; color:#adaba9; font-size:10px; line-height:18px; }
.mobile-proposal-value strong { display:block; margin-top:4px; font-size:37px; font-weight:400; line-height:1.2; letter-spacing:-1.5px; }
.mobile-proposal-value strong small { font-size:13px; letter-spacing:0; color:#bfbcb7; }
.mobile-proposal-status { display:flex; flex-wrap:wrap; gap:4px 12px; margin:18px 0 0; padding-top:12px; border-top:1px solid #e7e6e314; }
.mobile-proposal-status>span { display:inline-flex; align-items:center; gap:6px; color:#d0c0e6; font-size:10px; line-height:18px; }
.mobile-proposal-status i { flex:none; width:4px; height:4px; border-radius:50%; background:#c7b3e6; }
.mobile-proposal-status>small { color:#b0ada8; font-size:10px; line-height:18px; }
.mobile-proposal-note { margin:9px 0 0; color:#a3a09b; font-size:9px; line-height:16px; }
.mobile-showcase-caption { margin:19px 0 0; color:#a3a19d; font-size:11px; line-height:19px; text-align:center; }
.mobile-showcase-caption>span { color:#c1bfba; }
.mobile-showcase button:focus-visible,.mobile-screen-panel:focus-visible { outline:2px solid #d3c2e9; outline-offset:5px; }
@media(prefers-reduced-motion:no-preference) {
 .mobile-showcase-figure.has-entered .mobile-screen-panel { animation:mobile-scene-enter .8s cubic-bezier(.2,.7,.2,1) both; }
 .mobile-showcase-figure.has-entered .mobile-proposal { animation:mobile-scene-enter .8s .28s cubic-bezier(.2,.7,.2,1) both; }
 .mobile-handset.is-lit::after { animation:mobile-rim-pass 1.8s .4s ease-in-out both; }
}
@keyframes mobile-scene-enter { from { opacity:.3; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes mobile-rim-pass { 0%{opacity:0;background-position:140% 0}30%,65%{opacity:.45}100%{opacity:0;background-position:-40% 0} }
@media(max-width:1359px) {
 .mobile-showcase-body { grid-template-columns:minmax(0,1fr); gap:34px; }
 .mobile-showcase-figure { grid-row:1; max-width:680px; margin-inline:auto; }
 .mobile-showcase-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:none; }
 .mobile-showcase-notes li:last-child { padding-bottom:20px; }
}
@media(max-width:1100px) {
 .mobile-showcase { padding:72px 32px; }
 .mobile-showcase-header { grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:48px; }
}
@media(max-width:760px) {
 .mobile-showcase { padding:56px 23px 48px; }
 .mobile-showcase-header,.mobile-showcase-body { grid-template-columns:minmax(0,1fr); gap:20px; }
 .mobile-showcase .eyebrow { margin-bottom:22px; }
 .mobile-showcase h2 { font-size:36px; line-height:43px; letter-spacing:-1.4px; }
 .mobile-showcase-intro { max-width:460px; margin:0; font-size:15px; font-weight:400; line-height:25px; }
 .mobile-showcase-body { gap:24px; margin-top:24px; }
 .mobile-showcase-figure { max-width:400px; padding:13px 11px 16px; border-radius:19px; }
 .mobile-showcase-figure::before { inset:0 -18px 20px; }
 .mobile-screen-tools { max-width:292px; gap:12px; margin:0 auto 16px; }
 .mobile-screen-selector { gap:19px; }
 .mobile-product-scene { grid-template-columns:minmax(0,1fr); gap:18px; justify-items:center; }
 .mobile-screen-panel { width:min(100%,264px); }
 .mobile-proposal { width:min(100%,320px); padding:15px 16px 13px; }
 .mobile-proposal-eyebrow { margin-bottom:11px; font-size:11px; line-height:18px; }
 .mobile-proposal-person { font-size:13px; line-height:20px; }
 .mobile-proposal-person small { font-size:11px; line-height:18px; }
 .mobile-proposal-value { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
 .mobile-proposal-value>span { font-size:11px; line-height:18px; }
 .mobile-proposal-value strong { flex:none; margin:0; font-size:32px; }
 .mobile-proposal-status { justify-content:space-between; gap:4px 8px; margin-top:12px; padding-top:10px; }
 .mobile-proposal-status>span,.mobile-proposal-status>small { font-size:11px; line-height:19px; }
 .mobile-proposal-note { margin-top:7px; font-size:10px; line-height:17px; }
 .mobile-showcase-caption { margin-top:15px; font-size:11px; line-height:19px; }
 .mobile-showcase-notes { display:block; }
 .mobile-showcase-notes li { padding:14px 0; }
 .mobile-showcase-notes li:last-child { padding-bottom:0; }
 .mobile-showcase-notes h3 { margin-bottom:3px; font-size:14px; line-height:22px; }
 .mobile-showcase-notes p { font-size:13px; line-height:21px; font-weight:400; }
}