/* Derived from the current public Auroria header/footer, verified 2026-09-04. */
/* Scoped production shell: the preview's FAQ styles remain independent. */
.auroria-shell{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.5;color:#1a1235;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.auroria-shell *,.auroria-shell *::before,.auroria-shell *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
.auroria-shell h1,.auroria-shell h2,.auroria-shell h3,.auroria-shell h4,.auroria-shell h5,.auroria-shell h6,.auroria-shell p,.auroria-shell ul{margin:0}
.auroria-shell h4{font-size:inherit;font-weight:inherit}
.auroria-shell ul{list-style:none;padding:0}
.auroria-shell a{color:inherit;text-decoration:inherit}
.auroria-shell button{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0;background-color:transparent;background-image:none;text-transform:none;cursor:pointer}
.auroria-shell img,.auroria-shell svg{display:block;vertical-align:middle}
.auroria-shell img{max-width:100%;height:auto}
.auroria-shell svg{flex-shrink:1}

.auroria-shell *, .auroria-shell ::before, .auroria-shell ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
.auroria-shell ::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
.auroria-shell .invisible {
    visibility: hidden
}
.auroria-shell .fixed {
    position: fixed
}
.auroria-shell .absolute {
    position: absolute
}
.auroria-shell .relative {
    position: relative
}
.auroria-shell .sticky {
    position: sticky
}
.auroria-shell .inset-0 {
    inset: 0px
}
.auroria-shell .inset-x-0 {
    left: 0px;
    right: 0px
}
.auroria-shell .left-0 {
    left: 0px
}
.auroria-shell .top-0 {
    top: 0px
}
.auroria-shell .top-full {
    top: 100%
}
.auroria-shell .z-10 {
    z-index: 10
}
.auroria-shell .z-50 {
    z-index: 50
}
.auroria-shell .col-span-2 {
    grid-column: span 2 / span 2
}
.auroria-shell .mx-auto {
    margin-left: auto;
    margin-right: auto
}
.auroria-shell .mb-2 {
    margin-bottom: 0.5rem
}
.auroria-shell .mb-8 {
    margin-bottom: 2rem
}
.auroria-shell .mr-3 {
    margin-right: 0.75rem
}
.auroria-shell .mt-10 {
    margin-top: 2.5rem
}
.auroria-shell .mt-12 {
    margin-top: 3rem
}
.auroria-shell .mt-2 {
    margin-top: 0.5rem
}
.auroria-shell .mt-3 {
    margin-top: 0.75rem
}
.auroria-shell .mt-4 {
    margin-top: 1rem
}
.auroria-shell .mt-5 {
    margin-top: 1.25rem
}
.auroria-shell .block {
    display: block
}
.auroria-shell .flex {
    display: flex
}
.auroria-shell .inline-flex {
    display: inline-flex
}
.auroria-shell .grid {
    display: grid
}
.auroria-shell .hidden {
    display: none
}
.auroria-shell .h-10 {
    height: 2.5rem
}
.auroria-shell .h-11 {
    height: 2.75rem
}
.auroria-shell .h-12 {
    height: 3rem
}
.auroria-shell .h-3\.5 {
    height: 0.875rem
}
.auroria-shell .h-4 {
    height: 1rem
}
.auroria-shell .h-5 {
    height: 1.25rem
}
.auroria-shell .h-6 {
    height: 1.5rem
}
.auroria-shell .h-7 {
    height: 1.75rem
}
.auroria-shell .h-8 {
    height: 2rem
}
.auroria-shell .h-9 {
    height: 2.25rem
}
.auroria-shell .h-full {
    height: 100%
}
.auroria-shell .h-px {
    height: 1px
}
.auroria-shell .w-10 {
    width: 2.5rem
}
.auroria-shell .w-11 {
    width: 2.75rem
}
.auroria-shell .w-12 {
    width: 3rem
}
.auroria-shell .w-3\.5 {
    width: 0.875rem
}
.auroria-shell .w-4 {
    width: 1rem
}
.auroria-shell .w-5 {
    width: 1.25rem
}
.auroria-shell .w-6 {
    width: 1.5rem
}
.auroria-shell .w-9 {
    width: 2.25rem
}
.auroria-shell .w-\[320px\] {
    width: 320px
}
.auroria-shell .w-auto {
    width: auto
}
.auroria-shell .w-full {
    width: 100%
}
.auroria-shell .max-w-7xl {
    max-width: 80rem
}
.auroria-shell .max-w-md {
    max-width: 28rem
}
.auroria-shell .max-w-sm {
    max-width: 24rem
}
.auroria-shell .flex-1 {
    flex: 1 1 0%
}
.auroria-shell .shrink-0 {
    flex-shrink: 0
}
.auroria-shell .origin-top-left {
    transform-origin: top left
}
.auroria-shell .-translate-y-2 {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.auroria-shell .scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.auroria-shell .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
.auroria-shell .flex-col {
    flex-direction: column
}
.auroria-shell .place-items-center {
    place-items: center
}
.auroria-shell .items-start {
    align-items: flex-start
}
.auroria-shell .items-center {
    align-items: center
}
.auroria-shell .justify-center {
    justify-content: center
}
.auroria-shell .justify-between {
    justify-content: space-between
}
.auroria-shell .gap-1 {
    gap: 0.25rem
}
.auroria-shell .gap-1\.5 {
    gap: 0.375rem
}
.auroria-shell .gap-2 {
    gap: 0.5rem
}
.auroria-shell .gap-3 {
    gap: 0.75rem
}
.auroria-shell .gap-4 {
    gap: 1rem
}
.auroria-shell .gap-5 {
    gap: 1.25rem
}
.auroria-shell .gap-8 {
    gap: 2rem
}
.auroria-shell :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}
.auroria-shell .overflow-y-auto {
    overflow-y: auto
}
.auroria-shell .rounded-2xl {
    border-radius: 1rem
}
.auroria-shell .rounded-lg {
    border-radius: 0.5rem
}
.auroria-shell .rounded-xl {
    border-radius: 0.75rem
}
.auroria-shell .border {
    border-width: 1px
}
.auroria-shell .border-b {
    border-bottom-width: 1px
}
.auroria-shell .border-t {
    border-top-width: 1px
}
.auroria-shell .border-emerald-500\/30 {
    border-color: rgb(16 185 129 / 0.3)
}
.auroria-shell .border-line {
    --tw-border-opacity: 1;
    border-color: rgb(240 238 246 / var(--tw-border-opacity, 1))
}
.auroria-shell .border-line\/60 {
    border-color: rgb(240 238 246 / 0.6)
}
.auroria-shell .border-line\/80 {
    border-color: rgb(240 238 246 / 0.8)
}
.auroria-shell .border-transparent {
    border-color: transparent
}
.auroria-shell .border-white\/10 {
    border-color: rgb(255 255 255 / 0.1)
}
.auroria-shell .bg-emerald-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
}
.auroria-shell .bg-ink {
    --tw-bg-opacity: 1;
    background-color: rgb(26 18 53 / var(--tw-bg-opacity, 1))
}
.auroria-shell .bg-line\/70 {
    background-color: rgb(240 238 246 / 0.7)
}
.auroria-shell .bg-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(250 249 255 / var(--tw-bg-opacity, 1))
}
.auroria-shell .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.auroria-shell .bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05)
}
.auroria-shell .bg-white\/65 {
    background-color: rgb(255 255 255 / 0.65)
}
.auroria-shell .bg-white\/70 {
    background-color: rgb(255 255 255 / 0.7)
}
.auroria-shell .bg-white\/85 {
    background-color: rgb(255 255 255 / 0.85)
}
.auroria-shell .p-2 {
    padding: 0.5rem
}
.auroria-shell .p-4 {
    padding: 1rem
}
.auroria-shell .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.auroria-shell .px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem
}
.auroria-shell .px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.auroria-shell .px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
.auroria-shell .py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}
.auroria-shell .py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
}
.auroria-shell .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.auroria-shell .py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}
.auroria-shell .py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem
}
.auroria-shell .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}
.auroria-shell .pb-12 {
    padding-bottom: 3rem
}
.auroria-shell .pt-5 {
    padding-top: 1.25rem
}
.auroria-shell .pt-6 {
    padding-top: 1.5rem
}
.auroria-shell .text-center {
    text-align: center
}
.auroria-shell .text-\[11px\] {
    font-size: 11px
}
.auroria-shell .text-\[13px\] {
    font-size: 13px
}
.auroria-shell .text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
.auroria-shell .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.auroria-shell .text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
.auroria-shell .font-bold {
    font-weight: 700
}
.auroria-shell .font-extrabold {
    font-weight: 800
}
.auroria-shell .font-medium {
    font-weight: 500
}
.auroria-shell .font-semibold {
    font-weight: 600
}
.auroria-shell .uppercase {
    text-transform: uppercase
}
.auroria-shell .tracking-\[0\.16em\] {
    letter-spacing: 0.16em
}
.auroria-shell .tracking-wider {
    letter-spacing: 0.05em
}
.auroria-shell .text-au-violet {
    --tw-text-opacity: 1;
    color: rgb(121 97 236 / var(--tw-text-opacity, 1))
}
.auroria-shell .text-emerald-700 {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1))
}
.auroria-shell .text-ink {
    --tw-text-opacity: 1;
    color: rgb(26 18 53 / var(--tw-text-opacity, 1))
}
.auroria-shell .text-ink\/80 {
    color: rgb(26 18 53 / 0.8)
}
.auroria-shell .text-sub {
    --tw-text-opacity: 1;
    color: rgb(107 100 128 / var(--tw-text-opacity, 1))
}
.auroria-shell .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.auroria-shell .text-white\/60 {
    color: rgb(255 255 255 / 0.6)
}
.auroria-shell .text-white\/80 {
    color: rgb(255 255 255 / 0.8)
}
.auroria-shell .opacity-0 {
    opacity: 0
}
.auroria-shell .shadow-btn {
    --tw-shadow: 0 8px 24px rgba(74,58,237,0.32);
    --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.auroria-shell .shadow-elev {
    --tw-shadow: 0 24px 80px rgba(121,97,236,0.22);
    --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.auroria-shell .shadow-soft {
    --tw-shadow: 0 4px 20px rgba(26,18,53,0.06);
    --tw-shadow-colored: 0 4px 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.auroria-shell .ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.auroria-shell .ring-white\/10 {
    --tw-ring-color: rgb(255 255 255 / 0.1)
}
.auroria-shell .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.auroria-shell .backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.auroria-shell .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.auroria-shell .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.auroria-shell .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.auroria-shell .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.auroria-shell .duration-150 {
    transition-duration: 150ms
}
.auroria-shell .duration-300 {
    transition-duration: 300ms
}
.auroria-shell .ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
.auroria-shell .hover\:bg-black:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}
.auroria-shell .hover\:bg-line:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 238 246 / var(--tw-bg-opacity, 1))
}
.auroria-shell .hover\:bg-surface:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(250 249 255 / var(--tw-bg-opacity, 1))
}
.auroria-shell .hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1)
}
.auroria-shell .hover\:bg-white\/90:hover {
    background-color: rgb(255 255 255 / 0.9)
}
.auroria-shell .hover\:text-ink:hover {
    --tw-text-opacity: 1;
    color: rgb(26 18 53 / var(--tw-text-opacity, 1))
}
.auroria-shell .hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.auroria-shell .active\:scale-\[\.99\]:active {
    --tw-scale-x: .99;
    --tw-scale-y: .99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.auroria-shell :is(.group:active .group-active\:translate-x-0\.5) {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@media (min-width: 640px) {
    .auroria-shell .sm\:flex-row {
        flex-direction: row
    }
    .auroria-shell .sm\:items-center {
        align-items: center
    }
    .auroria-shell .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}
@media (min-width: 768px) {
    .auroria-shell .md\:col-span-2 {
        grid-column: span 2 / span 2
    }
    .auroria-shell .md\:col-span-3 {
        grid-column: span 3 / span 3
    }
    .auroria-shell .md\:col-span-5 {
        grid-column: span 5 / span 5
    }
    .auroria-shell .md\:flex {
        display: flex
    }
    .auroria-shell .md\:inline-flex {
        display: inline-flex
    }
    .auroria-shell .md\:hidden {
        display: none
    }
    .auroria-shell .md\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }
    .auroria-shell .md\:gap-10 {
        gap: 2.5rem
    }
}
@media (min-width: 1024px) {
    .auroria-shell .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }
}
  /* === Scroll-collapse navigation (synchronized morph + soft edges only during collapse) === */
  .auroria-shell .logo-light { filter: brightness(0) invert(1); }
  /* Logo wrapper: width and mask animate in lockstep — soft fade only when scrolled */
  .auroria-shell .logo-wrap {
    position: relative;
    display: inline-block;
    width: 168px;
    height: 28px;
    overflow: hidden;
    flex-shrink: 0;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 100%);
    transition: width .7s cubic-bezier(.22, 1, .36, 1), -webkit-mask-image .35s ease, mask-image .35s ease;
    will-change: width;
  }
  .auroria-shell.is-scrolled .logo-wrap {
    width: 32px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 6px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 6px), transparent 100%);
  }
  #au-logoFull, #au-logoIso {
    position: absolute !important;
    left: 0; top: 50%;
    height: 28px;
    width: auto;
    max-width: none !important;
    margin: 0 !important;
    transform-origin: left center;
    will-change: opacity, transform;
  }
  /* AURORIA text — scales horizontally in lockstep with wrap (true morph) */
  #au-logoFull {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
    transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .25s ease .35s;
  }
  .auroria-shell.is-scrolled #au-logoFull {
    opacity: 0 !important;
    transform: translateY(-50%) scaleX(0) !important;
    pointer-events: none;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .25s ease .35s;
  }
  /* Iso A — bounces in as the final "fun" element */
  #au-logoIso {
    opacity: 0;
    transform: translateY(-50%) scale(.4);
    transition: transform .55s cubic-bezier(.34, 1.5, .64, 1) .35s, opacity .3s ease .35s;
  }
  .auroria-shell.is-scrolled #au-logoIso {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
    transition: transform .55s cubic-bezier(.34, 1.5, .64, 1) .35s, opacity .3s ease .35s;
  }
  /* Nav island — same .7s duration as logo wrap (simultaneous collapse) */
  #au-navInner {
    transition: padding .7s cubic-bezier(.22, 1, .36, 1), margin-top .7s cubic-bezier(.22, 1, .36, 1), gap .55s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease, max-width .7s cubic-bezier(.22, 1, .36, 1);
    will-change: padding, margin-top, gap, max-width;
  }
  .auroria-shell.is-scrolled #au-navInner {
    margin-top: .5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: -moz-max-content !important;
    width: max-content !important;
    max-width: calc(100% - 1rem);
    padding-top: .375rem !important;
    padding-bottom: .375rem !important;
    padding-left: .75rem !important;
    padding-right: .5rem !important;
    gap: .5rem !important;
    justify-content: flex-start !important;
  }
  .auroria-shell.is-scrolled .nav-cta { padding: .375rem .625rem !important; font-size: .8125rem; transition: padding .7s cubic-bezier(.22, 1, .36, 1), font-size .35s ease; }
  /* Nav labels — collapse simultaneously with logo, soft edge only during collapse */
  .auroria-shell .nav-collapse {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 100%);
    transition: max-width .7s cubic-bezier(.22, 1, .36, 1), opacity .35s ease .15s, margin .55s ease, -webkit-mask-image .35s ease, mask-image .35s ease;
    vertical-align: middle;
    will-change: max-width, opacity;
  }
  .auroria-shell.is-scrolled .nav-collapse {
    max-width: 0 !important;
    opacity: 0 !important;
    margin-left: -.125rem !important;
    margin-right: 0 !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 12px), transparent 100%);
  }
  /* === End scroll-collapse === */


  /* === Mobile hamburger === */
  .auroria-shell .hamburger-box { display:inline-flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:18px; height:14px; }
  .auroria-shell .hamburger-line { display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
  #au-hamburger[aria-expanded="true"] .line-1 { transform: translateY(6px) rotate(45deg); }
  #au-hamburger[aria-expanded="true"] .line-2 { opacity:0; transform: scaleX(0); }
  #au-hamburger[aria-expanded="true"] .line-3 { transform: translateY(-6px) rotate(-45deg); }

  /* === Roles dropdown === */
  #au-rolesDropdown[data-open="true"] #au-rolesMenu { visibility:visible !important; opacity:1 !important; transform:scale(1) !important; pointer-events:auto !important; }
  #au-rolesDropdown[data-open="true"] #au-rolesChevron { transform: rotate(180deg); }

  /* === Mobile menu — full screen === */
  #au-mobileMenu[data-open="true"] { visibility:visible; opacity:1; }
  #au-mobileMenu[data-open="true"] #au-mobileNavPanel { transform: translateY(0); opacity:1; }
  #au-mobileMenu[data-open="true"] .m-stagger { animation: auShellEnter .42s cubic-bezier(.2,.8,.2,1) both; }
  #au-mobileMenu[data-open="true"] .m-stagger:nth-child(1){ animation-delay:.05s }
  #au-mobileMenu[data-open="true"] .m-stagger:nth-child(2){ animation-delay:.10s }
  #au-mobileMenu[data-open="true"] .m-stagger:nth-child(3){ animation-delay:.15s }
  #au-mobileMenu[data-open="true"] .m-stagger:nth-child(4){ animation-delay:.20s }
  #au-mobileMenu[data-open="true"] .m-stagger:nth-child(5){ animation-delay:.25s }
  #au-mobileMenu[data-open="true"] .m-stagger:nth-child(6){ animation-delay:.30s }
  @keyframes auShellEnter { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform:none } }
  body.au-shell-menu-open { overflow: hidden; }


  /* Liquid glass nav effect when scrolled */
  #au-navInner.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
  }

