/* Homepage integrations and the selected stats treatment. */
.home-integrations{scroll-margin-top:96px;padding-bottom:48px;overflow:clip}
.home-integrations-head{text-align:center;max-width:var(--measure-lede);margin:0 auto 48px}
.home-integrations-head h2{font-size:var(--t-h2);font-weight:600;line-height:1.1;color:var(--ink);text-wrap:balance;margin:0 auto 24px}
.home-integrations-head p{font-size:var(--t-lede);line-height:1.55;color:var(--muted);text-wrap:pretty;margin:0 auto 28px}
.home-integrations-head .btn{white-space:nowrap}
.home-integration-marquee{position:relative;margin:-64px 0;display:flex;flex-direction:column;gap:10px;padding:64px 0;isolation:isolate;pointer-events:none;mask-image:linear-gradient(90deg,transparent,var(--ink) 8%,var(--ink) 92%,transparent)}
/* The marquee's shadow padding ignores the pointer; only the rows take it. Rows clip
   sideways only, so they never overlap each other or the button above. */
.home-integration-row{position:relative;z-index:1;overflow-x:clip;pointer-events:auto}
/* The hovered row rises so its lifted card's shadow falls over the other row.
   With JS, home-proof.js sets .is-hover on the card under the cursor every frame,
   since :hover goes stale on a moving card; :hover is the no-JS fallback. */
.home-integration-marquee:not([data-js]) .home-integration-row:hover,.home-integration-row:has(.is-hover),.home-integration-row:has(:focus-visible){z-index:2}
.home-integration-track{display:flex;gap:10px;width:max-content;list-style:none;margin:0;padding:0;animation:home-integration-drift 70s linear infinite}
.home-integration-row:nth-child(2) .home-integration-track{animation-direction:reverse}
.home-integration-track li{position:relative;flex:0 0 auto;width:220px}
.home-integration-tile{position:relative;display:flex;align-items:center;justify-content:center;height:84px;border-radius:var(--r-md);outline-offset:3px}
@keyframes home-integration-drift{to{transform:translateX(calc(-50% - 5px))}}
/* Keyboard navigation uses the original links in a stationary, scrollable row. */
.home-integration-marquee:has(:focus-visible){mask-image:none}
.home-integration-marquee:has(:focus-visible) .home-integration-track{animation:none;transform:none}
.home-integration-row:has(:focus-visible){overflow-x:auto;scrollbar-width:none;padding-block:6px;margin-block:-6px}
/* Hover matches the software-downloads tiles: the card lifts 2px onto a soft
   navy shadow and its border picks up the accent. Face, border and shadow
   live on ::after so the logo stays crisp above them. */
