/* MacAppKit motion layer — shared by every page. Turned off for people who ask for reduced motion. */
#mk-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#ffd43b,#ff8787,#b197fc,#63e6be);pointer-events:none}
header.nav{position:sticky;top:0;z-index:60;transition:box-shadow .3s,backdrop-filter .3s,background-color .3s}
header.nav.mk-scrolled{box-shadow:0 8px 30px rgba(10,12,40,.22);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}

@media (prefers-reduced-motion: no-preference){
  /* Hero: drifting light, words rising in */
  .hero{position:relative;overflow:hidden;isolation:isolate}
  .hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);pointer-events:none}
  .hero::before{width:520px;height:520px;left:-120px;top:-160px;background:radial-gradient(circle,rgba(255,170,220,.55),transparent 65%);animation:mk-drift-a 16s ease-in-out infinite alternate}
  .hero::after{width:600px;height:600px;right:-180px;top:10%;background:radial-gradient(circle,rgba(110,230,255,.45),transparent 65%);animation:mk-drift-b 20s ease-in-out infinite alternate}
  .hero h1,.hero .lead,.hero .badges,.hero .cta,.hero .fine{animation:mk-up .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .lead{animation-delay:.12s}.hero .badges,.hero .cta{animation-delay:.24s}.hero .fine{animation-delay:.36s}
  .hero .badges span{animation:mk-bob 5s ease-in-out infinite}
  .hero .badges span:nth-child(2){animation-delay:-1.2s}.hero .badges span:nth-child(3){animation-delay:-2.4s}.hero .badges span:nth-child(4){animation-delay:-3.6s}
  .hero h1 em{background-size:220% auto;animation:mk-shine 5s ease-in-out infinite alternate}

  /* Scroll reveal (class added by motion.js, so pages stay visible without JS) */
  .mk-reveal{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--mk-d,0s)}
  .mk-reveal.mk-in{opacity:1;transform:none}
  img.mk-reveal{transform:translateY(40px) scale(.94) rotateX(8deg);transform-origin:50% 100%}
  img.mk-reveal.mk-in{transform:none}

  /* Cards: lift, glow that follows the pointer, 3D tilt (motion.js) */
  .app,.plan,.grid article,.why article,.posts a,details{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .8s cubic-bezier(.2,.7,.2,1)}
  .grid article:hover,.why article:hover,.posts a:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(40,30,120,.16)}
  .plan:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(40,30,120,.22)}
  .posts a:hover{text-decoration:none}
  .app,.plan,.grid article,.why article{position:relative}
  .app::after,.plan::after,.grid article::after,.why article::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light}
  .app:hover::after,.plan:hover::after,.grid article:hover::after,.why article:hover::after{opacity:1}
  .app .shot{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .app:hover .shot{transform:scale(1.05)}
  .app .icon{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
  .app:hover .icon{transform:rotate(-8deg) scale(1.08)}

  /* Buttons: light sweep + soft breathing glow on the main call to action */
  .btn{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
  .btn:hover{transform:translateY(-2px);text-decoration:none}
  .btn.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s ease}
  .btn.primary:hover::after{left:130%}
  .btn.big,.hero .btn.primary{animation:mk-glow 3.2s ease-in-out infinite}

  /* FAQ opening */
  details[open]>*:not(summary){animation:mk-up .45s cubic-bezier(.2,.7,.2,1) both}
  summary{transition:color .2s}

  .logo,.mark{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
  .brand:hover .logo,.brand:hover .mark{transform:rotate(-10deg) scale(1.1)}
}

@keyframes mk-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mk-drift-a{to{transform:translate(180px,120px) scale(1.25)}}
@keyframes mk-drift-b{to{transform:translate(-200px,80px) scale(.85)}}
@keyframes mk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mk-shine{to{background-position:220% center}}
@keyframes mk-glow{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.18)}50%{box-shadow:0 10px 34px rgba(255,212,59,.45),0 0 0 6px rgba(255,255,255,.08)}}

