/* Focus: one idea per section, one visual, fewer words on screen. Three steps; six jobs as a calm grid; the month;
   four roles; proof; four controls; the close. Integrations fold into step one, the FAQ moves to its own page. */

/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.steps3 > div{position:relative;padding:40px 40px 8px 0}
.steps3 > div + div{padding-left:40px;border-left:1px solid var(--line)}
.st3n{display:block;font-size:56px;font-weight:300;letter-spacing:-.05em;line-height:1;color:rgb(17 17 17 / .16);font-variation-settings:"opsz" 32;margin-bottom:28px}
.steps3 h3{margin-top:10px;font-size:22px!important;letter-spacing:-.02em!important}
.steps3 p{margin-top:12px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:24em}
.lg3{display:flex;gap:10px;margin-top:24px}.lg3 .lgo{--lg:28px}
.st3k{display:inline-flex;align-items:center;gap:8px;margin-top:24px;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px #E6E6E9!important}
.st3k::before{content:"";width:6px;height:6px;border-radius:50%;background:#2F8A5B}

/* six jobs */
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.jobs a{position:relative;display:block;padding:36px 36px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s}
.jobs a:hover{background:#FAFAF9}
.jobs h3{font-size:21px!important;letter-spacing:-.02em!important}
.jobs p{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:22em}
.ja{position:absolute;right:28px;top:36px;color:rgb(17 17 17 / .3);transition:transform .25s,color .25s}
.ja svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jobs a:hover .ja{transform:translate(3px,-3px);color:var(--ink)}

/* four roles */
.team4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.team4 a{position:relative;display:block;padding:28px 28px 32px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #ECECEE!important;transition:box-shadow .25s,transform .25s}
.team4 a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #E2E2E5,0 18px 36px -24px rgb(20 22 50 / .25)!important}
.team4 .ri{width:40px;height:40px}
.team4 em{position:absolute;top:30px;right:24px;font-style:normal;font-size:11.5px;color:rgb(17 17 17 / .5)}
.team4 h3{margin-top:28px;font-size:19px!important}
.team4 p{margin-top:8px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
html[data-v="a"] #team .aside{margin-left:0;margin-top:28px}

/* four controls in one row */
html[data-v="a"] #security .sect2{margin-left:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;border-top:1px solid var(--line)!important}
html[data-v="a"] #security .sect2 > div{padding:32px 28px 8px 0!important;border-top:0!important;border-left:0!important}
html[data-v="a"] #security .sect2 > div + div{padding-left:28px!important;border-left:1px solid var(--line)!important}

@media (max-width:900px){
  .steps3,.jobs{grid-template-columns:1fr}.steps3 > div,.steps3 > div + div{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}
  .team4{grid-template-columns:1fr 1fr}
  html[data-v="a"] #security .sect2{grid-template-columns:1fr 1fr!important}
}
@media (max-width:540px){.team4{grid-template-columns:1fr}html[data-v="a"] #security .sect2{grid-template-columns:1fr!important}html[data-v="a"] #security .sect2 > div,html[data-v="a"] #security .sect2 > div + div{padding:24px 0!important;border-left:0!important;border-bottom:1px solid var(--line)!important}}

/* typeface options (review only) */
html[data-f="geist"]{--tf:"Geist"}
html[data-f="instrument"]{--tf:"Instrument Sans"}
html[data-f="geist"] body,html[data-f="instrument"] body{font-family:var(--tf),system-ui,sans-serif}
html[data-f="geist"] :is(h1,h2,h3,h4,.btn,.lab,.kick,p,a,li,span,b,small,blockquote,dt,dd,summary),
html[data-f="instrument"] :is(h1,h2,h3,h4,.btn,.lab,.kick,p,a,li,span,b,small,blockquote,dt,dd,summary){font-family:var(--tf),system-ui,sans-serif!important}
html[data-f="geist"] .aw *,html[data-f="instrument"] .aw *,html[data-f="geist"] .wpx *,html[data-f="instrument"] .wpx *{font-family:"Inter",sans-serif!important}
html[data-f="geist"] h1,html[data-f="geist"] h2{letter-spacing:-.04em!important;font-weight:400!important}
html[data-f="instrument"] h1,html[data-f="instrument"] h2{letter-spacing:-.035em!important;font-weight:400!important}
html[data-f="serif"] :is(h1,h2,.cta3 h2,.proof blockquote,.st3n,.kick em){font-family:"Newsreader",Georgia,serif!important;font-weight:400!important;letter-spacing:-.02em!important}
html[data-f="serif"] .dhero.home h1{font-size:72px!important;line-height:1}
html[data-f="serif"] .shead h2{font-size:56px!important}
html[data-f="serif"] h3{letter-spacing:-.015em!important}
.fsw{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgb(20 20 22 / .92);backdrop-filter:blur(8px);font-size:12.5px;font-family:"Inter",sans-serif!important;box-shadow:0 10px 30px -10px rgb(0 0 0 / .5)!important}
.fsw *{font-family:"Inter",sans-serif!important}
.fsw span{padding:0 10px 0 12px;color:rgb(255 255 255 / .5)}
.fsw button{all:unset;cursor:pointer;padding:7px 12px;border-radius:999px;color:rgb(255 255 255 / .75);white-space:nowrap}
.fsw button:hover{color:#fff}
.fsw button[aria-pressed="true"]{background:#fff;color:#111}
.fsw button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:600px){.fsw span{display:none}.fsw button{padding:7px 8px;font-size:11.5px}}
@media (max-width:900px){.jobs a{padding:24px 44px 26px 20px}.ja{top:26px;right:18px}.st3n{font-size:40px;margin-bottom:16px}}