.home-integration-tile{transition:transform .4s var(--ease-out)}
.home-integration-tile::after{content:'';position:absolute;inset:0;z-index:0;border:1px solid var(--line-soft);border-radius:inherit;background:var(--card);transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.home-integration-tile img{position:relative;z-index:1;width:calc(var(--logo-width,140px) * .9);height:calc(var(--logo-height,38px) * .9);max-width:70.2%;object-fit:contain}
.home-integration-tile:focus-visible{outline:2px solid var(--accent)}
.home-integration-tile:focus-visible,.home-integration-tile.is-hover,.home-integration-marquee:not([data-js]) .home-integration-tile:hover{transform:translateY(-2px)}
.home-integration-tile:focus-visible::after,.home-integration-tile.is-hover::after,.home-integration-marquee:not([data-js]) .home-integration-tile:hover::after{border-color:color-mix(in srgb,var(--accent) 25%,transparent);box-shadow:0 18px 50px -16px color-mix(in srgb,var(--ink) 10%,transparent),0 4px 12px color-mix(in srgb,var(--ink) 4%,transparent)}
@media(hover:none){
 .home-integration-marquee:not([data-js]) .home-integration-tile:hover{transform:none}
 .home-integration-marquee:not([data-js]) .home-integration-tile:hover::after{border-color:var(--line-soft);box-shadow:none}
}

/* The warped dots live separately from the gradient for a future texture change. */
.stats-section{scroll-margin-top:100px}
.stats-stage{position:relative;isolation:isolate;padding:64px 40px;border-radius:var(--r-xl)}
.stats-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;background:radial-gradient(ellipse at 96% 80%,color-mix(in srgb,var(--accent) 17%,var(--ink)),transparent 65%),var(--ink);pointer-events:none}
.stats-warp{position:absolute;inset:0;width:100%;height:100%;color:color-mix(in srgb,var(--accent) 50%,var(--card));opacity:.8;mask-image:linear-gradient(180deg,var(--ink),transparent 44%,transparent 66%,var(--ink))}
.stats-stage .stats-row{gap:40px 24px;align-items:start}
.stats-stage .big{color:var(--card);font-weight:400}
.stats-stage .lbl{color:color-mix(in srgb,var(--card) 84%,var(--ink));max-width:24ch;text-wrap:balance}
.stats-stage .info-btn{color:color-mix(in srgb,var(--card) 72%,var(--accent));border-color:currentColor}
.stats-stage .info-btn:hover,.stats-stage .info-btn:focus-visible{color:var(--card)}
.stats-stage .info-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.stats-stage .lbl:has(.info-btn[aria-expanded="true"])+.info-body{opacity:1;pointer-events:auto}
.stats-stage .stat:first-child .info-body{left:0;transform:none}
.stats-stage .stat:last-child .info-body{left:auto;right:0;transform:none}
@media(max-width:1150px){
 .stats-stage .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
 .home-integrations{padding-top:64px;padding-bottom:24px}
 .home-integrations-head{margin-bottom:36px}
 .home-integrations-head h2{margin-bottom:20px}
 .home-integrations-head p{font-size:var(--t-body-lg);margin-bottom:24px}
 .home-integration-track li{width:160px}
 .home-integration-tile{height:72px}
 /* Scale the individually balanced marks together, preserving their proportions. */
 .home-integration-tile img{max-width:70.2%;width:calc(var(--logo-width,140px) * .756);height:calc(var(--logo-height,38px) * .756)}
 .stats-section{padding-top:40px;padding-bottom:40px}
 .stats-stage{padding:40px 20px}
 .stats-stage .stats-row{grid-template-columns:1fr;gap:32px}
 .stats-stage .info-body{max-width:calc(100vw - 80px)}
 .stats-stage .stat:first-child .info-body,.stats-stage .stat:last-child .info-body{left:50%;right:auto;transform:translateX(-50%)}
 .stats-stage .lbl{font-size:var(--t-body);margin-top:10px}
 .stats-warp{width:220%;max-width:none;left:-90%;opacity:.6;mask-image:linear-gradient(90deg,var(--ink),transparent 50%,var(--ink))}
}
@media(prefers-reduced-motion:reduce){
 .home-integration-tile,.home-integration-tile::after{transition:none}
 .home-integration-marquee{mask-image:none}
 .home-integration-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
 .home-integration-track [aria-hidden="true"]{display:none}
 .home-integration-track li{width:calc((100% - 50px)/6)}
}
@media(prefers-reduced-motion:reduce) and (max-width:1150px){
 .home-integration-track li{width:calc((100% - 20px)/3)}
}
@media(prefers-reduced-motion:reduce) and (max-width:640px){
 .home-integration-track li{width:calc((100% - 10px)/2)}
}

/* Calculator: the house glow behind a white card (the event page's .ev-meet
   halo and the webinar form), same stops and the same 122% x 172% reach, so
   it fades to nothing past every edge. */
.roi-section{position:relative}
.roi-section::before{content:"";position:absolute;top:50%;left:50%;width:min(1630px,122%);height:172%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse farthest-side,rgba(65,154,248,.315) 0%,rgba(101,213,236,.21) 18%,rgba(65,154,248,.126) 36%,rgba(65,154,248,.063) 54%,rgba(65,154,248,.021) 72%,rgba(65,154,248,0) 90%)}
.roi-section .roi-card{position:relative;z-index:1}

