/* V9 product feature hub: quiet typographic overview with actual UI screenshots. */
.sf-hub .sf-hub-hero{padding:clamp(86px,9vw,142px) 0 100px;background:#090a0b}
.sf-hub .sf-hub-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px;align-items:center}
.sf-hub .sf-hub-hero h1{font-size:clamp(46px,5.5vw,84px);max-width:900px;line-height:1.04;letter-spacing:-.06em;font-weight:650;margin:0}
.sf-hub .sf-hub-lede{display:flex;flex-direction:column;justify-content:center;align-self:center;width:100%;padding:0}
.sf-hub .sf-hub-lede p{color:#acb3be;font-size:clamp(16px,1.35vw,20px);line-height:1.68;margin:0}
.sf-hub .sf-hub-section{padding:80px 0 94px;border-top:1px solid #23262b}
.sf-hub .sf-hub-heading{margin-bottom:34px}
.sf-hub .sf-hub-heading .sf-index{margin:0 0 20px;padding:0}
.sf-hub .sf-hub-heading h2{font-size:clamp(34px,3.5vw,53px);line-height:1.13;letter-spacing:-.05em;margin:0;font-weight:620}
.sf-hub .sf-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sf-hub .sf-hub-card{background:#101215;border:1px solid #23272d;border-radius:14px;overflow:hidden;min-width:0;transition:border-color .18s ease,transform .18s ease}
.sf-hub .sf-hub-card:hover{border-color:#4b5058;transform:translateY(-2px)}
.sf-hub .sf-hub-card-link{display:block;color:inherit!important;text-decoration:none!important;height:100%}
.sf-hub .sf-hub-card-link:focus-visible{outline:2px solid white;outline-offset:-3px}
.sf-hub .sf-hub-media{height:clamp(165px,19vw,288px);background:#0b0c0e;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
.sf-hub .sf-hub-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.sf-hub .sf-hub-card-body{padding:23px 27px 26px}
.sf-hub .sf-hub-title-row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.sf-hub .sf-hub-title-row h3{font-size:24px;letter-spacing:-.036em;margin:0;font-weight:600}
.sf-hub .sf-hub-title-row span{font-size:20px;color:#adb4bf}
.sf-hub .sf-hub-card-body p{color:#aab1bb;font-size:14px;line-height:1.7;margin:11px 0 20px;max-width:460px}
.sf-hub .sf-hub-explore{font-size:12px;font-weight:600;color:#d4d9e0}
.sf-hub .sf-hub-outro{padding:105px 0 115px;border-top:1px solid #23262b}
.sf-hub .sf-hub-outro h2{font-size:clamp(40px,5vw,70px);letter-spacing:-.06em;line-height:1.1;margin:22px 0 15px}
.sf-hub .sf-hub-outro p:not(.sf-index){color:#aab1bb;font-size:16px;line-height:1.75;max-width:625px;margin:0 0 27px}
.sf-hub .sf-hub-outro a{color:#eef0f3;font-weight:600;text-decoration:none}
@media(max-width:850px){.sf-hub .sf-hub-hero-grid{grid-template-columns:1fr;gap:25px}.sf-hub .sf-hub-hero{padding:65px 0 70px}}
@media(max-width:700px){.sf-hub .sf-hub-grid{grid-template-columns:1fr;gap:16px}.sf-hub .sf-hub-section{padding:65px 0}.sf-hub .sf-hub-media{height:220px}.sf-hub .sf-hub-card-body{padding:20px}.sf-hub .sf-hub-title-row h3{font-size:22px}.sf-hub .sf-hub-outro{padding:75px 0}}
@media(prefers-reduced-motion:reduce){.sf-hub .sf-hub-card{transition:none}}

/* v9 — align hub intro to the heading's vertical middle. */
.sf-hub .sf-hub-hero-grid{align-items:center}
.sf-hub .sf-hub-lede .sf-try-link{
  display:flex; width:100%; justify-content:flex-end; align-items:center;
  margin:0 0 18px; color:var(--text-2,#aeb4bd)!important;
  font-size:15px; font-weight:500; text-decoration:none;
}
.sf-hub .sf-hub-lede .sf-try-link:hover{color:#fff!important}
/* Fill each cover's entire frame without stretching the screenshot.
   Crop from the bottom as needed; keep the app header visible. */
.sf-hub .sf-hub-media img{object-fit:cover;object-position:left top}
@media(max-width:850px){
  .sf-hub .sf-hub-lede .sf-try-link{justify-content:flex-start}
}