/* TheySaid footer (Footer V4), the one footer component on the site (homepage and every inner page; /v4 keeps its own
   Footer LP). Loaded by the embed inside Footer V4.
   Part 0: what the inner pages need and the homepage gets from its own bundle: the variables it defines on :root, and
           resets against the inner pages' tag styles (site CSS + the legacy a{} rule, which the same embed inlines just
           before this file).
   Part 1: the footer rules of theysaid-home-v32.css (homepage bundle, only loaded on the homepage), unchanged.
   Part 2: px type sizes (inner pages scale rem with the viewport) and the homepage-only letter-spacing tweak.
   Part 3: spacing after the inner pages' closing CTA. */

/* Part 0 */
.footer-v4_component{--ease-standard:cubic-bezier(.4,0,.2,1);--g200:var(--_colors---gray-scale--gray-200,#e5e7eb);--g300:var(--_colors---gray-scale--gray-300,#d1d5db)}
:where(.footer-v4_component) :is(h1,h2,h3,h4,h5,h6){color:revert;letter-spacing:revert;font-family:revert;font-size:revert;font-weight:revert;line-height:revert;margin:0;padding:0}
:where(.footer-v4_component) p{color:revert;font-size:revert;line-height:revert;margin:0;padding:0}
:where(.footer-v4_component) a{color:inherit;text-decoration:none;letter-spacing:inherit;font-size:inherit;line-height:inherit;margin-bottom:0}
:where(.footer-v4_component) :is(ul,ol){margin:0;padding:0;list-style:none;font-size:revert;line-height:revert}
:where(.footer-v4_component) li{list-style-type:none;margin:0;padding:0}
:where(.footer-v4_component) img{color:revert;padding:0;display:block;max-width:100%}
.footer-v4_component .sr-only{position:absolute!important}
.footer-v4_component .logo-v4>span{position:absolute;display:block}
.footer-v4_component .logo-v4>span:nth-child(1){inset:29.65% 55.88% 2.14% 0}
.footer-v4_component .logo-v4>span:nth-child(2){inset:28.09% 14.57% 0 44.91%}
.footer-v4_component .logo-v4>span:nth-child(3){inset:0 0 1.04% 55.36%}
.footer-v4_component .logo-v4 img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
@media(min-width:480px){.footer-v4_component .logo-v4{--logo-w:139.62px;width:var(--logo-w)}}

/* Part 1 */
.footer-v4_component{--ft-line: var(--_colors---theme--border-on-dark, #3f434c) }
.footer-v4_component p,.footer-v4_component h2,.footer-v4_component h3{margin:0}
.footer-v4_hr{background:var(--ft-line)}
.footer-v4_blurb,.footer-v4_follow-title{text-box:trim-both cap alphabetic}
.footer-v4_social-link:before{content:"";position:absolute;inset:0;border-radius:50%;background:#ffffff14;opacity:0;transition:opacity .25s var(--ease-standard)}
.footer-v4_i{translate:-50% -50%}
.footer-v4_i.is-yt{scale:1 -1}
.footer-v4_social-link:hover:before{opacity:1}
.footer-v4_social-link:focus-visible:before{opacity:1}
.footer-v4_social-link:hover .footer-v4_sico{filter:brightness(1.35)}
.footer-v4_social-link:focus-visible .footer-v4_sico{filter:brightness(1.35)}
.footer-v4_social-link:active:before{background:#ffffff24}
.footer-v4_social-link:focus-visible{outline-offset:2px;border-radius:50%}
.footer-v4_vr{background:var(--ft-line)}
.footer-v4_col-title,.footer-v4_link{text-box:trim-both cap alphabetic}
.footer-v4_link:before{content:"";position:absolute;inset:-12px -8px}
.footer-v4_link:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;opacity:0;transition:opacity .25s var(--ease-standard)}
.footer-v4_link:focus-visible{color:#fff}
.footer-v4_link:hover:after{opacity:1}
.footer-v4_link:focus-visible:after{opacity:1}
.footer-v4_link:active{color:var(--g200)}
.footer-v4_copy{text-box:trim-both cap alphabetic}
.footer-v4_link.is-sm{font:inherit}
.footer-v4_link.is-sm:before{inset:-10px -6px}
.footer-v4_totop{translate:-50% -50%}
.footer-v4_totop:focus-visible{opacity:1;transform:none}
.footer-v4_totop:active{color:var(--g300)}
.footer-v4_totop:focus-visible{color:#fff}
@media(min-width:480px)and (max-width:991px){.footer-v4_col{border-top:1px solid var(--ft-line)}.footer-v4_col:nth-child(-n+4){border-top:0}.footer-v4_col:nth-child(3n+2) .footer-v4_col-body{padding-left:0}}
@media(min-width:480px)and (max-width:767px){.footer-v4_col{border-top:1px solid var(--ft-line)}.footer-v4_col:nth-child(-n+3){border-top:0}.footer-v4_col:nth-child(4){border-top:1px solid var(--ft-line)}.footer-v4_col:nth-child(3n+2) .footer-v4_col-body{padding-left:28px}.footer-v4_col:nth-child(2n) .footer-v4_col-body.footer-v4_col-body{padding-left:0}.footer-v4_totop{translate:none}}
@media(prefers-reduced-motion:reduce){.footer-v4_totop{opacity:1;transform:none}}
.footer-v4_logo.w-inline-block,.footer-v4_social-link.w-inline-block,.footer-v4_totop.w-inline-block,.nav-v4_dd-item.w-inline-block,.nav-v4_link.w-inline-block,.nav-v4_logo.w-inline-block{max-width:none}
.footer-v4_col-title.is-blank:before{content:"\a0"}

/* Part 2 */
.footer-v4_component{font-size:16px;line-height:1.5}
.footer-v4_component .text-size-regular{font-size:16px}
.footer-v4_component .text-size-small{font-size:14px}
.footer-v4_bar,.footer-v4_link.is-sm{letter-spacing:-.28px}

/* Part 3: inner pages. The closing CTA blocks (home_section-cta, home_section-cta-white, banner-cta-product-v2) overlap 120px
   down into the footer (margin-bottom:-120px, made for the old light footer, which had 188px of top padding). After them the
   footer keeps that 120px plus a gap (the margins collapse to the gap), so the card ends on the page above the dark footer. */
:is(.home_section-cta,.home_section-cta-white,.banner-cta-product-v2)~.footer-v4_component{margin-top:calc(120px + clamp(48px,6vw,80px))}
/* Same when the block right before the footer ENDS with one of those CTAs (e.g. /blog: page-wrapper > main-wrapper > CTA, the
   footer after page-wrapper): the CTA's negative margin collapses through the wrappers, so the footer needs the same margin. */
:has(> :is(.home_section-cta,.home_section-cta-white,.banner-cta-product-v2):last-child)+.footer-v4_component,
:has(> :last-child > :is(.home_section-cta,.home_section-cta-white,.banner-cta-product-v2):last-child)+.footer-v4_component{margin-top:calc(120px + clamp(48px,6vw,80px))}

/* Part 4 (Nov 10): launch badges row (Figma 13631:227), the vendors' badge HTML in the embed right after .footer-v4_top.
   Figma: five 220x64 slots spread across the container, each badge scaled to fit its slot, 40px above and below.
   v6: desktop is one row of however many badges the embed has (StartupBase commented out Nov 10, its link 403s). */
.footer-v4_badges{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,220px);justify-content:space-between;column-gap:24px;row-gap:16px;margin-bottom:40px}
.footer-v4_badges>a{display:block;height:64px}
/* !important: the StartupBase snippet carries an inline height:55px;width:auto */
.footer-v4_badges img{width:100%!important;height:100%!important;object-fit:contain}
@media(min-width:992px){.footer-v4_top:has(+.w-embed>.footer-v4_badges){margin-bottom:40px}}
@media(max-width:991px){.footer-v4_badges{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,220px));justify-content:start}.footer-v4_badges img{object-position:left center}}
/* phones: .footer-v4_top drops the container margins for 20px padding; match it */
@media(max-width:479px){.footer-v4_badges{width:auto;margin-left:0;margin-right:0;padding:0 20px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin-bottom:24px}.footer-v4_badges>a{height:48px}}