/* Collar shared site layer: page transitions, mobile menu, footer, demo booking popup. Loaded by every page. */
@view-transition{navigation:auto}
html{scroll-padding-top:76px;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{overflow-x:clip;max-width:100%}

/* Mobile menu: the page nav hides its links under 640px, so add a toggle */
.site-nav .menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px;border:0;background:none;color:#1d2f55;cursor:pointer;border-radius:8px}
.site-nav .menu-btn svg{width:22px;height:22px;display:block}
.site-nav .menu-btn .i-shut,.site-nav.open .menu-btn .i-open{display:none}
.site-nav.open .menu-btn .i-shut{display:block}
.site-nav .menu-btn:focus-visible{outline:2px solid #1d2f55;outline-offset:2px}
@media (max-width:640px){
  .site-nav .right{gap:12px}
  .site-nav .demo{padding:9px 14px;font-size:14px}
  .site-nav .menu-btn{display:inline-flex}
  .site-nav.open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid #eef0f3;padding:4px 20px 12px;box-shadow:0 12px 24px rgba(20,33,61,.06)}
  .site-nav.open .links a{display:block;padding:12px 0;font-size:17px}
}

/* Footer */
.site-foot{background:#fff;border-top:1px solid #eef0f3;padding:56px max(clamp(16px,3.6vw,72px),env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(clamp(16px,3.6vw,72px),env(safe-area-inset-left));font-family:"Raleway","Helvetica Neue",Arial,sans-serif;color:#1d2f55}
.site-foot .foot-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:32px 48px;align-items:start}
.site-foot .foot-brand{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:28px;letter-spacing:-.01em;color:#1d2f55;text-decoration:none}
.site-foot .foot-tag{margin:8px 0 0;padding:0;background:none;border:0;border-radius:0;font-size:15px;line-height:1.5;color:#5E6068;max-width:28em}
.site-foot nav{display:flex;flex-wrap:wrap;gap:12px 32px;padding-top:8px}
.site-foot nav a{font-size:15px;color:#1d2f55;text-decoration:none;opacity:.8;transition:opacity .2s}
.site-foot nav a:hover,.site-foot nav a:focus-visible,.site-foot nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.site-foot a:focus-visible{outline:2px solid #1d2f55;outline-offset:3px;border-radius:2px}
.site-foot .foot-base{grid-column:1/-1;margin-top:24px;padding-top:24px;border-top:1px solid #eef0f3;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px}
.site-foot .foot-fine{margin:0;font-size:13px;color:#5E6068}
.site-foot .foot-legal{padding-top:0;gap:8px 24px}
.site-foot .foot-legal a{font-size:13px}
@media (max-width:720px){.site-foot .foot-in{grid-template-columns:1fr}.site-foot nav{padding-top:0}}

/* Demo booking popup */
.demo-dlg{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #E6E0D5;border-radius:12px;background:#fff;color:#141414;box-shadow:0 24px 64px rgba(15,26,43,.22);font-family:"Raleway","Helvetica Neue",Arial,sans-serif}
.demo-dlg::backdrop{background:rgba(15,26,43,.45);backdrop-filter:blur(2px)}
.demo-dlg .box{display:flex;flex-direction:column;gap:18px;padding:32px}
.demo-dlg .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.demo-dlg h2{margin:0;font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:32px;line-height:1.1;letter-spacing:-.015em;color:#1d2f55}
.demo-dlg .sub b{font-weight:500;color:#1d2f55}
.demo-dlg .sub{margin:-6px 0 4px;font-size:15px;line-height:1.5;color:#3B3D42}
.demo-dlg .x{flex-shrink:0;width:36px;height:36px;margin:-6px -8px 0 0;border:0;border-radius:8px;background:none;color:#1d2f55;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.demo-dlg .x:hover{background:#f3f1ec}
.demo-dlg label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:#1d2f55}
.demo-dlg input{font:inherit;font-size:16px;font-weight:400;color:#141414;padding:12px 14px;border:1px solid #d9d4ca;border-radius:8px;background:#fff;outline:none;transition:border-color .2s}
.demo-dlg input:focus{border-color:#1d2f55;box-shadow:0 0 0 3px rgba(29,47,85,.12)}
.demo-dlg input[aria-invalid="true"]{border-color:#a23b2a}
.demo-dlg .go{margin-top:6px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border:0;border-radius:8px;background:#1d2f55;color:#fff;font:inherit;font-size:16px;font-weight:500;cursor:pointer;transition:background .2s}
.demo-dlg .go:hover{background:#14213d}
.demo-dlg .go svg{width:18px;height:18px}
.demo-dlg button:focus-visible,.demo-dlg a:focus-visible{outline:2px solid #1d2f55;outline-offset:3px}
.demo-dlg .msg{margin:0;font-size:14px;line-height:1.5;color:#3B3D42;min-height:0}
.demo-dlg .msg:empty{display:none}
.demo-dlg .msg.err{color:#a23b2a}
@media (max-width:480px){.demo-dlg .box{padding:24px}.demo-dlg h2{font-size:28px}}

/* Adaptive layout
   Phones stack. iPad and other tablets keep multi-column sections, with tighter type.
   Short landscape phones stay on the phone layout. Selectors start with body so they win over each page's own rules. */

body .site-nav{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
@media (max-width:900px){
  body .site-nav .links{gap:18px}
  body .site-nav .right{gap:16px}
  body .site-nav .demo{padding:9px 14px}
}
@media (max-width:640px){
  body .site-nav .right{gap:10px}
  body .site-nav .demo{padding:9px 12px;font-size:14px}
  body .site-nav.open .links{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}

/* Homepage */
@media (max-width:1024px) and (min-width:681px){
  body .s-int .int-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
  body .s-int .int-col p{font-size:15px}
  body .s-int h3{font-size:clamp(20px,2.2vw,26px)}
  body .s-int .logos{height:44px;gap:12px;margin-bottom:16px}
  body .s-int .logos svg{height:32px}
  body .s-int .logos svg.pad{height:36px}
}
@media (min-width:741px) and (max-width:1100px) and (min-height:521px){
  body .s-feat{padding-inline:clamp(16px,3vw,28px)}
  body .s-feat .wrap{padding-block:72px 48px}
  body .s-feat .head{margin-bottom:56px}
  body .s-feat .head h2{font-size:clamp(36px,5vw,64px)}
  body .step h3{font-size:clamp(30px,3.2vw,44px)}
  body .step p{font-size:16px}
}
@media (min-width:641px) and (max-width:1040px){
  body .s-close .cta{width:auto}
  body .s-close .ticker-form{width:min(100%,420px)}
  body .s-close .closing{padding-block:clamp(72px,10vw,112px)}
}
@media (max-width:740px),(max-height:520px){
  body .s-hero{padding-inline:max(16px,env(safe-area-inset-left),env(safe-area-inset-right))}
  body .s-hero .hero{padding-block:32px 36px;width:100%;max-width:100%}
  body .hl-wrap,body .s-hero h1{max-width:100%}
  body .sub{font-size:clamp(18px,4.6vw,24px)}
  body .see{width:min(100%,440px)}
  body .ticker{flex:1 1 220px;min-width:0;max-width:100%}
  body .ticker input{width:auto;flex:1;min-width:0}
}
@media (max-width:640px){
  body .s-close .cta{width:100%}
  body .s-close .ticker-form{width:100%}
  body .s-close .closing-inner,body .s-close .closing{align-items:stretch}
}

/* Product */
@media (min-width:681px) and (max-width:820px){
  body .nums ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,36px)}
  body .nums{--n:clamp(44px,6.4vw,72px)}
}
@media (max-width:680px){
  body .nums ul{gap:48px}
  body .nums{--n:clamp(64px,18vw,96px)}
  body .nums .in{padding-block:72px;gap:40px}
}
@media (max-width:1024px){
  body .field{height:clamp(500px,62vh,640px)}
  body .field .ask{border-radius:28px;width:min(820px,calc(100% - 40px));padding:12px 12px 12px 22px}
  body .field .ask .q{white-space:normal;line-height:1.25;overflow:visible;font-size:clamp(17px,2.4vw,28px)}
}
@media (max-width:760px){
  body .how ol{grid-template-columns:1fr}
  body .how li{flex-direction:row;align-items:flex-start;gap:12px}
  body .how .n{flex:none}
}
@media (max-width:640px){
  body .p-hero{--h1:clamp(32px,10vw,48px)}
  body .p-hero .in{padding-block:48px 16px;width:100%}
  body .p-hero h1,body .p-hero .line{max-width:100%}
  /* Keep the drifting cards and the question on separate rows, so the question no longer cuts through the cards. */
  body .field{height:auto;display:flex;flex-direction:column;align-items:center;margin-top:8px;padding-bottom:36px;-webkit-mask-image:none;mask-image:none}
  body .field .plane{position:relative;left:auto;top:auto;width:100%;height:400px;overflow:hidden;transform:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
  body .field .track,body .field .set{gap:18px}
  body .field .col{width:172px;gap:18px}
  body .field .col.wide{width:200px}
  body .field .veil{display:none}
  body .field .ask{position:relative;left:auto;top:auto;transform:none;width:calc(100% - 32px);margin-top:4px}
  body .shot{aspect-ratio:4/3}
  body .cycle .in{padding-block:64px}
  body .p-end .in{padding-block:80px}
  body .ev .in{padding-block:72px 0}
}

/* About */
@media (max-width:1024px) and (min-width:641px){
  body .stat b{font-size:clamp(42px,6.6vw,84px)}
  body .stat span{font-size:clamp(15px,1.5vw,20px)}
}
@media (min-width:641px) and (max-width:760px){
  body .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  body .stat + .stat{border-left:1px solid #E6E0D5;border-top:0}
}
@media (max-width:760px){
  body .wrap > .hero{padding-block:56px 36px;width:100%;max-width:100%}
  body .wrap > .hero h1{max-width:100%}
  body .team-wrap{padding-block:40px 72px}
}
@media (max-width:560px){
  body .faces{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  body .story{padding:24px}
}

/* Legal */
@media (max-width:860px){
  body .toc ul{flex-direction:row;flex-wrap:wrap;border-left:0;gap:6px 16px}
  body .toc a{padding:4px 0}
  body .legal{padding-block:40px 72px}
}
@media (max-width:640px){
  body .legal-head h1{font-size:clamp(36px,11vw,52px)}
  body .legal-body{font-size:16px}
  body .legal-body h2{margin-top:36px}
}