/* Shared store navigation and footer styling. */
html[data-cs-shell]{--shell-rgb:154,120,255;--shell-light:#C7B7FF}
html[data-cs-shell="quickfx"]{--shell-rgb:255,136,38;--shell-light:#FFBA7A}
html[data-cs-shell="motionease"]{--shell-rgb:69,117,239;--shell-light:#9BBEFF}
html[data-cs-shell] body .announce-bar{
  background:#0F1013!important;color:#DADAE6!important;
  border-bottom:1px solid rgba(var(--shell-rgb),.15)!important;
}
html[data-cs-shell] body .announce-bar :is(b,strong){color:#fff!important}

/* The imported page wrapper must not trap the fixed navbar in a transparent
   stacking surface: Chromium otherwise composites sharp content through its blur. */
html[data-cs-shell] body div:has(>nav.cs-site-nav){z-index:auto!important}

/* Brand on the left, navigation on the right, with room between each link. */
html[data-cs-shell] body nav.cs-site-nav{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:32px!important;padding:7px 32px!important;
  box-sizing:border-box;min-height:59px;
}
html[data-cs-shell] body .cs-site-nav>.cs-nav-brand{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;min-height:44px;
  color:#eceef1;text-decoration:none;
}
html[data-cs-shell] body .cs-nav-brand>span:first-child{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:9px;background:#12151a;border:1px solid #23272e;
  font:400 23px/1 'Instrument Serif',serif;color:#eceef1;
}
html[data-cs-shell] body .cs-nav-brand .brand-name{font:400 25px/1 'Instrument Serif',serif}
html[data-cs-shell] body .cs-site-nav>.cs-nav-links{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:28px!important;flex:0 1 auto;min-width:0;
}
html[data-cs-shell] body .cs-site-nav>.cs-nav-links>a,
html[data-cs-shell] body .cs-site-nav .cs-nav-contact>button{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-height:44px;margin:0;padding:0;border:0;background:transparent;
  color:#9aa0a8;font:500 14px/1.2 Inter,sans-serif;text-decoration:none;
  white-space:nowrap;transition:color .2s ease;
}
html[data-cs-shell] body .cs-site-nav .cs-nav-links>.cs-nav-contact{display:block!important}
html[data-cs-shell] body .cs-site-nav .cs-nav-links>a.cs-nav-contact{display:inline-flex!important}
html[data-cs-shell] body .cs-site-nav .cs-nav-links>a:hover,
html[data-cs-shell] body .cs-site-nav .cs-nav-contact>button:hover,
html[data-cs-shell] body .cs-site-nav .cs-nav-links>a[aria-current="page"]{color:#eceef1}
html[data-cs-shell] .cs-site-nav :is(a,button):focus-visible{outline:2px solid var(--shell-light);outline-offset:4px}
@media(max-width:760px){
  html[data-cs-shell] body nav.cs-site-nav{padding:7px 16px!important;gap:24px!important}
  html[data-cs-shell] body .cs-site-nav>.cs-nav-links{gap:18px!important}
}
@media(max-width:640px){
  html[data-cs-shell] body nav.cs-site-nav{gap:20px!important}
  html[data-cs-shell] body .cs-nav-brand .brand-name{display:none!important}
  html[data-cs-shell] body .cs-site-nav .cs-nav-links>a.cs-nav-home,
  html[data-cs-shell] body .cs-site-nav .cs-nav-links>a.cs-nav-plugins{display:none!important}
  html[data-cs-shell] body .cs-site-nav .cs-nav-contact>[role="dialog"]{
    position:fixed!important;right:12px!important;left:auto!important;top:58px!important;
    width:min(290px,calc(100vw - 24px))!important;
  }
}
@media(max-width:380px){
  html[data-cs-shell] body nav.cs-site-nav{padding:7px 12px!important;gap:12px!important}
  html[data-cs-shell] body .cs-site-nav>.cs-nav-links{gap:12px!important}
  html[data-cs-shell] body .cs-site-nav>.cs-nav-links>a,
  html[data-cs-shell] body .cs-site-nav .cs-nav-contact>button{font-size:12px!important}
}

html[data-cs-shell] body footer.cs-shared-footer{
  position:relative;z-index:1;display:block!important;box-sizing:border-box;
  width:100%!important;max-width:none!important;min-height:0!important;
  margin:20px 0 0!important;padding:0!important;background:#0A0A0E!important;
  border:0!important;border-top:1px solid rgba(var(--shell-rgb),.15)!important;
  text-align:left!important;content-visibility:visible!important;contain-intrinsic-size:auto!important;
  font-family:Inter,sans-serif;
}
html[data-cs-shell] .cs-shared-footer *{box-sizing:border-box}
html[data-cs-shell] .cs-shared-footer-grid{
  max-width:1240px;margin:0 auto;padding:56px 32px 40px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);
}
html[data-cs-shell] .cs-shared-fbrand img{width:56px;height:56px;border-radius:15px;display:block}
html[data-cs-shell] .cs-shared-fbrand p{
  margin:16px 0 20px;max-width:34ch;font-size:14.5px;line-height:1.6;color:#8A8A99;
}
html[data-cs-shell] .cs-shared-brand{
  display:inline-flex;align-items:center;gap:12px;background:none;padding:0;
  font:400 29px/1 'Instrument Serif',serif;color:#ECEEF1;text-decoration:none;
}
html[data-cs-shell] .cs-shared-mark{
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  font:400 35px/1 'Instrument Serif',serif;background:#12151a;border:1px solid #23272e;border-radius:15px;
}
html[data-cs-shell] .cs-shared-fsocial{display:flex;gap:10px}
html[data-cs-shell] .cs-shared-fsocial a{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  min-height:40px;padding:0;border-radius:11px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);color:#B4B4C4;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
html[data-cs-shell] .cs-shared-fsocial a:hover{
  color:#ECEEF1;background:rgba(var(--shell-rgb),.14);border-color:rgba(var(--shell-rgb),.35);
}
html[data-cs-shell] .cs-shared-fsocial svg{width:17px;height:17px}
html[data-cs-shell] .cs-shared-fcol h3{
  margin:0 0 16px;font:600 12px/1.4 Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#ECEEF1;
}
html[data-cs-shell] .cs-shared-fcol nav{display:flex;flex-direction:column;gap:11px}
html[data-cs-shell] .cs-shared-fcol nav a{
  display:block;font:400 14.5px/1.4 Inter,sans-serif;color:#8A8A99;text-decoration:none;
  transition:color .2s ease;width:fit-content;min-height:0;padding:0;background:none;border:0;
}
html[data-cs-shell] .cs-shared-fcol nav a:hover{color:var(--shell-light)}
html[data-cs-shell] .cs-shared-footer a:focus-visible{outline:2px solid var(--shell-light);outline-offset:5px}
html[data-cs-shell] .cs-shared-footer-bar{
  max-width:1240px;margin:0 auto;padding:22px 32px 40px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
html[data-cs-shell] .cs-shared-footer-bar p{margin:0;font-size:12.5px;line-height:1.6;color:#5F5F6E}
html[data-cs-shell] .cs-shared-footer-tm{text-align:right;max-width:52ch}
@media(max-width:900px){
  html[data-cs-shell] .cs-shared-footer-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:760px){
  html[data-cs-shell] .cs-shared-footer-bar{flex-direction:column;align-items:flex-start}
  html[data-cs-shell] .cs-shared-footer-tm{text-align:left}
}
@media(max-width:560px){
  html[data-cs-shell] .cs-shared-footer-grid{grid-template-columns:1fr;padding:44px 24px 32px}
  html[data-cs-shell] .cs-shared-footer-bar{padding:22px 24px 32px}
}
/* Basic has a preview clip too; the paid pages use the same frame in product-theme.css. */
html[data-cs-shell="typemotion-basic"] body video.basic-demo-vid{
  border:1px solid rgba(var(--shell-rgb),.28)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.26),0 24px 54px -10px rgba(0,0,0,.64)!important;
}
/* The error page keeps its small recovery card, with the same store chrome. */
html[data-cs-shell="404"] body{display:flex;flex-direction:column;min-height:100svh;padding:0}
html[data-cs-shell="404"] .cs-site-nav{width:100%;background:rgba(8,9,12,.55);border-bottom:1px solid rgba(255,255,255,.06)}
html[data-cs-shell="404"] body>.card{margin:72px auto;width:min(calc(100% - 40px),560px)}
html[data-cs-shell="404"] .cs-nav-brand{border-radius:0;background:none;padding:0}

/* Feature rows use spacing to separate their clips. Keep the outlines on the
   clips and comparison tables, without drawing rules across the page background. */
html[data-cs-shell] body main .feat-row{border-top:0!important;border-bottom:0!important}

/* Bundle banner prices share the live catalog and the site's diagonal strike. */
.announce-prices{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.announce-was{position:relative;display:inline-block;text-decoration:none;opacity:.65}
.announce-was::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - .65px),currentColor calc(50% - .65px),currentColor calc(50% + .65px),transparent calc(50% + .65px))}
@media(max-width:480px){
  html.has-announce{--announce-h:48px}
  html[data-cs-shell] body .announce-bar{flex-wrap:wrap;align-content:center;gap:5px 8px;padding:4px 12px;box-sizing:border-box}
  .announce-bar .announce-text{flex-basis:100%;text-align:center}
}