/* NOEMA Android TV Data Limiter showcase, 2026-10-09 */
.limiter-showcase{margin:30px 0 38px;padding:clamp(12px,2.2vw,26px);background:linear-gradient(155deg,#171a1e,#101215);border:1px solid rgba(208,210,215,.16);border-radius:19px;box-shadow:0 12px 34px rgba(0,0,0,.18);color:#eff6ff}
.limiter-showcase *{box-sizing:border-box}
.limiter-ui{padding:clamp(16px,3.4vw,44px);background:linear-gradient(160deg,#1b232c,#141b23 70%);border:1px solid rgba(208,210,215,.14);border-radius:17px;box-shadow:none}
.limiter-heading{display:flex;align-items:flex-start;justify-content:center;position:relative;min-height:82px}
.limiter-heading-text{text-align:center}
.limiter-heading h3{color:#fff;font-weight:800;font-size:clamp(1.35rem,3.4vw,2.65rem);margin:0 0 4px;line-height:1.18}
.limiter-heading p{font-size:clamp(.7rem,1.45vw,1rem);color:#cad9e7;margin:0}
.limiter-vpn{position:absolute;right:0;top:-8px;padding:12px 16px;background:#1d4055;border:1px solid #555d66;border-radius:12px;font-size:.88rem;white-space:nowrap;color:#e3f2ff}
.limiter-vpn svg{vertical-align:middle;margin-right:5px}
.limiter-state{border:1px solid rgba(206,207,211,.25);border-radius:13px;background:linear-gradient(90deg,#26333e,#3f3330,#26333e);color:#96f0df;text-align:center;padding:12px 6px;font-size:clamp(.95rem,2.1vw,1.6rem);font-weight:800;margin:8px 0}
.limiter-session{text-align:center;font-size:clamp(.65rem,1.3vw,.94rem);font-weight:600;margin:12px 0 20px;color:#dce8f4}
.limiter-profiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.limiter-profile{border:1px solid #9faabd;border-radius:17px;min-height:128px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14px 6px;text-align:center;line-height:1.28;background:#1c405a}
.limiter-profile strong{font-size:clamp(.95rem,2.15vw,1.75rem);line-height:1.2}
.limiter-profile span{font-size:clamp(.72rem,1.4vw,.97rem);margin-top:4px}
.limiter-profile small{font-size:clamp(.64rem,1vw,.8rem)}
.limiter-profile.saver{background:linear-gradient(145deg,#056b59,#0b352f);border:3px solid #e3f0cf;box-shadow:0 0 18px rgba(165,233,184,.26);color:#d4ffef}
.limiter-profile.balanced{background:linear-gradient(145deg,#145e91,#112e54);color:#ccefff}
.limiter-profile.comfort{background:linear-gradient(145deg,#6e437e,#30264f);color:#f3ddff}
.limiter-profile.fullspeed{background:linear-gradient(145deg,#825941,#343b45);color:#fff0c9}
.limiter-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.limiter-control{min-height:54px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #565e68;border-radius:11px;background:linear-gradient(130deg,#27445d,#17314b);color:#fff;font-size:clamp(.72rem,1.35vw,.98rem);font-weight:700;padding:8px 4px}
.limiter-footer{text-align:center;color:#beccdb;font-size:clamp(.67rem,1.2vw,.88rem);margin:14px 0 0}
.limiter-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.limiter-result{background:linear-gradient(150deg,#1b232c,#131b23);border:1px solid rgba(208,210,215,.16);border-radius:15px;padding:18px;min-width:0}
.limiter-result h4{font-size:clamp(.96rem,1.5vw,1.18rem);margin:0 0 9px;color:#f6d28b}
.limiter-result:nth-child(2) h4{color:#70eebc}
.limiter-result p{margin:6px 0;color:#dce7f6;font-size:.92rem}
.limiter-number{font-size:clamp(1.5rem,2.7vw,2.25rem);font-weight:800;color:#f4f9ff;line-height:1.2}
.limiter-result:nth-child(2) .limiter-number{color:#85e6c5}
.limiter-stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;text-align:center;margin-top:12px}
.limiter-stat-row>div+div{border-left:1px solid #30415b}
.limiter-stat-row strong{display:block;font-size:clamp(.96rem,2.1vw,1.5rem);color:#f6fbff}
.limiter-stat-row>div:last-child strong{color:#4cdda4}
.limiter-stat-row span{display:block;font-size:.75rem;margin-top:7px;color:#c5d3e2}
.limiter-caption{font-size:.81rem!important;color:#a9bacb!important}
.limiter-visual-note{color:#a7bbc9;margin-top:10px;font-size:.83rem}
.dev-video-inline{width:100%;max-width:980px;margin:18px auto 0;background:#111a29}
.dev-video-button{border:0;padding:0;width:100%;height:100%;display:block;cursor:pointer;position:absolute;inset:0;background:#0b1424;color:white}
.dev-video-button img{width:100%;height:100%;object-fit:cover}
.dev-video-button:focus-visible{outline:3px solid #f0c75e;outline-offset:-4px}
.dev-video-label{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.92));padding:40px 10px 15px;text-align:center;color:white;font-weight:700}
.dev-video-inline iframe{width:100%;height:100%;border:0;position:absolute;inset:0}
@media(max-width:800px){.limiter-vpn{position:static;display:inline-flex;margin:13px auto 0;align-items:center}.limiter-heading{display:block;text-align:center}.limiter-heading h3{font-size:clamp(1.2rem,5vw,2.3rem)}.limiter-profiles{grid-template-columns:repeat(2,1fr)}.limiter-controls{grid-template-columns:repeat(2,1fr)}.limiter-result-grid{grid-template-columns:1fr}.limiter-profile{min-height:90px}.limiter-state{margin-top:18px}}
@media(max-width:420px){.limiter-showcase{margin:22px -5px;padding:8px;border-radius:12px}.limiter-ui{padding:13px}.limiter-profiles,.limiter-controls{gap:8px}.limiter-session{line-height:1.7}.limiter-footer{line-height:1.5}.limiter-result{padding:15px}}

/* Subtle monochrome borders on demo video; primary colors remain in app controls. */
.dev-video.dev-video-inline{border:1px solid rgba(208,210,215,.18);box-shadow:0 8px 25px rgba(0,0,0,.15)}

/* Mobile displays a real landscape TV photo instead of a reflowed app mockup. */
.tv-photo-mobile{display:none;margin:0}
.tv-photo-mobile img{display:block;width:100%;height:auto;aspect-ratio:750/422;object-fit:cover;border-radius:13px;border:1px solid rgba(225,225,225,.14)}
@media(max-width:720px){
 .tv-photo-mobile{display:block}
 .limiter-showcase .limiter-ui{display:none}
 .limiter-result-grid{margin-top:13px}
}
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
 .tv-photo-mobile{animation:noema-tv-photo-appear .45s ease-out both}
 @keyframes noema-tv-photo-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
}