/* App build notes (shared/app-note.php). Extends case-study.css (cs2). 2026-09-24. See Website/SITE-REVAMP-2026-09.md */
.an-app{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:clamp(20px,2.4vw,32px) 0 clamp(14px,1.6vw,22px)}
.an-app img{width:44px;height:44px;border-radius:11px;flex:0 0 auto}
.an-app span{font-weight:600;font-size:1rem;color:var(--ink)}
.an-app em{font-style:normal;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#15803D;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:999px;padding:5px 11px}
.an-h1 em{font-style:normal}
.an-lede{margin:0;font-size:clamp(1.08rem,1rem + .4vw,1.35rem);line-height:1.6;color:#334155;max-width:52ch}
.an-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.an-small{margin:18px 0 0;font-size:.92rem;line-height:1.6;color:var(--mute);max-width:60ch}
.an-small a,.an .cs2-body p a,.an-steps a,.an .cs2-checklist a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.an .cs2-body>p{font-size:1.06rem;line-height:1.75;color:#334155;margin:0 0 1em;max-width:68ch}
.an-steps{margin-top:26px}
.an-steps h3{margin:0 0 6px;font-family:'Outfit',sans-serif;font-weight:500;font-size:1.2rem;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.an-list-title{margin:34px 0 10px;font-family:'Outfit',sans-serif;font-weight:500;font-size:1.2rem;color:var(--ink)}
.an-shots{display:grid;gap:clamp(16px,2vw,28px);margin:0 auto clamp(64px,9vw,130px);max-width:var(--max)}
@media(min-width:900px){.an-shots{grid-template-columns:1fr 1fr}}
.an-shots figure{margin:0}
.an-shots img{display:block;width:100%;height:auto;border-radius:clamp(14px,1.6vw,22px);background:var(--tone,#F1F5F9);box-shadow:0 30px 60px -40px rgba(15,23,42,.35)}
.an-shots figcaption{margin-top:14px;font-size:.95rem;line-height:1.6;color:var(--mute);max-width:60ch}
.an-built{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,90px)}
.an-links{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px}
.an-hello{--red:var(--brand-red,#DC2626);--ink:#0F172A;--line:#E2E8F0;--mute:#64748B;position:relative;overflow:hidden;background:#FFF8F6;padding:clamp(80px,10vw,150px) clamp(16px,4vw,64px);border-top:1px solid #E2E8F0}
.an-hello-in{position:relative;z-index:1;max-width:1600px;margin:0 auto}
.an-hello h2{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(2.6rem,1.6rem + 4.6vw,6rem);line-height:.98;letter-spacing:-.045em;margin:0;max-width:16ch;color:#0F172A}
.an-hello p{margin:22px 0 0;font-size:clamp(1.05rem,1rem + .35vw,1.3rem);line-height:1.6;color:#334155;max-width:52ch}
.an-mesh{position:absolute;inset:0;filter:blur(70px);opacity:.9}
.an-mesh i{position:absolute;border-radius:50%;animation:an-float 22s ease-in-out infinite alternate}
.an-mesh i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-18vw;background:#FECACA}
.an-mesh i:nth-child(2){width:40vw;height:40vw;right:-6vw;top:-10vw;background:#FED7AA;animation-duration:26s}
.an-mesh i:nth-child(3){width:36vw;height:36vw;left:30vw;bottom:-20vw;background:#E9D5FF;animation-duration:30s}
.an-mesh i:nth-child(4){width:24vw;height:24vw;right:18vw;bottom:-8vw;background:#FCA5A5;opacity:.55;animation-duration:18s}
@keyframes an-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.an-mesh i{animation:none}}