/* ===== Mobile Makeover demo: download badges + phone overlay (added 2026) ===== */

@font-face {
  font-family: 'MM Badge';
  src: url("fonts/lobster-two-latin-700-italic.woff2") format("woff2"); /* Lobster Two, SIL OFL – matches the 2012 button lettering */
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Badges: rebuilt from the 2012 button artwork, 219 × 75 ---------- */
#feature .intro-text .mm-badges { display: flex; gap: 20px; margin: 4px 0 0; }
.mm-badge {
  position: relative; display: block; width: 219px; height: 75px; padding: 0; border: 0;
  background: none; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  font: inherit; color: #fff;
}
.mm-badge .bez { position: absolute; left: 0; top: 1px; width: 219px; height: 73px; border-radius: 3px;
  background: linear-gradient(#a3a3a3, #c0c0c0); opacity: .6; }
.mm-badge .pan { position: absolute; left: 9px; top: 8px; width: 200px; height: 61px; border-radius: 4px;
  box-shadow: 1px 2px 3px rgba(0,0,0,.45); }
.mm-badge .face { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; transition: opacity .5s ease; }
.mm-badge .face i { position: absolute; inset: 0 1px 3px 1px; border-radius: 3px 3px 2px 2px; overflow: hidden; }
.mm-badge .face i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
.mm-badge .face i::after { content: ""; position: absolute; left: 65px; top: 0; bottom: 0; width: 1px; }
/* pink face */
.mm-badge .face.pink { background: #c50650; }
.mm-badge .face.pink i { background: linear-gradient(#fc3b85 0, #ee2970 30px, #eb0759 30px, #e4004f 100%); }
.mm-badge .face.pink i::after { background: #c50650; }
/* grey face */
.mm-badge .face.grey { background: #9b9b9b; }
.mm-badge .face.grey i { background: linear-gradient(#dbd8d9 0, #c6c4c5 30px, #bdbcbc 30px, #b2b2b2 100%); }
.mm-badge .face.grey i::after { background: #9b9b9b; }
.mm-badge .face.grey i::before { background: none; }

.mm-badge .icon { position: absolute; left: 19px; top: 12px; width: 30px; height: 33px; fill: #fff; z-index: 2; }
.mm-badge .txt { position: absolute; left: 78px; top: 0; right: 0; bottom: 0; z-index: 2; }
.mm-badge .t1, .mm-badge .t2 { position: absolute; left: 0; white-space: nowrap; color: #fff;
  font-family: 'MM Badge', 'Lobster Two', cursive; font-weight: 700; font-style: italic;
  text-shadow: 0 1px 0 rgba(0,0,0,.18); transition: opacity .35s ease, transform .35s ease; }
.mm-badge .t1 { font-size: 22px; line-height: 1; top: 5px; }
.mm-badge .t2 { font-size: 15.5px; line-height: 1; top: 34px; left: 3px; }
.mm-badge .txt.out .t1, .mm-badge .txt.out .t2 { opacity: 0; transform: translateY(-6px); }
.mm-badge .txt.in .t1, .mm-badge .txt.in .t2 { opacity: 0; transform: translateY(6px); }
.mm-badge:hover .pan, .mm-badge:focus-visible .pan { filter: brightness(1.06); }
.mm-badge:focus-visible { outline: 2px solid #f20492; outline-offset: 3px; border-radius: 4px; }

/* Pulse: one at a time, on a 4.8 s loop -
   2012 button flashes, then its "Demo", then the 2026 button, then its "Demo" */
.mm-badge { --c: rgba(242,4,146,1); --c0: rgba(242,4,146,0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.mm-badge .pan::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  animation: mmPing 4.8s cubic-bezier(.2,.6,.3,1) .5s infinite; }
.mm-badge.v2026 .pan::after { animation-delay: 2.9s; }
.mm-badge:hover, .mm-badge:focus-visible { transform: translateY(-3px); }
.mm-badge:hover .pan::after, .mm-badge:focus-visible .pan::after { animation: none; }
@keyframes mmPing {
  0%   { box-shadow: 0 0 0 0 var(--c), 0 0 0 0 var(--c); }
  4%   { box-shadow: 0 0 0 5px var(--c), 0 0 14px 6px rgba(242,4,146,.55); }
  22%  { box-shadow: 0 0 0 30px var(--c0), 0 0 22px 30px var(--c0); }
  100% { box-shadow: 0 0 0 30px var(--c0), 0 0 22px 30px var(--c0); }
}
/* the word "Demo" flashes in its own slot, just after its button */
.mm-badge .dm { display: inline-block; transform-origin: 30% 60%; animation: mmDemo 4.8s ease-in-out 1.7s infinite; }
.mm-badge.v2026 .dm { animation-delay: 4.1s; }
@keyframes mmDemo {
  0%, 22%, 100% { transform: scale(1); text-shadow: 0 1px 0 rgba(0,0,0,.18); }
  6%            { transform: scale(1.18); text-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 24px rgba(255,255,255,.8); }
  12%           { transform: scale(1); text-shadow: 0 0 6px rgba(255,255,255,.6); }
}
.mm-badge:hover .dm, .mm-badge:focus-visible .dm { animation: none; }
/* "Live demo" tab: on each badge and on the feature phones */
.live { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px;
  border-radius: 10px; background: #fff; color: #f20492; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  font: bold 10px/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.live b { width: 6px; height: 6px; border-radius: 50%; background: #f20492; animation: mmLive 1.4s ease-in-out infinite; }
@keyframes mmLive { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.mm-badge .live { right: 8px; top: -7px; }
.mm-feature { position: relative; display: inline-block; cursor: pointer; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.mm-feature img { display: block; }
.mm-feature .live { left: 50%; top: 2px; transform: translateX(-50%); }
.mm-feature:hover, .mm-feature:focus-visible { transform: translateY(-4px); }
.mm-feature:focus-visible { outline: 2px solid #f20492; outline-offset: 4px; border-radius: 8px; }
/* the pulse pauses while the phone is open */
body.mm-open .mm-badge .pan::after, body.mm-open .live b, body.mm-open .mm-badge .dm { animation-play-state: paused; }

/* ---------- Phone overlay ---------- */
#mm-demo { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  visibility: hidden; pointer-events: none; }
#mm-demo.open { visibility: visible; pointer-events: auto; }
#mm-demo .dim { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(28,28,32,.86) 0%, rgba(10,10,12,.93) 60%, rgba(4,4,5,.97) 100%); }
#mm-demo.open .dim { opacity: 1; }
#mm-demo .close { position: absolute; top: 18px; right: 22px; z-index: 3; width: 40px; height: 40px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font: 300 26px/40px Arial, sans-serif;
  cursor: pointer; opacity: 0; transition: opacity .4s ease .2s, background .2s; }
#mm-demo.open .close { opacity: 1; }
#mm-demo .close:hover, #mm-demo .close:focus-visible { background: rgba(255,255,255,.18); color: #fff; outline: none; }

/* stage: scaled to fit the window, rises into place */
#mm-demo .stage { position: relative; z-index: 2; transform: translateY(60px) scale(calc(var(--fit, 1) * .96));
  opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
#mm-demo.open .stage { transform: translateY(0) scale(var(--fit, 1)); opacity: 1; }
#mm-demo .rot { transition: transform .5s ease-in-out; }
#mm-demo.landscape .rot { transform: rotate(-90deg); }

.phone { position: relative; }
.phone .screen { position: absolute; overflow: hidden; background: #000; }
.phone .screen iframe { position: absolute; left: 0; top: 0; border: 0; display: block; background: #000;
  transform-origin: 0 0; transition: none; }

/* --- 2012: iPhone 4-style frame, screen 320 × 480 --- */
.phone.p2012 { width: 380px; height: 748px; border-radius: 58px; padding: 0;
  background: linear-gradient(145deg, #2b2b2e 0%, #0b0b0c 40%, #050505 100%);
  box-shadow: 0 0 0 4px #b9bbbe, 0 0 0 5px #77797d, 0 0 0 7px #d7d9dc, 0 30px 60px rgba(0,0,0,.55); }
.phone.p2012::before { /* glass sheen */ content: ""; position: absolute; inset: 0; border-radius: 58px; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%); }
.phone.p2012 .screen { left: 30px; top: 134px; width: 320px; height: 480px; }
.phone.p2012 .ear { position: absolute; left: 50%; top: 66px; width: 62px; height: 7px; margin-left: -31px;
  border-radius: 4px; background: #1d1e20; box-shadow: inset 0 1px 2px #000; }
.phone.p2012 .cam { position: absolute; left: 50%; top: 64px; width: 11px; height: 11px; margin-left: -64px;
  border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2a3340, #0a0c10 60%); }
.phone.p2012 .home { position: absolute; left: 50%; bottom: 38px; width: 62px; height: 62px; margin-left: -31px;
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #2a2b2e, #0d0d0e 70%); box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 0 0 1px #000; }
.phone.p2012 .home::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -10px 0 0 -10px;
  border: 1.5px solid #6c6d70; border-radius: 4px; }
.phone.p2012 .home:focus-visible { outline: 2px solid #f20492; outline-offset: 2px; }

/* --- 2026: slim edge-to-edge frame, screen 390 × 844 --- */
.phone.p2026 { width: 414px; height: 868px; border-radius: 64px;
  background: #0a0a0b; box-shadow: 0 0 0 2px #3a3b3e, 0 0 0 3px #1b1c1e, 0 30px 70px rgba(0,0,0,.6); }
.phone.p2026 .screen { left: 12px; top: 12px; width: 390px; height: 844px; border-radius: 52px; clip-path: inset(0 round 52px); -webkit-clip-path: inset(0 round 52px); }
.phone.p2026 .island { position: absolute; left: 50%; top: 23px; width: 124px; height: 36px; margin-left: -62px;
  border-radius: 20px; background: #000; z-index: 3; pointer-events: none; }
.phone.p2026 .bar { position: absolute; left: 50%; bottom: 20px; width: 150px; height: 22px; margin-left: -75px; z-index: 3;
  border: 0; padding: 0; background: none; cursor: pointer; }
.phone.p2026 .bar::after { content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.85); mix-blend-mode: difference; }
.phone.p2026 .bar:focus-visible { outline: 2px solid #f20492; border-radius: 8px; }
.phone.p2026 .btn-side { position: absolute; width: 3px; border-radius: 2px; background: #2a2b2e; }
.phone.p2026 .btn-side.r1 { right: -5px; top: 190px; height: 92px; }
.phone.p2026 .btn-side.l1 { left: -5px; top: 150px; height: 30px; }
.phone.p2026 .btn-side.l2 { left: -5px; top: 205px; height: 56px; }
.phone.p2026 .btn-side.l3 { left: -5px; top: 272px; height: 56px; }
.phone.p2012 .btn-side { display: none; }

/* placeholder shown if an app folder isn't there yet */
.phone .screen .missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #888; font: 14px/1.4 Arial, sans-serif; text-align: center; padding: 30px; }

@media (prefers-reduced-motion: reduce) {
  .mm-badge .pan::after, .live b, .mm-badge .dm { animation: none !important; }
  #mm-demo .stage, #mm-demo .dim, #mm-demo .rot, .mm-badge .t1, .mm-badge .t2, .mm-badge .face { transition: none !important; }
}

/* show only the parts that belong to each phone */
.phone.p2026 .ear, .phone.p2026 .cam, .phone.p2026 .home { display: none; }
.phone.p2012 .island, .phone.p2012 .bar { display: none; }

/* ---------- Hover animations (laptop/desktop only; still with reduced motion) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* screenshots: the phone shot drifts in slightly inside its frame, a fine pink line draws round it */
  #previews .images ul li a { position: relative; display: block; overflow: hidden; cursor: zoom-in; }
  #previews .images ul li a img { display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  #previews .images ul li a::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 2px #f20492; opacity: 0; transition: opacity .35s ease; }
  #previews .images ul li a:hover img { transform: scale(1.07); opacity: 1; }
  #previews .images ul li a:hover::after { opacity: 1; }
  /* video: the photo eases in, the play button grows a touch */
  .video-poster { overflow: hidden; }
  .video-poster img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .video-poster .play { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s; }
  .video-poster:hover img { transform: scale(1.04); opacity: 1; }
  .video-poster:hover .play { transform: scale(1.12); }
  /* press logos: spotlight - the one you point at lifts, the others soften */
  #quotes ul li img { transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease, filter .35s ease; }
  #quotes ul:hover li img { opacity: .45; filter: grayscale(.7); }
  #quotes ul li:hover img { opacity: 1; filter: none; transform: translateY(-5px) scale(1.04); }
}

/* ---------- Footer: copyright line centred in the middle, both ways ---------- */
#footer { display: flex; align-items: center; }
#footer::after { display: none; }
#footer .col1, #footer .col3 { float: none; flex: 0 0 300px; margin: 0; }
#footer .col2 { float: none; flex: 1 1 auto; width: auto; margin: 0; }
#footer .col2 p { padding: 0; margin: 0; text-align: center; }
#footer .col3 img { float: right; display: block; }

/* ---------- Video and Screenshots boxes: same height (video box gets the extra white) ---------- */
#previews { display: flex; align-items: stretch; }
#previews .videos, #previews .images { float: none; }