/* The frame every Clara page shares: one nav bar that never moves, and page-to-page transitions. */

/* ---------- nav ---------- */
.sn{position:sticky;top:0;z-index:50;color:#fff;background:rgba(2,4,8,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.12);font-family:Geist,"Helvetica Neue",Arial,sans-serif;view-transition-name:site-nav}
.sn--over{position:fixed;inset:0 0 auto}
.sn__bar{display:flex;align-items:center;gap:24px;height:56px;max-width:1180px;margin:0 auto;padding:0 24px}
.sn a{color:inherit}
.sn a:focus-visible,.sn button:focus-visible{outline:2px solid #8ec5ff;outline-offset:2px}
.sn__brand{position:relative;display:inline-flex;align-items:center;gap:7px;font:500 16px/1 Geist,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;text-decoration:none}
.sn__mark{width:24px;height:24px;flex:none;overflow:visible}
.sn__links{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.sn__links a{position:relative;display:block;padding:8px 0;font:500 13px/16px Geist,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;text-decoration:none;opacity:.66;transition:opacity .25s}
.sn__links a:hover,.sn__links a[aria-current]{opacity:1}
/* the marker under the page you're on; it glides between links as you move around the site */
.sn__dot{position:absolute;left:50%;bottom:-2px;width:18px;height:2px;margin-left:-9px;border-radius:2px;background:#8ec5ff;box-shadow:0 0 10px rgba(142,197,255,.9),0 0 2px #fff;pointer-events:none;view-transition-name:nav-dot}
.sn__brand .sn__dot{bottom:-12px}
.sn__actions{display:flex;gap:8px;margin-left:auto}
.sn__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;border-radius:9999px;font:500 14px/16px Geist,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background .15s,box-shadow .2s}
.sn__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sn .sn__btn--primary{background:#fff;color:#000}.sn__btn--primary:hover{box-shadow:0 0 24px rgba(142,197,255,.35)}
.sn__btn--secondary{background:#1c1d20}.sn__btn--secondary:hover{background:#2a2b2f}
.sn__menu-btn{display:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#1c1d20;color:#fff;cursor:pointer;flex:none}
.sn__menu-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sn__menu-btn .i-close{display:none}
.sn__menu-btn[aria-expanded="true"] .i-open{display:none}.sn__menu-btn[aria-expanded="true"] .i-close{display:inline}
.sn__menu{position:absolute;left:12px;right:12px;top:62px;padding:8px;border-radius:20px;background:rgba(12,15,22,.96);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -20px #000;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-origin:top center;animation:sn-menu .28s cubic-bezier(.22,1,.36,1)}
.sn__menu[hidden]{display:none}
.sn__menu a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:12px;font:500 16px/1 Geist,"Helvetica Neue",Arial,sans-serif;text-decoration:none}
.sn__menu a:hover,.sn__menu a[aria-current]{background:rgba(255,255,255,.06)}
.sn__menu a[aria-current]::after{content:"";width:6px;height:6px;border-radius:50%;background:#8ec5ff;box-shadow:0 0 8px #8ec5ff}
.sn__menu-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}
.sn__menu .sn__menu-cta a{justify-content:center;min-height:44px;border-radius:9999px;font-size:15px}
.sn__menu-cta a:first-child{background:#1c1d20}.sn__menu .sn__menu-cta a:last-child{background:#fff;color:#000}
@keyframes sn-menu{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (max-width:760px){.sn__links,.sn__btn--secondary,.sn__dot{display:none}.sn__bar{padding:0 16px;gap:12px}.sn__menu-btn{display:grid;place-items:center}}

/* ---------- page transitions (Chrome, Edge, Safari 18.2+) ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  /* the nav is drawn identically on every page, so it just sits there */
  ::view-transition-group(site-nav){animation:none}
  ::view-transition-old(site-nav){display:none}
  ::view-transition-new(site-nav){animation:none}
  /* the marker glides from the old link to the new one */
  ::view-transition-group(nav-dot){animation-duration:.62s;animation-timing-function:cubic-bezier(.65,0,.2,1)}
  /* the new page sits underneath from the start (its sky is the same sky); the old page lifts off the top of it and dissolves,
     then the new page's lines arrive one by one. No double fade, so no dark dip. */
  ::view-transition-old(root){z-index:1;animation:sn-out .32s cubic-bezier(.4,0,.6,1) both}
  ::view-transition-new(root){animation:none}
}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@keyframes sn-out{to{opacity:0;transform:translateY(-10px);filter:blur(4px)}}

/* browsers without cross-page transitions: frame.js fades the page out before leaving */
html.sn-leaving body>*:not(.sn):not(.sky):not(script){opacity:0;transform:translateY(-10px);transition:opacity .26s cubic-bezier(.4,0,.6,1),transform .26s cubic-bezier(.4,0,.6,1)}

/* ---------- motion: things stagger in as they come into view (driven by frame.js) ---------- */
/* html.m is set by a one-line script in each page's head when motion is allowed; frame.js adds m-ready once it has tagged the page. */
html.m:not(.m-ready) main,html.m:not(.m-ready) .hero .split__copy,html.m:not(.m-ready) .foot{visibility:hidden}
html.m .m-i{opacity:0;transform:translate3d(0,24px,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1);transition-delay:var(--md,0ms)}
html.m .m-i.m-card{transform:translate3d(0,34px,0) scale(.965)}
html.m .m-i.m-fade{transform:none}
html.m .m-i.in{opacity:1;transform:none}
/* headings: each word slides up out of its own line */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .16em;margin:-.06em 0 -.16em}
html.m .m-h .m-wi{display:inline-block;transform:translate3d(0,118%,0) rotate(4deg);transform-origin:0 100%;transition:transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--md,0ms) + var(--wi) * 55ms)}
html.m .m-h.in .m-wi{transform:none}
/* the roadmap map: drawn left to right, stars light up as the line reaches them */
html.m .m-draw svg{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--mp,0%) - 7%),transparent var(--mp,0%));mask-image:linear-gradient(90deg,#000 calc(var(--mp,0%) - 7%),transparent var(--mp,0%))}
html.m .m-draw .m-star{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .9s cubic-bezier(.34,1.7,.5,1),opacity .35s ease-out}
html.m .m-draw .m-star.on{transform:none;opacity:1}
html.m .m-draw text{opacity:0;transform:translateY(6px);transition:opacity .6s ease-out,transform .8s cubic-bezier(.22,1,.36,1)}
html.m .m-draw text.on{opacity:1;transform:none}
.m-comet{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1000/250;pointer-events:none;overflow:visible}
html.m .m-wipe{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--mp,0%) - 7%),transparent var(--mp,0%));mask-image:linear-gradient(90deg,#000 calc(var(--mp,0%) - 7%),transparent var(--mp,0%))}