/* Shared by every page after the homepage: the sky header, its clouds, and section heads. */
/* The page behind everything is the sky, so Safari on iPhone tints its status bar blue above the
   hero, as on the homepage; the content itself sits on paper (main). */
.an-page{background:var(--sky-top)}
.an-page main{background:var(--sky-paper)}
/* The same long sky as the homepage, but its light end sits below the button, so the text reads on every sky. */
.an-hero{min-height:0;padding-bottom:clamp(170px,15vw,240px);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-middle) 58%,var(--sky-low) 90%,var(--sky-paper) 100%)}
.an-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 200px),transparent)}
.an-cloud{position:absolute;max-width:none;height:auto}.an-cloud img{display:block;width:100%;height:auto}
.an-cloud img.sky-outgoing{position:absolute;inset:0}
.an-cloud.far{right:-120px;top:120px;width:min(44vw,640px);opacity:.4}
.an-cloud.near{right:-160px;bottom:-260px;width:min(70vw,1040px)}
.an-hero-copy{position:relative;max-width:1440px;margin:0 auto;padding:clamp(72px,9vw,128px) 56px 0}
.an-kicker{margin:0 0 18px;font-size:14px;line-height:20px;color:#d6e2f3}
.an-hero h1{max-width:12ch;margin:0;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:500;font-size:clamp(48px,7vw,104px);line-height:.98;letter-spacing:-.045em;color:#fff}
.an-lead{max-width:600px;margin:28px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:#fff}
.an-aside{max-width:560px;margin:18px 0 0;font-size:15px;line-height:23px;color:#fff}
.an-down{display:inline-flex;align-items:center;gap:8px;margin-top:36px;padding:12px 18px;border-radius:12px;background:#fff;color:var(--sky-ink);font-size:15px;text-decoration:none;box-shadow:0 8px 24px #031b4426;transition:background-color 160ms}
.an-down:hover{background:var(--sky-pill)}
.an-down svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.an-section{max-width:1440px;margin:0 auto;padding:clamp(80px,9vw,128px) 56px 0;color:var(--sky-ink)}
.an-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px}
.an-head h2{max-width:16ch;margin:0;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:400;font-size:clamp(38px,4.4vw,64px);line-height:1.04;letter-spacing:-.035em}
.an-head p{max-width:420px;margin:0;font-size:17px;line-height:27px}
@media(max-width:900px){
 .an-hero-copy,.an-section{padding-left:24px;padding-right:24px}
 .an-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
 .an-cloud.near{right:-420px;bottom:-200px;width:820px}.an-cloud.far{display:none}
 .an-hero{padding-bottom:240px}
}
/* As you scroll: the hero clouds move at two depths (page.js), and blocks marked data-rise rise in as they arrive. */
.an-cloud{will-change:transform}
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){
 body:not(.reduced) .an-head p,body:not(.reduced) [data-rise]{animation:an-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}}
@keyframes an-rise{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}