/* Selected Horizon: one continuous eased navy-to-blue ramp, sampled every 5%. */
.stats-stage[data-gradient="4"]{--gradient-deep:color-mix(in srgb,var(--ink) 55%,var(--ink-2));padding:80px 40px 96px}
.stats-stage[data-gradient="4"] .stats-backdrop{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 0%,var(--gradient-deep)) 0%,color-mix(in srgb,var(--accent) 0%,var(--gradient-deep)) 5%,color-mix(in srgb,var(--accent) 0.01%,var(--gradient-deep)) 10%,color-mix(in srgb,var(--accent) 0.04%,var(--gradient-deep)) 15%,color-mix(in srgb,var(--accent) 0.14%,var(--gradient-deep)) 20%,color-mix(in srgb,var(--accent) 0.34%,var(--gradient-deep)) 25%,color-mix(in srgb,var(--accent) 0.71%,var(--gradient-deep)) 30%,color-mix(in srgb,var(--accent) 1.32%,var(--gradient-deep)) 35%,color-mix(in srgb,var(--accent) 2.25%,var(--gradient-deep)) 40%,color-mix(in srgb,var(--accent) 3.61%,var(--gradient-deep)) 45%,color-mix(in srgb,var(--accent) 5.5%,var(--gradient-deep)) 50%,color-mix(in srgb,var(--accent) 8.05%,var(--gradient-deep)) 55%,color-mix(in srgb,var(--accent) 11.4%,var(--gradient-deep)) 60%,color-mix(in srgb,var(--accent) 15.71%,var(--gradient-deep)) 65%,color-mix(in srgb,var(--accent) 21.13%,var(--gradient-deep)) 70%,color-mix(in srgb,var(--accent) 27.84%,var(--gradient-deep)) 75%,color-mix(in srgb,var(--accent) 36.04%,var(--gradient-deep)) 80%,color-mix(in srgb,var(--accent) 45.94%,var(--gradient-deep)) 85%,color-mix(in srgb,var(--accent) 57.74%,var(--gradient-deep)) 90%,color-mix(in srgb,var(--accent) 71.68%,var(--gradient-deep)) 95%,color-mix(in srgb,var(--accent) 88%,var(--gradient-deep)) 100%)}
.stats-stage[data-gradient="4"] .stats-warp{display:none}
/* The homepage calculator uses one solid navy surface. */
.roi-result{background:var(--ink)}
.roi-result .label{color:var(--card)}
.roi-result::before{content:none}
@media(max-width:640px){
 .stats-stage[data-gradient="4"]{padding:44px 20px 76px}
 .stats-stage[data-gradient="4"] .stats-backdrop{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 0%,var(--gradient-deep)) 0%,color-mix(in srgb,var(--accent) 0%,var(--gradient-deep)) 5%,color-mix(in srgb,var(--accent) 0%,var(--gradient-deep)) 10%,color-mix(in srgb,var(--accent) 0%,var(--gradient-deep)) 15%,color-mix(in srgb,var(--accent) 0.01%,var(--gradient-deep)) 20%,color-mix(in srgb,var(--accent) 0.02%,var(--gradient-deep)) 25%,color-mix(in srgb,var(--accent) 0.06%,var(--gradient-deep)) 30%,color-mix(in srgb,var(--accent) 0.16%,var(--gradient-deep)) 35%,color-mix(in srgb,var(--accent) 0.36%,var(--gradient-deep)) 40%,color-mix(in srgb,var(--accent) 0.73%,var(--gradient-deep)) 45%,color-mix(in srgb,var(--accent) 1.38%,var(--gradient-deep)) 50%,color-mix(in srgb,var(--accent) 2.44%,var(--gradient-deep)) 55%,color-mix(in srgb,var(--accent) 4.11%,var(--gradient-deep)) 60%,color-mix(in srgb,var(--accent) 6.64%,var(--gradient-deep)) 65%,color-mix(in srgb,var(--accent) 10.35%,var(--gradient-deep)) 70%,color-mix(in srgb,var(--accent) 15.66%,var(--gradient-deep)) 75%,color-mix(in srgb,var(--accent) 23.07%,var(--gradient-deep)) 80%,color-mix(in srgb,var(--accent) 33.19%,var(--gradient-deep)) 85%,color-mix(in srgb,var(--accent) 46.77%,var(--gradient-deep)) 90%,color-mix(in srgb,var(--accent) 64.69%,var(--gradient-deep)) 95%,color-mix(in srgb,var(--accent) 88%,var(--gradient-deep)) 100%)}
}