html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid #086de8; outline-offset: 5px; }
.site-header { backdrop-filter: blur(18px); background: #ffffffed; transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 3px 24px #00000008; }
.brand { flex-shrink: 0; gap: 8px; }
.brand img { width: 34px; height: 34px; }
.brand span { font-family: Inter, sans-serif; font-size: 31px; font-weight: 720; letter-spacing: -1.6px; line-height: 1; color: #141414; }
.nav-trigger { display: flex; align-items: center; gap: 8px; color: #141414b3; font-size: 16px; line-height: 22px; cursor: pointer; white-space: nowrap; }
.nav-trigger:hover { color: #141414; }
.nav-trigger svg { width: 16px; height: 16px; transition: transform .2s; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel { animation: menu-in .2s ease both; }
.nav-panel[hidden], #mobile-menu[hidden] { display: none; }
.menu-toggle { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.menu-toggle span { width: 22px; height: 2px; background: #141414; transition: transform .2s; }
#mobile-menu { padding: 12px 24px 24px; border-top: 1px solid #ececec; background: #fff; }
#mobile-menu a { display: block; padding: 12px 0; font-size: 17px; }
#hero-fold h1 { animation: title-in .85s cubic-bezier(.16,1,.3,1) both; }
#hero-fold p { animation: title-in .9s .12s cubic-bezier(.16,1,.3,1) both; }
#hero-fold .animate-marquee { animation-duration: 100s; }
#hero-fold button:hover { box-shadow: 0 4px 24px #086de824; }
.brand-mascot { object-fit: contain !important; padding: 28%; background: #f2efff; }
.video-card { isolation: isolate; }
.video-card video { transition: transform .65s cubic-bezier(.22,1,.36,1); }
.video-card:hover video { transform: scale(1.045); }
.video-card:after { content: '▶'; position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 13px; color: #fff; background: #0003; backdrop-filter: blur(10px); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; pointer-events: none; }
.video-card:hover:after, .video-card:focus-visible:after { opacity: 1; transform: scale(1); }
.lift-card { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; }
.lift-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px -22px #8723e138; }
.lift-card button svg { transition: transform .2s; }
.lift-card button:hover svg { transform: translateX(4px); }
.reveal.ready { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1); }
.reveal.ready.visible { opacity: 1; transform: translateY(0); }
.faq-answer { max-width: 1000px; margin: 0 auto; padding: 0 32px 30px; font: 400 18px/1.65 Inter, sans-serif; color: #525252; }
[data-slot="accordion-content"][hidden] { display: none; }
[data-slot="accordion-content"]:not([hidden]) { animation: answer-in .3s ease; }
.article-track { overflow-x: auto !important; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.article-track > div { transform: none !important; }
[data-slot="carousel-item"] { scroll-snap-align: start; }
dialog { position: fixed; margin: auto; padding: 0; border: none; border-radius: 20px; width: min(1080px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); background: #141414; color: white; box-shadow: 0 30px 100px #0005; }
dialog::backdrop { background: #080810d6; backdrop-filter: blur(14px); }
dialog[open] { animation: modal-in .28s ease; }
#video-dialog video { display: block; width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; }
.dialog-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 42px; height: 42px; border: 1px solid #ffffff40; border-radius: 50%; background: #1119; color: #fff; font: 30px/1 Inter,sans-serif; cursor: pointer; backdrop-filter: blur(10px); }
.video-caption { padding: 16px 24px; font-size: 16px; }
#article-dialog { background: white; color: #141414; max-width: 720px; padding: 30px; }
#article-dialog > img { width: 100%; max-height: 320px; border-radius: 12px; object-fit: cover; }
#article-dialog h2 { font-size: clamp(26px,4vw,40px); line-height: 1.1; margin: 24px 0 16px; font-family: var(--font-media-sans),Inter,sans-serif; }
.article-copy { font-size: 18px; line-height: 1.6; color: #555; }
.article-cta { display: inline-block; margin-top: 24px; padding: 12px 20px; border-radius: 24px; color: #fff; background: #086de8; }
.pricing-glass-price-current { font-variant-numeric: tabular-nums; }
.pricing-glass-price-original { color: #ffffff80; font-size: 30px; text-decoration: line-through; margin-right: 10px; }
.pricing-glass-price-original[hidden] { display: none; }
.pricing-glass-pill[hidden] { display: none; }
.pricing-glass-features { padding-bottom: 28px; }
.pricing-glass-seats { display: flex; justify-content: center; gap: 16px; align-items: center; }
.pricing-glass-seats button { width: 32px; height: 32px; border: 1px solid #ffffff25; border-radius: 100%; cursor: pointer; }
.pricing-glass-seats button:disabled { opacity: .3; cursor: default; }
.pricing-glass-cards[hidden] { display: none; }
.pricing-glass-billing[aria-checked="false"] .pricing-glass-billing-knob { transform: translateX(0); }
@keyframes title-in { from { opacity: 0; transform: translateY(32px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.965) translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1199px) {
  .desktop-nav > .nav-item { padding-left: 10px; padding-right: 10px; }
  .brand span { font-size: 28px; }
}
@media (max-width: 1050px) {
  nav .desktop-nav { display: none; }
  .menu-toggle { display: flex; cursor: pointer; }
  .nav-actions { margin-left: auto; margin-right: 12px; }
}
@media (max-width: 767px) {
  nav { padding: 15px 20px !important; }
  .brand span { font-size: 27px; }
  .brand img { width: 30px; height: 30px; }
  .nav-actions button:first-child { display: none; }
  #hero-fold h1 { font-size: clamp(44px, 9.3vw, 68px); margin: 0; }
  #hero-fold > div { padding-top: 26px; }
  #hero-fold p { padding: 0; }
  #hero-fold .overflow-x-clip { margin-top: 10px; }
  #hero-fold .animate-marquee { animation-duration: 130s; }
  #video-wall { margin-top: 35px; }
  .faq-answer { padding: 0 8px 24px; font-size: 16px; }
  .video-card:after { opacity: 1; transform: none; }
  #article-dialog { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal.ready { opacity: 1; transform: none; }
}