/* JunaPhoto marketing site — generated from the design canvas, then hand-maintained */
body{margin:0}
a{color:#1F5C5A;text-decoration:none}a:hover{color:#143F3E}
.mk-wrap{max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.mk-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.mk-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.mk-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mk-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mk-price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:820px;margin:0 auto}
.mk-links{display:flex;gap:28px;align-items:center}
.mk-menu{display:none}
.mk-h1{font-size:64px}
.mk-h2{font-size:42px}
.mk-sec{padding:96px 0}
@media (max-width:1024px){
  .mk-hero,.mk-2{grid-template-columns:1fr}
  .mk-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-h1{font-size:52px}
  .mk-h2{font-size:36px}
  .mk-links{display:none}
  .mk-menu{display:flex}
  .mk-sec{padding:72px 0}
}
@media (max-width:640px){
  .mk-wrap{padding:0 20px}
  .mk-3,.mk-4,.mk-price{grid-template-columns:1fr}
  .mk-h1{font-size:40px}
  .mk-h2{font-size:30px}
  .mk-sec{padding:56px 0}
  .mk-hide-sm{display:none !important}
}
input[type=range].ba{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;cursor:ew-resize}
input[type=range].ba::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#D6D6D6}
input[type=range].ba::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:13px;background:#FFFFFF;border:3px solid #1F5C5A}
input[type=range].ba::-moz-range-track{height:4px;border-radius:2px;background:#D6D6D6}
input[type=range].ba::-moz-range-thumb{width:20px;height:20px;border-radius:13px;background:#FFFFFF;border:3px solid #1F5C5A}
/* ---- wide screens (≥1600px) ---- */
@media (min-width:1600px){
  .mk-wrap{max-width:1520px;padding:0 64px}
  .mk-h1{font-size:88px}
  .mk-h2{font-size:54px}
  .mk-sec{padding:136px 0}
  .mk-hero{gap:96px}
  .mk-3,.mk-4{gap:32px}
  .mk-phone{transform:scale(1.12);transform-origin:top center}
  .mk-root [style*="font-size: 12px"]{font-size:14px !important}
  .mk-root [style*="font-size: 13px"]{font-size:15px !important}
  .mk-root [style*="font-size: 14px"]{font-size:16px !important}
  .mk-root [style*="font-size: 15px"]{font-size:18px !important}
  .mk-root [style*="font-size: 16px"]{font-size:19px !important}
  .mk-root [style*="font-size: 17px"]{font-size:20px !important}
  .mk-root [style*="font-size: 18px"]{font-size:21px !important}
  .mk-root [style*="font-size: 19px"]{font-size:23px !important}
  .mk-root [style*="font-size: 20px"]{font-size:24px !important}
  .mk-root [style*="font-size: 22px"]{font-size:26px !important}
  .mk-root [style*="font-size: 44px"]{font-size:52px !important}
}
/* ---- motion ---- */
@keyframes mk-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mk-float{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-14px) rotate(-6deg)}}
@keyframes mk-float2{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(12px) rotate(10deg)}}
@keyframes mk-scan{0%{top:0;opacity:0}10%{opacity:1}75%{opacity:1}90%,100%{top:100%;opacity:0}}
@keyframes mk-outline{0%,18%{opacity:0;transform:scale(1.1)}28%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes mk-chip{0%,40%{opacity:0;transform:translate(-50%,10px)}50%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@keyframes mk-shutter{0%,8%,100%{transform:scale(1)}4%{transform:scale(.86)}}
@keyframes mk-flash{0%,2%{opacity:0}4%{opacity:.85}12%,100%{opacity:0}}
@keyframes mk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mk-in{animation:mk-rise .9s cubic-bezier(.2,.7,.2,1) both}
.mk-in2{animation:mk-rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
.mk-in3{animation:mk-rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
.mk-float{animation:mk-float 7s ease-in-out infinite}
.mk-float2{animation:mk-float2 8s ease-in-out infinite}
.mk-scanline{position:absolute;left:0;right:0;height:3px;background:#7FD1C4;box-shadow:0 0 18px 5px rgba(127,209,196,.55);animation:mk-scan 4.8s ease-in-out infinite}
.mk-outline{opacity:0;animation:mk-outline 4.8s ease-out infinite}
.mk-d1{animation-delay:.5s}.mk-d2{animation-delay:.8s}.mk-d3{animation-delay:1.1s}
.mk-chip{animation:mk-chip 4.8s ease-out infinite}
.mk-shutter{animation:mk-shutter 4.8s ease-in-out infinite}
.mk-flash{position:absolute;inset:0;background:#FFFFFF;opacity:0;animation:mk-flash 4.8s linear infinite;pointer-events:none}
.mk-marquee{display:flex;gap:28px;width:max-content;animation:mk-marquee 80s linear infinite}
.mk-marquee:hover{animation-play-state:paused}
.mk-lift{transition:transform .25s ease, box-shadow .25s ease}
.mk-lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
@supports (animation-timeline: view()){
  .mk-reveal{animation:mk-rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
/* features: per-card motion */
.mk-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#EEEEEE}
.mk-media > img{width:100%;height:100%;object-fit:cover;display:block}
.mk-kb{animation:mk-kb 14s ease-in-out infinite alternate}
@keyframes mk-kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-2%)}}
.mk-3d{perspective:900px}
.mk-flip{position:absolute;inset:0;transform-style:preserve-3d;animation:mk-flip 7s cubic-bezier(.6,0,.3,1) infinite}
.mk-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mk-backface{transform:rotateY(180deg)}
@keyframes mk-flip{0%,38%{transform:rotateY(0)}50%,88%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.mk-pill{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(0,0,0,.14);font-size:13px;font-weight:600;color:#1A1A1A}
.mk-bar{width:64px;height:5px;border-radius:3px;background:#E5E5E5;overflow:hidden}
.mk-fill{height:100%;background:#1F5C5A;animation:mk-fill 4.5s ease-in-out infinite}
@keyframes mk-fill{0%{width:0}60%,100%{width:100%}}
.mk-up-a{animation:mk-up-a 4.5s ease-in-out infinite}
.mk-up-b{opacity:0;animation:mk-up-b 4.5s ease-in-out infinite}
@keyframes mk-up-a{0%,62%{opacity:1}70%,100%{opacity:0}}
@keyframes mk-up-b{0%,64%{opacity:0;transform:translateY(8px)}74%,94%{opacity:1;transform:none}100%{opacity:0}}
.mk-browser{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:5px;padding:0 10px;background:rgba(255,255,255,.96);border-bottom:1px solid #E5E5E5;z-index:1}
.mk-dot{width:7px;height:7px;border-radius:4px;background:#D6D6D6}
.mk-url{margin-left:8px;padding:2px 8px;border-radius:8px;background:#F2F2F2;font-size:10px;color:#5E5E5E;overflow:hidden;white-space:nowrap;border-right:2px solid transparent;animation:mk-type 6s steps(17) infinite}
@keyframes mk-type{0%{max-width:0}40%,90%{max-width:130px}100%{max-width:0}}
.mk-cursor{position:absolute;width:16px;height:16px;z-index:2;animation:mk-cursor 6s ease-in-out infinite}
@keyframes mk-cursor{0%,20%{left:70%;top:80%}50%{left:44%;top:46%}60%{left:44%;top:46%;transform:scale(.85)}65%,100%{left:44%;top:46%;transform:scale(1)}}
.mk-toast{position:absolute;left:50%;top:10px;transform:translate(-50%,-160%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:16px;background:rgba(26,26,26,.92);color:#FFFFFF;font-size:13px;font-weight:600;white-space:nowrap;animation:mk-toast 5s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes mk-toast{0%,18%{transform:translate(-50%,-160%);opacity:0}28%,78%{transform:translate(-50%,0);opacity:1}88%,100%{transform:translate(-50%,-160%);opacity:0}}
/* closing CTA */
.mk-rise-p{position:absolute;bottom:-160px;width:124px;height:94px;object-fit:cover;object-position:50% 30%;border:5px solid #FFFFFF;box-shadow:0 12px 28px rgba(0,0,0,.28);opacity:0;animation:mk-out 12s linear infinite}
@keyframes mk-out{0%{transform:translateY(0) rotate(var(--r));opacity:0}12%{opacity:.6}80%{opacity:.6}100%{transform:translateY(-760px) rotate(calc(var(--r) * -1));opacity:0}}
.mk-word{display:inline-block;animation:mk-word .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes mk-word{from{opacity:0;transform:translateY(.55em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.mk-w1{animation-delay:0.08s}.mk-w2{animation-delay:0.16s}.mk-w3{animation-delay:0.24s}.mk-w4{animation-delay:0.32s}.mk-w5{animation-delay:0.40s}.mk-w6{animation-delay:0.48s}.mk-w7{animation-delay:0.56s}.mk-w8{animation-delay:0.64s}.mk-w9{animation-delay:0.72s}.mk-w10{animation-delay:0.80s}.mk-w11{animation-delay:0.88s}.mk-w12{animation-delay:0.96s}
.mk-mark{color:#F2A65A;background:linear-gradient(#F2A65A,#F2A65A) no-repeat 0 100%/0% 5px;padding-bottom:6px;animation:mk-mark 1.1s 1.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mk-mark{to{background-size:100% 5px}}
.mk-ring{animation:mk-ring 2.6s ease-out infinite}
@keyframes mk-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@supports (animation-timeline: view()){
  .mk-word{animation-timeline:view();animation-delay:0s}
  .mk-w1{animation-range:entry 7% cover 25%}
  .mk-w2{animation-range:entry 10% cover 28%}
  .mk-w3{animation-range:entry 13% cover 31%}
  .mk-w4{animation-range:entry 16% cover 34%}
  .mk-w5{animation-range:entry 19% cover 37%}
  .mk-w6{animation-range:entry 22% cover 40%}
  .mk-w7{animation-range:entry 25% cover 43%}
  .mk-w8{animation-range:entry 28% cover 46%}
  .mk-w9{animation-range:entry 31% cover 49%}
  .mk-w10{animation-range:entry 34% cover 52%}
  .mk-w11{animation-range:entry 37% cover 55%}
  .mk-w12{animation-range:entry 40% cover 58%}
  .mk-mark{animation-timeline:view();animation-range:entry 30% cover 55%;animation-delay:0s}
}
@media (prefers-reduced-motion: reduce){
  .mk-in,.mk-in2,.mk-in3,.mk-float,.mk-float2,.mk-scanline,.mk-outline,.mk-chip,.mk-shutter,.mk-flash,.mk-marquee,.mk-reveal,
  .mk-kb,.mk-flip,.mk-fill,.mk-up-a,.mk-up-b,.mk-url,.mk-cursor,.mk-toast,.mk-rise-p,.mk-word,.mk-mark,.mk-ring{animation:none !important}
  .mk-mark{background-size:100% 5px}.mk-up-a,.mk-rise-p,.mk-cursor{display:none}.mk-up-b,.mk-toast{opacity:1;transform:translate(-50%,0)}.mk-up-b{transform:none}.mk-fill{width:100%}
  .mk-outline,.mk-chip{opacity:1 !important}
  .mk-scanline,.mk-flash{display:none}
}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}

/* ---- site basics ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
[hidden]{display:none !important}
:target{scroll-margin-top:84px}
#how,#restore,#pricing,#faq,#get{scroll-margin-top:84px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #F2A65A;outline-offset:3px;border-radius:6px}
.mk-drawer{display:flex;flex-direction:column;padding:4px 20px 14px;background:#FFFFFF;border-top:1px solid #EEEEEE}
.mk-drawer a{padding:14px 0;font-size:17px;font-weight:500;color:#1A1A1A;border-bottom:1px solid #F2F2F2}
@media (min-width:1025px){.mk-drawer{display:none !important}}
[data-app-link].is-soon{cursor:default}
[data-app-link]{white-space:nowrap}
@media (max-width:640px){header [data-app-link]{padding:0 14px !important;font-size:14px !important}}