@import url("/btn-animated.css");
@import url("/site-responsive.css");

h1,h2,h3{text-transform:uppercase}
h3.engine-card-title,h3.steps-timeline-title,h3.steps-player-caption{text-transform:none}

.announcement-bar{
  width:100vw;margin-left:calc(50% - 50vw);
  background:#FEFAF5;
  color:#1C1B16;
  border:1px solid #F2D9A8;
  border-radius:16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  box-sizing:border-box;
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.announcement-bar--footer{
  width:min(var(--hero-container-max,1680px),calc(100vw - 48px));
  margin:0 auto;
  position:relative;
  z-index:0;
}
.announcement-bar--footer.announcement-animate-ready:not(.is-visible){
  opacity:0;
  transform:translateY(14px);
}
.announcement-bar--footer.is-visible{
  animation:announcement-in 0.65s ease-out forwards;
}
@keyframes announcement-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.steps-section{
  position:relative;
  z-index:1;
}
.announcement-marquee-wrap{
  width:100%;overflow:hidden;
}
.announcement-marquee-track{
  display:flex;width:max-content;
  animation:announcement_marquee 28s linear infinite;
}
.announcement-marquee-group{display:flex;align-items:center;gap:40px;padding:40px 40px;flex-shrink:0}
.announcement-marquee-item{
  display:flex;align-items:center;gap:12px;
  font-family:'Nunito',-apple-system,sans-serif;
  font-size:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
  color:#54524A;
}
.announcement-marquee-dot{width:8px;height:8px;border-radius:99px;flex-shrink:0;background:#54524A}
@keyframes announcement_marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .announcement-marquee-track{animation:none}
  .announcement-bar--footer.announcement-animate-ready:not(.is-visible),
  .announcement-bar--footer.is-visible{opacity:1;transform:none;animation:none}
}
.site-shell{padding:16px 20px 0;max-width:1220px;margin:0 auto}
body:has(.announcement-bar--top) .site-shell{padding-top:56px}
.site-shell--page{padding-top:72px}
/* Open topbar pages: no reserved pill offset — topbar sits in flow.
   Prefer body.page-nav-reveal-body (set in HTML) so styles apply before DC mounts. */
body.page-nav-reveal-body .site-shell--page,
body:has(.page-nav-reveal) .site-shell--page{padding-top:16px}

/* —— Page initial header (matches home hero topbar) —— */
.page-nav-reveal{
  width:100%;
}
.page-topbar{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:min(var(--hero-container-max,1680px),100%);
  max-width:none;
  margin:0 auto;
  padding:36px var(--hero-container-inset,44px) 0;
  box-sizing:border-box;
}
.page-topbar .hero-brand{
  grid-column:2;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  margin:0;
}
.page-topbar .hero-brand .hitch-logo-icon{
  height:36px;
  width:auto;
}
.page-topbar .hero-brand .hitch-logo-word{
  font-family:'Nunito',-apple-system,sans-serif;
  font-weight:800;
  font-size:30px;
  line-height:1;
  letter-spacing:-.03em;
  color:#1C1B16;
}
.page-topbar .hero-topbar-actions{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}
.page-topbar .hero-topbar-demo{
  grid-column:1;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.page-topbar .hero-topbar-demo > [data-hitch-demo]{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.page-topbar .hero-topbar-actions .nav-ghost,
.page-topbar .hero-topbar-demo.nav-ghost,
.page-topbar .hero-topbar-demo > .nav-ghost{
  font-size:15px;
  font-weight:500;
  color:#0B7A55;
  text-decoration:none;
  padding:10px 14px;
  border-radius:99px;
  border:1px solid rgba(28,27,22,.12);
  background:transparent;
}
.page-topbar .hero-topbar-demo-short{display:none}
.page-topbar .hero-topbar-btn-sizer{display:none}
.page-topbar .hero-topbar-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:99px;
  background:#13C98A;
  color:#FFFFFF;
  flex-shrink:0;
}
.page-topbar .hero-topbar-play svg{
  width:11px;
  height:11px;
  display:block;
}
.page-topbar .hero-topbar-play--play svg{
  width:10px;
  height:10px;
  margin-left:1px;
}
body.page-nav-reveal-body .nav-pill-wrap,
body:has(.page-nav-reveal) .nav-pill-wrap{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-14px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
}
body.page-nav-reveal-body .nav-pill-wrap.is-nav-revealed,
body:has(.page-nav-reveal) .nav-pill-wrap.is-nav-revealed{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
body.page-nav-reveal-body .nav-pill-wrap.is-nav-revealed .nav-pill,
body:has(.page-nav-reveal) .nav-pill-wrap.is-nav-revealed .nav-pill{
  pointer-events:auto;
}

/* Tutorials bubble — shows with floating enclosed header.
   Hidden by default; Home also hard-hides in <head> critical CSS to
   prevent a huge unstyled play SVG flash before this sheet loads. */
.tutorials-bubble{
  position:fixed;
  right:32px;
  bottom:32px;
  z-index:9995;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px 14px 16px;
  border-radius:999px;
  background:#FFFFFF;
  color:#0B7A55;
  text-decoration:none;
  font-family:'Nunito',-apple-system,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:0 12px 32px -12px rgba(28,27,22,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px) scale(.96);
  transition:opacity .35s ease,transform .2s ease,visibility .35s,background .2s ease,box-shadow .2s ease,color .2s ease;
}
.tutorials-bubble.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.tutorials-bubble.is-visible:hover,
.tutorials-bubble.is-visible:focus-visible{
  background:#FFFFFF;
  color:#0B7A55;
  transform:translateY(-2px) scale(1);
  box-shadow:0 16px 36px -10px rgba(28,27,22,.35);
}
.tutorials-bubble-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:99px;
  background:#13C98A;
  color:#FFFFFF;
  flex-shrink:0;
  transition:background .2s ease;
}
.tutorials-bubble-icon svg{
  width:14px;
  height:14px;
  display:block;
}
@media (max-width:640px){
  .tutorials-bubble{
    right:16px;
    bottom:16px;
    padding:12px 16px 12px 14px;
    font-size:13px;
  }
}
@media (max-width:1100px) and (min-width:641px){
  .page-topbar{
    padding-left:var(--hero-container-inset,36px);
    padding-right:var(--hero-container-inset,36px);
  }
}
@media (max-width:640px){
  .page-topbar{
    margin:0 auto;
    padding:20px 12px 0;
    gap:8px;
  }
  .page-topbar .hero-brand{gap:8px;margin:0}
  .page-topbar .hero-brand .hitch-logo-icon{height:28px}
  .page-topbar .hero-brand .hitch-logo-word{font-size:22px}
  .page-topbar .hero-topbar-demo,
  .page-topbar .hero-topbar-actions{display:inline-flex}
  .page-topbar .hero-topbar-demo .hero-topbar-play{display:none}
  .page-topbar .hero-topbar-demo-full{display:none}
  .page-topbar .hero-topbar-demo-short{display:inline}
  .page-topbar .hero-topbar-tutorials{display:none}
  .page-topbar .hero-topbar-actions .nav-ghost,
  .page-topbar .hero-topbar-demo.nav-ghost,
  .page-topbar .hero-topbar-demo > .nav-ghost{
    font-size:13px;
    padding:8px 10px;
    white-space:nowrap;
    width:max-content;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
  }
  .page-topbar .hero-topbar-support{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .page-topbar .hero-topbar-btn-sizer{
    display:inline;
    visibility:hidden;
    pointer-events:none;
  }
  .page-topbar .hero-topbar-btn-label{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
  }
}

.nav-pill-wrap{
  position:fixed;top:16px;left:0;right:0;z-index:10000;
  display:flex;justify-content:center;padding:0 44px;
  pointer-events:none;
  will-change:top;
  width:100%;max-width:1512px;margin:0 auto;
}
body:has(.announcement-bar--top) .nav-pill-wrap{top:64px}
.nav-pill{
  position:relative;z-index:3;pointer-events:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  --nav-progress:0;
  width:100%;max-width:none;min-width:0;
  margin:0 auto;
  padding:
    calc(8px + var(--nav-progress) * 2px)
    calc(var(--nav-progress) * 14px)
    calc(8px + var(--nav-progress) * 2px)
    calc(var(--nav-progress) * 18px);
  box-sizing:border-box;
  background:rgba(20,19,14,calc(var(--nav-progress) * 0.94));
  border:calc(var(--nav-progress) * 1px) solid rgba(255,255,255,calc(var(--nav-progress) * 0.14));
  backdrop-filter:blur(calc(var(--nav-progress) * 18px)) saturate(calc(1 + var(--nav-progress) * 0.4));
  -webkit-backdrop-filter:blur(calc(var(--nav-progress) * 18px)) saturate(calc(1 + var(--nav-progress) * 0.4));
  border-radius:calc(var(--nav-progress) * 99px);
  box-shadow:none;
  will-change:width,border-radius,background;
}
.nav-pill.is-compact .hitch-logo-word{color:#FFFFFF}
.nav-pill.is-compact .nav-pill-links a{color:rgba(243,241,234,.82)}
.nav-pill.is-compact .nav-pill-links a:hover,
.nav-pill.is-compact .nav-pill-links a.is-active{color:#FFFFFF}
.nav-pill.is-compact .nav-pill-actions .nav-ghost{
  color:#FFFFFF;
  border-color:rgba(255,255,255,.28);
}
.nav-pill.is-compact .nav-pill-actions .nav-ghost.is-active{color:#FFFFFF}
.nav-pill.is-compact .nav-pill-actions .nav-cta{
  background:#FFFFFF;
  border-color:#FFFFFF;
  color:#0B7A55;
}
.nav-pill.is-compact .nav-link-hover{background:rgba(255,255,255,.12)}
.nav-pill-logo{display:flex;align-items:center;gap:10px;text-decoration:none;justify-self:start}
.hitch-logo{display:flex;flex-direction:row;align-items:center;gap:8px;text-decoration:none}
.hitch-logo-icon{height:28px;width:auto;display:block;flex-shrink:0}
.hitch-logo-word{font-family:'Nunito',-apple-system,sans-serif;font-weight:800;font-size:22px;color:#1C1B16;line-height:1;letter-spacing:-.02em}
.hitch-logo--footer .hitch-logo-icon{height:32px}
.hitch-logo--footer .hitch-logo-word{font-size:24px}
.nav-pill-links{
  position:relative;display:flex;align-items:center;gap:2px;justify-self:center;
}
.nav-pill-links a{
  position:relative;z-index:1;
  font-size:14px;font-weight:500;color:#4A483F;text-decoration:none;
  padding:8px 14px;border-radius:99px;
  transition:color 0.2s ease;
}
.nav-pill:not(.is-compact) .nav-pill-links a{
  font-size:16px;
  padding:8px 16px;
}
.nav-pill:not(.is-compact) .hitch-logo-word{font-size:24px}
.nav-pill:not(.is-compact) .hitch-logo-icon{height:30px}
.nav-pill-links a:hover,.nav-pill-links a.is-active{color:#1C1B16}
.nav-pill-links a.is-active{font-weight:600}
.nav-link-hover{
  position:absolute;left:0;top:0;z-index:0;
  border-radius:99px;background:rgba(28,27,22,.07);
  pointer-events:none;opacity:0;
  transition:transform 0.25s cubic-bezier(0.34,1.2,0.64,1),width 0.25s ease,height 0.25s ease,opacity 0.2s ease;
  will-change:transform,width,height;
}
.nav-pill:not(.is-compact) .nav-link-hover{display:none}
.nav-pill-actions{
  display:flex;align-items:center;gap:8px;justify-self:end;
}
.nav-pill-actions .nav-ghost,
.nav-pill-actions .nav-cta{font-size:14px;font-weight:500;text-decoration:none;border-radius:99px}
.nav-pill:not(.is-compact) .nav-pill-actions .nav-ghost,
.nav-pill:not(.is-compact) .nav-pill-actions .nav-cta{font-size:16px}
.nav-pill-actions .nav-ghost{
  color:#4A483F;padding:9px 16px;border:1px solid rgba(28,27,22,.12);background:transparent;
}
.nav-pill-actions .nav-ghost.is-active{color:#1C1B16;font-weight:600}
.nav-pill-actions .nav-cta{
  font-weight:600;color:#0B7A55;padding:9px 18px;background:#FFFFFF;border:1px solid #FFFFFF;
  white-space:nowrap;
}

/* —— Mobile menu toggle (hidden on desktop) —— */
.nav-menu-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin:0;
  border:1px solid rgba(28,27,22,.12);
  border-radius:99px;
  background:#FFFFFF;
  color:#1C1B16;
  cursor:pointer;
  flex-shrink:0;
  justify-self:end;
}
.nav-menu-toggle-bars{
  display:block;position:relative;width:18px;height:12px;
}
.nav-menu-toggle-bars::before,
.nav-menu-toggle-bars::after,
.nav-menu-toggle-bars span{
  content:'';
  position:absolute;left:0;right:0;
  height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease,top .2s ease;
}
.nav-menu-toggle-bars span{top:5px}
.nav-menu-toggle-bars::before{top:0}
.nav-menu-toggle-bars::after{top:10px}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bars span{opacity:0}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bars::before{
  top:5px;transform:rotate(45deg);
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bars::after{
  top:5px;transform:rotate(-45deg);
}

/* —— Mobile drawer —— */
.nav-mobile{
  position:fixed;inset:0;z-index:10001;
  pointer-events:none;visibility:hidden;
}
.nav-mobile.is-open{
  pointer-events:auto;visibility:visible;
}
.nav-mobile-backdrop{
  position:absolute;inset:0;
  background:rgba(28,27,22,.42);
  opacity:0;
  transition:opacity .25s ease;
}
.nav-mobile.is-open .nav-mobile-backdrop{opacity:1}
.nav-mobile-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(360px,88vw);
  background:#FEFAF5;
  border-left:1px solid rgba(28,27,22,.08);
  box-shadow:-24px 0 60px -28px rgba(28,27,22,.35);
  display:flex;flex-direction:column;
  transform:translateX(104%);
  transition:transform .28s cubic-bezier(0.22,1,0.36,1);
  box-sizing:border-box;
  padding:20px 20px 28px;
}
.nav-mobile.is-open .nav-mobile-panel{transform:translateX(0)}
.nav-mobile-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(28,27,22,.08);
}
.nav-mobile-close{
  width:44px;height:44px;padding:0;
  border:1px solid rgba(28,27,22,.12);
  border-radius:99px;background:#FFFFFF;
  color:#1C1B16;cursor:pointer;
  font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.nav-mobile-links{
  display:flex;flex-direction:column;gap:4px;
  padding:20px 0;
  flex:1 1 auto;
  overflow:auto;
}
.nav-mobile-links a{
  display:block;
  font-family:'Nunito',-apple-system,sans-serif;
  font-size:22px;font-weight:700;
  letter-spacing:-.02em;
  color:#1C1B16;text-decoration:none;
  padding:14px 12px;border-radius:14px;
}
.nav-mobile-links a.is-active{
  background:rgba(19,201,138,.12);
  color:#0B7A55;
}
.nav-mobile-footer{
  display:flex;flex-direction:column;gap:10px;
  padding-top:16px;
  border-top:1px solid rgba(28,27,22,.08);
}
.nav-mobile-footer .nav-cta,
.nav-mobile-footer a.nav-mobile-install{
  display:flex;align-items:center;justify-content:center;
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:16px;font-weight:700;
  text-decoration:none;border-radius:99px;
  padding:14px 18px;
  background:#FFFFFF;color:#0B7A55;border:1px solid #FFFFFF;
}
.nav-mobile-footer .nav-ghost,
.nav-mobile-footer a.nav-mobile-support{
  display:flex;align-items:center;justify-content:center;
  width:100%;box-sizing:border-box;
  font-size:15px;font-weight:600;text-decoration:none;border-radius:99px;
  padding:12px 18px;
  color:#1C1B16;border:1px solid rgba(28,27,22,.14);background:#FFFFFF;
}
body.nav-mobile-open{
  overflow:hidden;
  overscroll-behavior:none;
}

@media (max-width:1100px){
  .nav-pill-actions .nav-cta{
    padding:9px 14px;
  }
  .nav-pill-actions .nav-ghost{
    padding:9px 12px;
  }
  .nav-pill-links a{padding:8px 10px}
}

/* Tablet keeps desktop header/menu — only tighten spacing */
@media (max-width:900px){
  .nav-pill:not(.is-compact) .nav-pill-actions .nav-ghost{display:none}
  .nav-pill-links a{padding:8px 10px;font-size:13px}
  .nav-pill:not(.is-compact) .nav-pill-links a{padding:8px 12px;font-size:15px}
}

/* Mobile-only hamburger header */
@media (max-width:640px){
  .site-shell{padding-top:12px}
  .site-shell--page{padding-top:68px}
  body.page-nav-reveal-body .site-shell--page,
  body:has(.page-nav-reveal) .site-shell--page{padding-top:12px}
  .announcement-marquee-group{gap:28px;padding:24px 20px}
  .announcement-marquee-item{font-size:14px;gap:10px;letter-spacing:.06em}
  .announcement-marquee-dot{width:7px;height:7px}
  body:has(.announcement-bar--top) .site-shell{padding-top:20px}

  .nav-pill-wrap{
    left:16px;
    right:16px;
    width:auto;
    max-width:none;
    margin:0;
    padding:0;
    top:16px;
    box-sizing:border-box;
    transition:left .25s ease,right .25s ease,top .25s ease;
  }
  body:has(.announcement-bar--top) .nav-pill-wrap{top:40px}

  body:has(.hero-scroll-section) .nav-pill-wrap{
    left:16px;
    right:16px;
    top:16px;
    width:auto;
    padding:0;
    margin:0;
  }

  .nav-pill{
    grid-template-columns:1fr auto auto;
    gap:8px;
    padding:6px 0 6px 4px!important;
    width:100%!important;
    max-width:100%;
    box-sizing:border-box;
    background:transparent!important;
    border:1px solid transparent!important;
    border-radius:99px!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
    transition:background .25s ease,box-shadow .25s ease,border-color .25s ease,padding .25s ease,backdrop-filter .25s ease;
  }

  /* Floating compact header after scroll — ink black glass */
  .nav-pill.is-compact{
    background:rgba(20,19,14,.94)!important;
    border-color:rgba(255,255,255,.14)!important;
    box-shadow:0 12px 32px -18px rgba(20,19,14,.45)!important;
    backdrop-filter:blur(18px) saturate(1.4)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.4)!important;
    padding:6px 8px 6px 12px!important;
  }

  .nav-pill-links,
  .nav-link-hover{display:none!important}
  .nav-pill-actions{
    display:flex!important;
    align-items:center;
    gap:0;
    justify-self:end;
  }
  .nav-pill-actions .nav-ghost{display:none!important}
  .nav-pill-actions .nav-cta{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    padding:8px 12px!important;
    font-size:12px!important;
    font-weight:700;
    white-space:nowrap;
    background:#14130E!important;
    border-color:#14130E!important;
    color:#FFFFFF!important;
  }
  .nav-pill.is-compact .nav-pill-actions .nav-cta{
    background:#1C1B16!important;
    border-color:#1C1B16!important;
  }
  .nav-pill-actions .nav-cta .btn-animated-label{font-size:inherit}
  .nav-menu-toggle{
    display:inline-flex;
    width:40px;
    height:40px;
    justify-self:end;
    flex-shrink:0;
    background:transparent;
    border-color:rgba(28,27,22,.14);
    box-shadow:none;
  }
  .nav-pill.is-compact .nav-menu-toggle{
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.88);
    box-shadow:none;
  }
  .nav-pill-logo{justify-self:start}
  .hitch-logo-word,
  .nav-pill:not(.is-compact) .hitch-logo-word{font-size:18px;color:#1C1B16}
  .nav-pill.is-compact .hitch-logo-word{font-size:18px;color:#FFFFFF}
  .hitch-logo-icon,
  .nav-pill:not(.is-compact) .hitch-logo-icon,
  .nav-pill.is-compact .hitch-logo-icon{height:24px}

  .nav-mobile-panel{width:min(100vw - 24px,340px);padding:16px 16px 24px}
  .nav-mobile-links a{font-size:20px;padding:12px 10px}
}

@media (max-width:380px){
  .nav-pill-actions .nav-cta{padding:8px 10px!important;font-size:11px!important}
}

@media (prefers-reduced-motion:reduce){
  .nav-mobile-backdrop,
  .nav-mobile-panel,
  .nav-menu-toggle-bars::before,
  .nav-menu-toggle-bars::after,
  .nav-menu-toggle-bars span{transition:none}
}