/* People Leads 2026 - home page. Values are comp px x var(--u) (see css.css):
base = Mobile-01/02 (1024 canvas),@media (min-width:1024px) = Desktop (1920 canvas).
Text tops are derived from comp baselines:top = baseline - (lh/2 + .367 * size) for Assistant. */
/* ===== hero ===== */
.hero { position:relative;
margin-top:calc(-1 * var(--hdr-h));
background:var(--navy-deep);
color:#fff;
overflow:clip
}
.hero__wrap { height:calc(2847.6 * var(--u))
}
.hero__bg img { position:absolute;
left:calc(-14.7 * var(--u));
top:calc(-6 * var(--u));
width:calc(1049.2 * var(--u));
max-width:none;
height:auto
}
/* the bottom cut:a white overlay traced from the comp,so any replacement photo gets the same edge */
.hero__wrap::after { content:"";
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
background:url(../../../design/default/css/../files/hero-notch-mobile.svg) 0 0 / 100% 100% no-repeat
}
.hero__text { position:relative;
z-index:3;
display:flex;
flex-direction:column;
align-items:center;
padding-top:calc(207.8 * var(--u));
text-align:center
}
.hero__title { font-size:calc(85.41 * var(--u));
line-height:calc(87.5 * var(--u));
font-weight:700
}
.hero__title span { display:block
}
.hero__cta { width:calc(411.8 * var(--u));
margin-top:calc(60.8 * var(--u))
}
.hero__lead { position:absolute;
top:calc(2338.3 * var(--u));
right:calc(64.7 * var(--u));
width:calc(731.5 * var(--u));
font-size:calc(44 * var(--u));
line-height:calc(52.8 * var(--u));
text-align:justify
}
.hero__links { align-self:flex-start;
margin-top:calc(102.7 * var(--u));
margin-inline-start:calc(58.6 * var(--u))
}
.hero__links li + li { margin-top:calc(56.5 * var(--u))
}
.arrow-link { display:flex;
align-items:center;
gap:calc(40.4 * var(--u));
width:calc(684.4 * var(--u));
height:calc(137.9 * var(--u));
padding-inline-start:calc(73.8 * var(--u));
background:url(../../../design/default/css/../files/icons/arrow-btn.svg) 0 0 / 100% 100% no-repeat;
font-size:calc(52.36 * var(--u));
white-space:nowrap;
transition:transform .3s,filter .3s
}
.arrow-link img { width:calc(83.1 * var(--u));
flex:none
}
.arrow-link span { margin-bottom:calc(12.6 * var(--u))
}
.arrow-link--b { gap:calc(36.6 * var(--u));
padding-inline-start:calc(69.5 * var(--u))
}
.arrow-link--b img { width:calc(91.8 * var(--u))
}
.arrow-link:hover { transform:translateX(calc(-12 * var(--u)));
filter:brightness(1.15)
}
.hero__play { left:calc(61.4 * var(--u));
top:calc(2042.7 * var(--u));
width:calc(232.4 * var(--u))
}
/* decoration:positioned at comp coordinates so it stays on the people baked into the photo */
.hero__deco { position:absolute;
inset:0;
z-index:2;
pointer-events:none
}
.hero__deco > * { position:absolute
}
.hero__avatar { border-radius:50%;
border:calc(3.59 * var(--u)) solid #fff;
object-fit:cover
}
.hero__avatar--1,.hero__user { display:none
}
.hero__avatar--2 { left:calc(746.5 * var(--u));
top:calc(1303.7 * var(--u));
width:calc(143.3 * var(--u))
}
.hero__avatar--3 { left:calc(5.4 * var(--u));
top:calc(1341.2 * var(--u));
width:calc(142.2 * var(--u))
}
.badge { background:var(--badge);
border:var(--bw) solid #fff;
border-radius:calc(26 * var(--u));
line-height:1.2;
white-space:nowrap
}
.badge > * { position:absolute
}
.badge b { font-weight:700
}
.badge--lead { --bw:calc(1.41 * var(--u));
left:calc(69.3 * var(--u));
top:calc(1112.7 * var(--u));
width:calc(365.1 * var(--u));
height:calc(139.2 * var(--u))
}
.badge--lead .badge__check { left:calc(269.3 * var(--u));
top:calc(41.3 * var(--u));
width:calc(65.8 * var(--u))
}
.badge--lead .badge__t1 { right:calc(121.1 * var(--u));
top:calc(19.1 * var(--u));
font-size:calc(42.23 * var(--u))
}
.badge--lead .badge__t2 { right:calc(121.1 * var(--u));
top:calc(69 * var(--u));
font-size:calc(30.31 * var(--u))
}
.badge--conv { --bw:calc(1.75 * var(--u));
left:calc(598.4 * var(--u));
top:calc(1762.2 * var(--u));
width:calc(366.9 * var(--u));
height:calc(214.4 * var(--u))
}
.badge--conv .badge__t1 { left:calc(32.8 * var(--u));
top:calc(19.2 * var(--u));
font-size:calc(42.02 * var(--u))
}
.badge--conv .badge__t2 { left:calc(32.8 * var(--u));
top:calc(61.5 * var(--u));
font-size:calc(47.27 * var(--u));
color:var(--orange)
}
.badge--conv .badge__chart { left:calc(23.9 * var(--u));
top:calc(58.5 * var(--u));
width:calc(319.1 * var(--u))
}
.badge--growth { --bw:calc(1.89 * var(--u));
left:calc(605.1 * var(--u));
top:calc(2010 * var(--u));
width:calc(360.2 * var(--u));
height:calc(255.1 * var(--u))
}
.badge--growth .badge__t1 { left:calc(26.8 * var(--u));
top:calc(11.1 * var(--u));
font-size:calc(29.93 * var(--u))
}
.badge--growth .badge__t2 { left:calc(26.8 * var(--u));
top:calc(43.4 * var(--u));
font-size:calc(21.48 * var(--u))
}
.badge--growth .badge__t3 { left:calc(26.8 * var(--u));
top:calc(69.6 * var(--u));
font-size:calc(38.01 * var(--u));
color:var(--orange)
}
.badge--growth .badge__t4 { left:calc(26.8 * var(--u));
top:calc(109.1 * var(--u));
font-size:calc(17.86 * var(--u));
color:var(--orange)
}
.badge--growth .badge__chart { left:calc(79.7 * var(--u));
top:calc(27.7 * var(--u));
width:calc(200.9 * var(--u))
}
@media (min-width:1024px) {
.hero__wrap { height:calc(983 * var(--u))
}
.hero__bg img { left:calc(-6.28 * var(--u));
top:calc(-3.21 * var(--u));
width:calc(1928.3 * var(--u))
}
.hero__wrap::after { background-image:url(../../../design/default/css/../files/hero-notch-desktop.svg)
}
.hero__text { align-items:flex-start;
padding-top:calc(188.7 * var(--u));
padding-inline-start:calc(179.4 * var(--u));
text-align:right
}
.hero__title { font-size:calc(85.53 * var(--u));
line-height:calc(87.53 * var(--u))
}
.hero__cta { display:none
}
/* the comp squeezes line 1 to 96%;
582 is the natural width that keeps its four line breaks */
.hero__lead { position:static;
width:calc(582 * var(--u));
margin-top:calc(35.1 * var(--u));
font-size:calc(30 * var(--u));
line-height:calc(40.8 * var(--u));
text-align:right
}
.hero__links { margin-top:calc(46.6 * var(--u));
margin-inline-start:calc(-45.9 * var(--u))
}
.hero__links li + li { margin-top:calc(20 * var(--u))
}
.arrow-link { gap:calc(23.1 * var(--u));
width:calc(392.1 * var(--u));
height:calc(79 * var(--u));
padding-inline-start:calc(42.3 * var(--u));
font-size:calc(30 * var(--u))
}
.arrow-link img { width:calc(47.6 * var(--u))
}
.arrow-link span { margin-bottom:calc(7.2 * var(--u))
}
.arrow-link--b { gap:calc(21 * var(--u));
padding-inline-start:calc(39.8 * var(--u))
}
.arrow-link--b img { width:calc(52.6 * var(--u))
}
.hero__play { left:calc(997.3 * var(--u));
top:calc(397.8 * var(--u));
width:calc(148.5 * var(--u))
}
.hero__avatar { border-width:calc(2 * var(--u))
}
.hero__avatar--1,.hero__user { display:block
}
.hero__avatar--1 { left:calc(443.7 * var(--u));
top:calc(102.9 * var(--u));
width:calc(83.4 * var(--u))
}
.hero__avatar--2 { left:calc(100.5 * var(--u));
top:calc(367.4 * var(--u));
width:calc(79.9 * var(--u))
}
.hero__avatar--3 { left:calc(861.8 * var(--u));
top:calc(430.3 * var(--u));
width:calc(85.2 * var(--u))
}
.hero__user { left:calc(807.4 * var(--u));
top:calc(201.1 * var(--u));
width:calc(82 * var(--u))
}
.badge { border-radius:calc(15 * var(--u))
}
.badge--lead { --bw:calc(.78 * var(--u));
left:calc(168.9 * var(--u));
top:calc(181 * var(--u));
width:calc(210.1 * var(--u));
height:calc(74.1 * var(--u))
}
.badge--lead .badge__check { left:calc(159.1 * var(--u));
top:calc(19.5 * var(--u));
width:calc(35 * var(--u))
}
.badge--lead .badge__t1 { right:calc(64.5 * var(--u));
top:calc(7.7 * var(--u));
font-size:calc(22.46 * var(--u))
}
.badge--lead .badge__t2 { right:calc(64.5 * var(--u));
top:calc(34.2 * var(--u));
font-size:calc(16.12 * var(--u))
}
.badge--conv { --bw:calc(1 * var(--u));
left:calc(692.8 * var(--u));
top:calc(533.5 * var(--u));
width:calc(209.6 * var(--u));
height:calc(122.5 * var(--u))
}
.badge--conv .badge__t1 { left:calc(18.8 * var(--u));
top:calc(11 * var(--u));
font-size:calc(24 * var(--u))
}
.badge--conv .badge__t2 { left:calc(18.8 * var(--u));
top:calc(35.2 * var(--u));
font-size:calc(27 * var(--u))
}
.badge--conv .badge__chart { left:calc(13.7 * var(--u));
top:calc(33.5 * var(--u));
width:calc(182.3 * var(--u))
}
.badge--growth { --bw:calc(1.42 * var(--u));
left:calc(90.3 * var(--u));
top:calc(638.3 * var(--u));
width:calc(270.4 * var(--u));
height:calc(191.5 * var(--u))
}
.badge--growth .badge__t1 { left:calc(20.1 * var(--u));
top:calc(8.3 * var(--u));
font-size:calc(22.46 * var(--u))
}
.badge--growth .badge__t2 { left:calc(20.1 * var(--u));
top:calc(32.6 * var(--u));
font-size:calc(16.12 * var(--u))
}
.badge--growth .badge__t3 { left:calc(20.1 * var(--u));
top:calc(52.3 * var(--u));
font-size:calc(28.53 * var(--u))
}
.badge--growth .badge__t4 { left:calc(20.1 * var(--u));
top:calc(81.9 * var(--u));
font-size:calc(13.4 * var(--u))
}
.badge--growth .badge__chart { left:calc(59.9 * var(--u));
top:calc(20.9 * var(--u));
width:calc(150.8 * var(--u))
}
}
/* where the viewport outgrows the canvas the navy side bands stop at the height the white notch
meets each edge of the wrap (left/right,read from hero-notch-*.svg),so the cut runs on */
@media (min-width:640px) and (max-width:1023px) {
.hero { background:linear-gradient(var(--navy-deep) calc(2658 * var(--u)),#fff 0) 0 0 / 50% 100% no-repeat,linear-gradient(var(--navy-deep) calc(2735 * var(--u)),#fff 0) 100% 0 / 50% 100% no-repeat
}
}
@media (min-width:1921px) {
.hero { background:linear-gradient(var(--navy-deep) calc(893 * var(--u)),#fff 0) 0 0 / 50% 100% no-repeat,linear-gradient(var(--navy-deep) calc(880 * var(--u)),#fff 0) 100% 0 / 50% 100% no-repeat
}
}
/* ===== features (4 cards) ===== */
.features { padding-block:calc(74.9 * var(--u)) calc(87 * var(--u))
}
.features__list { margin-top:calc(64.9 * var(--u));
padding-inline:calc(38.1 * var(--u)) calc(40.5 * var(--u))
}
.feat { padding:calc(40 * var(--u)) 0 calc(51.7 * var(--u));
border-radius:calc(32.07 * var(--u));
background:#fff;
box-shadow:0 0 calc(16.38 * var(--u)) rgb(0 0 0 / .3);
color:var(--navy)
}
.feat + .feat { margin-top:calc(49.1 * var(--u))
}
.feat__icon { width:calc(130 * var(--u));
height:calc(122.2 * var(--u));
margin-inline-start:calc(43.4 * var(--u))
}
.feat__title { margin:calc(27 * var(--u)) calc(46 * var(--u)) 0;
padding:0 calc(8.7 * var(--u)) calc(21.1 * var(--u)) 0;
border-bottom:calc(1.3 * var(--u)) solid var(--navy);
font-size:calc(50 * var(--u));
line-height:1.2
}
.feat__title br { display:none
}
.feat__text { margin-top:calc(24.4 * var(--u));
padding-inline:calc(54.7 * var(--u)) calc(44 * var(--u));
font-size:max(16px,calc(46 * var(--u)));
line-height:1.2098
}
@media (min-width:1024px) {
/* the comp's network/lavender ground:an image placed at its comp coordinates (-6.3,-184.3) */
.features { padding-block:calc(100.6 * var(--u)) calc(167.7 * var(--u));
background:url(../../../design/default/css/../files/img/features-bg.webp) calc(50% - 4.2 * var(--u)) calc(-184.3 * var(--u)) / calc(1924.2 * var(--u)) auto no-repeat
}
.features__head { text-align:center
}
.features__head .sec-head__lead { width:calc(806 * var(--u));
margin-inline:auto
}
.features__trial { display:block
}
.features__list { display:flex;
gap:calc(34.2 * var(--u));
margin-top:calc(68.8 * var(--u));
padding-inline:calc(79.5 * var(--u))
}
.feat { flex:1 1 0;
padding:calc(41 * var(--u)) 0 calc(45.5 * var(--u));
border-radius:calc(20.98 * var(--u));
box-shadow:0 0 calc(10.72 * var(--u)) rgb(0 0 0 / .3);
text-align:center
}
.feat + .feat { margin-top:0
}
.feat__icon { width:calc(100 * var(--u));
height:calc(94 * var(--u));
margin-inline:auto
}
.feat__title { margin:calc(21 * var(--u)) calc(55.4 * var(--u)) 0;
padding:0 0 calc(19 * var(--u));
border-bottom-width:calc(1 * var(--u));
font-size:calc(34 * var(--u));
line-height:1.2588
}
.feat__title br { display:inline
}
.feat__text { margin-top:calc(24.2 * var(--u));
padding-inline:calc(33 * var(--u)) calc(27 * var(--u));
font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267;
letter-spacing:-.012em;
text-align:justify;
text-align-last:right
} /* the comp condenses its longest lines ~3% */
}
/* ===== DNA (dashboard + two points + 100% band) =====
Mobile stacks media / head / text / card;
the two column wrappers dissolve (display:contents). */
.dna { padding-bottom:calc(129 * var(--u))
}
.dna__wrap { display:flex;
flex-direction:column
}
.dna__main,.dna__side { display:contents
}
.dna__media { order:1;
width:calc(836 * var(--u));
margin-inline:auto
}
.dna__head { order:2;
margin-top:calc(101.6 * var(--u));
padding-inline:calc(38 * var(--u)) calc(20 * var(--u))
}
.dna__text { order:3;
display:flex;
flex-direction:column;
margin-top:calc(40.1 * var(--u));
padding-inline:calc(38 * var(--u)) calc(31.3 * var(--u));
color:var(--navy)
}
/* the comp stretches and squeezes single lines to justify;
light negative tracking reproduces its breaks */
.dna__text p { font-size:max(16px,calc(46 * var(--u)));
line-height:1.297;
letter-spacing:-.012em;
text-align:justify;
text-align-last:right
}
.dna__cta { align-self:center;
margin-top:calc(69.4 * var(--u))
}
.dna__card { order:4;
margin:calc(59.9 * var(--u)) calc(38.1 * var(--u)) 0 calc(40.5 * var(--u));
border-radius:calc(30 * var(--u));
background:var(--grey-1);
color:var(--navy);
overflow:hidden
}
.dna__points { padding:calc(77.8 * var(--u)) calc(55.6 * var(--u)) calc(41.7 * var(--u)) calc(54.6 * var(--u))
}
.dna-point { position:relative
}
.dna-point + .dna-point { margin-top:calc(112.9 * var(--u))
}
.dna-point + .dna-point::before { content:"";
position:absolute;
inset-inline:0;
top:calc(-71.4 * var(--u));
height:calc(2 * var(--u));
background:var(--navy)
}
.dna-point__icon { width:auto;
height:calc(138 * var(--u))
}
.dna-point__title { margin-top:calc(17.7 * var(--u));
font-size:calc(44.2 * var(--u));
line-height:1.259
}
.dna-point__text { font-size:max(16px,calc(46 * var(--u)));
line-height:1.2098
}
.dna__band { display:flex;
align-items:center;
gap:calc(44.2 * var(--u));
padding:calc(56.1 * var(--u)) calc(58.3 * var(--u));
background:var(--navy);
color:#fff
}
.dna__laptop { flex:none;
width:calc(331.5 * var(--u))
}
.dna__band-text { width:calc(360 * var(--u));
font-size:max(15px,calc(39 * var(--u)));
line-height:1.427
}
.dna__band-title { font-size:calc(44.2 * var(--u));
line-height:1.259
}
@media (min-width:1024px) {
.dna { padding-block:calc(103.5 * var(--u)) calc(102.8 * var(--u))
}
.dna__wrap { display:grid;
grid-template-columns:calc(875.2 * var(--u)) calc(828.7 * var(--u));
column-gap:calc(29.9 * var(--u));
align-items:start;
padding-inline:calc(93.1 * var(--u))
}
.dna__main,.dna__side { display:block
}
.dna__main { padding-top:calc(12.9 * var(--u))
}
.dna__head { margin-top:0;
padding-inline:0
}
.dna__head .h2 { max-width:calc(800 * var(--u))
}
.dna__media { width:100%
}
.dna__text { margin-top:calc(21.9 * var(--u));
padding-inline:calc(44.8 * var(--u)) calc(22.2 * var(--u))
}
.dna__text p { font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267
}
.dna__cta { align-self:flex-end;
margin:calc(5.8 * var(--u)) 0 0 calc(6 * var(--u))
}
.dna__card { margin:calc(57 * var(--u)) 0 0;
border-radius:calc(17.52 * var(--u))
}
.dna__points { display:grid;
grid-template-columns:1fr 1fr;
column-gap:calc(101.7 * var(--u));
padding:calc(43.9 * var(--u)) calc(45 * var(--u)) calc(61.2 * var(--u)) calc(48.3 * var(--u))
}
.dna-point + .dna-point { margin-top:0
}
.dna-point + .dna-point::before { inset-inline:calc(-50.9 * var(--u)) auto;
top:calc(-7.3 * var(--u));
width:calc(2 * var(--u));
height:calc(394.1 * var(--u))
}
.dna-point__icon { height:calc(81.6 * var(--u))
}
/* the comp lets the longer title run ~7px past its 340px column */
.dna-point__title { margin-top:calc(12.6 * var(--u));
font-size:calc(34 * var(--u));
line-height:1.2588;
white-space:nowrap
}
.dna-point__text { font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267
}
.dna__band { gap:calc(32 * var(--u));
padding:calc(28.3 * var(--u)) calc(21.9 * var(--u)) calc(28.3 * var(--u)) calc(60 * var(--u))
}
.dna__laptop { width:calc(227.6 * var(--u))
}
.dna__band-text { flex:1;
width:auto;
font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267
}
.dna__band-title { font-size:calc(34 * var(--u));
line-height:1.2588
}
}
/* ===== solutions (dark,hex ground) ===== */
.solutions { padding-block:calc(99.1 * var(--u)) calc(114 * var(--u));
background:var(--navy-deep) url(../../../design/default/css/../files/img/solutions-bg-mobile.webp) calc(50% + 69.7 * var(--u)) 0 / calc(1218.6 * var(--u)) auto no-repeat;
color:#fff
}
.solutions .h2 { color:#fff
}
.solutions__body { display:flex;
flex-direction:column;
align-items:flex-start
}
.solutions__head { align-self:stretch;
padding-inline:calc(38 * var(--u)) calc(28 * var(--u));
color:#fff
}
.solutions__head .h2 { margin-top:calc(16.6 * var(--u))
}
.solutions__head .sec-head__lead { margin-top:calc(36.3 * var(--u));
line-height:1.428;
letter-spacing:-.012em
}
.solutions__cta { margin:calc(56.3 * var(--u)) calc(38.1 * var(--u)) 0 0
}
.solutions__more { align-self:stretch;
margin:calc(89.2 * var(--u)) calc(38.1 * var(--u)) 0 calc(9 * var(--u))
}
.solutions__more-title { display:flex;
align-items:center;
gap:calc(22.8 * var(--u));
padding:0 calc(6.6 * var(--u)) calc(42.6 * var(--u)) 0;
border-bottom:calc(1.3 * var(--u)) solid #fff;
color:var(--orange);
font-size:max(15px,calc(39 * var(--u)));
line-height:1.2
}
.solutions__more-title img { width:calc(41.8 * var(--u))
}
.solutions__more a { display:flex;
align-items:center;
min-height:calc(128.8 * var(--u));
padding-inline-start:calc(9 * var(--u));
border-bottom:calc(1.3 * var(--u)) solid #fff;
font-size:max(16px,calc(46 * var(--u)));
line-height:1.2;
transition:color .25s,padding .25s
}
.solutions__more a:hover { color:var(--orange);
padding-inline-start:calc(20 * var(--u))
}
.solutions__photo img { width:calc(947.8 * var(--u));
margin:calc(115 * var(--u)) auto 0;
border-radius:calc(23 * var(--u))
}
@media (min-width:640px) and (max-width:1023px) { .solutions { background-size:cover;
background-position:center
} }
@media (min-width:1024px) {
.solutions { padding-block:calc(155.6 * var(--u));
background-image:url(../../../design/default/css/../files/img/solutions-bg-desktop.webp);
background-position:50% 0;
background-size:calc(1937.9 * var(--u)) auto
}
.solutions__wrap { display:grid;
grid-template-columns:calc(727 * var(--u)) calc(751.4 * var(--u));
column-gap:calc(195.7 * var(--u));
align-items:start;
padding-inline:calc(114.9 * var(--u)) calc(131 * var(--u))
}
.solutions__photo { grid-area:1 / 1
}
.solutions__body { grid-area:1 / 2;
padding-top:calc(14.6 * var(--u))
}
.solutions__photo img { width:100%;
height:calc(763 * var(--u));
margin:0;
border-radius:0;
object-fit:cover
}
.solutions__head { padding-inline:calc(5.4 * var(--u)) 0
}
.solutions__head .h2 { max-width:calc(750 * var(--u));
margin-top:calc(12.8 * var(--u))
}
.solutions__head .sec-head__lead { max-width:calc(470 * var(--u));
margin-top:calc(29.9 * var(--u));
line-height:1.4267;
letter-spacing:0
}
.solutions__cta { margin:calc(29.4 * var(--u)) 0 0
}
.solutions__more { margin:calc(46.9 * var(--u)) 0 0;
border-top:calc(1 * var(--u)) solid #fff
}
.solutions__more-title { gap:calc(17 * var(--u));
padding:calc(23 * var(--u)) calc(5 * var(--u)) calc(19.2 * var(--u)) 0;
border-bottom-width:calc(1 * var(--u));
font-size:max(15px,calc(30 * var(--u)))
}
.solutions__more-title img { width:calc(32.1 * var(--u))
}
.solutions__more a { min-height:calc(58.9 * var(--u));
padding-inline-start:calc(5 * var(--u));
border-bottom-width:calc(1 * var(--u));
font-size:max(15px,calc(30 * var(--u)))
}
}
/* past the 1920 canvas the comp-sized grounds would end short of the window */
@media (min-width:1921px) { .solutions { background-size:cover
} .features { background-size:100% auto;
background-position:50% calc(-184.3 * var(--u))
} }
/* ===== achievements (bento) =====
Mobile stacks the cards in DOM order (1:2,87%,+50,000,integrations);
desktop places them on a
5-track grid (the comp's two gutters differ:29.8 and 18.9) with +50,000 spanning both rows. */
.ach { padding-block:calc(127 * var(--u)) calc(122.6 * var(--u));
background:var(--grey-2)
}
.ach__head { padding-inline:calc(87 * var(--u));
text-align:center
}
.ach__head .h2 { margin-top:calc(9.75 * var(--u))
}
.bento { display:flex;
flex-direction:column;
gap:calc(51.9 * var(--u));
margin-top:calc(84.6 * var(--u));
padding-inline:calc(38.1 * var(--u))
}
.bento__card { position:relative;
border-radius:calc(30 * var(--u));
background:#fff;
box-shadow:0 0 calc(18.4 * var(--u)) rgb(0 0 0 / .3);
color:var(--navy)
}
.bento__rule { height:calc(1.3 * var(--u));
margin:0;
border:0;
background:#e6e6e6
}
.bento__title { font-size:calc(50 * var(--u));
line-height:1.2
}
.bento__text { color:var(--ink);
font-size:max(16px,calc(46 * var(--u)));
line-height:1.2098
}
.stat { display:flex;
flex-direction:column;
margin:0
}
/* numbers are LTR runs ("+50,000" would render "50,000+" in an RTL line) */
.stat__num { align-self:flex-start;
direction:ltr;
unicode-bidi:isolate;
font-weight:700;
line-height:1;
white-space:nowrap
}
.stat__num small { font-size:.533em
}
.stat__label { font-weight:700
}
/* 1:2 */
.bento__card--ratio { padding:calc(134.4 * var(--u)) 0 calc(55.7 * var(--u))
}
.bento__hand { position:absolute;
left:calc(-4.7 * var(--u));
top:calc(31.4 * var(--u));
width:calc(517.5 * var(--u));
max-width:none;
pointer-events:none
}
.bento__card--ratio .stat { position:relative;
padding-inline-start:calc(130 * var(--u))
}
.bento__card--ratio .stat__num { font-size:calc(170.84 * var(--u))
}
.bento__card--ratio .stat__label { display:none
}
.bento__card--ratio .bento__rule { width:calc(306.8 * var(--u));
height:calc(2 * var(--u));
margin:calc(53.7 * var(--u)) calc(82.3 * var(--u)) 0 0
}
.bento__card--ratio .bento__text { margin-top:calc(66.2 * var(--u));
padding-inline:calc(73.9 * var(--u)) calc(99 * var(--u))
}
/* 87% */
.bento__card--reach { padding:calc(39.15 * var(--u)) 0 calc(54.5 * var(--u));
background:var(--navy);
box-shadow:none;
color:#fff;
text-align:center
}
.bento__lead { width:calc(660 * var(--u));
margin-inline:auto;
font-size:max(16px,calc(46 * var(--u)));
line-height:1.2098
}
.bento__card--reach .bento__rule { width:calc(637.3 * var(--u));
margin:calc(24.6 * var(--u)) auto 0
}
.bento__card--reach .stat { flex-direction:row;
align-items:flex-start;
justify-content:center;
gap:calc(38.7 * var(--u));
margin-top:calc(12.2 * var(--u));
padding-inline-start:calc(26 * var(--u));
text-align:right
}
.bento__card--reach .stat__num { font-size:calc(170.84 * var(--u))
}
.bento__card--reach .stat__label { width:calc(296 * var(--u));
margin-top:calc(10.4 * var(--u));
font-size:max(16px,calc(46 * var(--u)));
font-weight:400;
line-height:1.2098
}
/* +50,000 */
.bento__card--leads { padding:calc(50.6 * var(--u)) 0 calc(85.4 * var(--u))
}
.bento__photo img { width:calc(857.7 * var(--u));
height:calc(373.1 * var(--u));
margin-inline:auto;
border-radius:calc(14.84 * var(--u));
object-fit:cover
}
.bento__card--leads .stat { margin-top:calc(27.3 * var(--u));
padding-inline-start:calc(46 * var(--u))
}
.bento__card--leads .stat__num { font-size:calc(212.98 * var(--u))
}
.bento__card--leads .stat__label { margin-top:calc(5.6 * var(--u));
font-size:calc(48.62 * var(--u));
line-height:1.2
}
.bento__card--leads .bento__rule { width:calc(833.4 * var(--u));
height:calc(1.62 * var(--u));
margin:calc(37.2 * var(--u)) auto 0
}
.bento__card--leads .bento__text { margin-top:calc(29.1 * var(--u));
padding-inline:calc(57.9 * var(--u)) calc(57 * var(--u));
line-height:1.509
}
/* integrations */
.bento__card--integrations { padding:calc(49.65 * var(--u)) 0 calc(63.1 * var(--u));
box-shadow:0 0 calc(14.1 * var(--u)) rgb(0 0 0 / .3)
}
.bento__copy { padding-inline:calc(56.7 * var(--u)) calc(90 * var(--u))
}
.bento__card--integrations .bento__rule { width:calc(785.4 * var(--u))
}
.bento__card--integrations .bento__rule { margin-top:calc(29 * var(--u))
}
.bento__card--integrations .bento__text { margin-top:calc(16.25 * var(--u))
}
.logos { display:flex;
justify-content:center;
gap:calc(55.1 * var(--u));
margin-top:calc(57.8 * var(--u))
}
.logo { position:relative;
display:flex;
flex-direction:column;
align-items:center;
width:calc(166.8 * var(--u));
height:calc(197.8 * var(--u));
padding-top:calc(29.8 * var(--u));
border-radius:calc(19.8 * var(--u));
background:#fff;
box-shadow:0 0 calc(13.8 * var(--u)) rgb(0 0 0 / .3);
color:var(--ink);
font-size:max(11px,calc(29.88 * var(--u)));
line-height:1.2
}
.logo img { width:calc(99.4 * var(--u));
height:calc(89.1 * var(--u))
}
.logo span { margin-top:calc(18.2 * var(--u))
}
.logo + .logo::after { content:"";
position:absolute;
inset-inline-end:100%;
top:52%;
width:calc(55.1 * var(--u));
height:calc(7.87 * var(--u));
transform:translateY(-50%);
background:url(../../../design/default/css/../files/icons/connector.svg) 0 0 / 100% 100% no-repeat
}
@media (min-width:1024px) {
.ach { padding-block:calc(54 * var(--u)) calc(108.2 * var(--u))
}
.ach__head { padding-inline:0
}
.ach__head .h2 { max-width:calc(1215 * var(--u));
margin:calc(7.5 * var(--u)) auto 0
}
.bento { display:grid;
grid-template-columns:calc(584.8 * var(--u)) calc(29.8 * var(--u)) calc(582.1 * var(--u)) calc(18.9 * var(--u)) calc(580.8 * var(--u));
grid-template-rows:minmax(calc(510.9 * var(--u)),auto) calc(40.3 * var(--u)) minmax(calc(280.6 * var(--u)),auto);
gap:0;
margin-top:calc(69 * var(--u));
padding-inline:calc(63.6 * var(--u)) calc(60 * var(--u))
}
.bento__card { border-radius:calc(20 * var(--u));
box-shadow:0 0 calc(10 * var(--u)) rgb(0 0 0 / .3)
}
.bento__card--leads { grid-area:1 / 1 / 4 / 2
}
.bento__card--reach { grid-area:1 / 3
}
.bento__card--ratio { grid-area:1 / 5
}
.bento__card--integrations { grid-area:3 / 3 / 4 / 6
}
.bento__rule { height:calc(1 * var(--u))
}
.bento__title { font-size:calc(34 * var(--u));
line-height:1.2588
}
.bento__text { font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267
}
.bento__card--ratio { padding:calc(85.7 * var(--u)) 0 calc(47.1 * var(--u))
}
.bento__hand { left:calc(.1 * var(--u));
top:calc(29.6 * var(--u));
width:calc(343.2 * var(--u))
}
.bento__card--ratio .stat { padding-inline-start:calc(34.8 * var(--u))
}
.bento__card--ratio .stat__num { font-size:calc(131.41 * var(--u))
}
.bento__card--ratio .stat__label { display:block;
margin-top:calc(-7.4 * var(--u));
font-size:calc(30 * var(--u));
line-height:1.2
}
.bento__card--ratio .bento__rule { width:calc(236 * var(--u));
height:calc(1 * var(--u));
margin:calc(50.1 * var(--u)) calc(33.6 * var(--u)) 0 0
}
.bento__card--ratio .bento__text { margin-top:calc(38.6 * var(--u));
padding-inline:calc(34.8 * var(--u)) calc(43.2 * var(--u))
}
.bento__card--reach { padding:calc(63.2 * var(--u)) 0 calc(40 * var(--u));
box-shadow:none
}
.bento__lead { width:calc(470 * var(--u));
font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267
}
.bento__card--reach .bento__rule { width:calc(490.2 * var(--u));
margin-top:calc(53.3 * var(--u))
}
.bento__card--reach .stat { gap:calc(29.4 * var(--u));
margin-top:calc(39.9 * var(--u));
padding-inline-start:0
}
.bento__card--reach .stat__num { font-size:calc(131.41 * var(--u))
}
.bento__card--reach .stat__label { width:calc(205 * var(--u));
margin-top:calc(6.1 * var(--u));
font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267
}
.bento__card--leads { padding:calc(31.2 * var(--u)) 0 calc(50.3 * var(--u))
}
.bento__photo img { width:calc(529.2 * var(--u));
height:calc(352.8 * var(--u));
border-radius:calc(11.33 * var(--u))
}
.bento__card--leads .stat { margin-top:calc(13 * var(--u));
padding-inline-start:calc(28.4 * var(--u))
}
.bento__card--leads .stat__num { font-size:calc(131.41 * var(--u))
}
.bento__card--leads .stat__label { margin-top:calc(3.4 * var(--u));
font-size:calc(30 * var(--u))
}
.bento__card--leads .bento__rule { width:calc(514.2 * var(--u));
height:calc(1 * var(--u));
margin-top:calc(22.9 * var(--u))
}
.bento__card--leads .bento__text { margin-top:calc(18.6 * var(--u));
padding-inline:calc(35.6 * var(--u)) calc(79 * var(--u));
line-height:1.4267
}
.bento__card--integrations { display:flex;
align-items:center;
justify-content:space-between;
padding:calc(40.2 * var(--u)) calc(35.8 * var(--u)) calc(35.1 * var(--u)) calc(30.1 * var(--u));
box-shadow:0 0 calc(10.4 * var(--u)) rgb(0 0 0 / .3)
}
.bento__copy { align-self:flex-start;
width:calc(524 * var(--u));
padding-inline:0
}
.bento__card--integrations .bento__rule { width:calc(511.9 * var(--u));
margin-top:calc(22.4 * var(--u))
}
.bento__card--integrations .bento__text { margin-top:calc(10.7 * var(--u))
}
.logos { gap:calc(36.75 * var(--u));
margin-top:0
}
.logo { width:calc(111.7 * var(--u));
height:calc(132.3 * var(--u));
padding-top:calc(19.75 * var(--u));
border-radius:calc(13.25 * var(--u));
box-shadow:0 0 calc(9.3 * var(--u)) rgb(0 0 0 / .3);
font-size:max(11px,calc(20 * var(--u)))
}
.logo img { width:calc(66.6 * var(--u));
height:calc(59.7 * var(--u))
}
.logo span { margin-top:calc(12.3 * var(--u))
}
.logo + .logo::after { width:calc(36.8 * var(--u));
height:calc(5.27 * var(--u))
}
}
/* ===== articles (latest posts) ===== */
.articles { padding-block:calc(81.5 * var(--u)) calc(90.8 * var(--u))
}
.articles__head { padding-inline:calc(30 * var(--u));
text-align:center
}
.articles__head .h2 { margin-top:calc(11 * var(--u))
}
.articles__list { display:flex;
flex-direction:column;
gap:calc(59.1 * var(--u));
margin-top:calc(81.2 * var(--u));
padding-inline:calc(38.6 * var(--u)) calc(38.5 * var(--u))
}
.post { position:relative
}
.post__img { overflow:hidden;
border-radius:calc(15 * var(--u))
}
.post__img img { width:100%;
height:calc(353.3 * var(--u));
object-fit:cover;
transition:transform .6s cubic-bezier(.2,.7,.2,1)
}
.post__body { margin-top:calc(9 * var(--u));
padding:calc(41.6 * var(--u)) calc(40.3 * var(--u)) calc(50 * var(--u)) calc(96.6 * var(--u));
border-radius:calc(15 * var(--u));
background:var(--paper);
transition:background-color .3s
}
.post__tags { display:flex;
flex-wrap:wrap;
gap:calc(21 * var(--u))
}
.post__tags li { height:calc(44.1 * var(--u));
padding-inline:calc(16.6 * var(--u));
border-radius:calc(5.4 * var(--u));
background:var(--tag-bg);
color:var(--tag-ink);
font-size:max(11px,calc(25.98 * var(--u)));
line-height:calc(44.1 * var(--u));
white-space:nowrap
}
.post__title { margin-top:calc(27.5 * var(--u));
color:var(--navy);
font-size:calc(50 * var(--u));
line-height:1.226
}
/* the title link covers the whole card */
.post__title a::after { content:"";
position:absolute;
inset:0;
z-index:1;
border-radius:calc(15 * var(--u))
}
.post__title a:focus-visible { outline:0
}
.post__title a:focus-visible::after { outline:3px solid var(--orange);
outline-offset:3px
}
.post__excerpt { margin-top:calc(16.6 * var(--u));
color:var(--ink);
font-size:max(16px,calc(46 * var(--u)));
line-height:1.297
}
.post:hover .post__img img { transform:scale(1.05)
}
.post:hover .post__body { background:#efeffa
}
.post:hover .post__title { color:var(--orange)
}
.more-link { display:inline-flex;
align-items:center;
gap:calc(18.7 * var(--u));
color:var(--orange);
font-weight:700;
font-size:max(16px,calc(46 * var(--u)));
line-height:1.2
}
.more-link img { width:calc(39.25 * var(--u));
transition:transform .25s
}
.more-link:hover img { transform:translateX(calc(-8 * var(--u)))
}
.articles__all { display:flex;
width:fit-content;
margin:calc(67 * var(--u)) calc(42.4 * var(--u)) 0 0
}
@media (min-width:1024px) {
.articles { padding-block:calc(81.7 * var(--u)) calc(90 * var(--u))
}
.articles__head { padding-inline:0
}
.articles__head .h2 { max-width:calc(1250 * var(--u));
margin:calc(8.4 * var(--u)) auto 0
}
.articles__list { gap:calc(14.2 * var(--u));
margin-top:calc(66 * var(--u));
padding-inline:calc(229.1 * var(--u))
}
.post { display:grid;
grid-template-columns:calc(678.5 * var(--u)) 1fr;
column-gap:calc(11.9 * var(--u))
}
.post__img { border-radius:calc(9.15 * var(--u))
}
.post__img img { height:calc(253.2 * var(--u))
}
/* the comp's title fills its 686px box exactly;
the end padding gives Chrome's slightly wider set room */
.post__body { margin-top:0;
padding:calc(29.9 * var(--u)) calc(42.5 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u));
border-radius:calc(9.76 * var(--u))
}
.post__tags { justify-content:flex-end;
gap:calc(15 * var(--u));
padding-inline-end:calc(22.7 * var(--u))
}
.post__excerpt { padding-inline-end:calc(12.5 * var(--u))
}
.post__tags li { height:calc(31.6 * var(--u));
padding-inline:calc(11.9 * var(--u));
border-radius:calc(3.84 * var(--u));
font-size:max(11px,calc(18.62 * var(--u)));
line-height:calc(31.6 * var(--u))
}
.post__title { margin-top:calc(33.6 * var(--u));
font-size:calc(34 * var(--u));
line-height:1.2588
}
.post__title a::after { border-radius:calc(9.76 * var(--u))
}
.post__excerpt { margin-top:calc(1.7 * var(--u));
font-size:max(15px,calc(30 * var(--u)));
line-height:1.4267
}
.more-link { gap:calc(11.5 * var(--u));
font-size:max(15px,calc(30 * var(--u)))
}
.more-link img { width:calc(30.2 * var(--u))
}
.articles__all { margin:calc(17.4 * var(--u)) auto 0 calc(229.1 * var(--u))
}
}