/* Página de cada app (witchmymac.com/<app>/): topo com ícone, resumo e instalação em uma linha,
   a ideia, os recursos em cartões, galeria, instalação e ficha. A cor do app vem de [data-app] (--c). */

/* topo */
.ap-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:56px 0 24px}
.ap-back{display:inline-block;margin-bottom:28px;font-size:14px;color:var(--muted);transition:color .15s}
.ap-back:hover{color:var(--text)}
.ap-icon{width:112px;height:112px;margin-bottom:20px;filter:drop-shadow(0 18px 36px #000a)}
.ap-hero .eyebrow{color:var(--c,var(--accent));margin-bottom:8px}
.ap-hero h1{font-size:clamp(44px,6vw,68px);letter-spacing:-.035em;line-height:1;font-weight:800}
.ap-hero .lead{margin-top:18px;font-size:18px;color:var(--muted);max-width:520px}
.ap-hero .app-cta{margin-top:28px}
.ap-hero .btn-primary{background:linear-gradient(120deg,var(--c),color-mix(in srgb,var(--c) 55%,#ec4899));box-shadow:0 8px 30px -8px color-mix(in srgb,var(--c) 70%,transparent)}
.ap-hero .req{margin-top:14px;font-size:13px;color:var(--muted)}
.ap-hero .req [data-version]:not(:empty)::before{content:"v"}
.ap-hero .req [data-version]:not(:empty)::after{content:" · "}
.ap-oneliner{margin-top:28px;max-width:520px}
.ap-oneliner > p{font-size:14px;color:var(--muted);margin-bottom:10px}
.ap-hero-shot{position:relative;min-width:0}
.ap-hero-shot::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--c,#a855f7) 30%,transparent),transparent)}
.ap-hero-shot .shot{width:100%;box-shadow:0 40px 90px -30px #000}

/* a ideia */
.ap-idea .eyebrow{color:var(--c,var(--accent));margin-bottom:10px}
.ap-idea h2{margin-bottom:22px}
.ap-idea p:not(.eyebrow){color:#d6d3e6;font-size:18px;line-height:1.7;margin-bottom:16px}

/* recursos */
.ap-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ap-features .card{padding:24px}
.ap-features .card::before{background:radial-gradient(320px 160px at 0 -20%,var(--c,#a855f7) 0,transparent 70%)}
.ap-features h3{font-size:17px;margin-bottom:8px;letter-spacing:-.01em}
.ap-features p{color:var(--muted);font-size:15px;line-height:1.55}

/* galeria */
.ap-gallery{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:24px;align-items:start}
.ap-gallery figure{margin:0}
.ap-gallery .shot{width:100%}
.ap-gallery figcaption{margin-top:12px;font-size:14px;color:var(--muted);text-align:center}

/* instalar */
.ap-install .term{max-width:680px;margin:0 auto}
.ap-install-alt{margin-top:18px;text-align:center;color:var(--muted);font-size:15px}
.ap-install-alt a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ficha */
.ap-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--border)}
.ap-facts div{background:var(--bg2);padding:18px 22px}
.ap-facts dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ap-facts dd{margin:0;font-size:15px}
.ap-facts a{color:var(--c,var(--accent))}

@media (max-width:960px){
  .ap-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:32px}
  .ap-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ap-features{grid-template-columns:minmax(0,1fr)}
  .ap-gallery{grid-template-columns:minmax(0,1fr)}
  .ap-gallery .ap-portrait{max-width:320px;margin:0 auto}
  .ap-facts{grid-template-columns:minmax(0,1fr)}
  .ap-idea p:not(.eyebrow){font-size:16px}
}