/* ALLMC aurora + card hover glow. CSS only, transform/opacity, GPU-cheap. */
.am-aurora{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  contain:layout paint;
}
.am-aurora--fixed{
  position:fixed;z-index:0;
}
.am-aurora i{
  position:absolute;display:block;border-radius:50%;
  will-change:transform;
  background:radial-gradient(circle at 40% 40%,
    rgba(255,61,20,.42) 0%,
    rgba(220,48,16,.22) 28%,
    rgba(92,18,8,.12) 52%,
    transparent 70%);
}
.am-aurora i:nth-child(1){
  width:min(720px,78vw);height:min(720px,78vw);
  top:-18%;left:-14%;
  background:radial-gradient(circle at 42% 40%,
    rgba(255,61,20,.4) 0%,
    rgba(220,48,16,.2) 32%,
    rgba(80,14,8,.1) 58%,
    transparent 72%);
  animation:am-drift-a 32s ease-in-out infinite alternate;
}
.am-aurora i:nth-child(2){
  width:min(560px,70vw);height:min(560px,70vw);
  right:-16%;top:8%;
  background:radial-gradient(circle at 50% 45%,
    rgba(196,30,80,.28) 0%,
    rgba(220,48,16,.16) 34%,
    rgba(60,10,20,.08) 58%,
    transparent 72%);
  animation:am-drift-b 38s ease-in-out infinite alternate;
}
.am-aurora i:nth-child(3){
  width:min(640px,72vw);height:min(640px,72vw);
  left:22%;bottom:-28%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,90,30,.28) 0%,
    rgba(124,22,8,.16) 36%,
    rgba(40,8,4,.08) 60%,
    transparent 74%);
  animation:am-drift-c 44s ease-in-out infinite alternate;
}
@keyframes am-drift-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(8%,6%,0) scale(1.08)}
}
@keyframes am-drift-b{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-10%,8%,0) scale(1.12)}
}
@keyframes am-drift-c{
  from{transform:translate3d(0,0,0) scale(1.05)}
  to{transform:translate3d(6%,-8%,0) scale(.94)}
}

/* Local section glows when a section opts in. */
.has-aurora{position:relative;isolation:isolate}
.has-aurora > .wrap,
.has-aurora > .cut-grid{position:relative;z-index:1}
/* Hero layers keep their own positioning so frames stay at the edges and the chapter label does not sit on the headline. */
.has-aurora::before,
.has-aurora::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  will-change:transform;
}
.has-aurora::before{
  width:min(620px,80%);height:min(620px,80%);
  top:-20%;left:-18%;
  background:radial-gradient(circle,rgba(255,61,20,.28),rgba(220,48,16,.1) 42%,transparent 70%);
  animation:am-drift-a 30s ease-in-out infinite alternate;
}
.has-aurora::after{
  width:min(520px,70%);height:min(520px,70%);
  right:-16%;bottom:-24%;
  background:radial-gradient(circle,rgba(196,30,80,.2),rgba(92,18,8,.1) 46%,transparent 72%);
  animation:am-drift-b 36s ease-in-out infinite alternate;
}
.chapter--paper.has-aurora::before{background:radial-gradient(circle,rgba(255,61,20,.16),rgba(220,48,16,.07) 46%,transparent 70%)}
.chapter--paper.has-aurora::after{background:radial-gradient(circle,rgba(196,30,80,.1),transparent 70%)}
.chapter--orange.has-aurora::before{background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,160,120,.12) 40%,transparent 70%)}
.chapter--orange.has-aurora::after{background:radial-gradient(circle,rgba(90,10,20,.28),transparent 70%)}

/* Card hover glow (box-shadow only, no extra paint on mobile blurs). */
@media (hover:hover) and (pointer:fine){
  .plan,.cat,.step4,.tool-card,.work-item{
    transition:transform .35s cubic-bezier(.16,1,.3,1),
                box-shadow .35s cubic-bezier(.16,1,.3,1),
                border-color .35s cubic-bezier(.16,1,.3,1);
  }
  .plan:hover,.cat:hover,.step4:hover,.tool-card:hover,.work-item:hover,
  .plan:focus-within,.cat:focus-visible,.tool-card:focus-visible,.work-item:focus-visible{
    box-shadow:0 0 0 1px rgba(255,61,20,.38),
               0 16px 40px -12px rgba(255,61,20,.38),
               0 0 64px -16px rgba(196,30,80,.3);
  }
}

@media (max-width:800px){
  .am-aurora i:nth-child(3){display:none}
  .am-aurora i:nth-child(1),
  .am-aurora i:nth-child(2){width:min(420px,90vw);height:min(420px,90vw);opacity:.85}
  .has-aurora::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .am-aurora i,
  .has-aurora::before,
  .has-aurora::after,
  .cut-stage .blob{
    animation:none !important;
    will-change:auto;
  }
  .plan:hover,.cat:hover,.step4:hover,.tool-card:hover,.work-item:hover{
    transition:none;
  }
}

/* Keep page content above the fixed aurora. Do not touch header/nav or the floating pill. */
main, footer, .promo{position:relative;z-index:1}

/* Display face used on the live grail hero, applied to page titles sitewide. Nav stays sans. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/fraunces-300.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url('/fonts/fraunces-300i.woff2') format('woff2')}
main h1, main .chapter h2, main .cta-final h2, .pricing-hero h1{
  font-family:'Fraunces',ui-serif,Georgia,serif;
  font-weight:300;
  letter-spacing:-.02em;
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}