/* One type scale for the homepage, loaded last. One size per role, fewer words, and a small violet label over each
   title, the way the clearest product sites do it. */
/* section headings: one size, a little smaller than before, so the pictures lead */
html[data-v="a"] main .shead h2,html[data-v="a"] main #team .shead h2,html[data-v="a"] main #security .shead h2{font-size:42px!important;line-height:1.08!important;letter-spacing:-.034em!important}
/* every card and row title: one size and one weight */
html[data-f="geist"] main :is(.steps3 h3,.zrow-t h3:not(.bh),.zcap h3,.sect2 h3,.jobs h3){font-size:20px!important;line-height:1.3!important;letter-spacing:-.018em!important;font-weight:500!important}
/* benefit headings beside an illustration: their own role (20px below 1101px; the homepage desktop scale sets 28px) */
html[data-f="geist"] main .zrow-t h3.bh{font-size:20px!important;line-height:1.3!important;letter-spacing:-.018em!important;font-weight:500!important}
/* the label over a title: the one accent in the type, in the headlines' own ink. As it scrolls in, the ink runs through
   it with the red wet edge leading, the same motion as the headlines; it comes to rest still wet at its tail, ink to red. */
html[data-f="geist"] main .eb{display:inline-block;font-size:13.5px!important;font-weight:600!important;letter-spacing:0!important;line-height:1.3;text-transform:none;
  --c0:#E1E1DF;--q:calc(var(--p,1) * 118%);
  background-image:linear-gradient(90deg,transparent 0,transparent calc(var(--q) - 18%),var(--wet) calc(var(--q) - 8%),var(--c0) var(--q),var(--c0) 100%),
    linear-gradient(90deg,#111 0%,#111 22%,var(--wet) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
html[data-f="geist"] main .eb + h3{margin-top:8px!important}
/* body copy under titles: one size, kept to two or three lines */
html[data-f="geist"] main :is(.steps3 p,.zrow-t p,.zcap p,.sect2 p,.jobs p){font-size:15px!important;line-height:1.6!important}
html[data-f="geist"] main :is(.zrow-t p,.zcap p){max-width:28em}
html[data-f="geist"] main .aside{font-size:15px!important}
/* the quote and the closing line, brought into the same scale */
html[data-f="geist"] main .quote2 blockquote{font-size:34px!important;line-height:1.22!important;letter-spacing:-.022em!important}
html[data-f="geist"] main .cta3 h2{font-size:60px!important;line-height:1.02!important;letter-spacing:-.04em!important}
@media (max-width:760px){
  html[data-v="a"] main .shead h2,html[data-v="a"] main #team .shead h2,html[data-v="a"] main #security .shead h2{font-size:30px!important}
  html[data-f="geist"] main .quote2 blockquote{font-size:24px!important}
  html[data-f="geist"] main .cta3 h2{font-size:40px!important}
}

/* One pattern for every block: a label, a title, two lines. Section headers lose the giant numeral; the steps lose the
   rule, the numerals and the icons, keep a small number inside their label, and set their proof on one baseline. */
html[data-v="a"] main .shead{display:block!important;max-width:820px!important;margin:0 0 56px!important;padding:0!important;border:0!important;position:static!important}
html[data-v="a"] main .shead .eb + h2{margin-top:14px!important}
@media (min-width:1001px){html[data-v="a"] main #security .wrap{display:block!important}}
html[data-f="geist"] main .eb i{font-style:normal;font-variant-numeric:tabular-nums;margin-right:10px;-webkit-text-fill-color:rgb(17 17 17 / .32);font-weight:500}
.flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.flow3 .f3{display:flex;flex-direction:column}
html[data-f="geist"] main .flow3 h3{font-size:20px!important;line-height:1.3!important;letter-spacing:-.018em!important;font-weight:500!important;margin-top:8px}
html[data-f="geist"] main .flow3 p{margin-top:10px;font-size:15px!important;line-height:1.6!important;color:var(--ink-2);max-width:24em}
.flow3 .f3x{margin-top:auto;padding-top:22px}
.flow3 .lg3{display:flex;gap:8px}
.flow3 .lg3 .lgo{--lg:28px}
.flow3 .st3k{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:15px;font-size:13px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)!important;background:#fff}
.flow3 .st3k::before{content:"";width:6px;height:6px;border-radius:50%;background:#1E8556}
@media (max-width:900px){.flow3{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:900px){.flow3 .f3x{padding-top:14px}}

/* numbered labels (01 Connect, 02 Prepare…) mark a sequence, not a highlight: they stay in the headlines' light grey,
   the number a step lighter. The ink-and-red accent stays on the named labels. */
html[data-f="geist"] main .eb:has(> i){background-image:none!important;-webkit-text-fill-color:rgb(17 17 17 / .45)!important;color:rgb(17 17 17 / .45)!important}
html[data-f="geist"] main .eb:has(> i) > i{-webkit-text-fill-color:rgb(17 17 17 / .28)!important}
