/* Backgrounds stay full bleed; the working composition has a fixed maximum.
   --gutter is a block's own inner padding. --edge is where content starts on
   any viewport: the gutter itself up to 1504px, then the offset that centres
   a 1440px composition (same formula as the navigation). --bleed is the part
   of --edge beyond the gutter; grid wrappers add it so their cells, which
   keep --gutter as padding, line up with --edge. Self-centred containers keep
   --gutter alone. */
body{--gutter:32px;--edge:max(var(--gutter),calc((100vw - 1440px)/2));--bleed:calc(var(--edge) - var(--gutter))}
.preloader,.section-head,.product__intro,.product__stage,.process__layout,.docs__intro,.docs__note,.cap__intro,.cta,.faq__layout,.footer__cols,.footer__bottom{padding-inline:var(--edge)}
.docs__list{margin-inline:var(--edge)}
.docs__note{max-width:calc(720px + var(--bleed)*2)}
.pillars__grid,.cap__grid,.cap__teams,.cap__cards{padding-inline:var(--bleed)}
.hero__foot{left:var(--edge);right:var(--edge)}
.cta .swiit-rail{margin-inline:calc(var(--edge)*-1)}
.hero{padding-inline:0}
.nav .nav__inner{max-width:1504px;margin-inline:auto;padding-inline:32px;gap:24px}
.nav .nav__links{gap:clamp(16px,2vw,30px)}
.nav .nav__link,.nav .nav__right>a{font-size:16px;white-space:nowrap;font-weight:400;letter-spacing:0}
.nav .nav__brand{flex-shrink:0}
.hero .hero__grid{width:100%;max-width:1504px;margin-inline:auto;padding-inline:32px;box-sizing:border-box}
.hero .hero__content{max-width:650px;width:46%;min-width:0}
.hero .hero__title{font-size:clamp(38px,4.3vw,68px);line-height:1.12;overflow-wrap:anywhere}
.hero .hero__title .line__inner{max-width:100%;white-space:normal}
.hero .hero__sub{max-width:44ch;font-size:18px}
.hero .hero__laptopimg{width:min(48vw,730px);right:max(24px,calc((100vw - 1440px)/2));top:50%;transform:translateY(-46%)}
.hero .hero__ui{max-width:1440px;left:0;right:0;margin-inline:auto}
html[lang^=es] .hero .hero__title{font-size:clamp(32px,3.5vw,54px);letter-spacing:-.025em;font-weight:500}
html[lang^=es] .nav .nav__links{gap:18px}
html[lang^=es] .nav .nav__link{font-size:15px;text-transform:none}
@media(max-width:1200px){html[lang^=es] .nav__links{display:none}html[lang^=es] .nav__burger{display:flex}}
@media(max-width:1024px){.hero .hero__content{width:100%;max-width:680px}.hero .hero__laptopimg{display:none}}
@media(max-width:600px){body{--gutter:24px}.nav .nav__inner,.hero .hero__grid{padding-inline:24px}.hero .hero__title{font-size:clamp(32px,8vw,44px)}html[lang^=es] .hero .hero__title{font-size:clamp(30px,7.5vw,42px)}}