/* Way back to the MacAppKit home from every app page (always visible, also on phones) */
.mk-left{display:flex;align-items:center;gap:10px;min-width:0}
.mk-home{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:999px;font-weight:650;font-size:14px;color:#fff;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:background .2s,transform .2s;white-space:nowrap}
.mk-home:hover{background:rgba(255,255,255,.26);text-decoration:none;transform:translateX(-2px)}
.mk-home-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:-.04em;color:#fff;
  background:linear-gradient(135deg,#3b5bdb,#7048e8)}
.mk-sep{color:rgba(255,255,255,.45);font-weight:300;font-size:22px}
@media(max-width:480px){.mk-home-txt{display:none}.mk-home{padding:5px}}

/* Hero headline: words rise in one by one, then a soft light keeps sweeping across them */
.mk-w{display:inline-block;white-space:pre}
@media (prefers-reduced-motion: no-preference){
  .hero h1.mk-split{animation:none}
  .hero h1 .mk-w{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(8px);
    animation:mk-word .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 80ms)}
  .hero h1 .mk-w:not(em){background:linear-gradient(105deg,#fff 0 42%,#ffe7a8 50%,#fff 58% 100%);background-size:320% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:mk-word .8s cubic-bezier(.2,.7,.2,1) forwards,mk-sheen 7s ease-in-out infinite;
    animation-delay:calc(var(--i) * 70ms + 80ms),calc(var(--i) * 90ms + 1.6s)}
  .hero .lead{animation:mk-up 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--mk-lead,.5s)}
  .hero .badges,.hero .cta{animation-delay:var(--mk-cta,.75s)}.hero .fine{animation-delay:var(--mk-fine,.9s)}
  .mk-caret{display:inline-block;width:.06em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:currentColor;animation:mk-blink 1s steps(1) infinite}
}
@keyframes mk-word{to{opacity:1;transform:none;filter:none}}
@keyframes mk-sheen{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
@keyframes mk-blink{50%{opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .hero h1 em.mk-w{animation:mk-word .8s cubic-bezier(.2,.7,.2,1) forwards,mk-shine 5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * 70ms + 80ms),1.2s}
}

/* Product video right under the hero */
.mk-video{position:relative;z-index:2;margin-top:-70px;padding-top:0!important;padding-bottom:30px!important}
.mk-player{position:relative;max-width:980px;margin:0 auto;border-radius:22px;overflow:hidden;background:#111;
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.18)}
.mk-player video{display:block;width:100%;height:auto;aspect-ratio:1440/900}
.mk-pp{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;opacity:.8;transition:opacity .2s,transform .2s}
.mk-pp:hover{opacity:1;transform:scale(1.08)}
.mk-pp span{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.mk-pp.paused span{width:0;height:0;border:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.mk-cap{text-align:center;font-size:14px;margin:14px 0 0;color:rgba(255,255,255,.8)}
.hero:has(+ .mk-video){padding-bottom:130px}
@media (prefers-reduced-motion: no-preference){
  .mk-player{animation:mk-rise 1.1s cubic-bezier(.2,.7,.2,1) .5s both}
}
@keyframes mk-rise{from{opacity:0;transform:translateY(60px) scale(.94) perspective(1200px) rotateX(10deg)}to{opacity:1;transform:none}}

/* Full YouTube walkthrough (youtube-nocookie, lazy) */
.mk-yt{position:relative;max-width:980px;margin:18px auto 0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(20,20,60,.25)}
.mk-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mk-watch{text-align:center}
.mk-watch .mk-sub{max-width:640px;margin:0 auto;color:rgba(255,255,255,.78)}
.mk-watch .mk-cap a{color:#7af0d5}
.doc .mk-yt{margin:16px 0 20px}
.mk-vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:26px;max-width:1100px;margin:22px auto 0;text-align:left}
.mk-vcard{margin:0}
.mk-vgrid .mk-yt{margin:0;max-width:none}
.mk-vcard figcaption{margin-top:12px;color:rgba(255,255,255,.75);font-size:15px;line-height:1.45}
.mk-vcard figcaption strong{display:block;color:#fff;font-size:17px;margin-bottom:3px}
/* blog posts */
.doc .lede{font-size:19px;color:var(--muted);line-height:1.55}
.doc figure{margin:22px 0 26px}
.doc figure img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 14px 34px rgba(20,20,60,.18)}
.doc figure figcaption{color:var(--muted);font-size:14px;margin-top:9px;line-height:1.45}
.doc .cta{background:linear-gradient(120deg,#eef2ff,#f6f0ff);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:30px 0;line-height:1.6}
.doc .cta .btn{margin:12px 12px 0 0;display:inline-block}
.doc .steps li{margin:6px 0}
.doc .faq details{margin:10px 0}
.doc .posts{margin-top:10px}
.mk-guides{max-width:760px}