.auroria-shell .grad-blue {background:linear-gradient(135deg,#4A7CF7,#6C9CFF)}
.auroria-shell .grad-coral {background:linear-gradient(135deg,#FF6B6B,#FF8E8E)}
.auroria-shell .grad-amber {background:linear-gradient(135deg,#F5A623,#FFC857)}
.auroria-shell .grad-purple {background:linear-gradient(135deg,#8B5CF6,#A78BFA)}
.auroria-shell .au-grad {background:linear-gradient(135deg,#4A3AED 0%,#6C5CE7 25%,#8B5CF6 50%,#EC4899 80%,#FF6B6B 100%)}
#auroria-header-shell a[aria-current="page"] {color:#7961EC}
/* Keep all labels at readable widths after adding FAQ. */
@media(max-width:1199px){
 .auroria-shell .au-desktop-nav,.auroria-shell .au-desktop-action{display:none}
 .auroria-shell #au-hamburger{display:grid}
 .auroria-shell #au-mobileMenu{display:block}
 .auroria-shell #au-mobileMenu[aria-hidden="true"]{pointer-events:none}
}
@media(min-width:1200px){.auroria-shell #au-hamburger,.auroria-shell #au-mobileMenu{display:none}}
@media(prefers-reduced-motion:reduce){.auroria-shell *,.auroria-shell *::before,.auroria-shell *::after{animation:none!important;transition:none!important}}
@media print{#auroria-header-shell,#auroria-footer-shell{display:none!important}}