#hero-section-wrapper { min-height: calc(100vh + 85px); background: linear-gradient(100deg, var(--pg-color-ink) 0%, var(--pg-color-ink) 100%); display: flex; align-items: center; overflow: hidden; padding: 110px 0 70px; } #hero-section-wrapper .eyebrow-text { font-size: 14px; font-weight: 700; color: var(--pg-color-accent); margin: 0 0 30px; text-transform: uppercase; letter-spacing: calc(14px * 0.08); } #hero-section-wrapper h1 { color: var(--pg-color-surface); font-size: 101px; font-weight: 500; line-height: 1; text-transform: none; } @media (max-width: 992px) { #hero-section-wrapper h1 { font-size: 67px; } } @media (max-width: 767px) { #hero-section-wrapper h1 { font-size: 48px; } } @media (max-width: 420px) { #hero-section-wrapper h1 { font-size: 36px; } } #hero-section-wrapper h1 strong { color: var(--pg-color-accent); font-weight: 500; text-transform: none; } #hero-section-wrapper .subtitle { font-size: 20px; font-weight: 400; color: var(--pg-color-surface); line-height: 1.5; margin: 0; padding-bottom: 45px; } #hero-section-wrapper hr { max-width: 700px; height: 2px; background-color: var(--pg-color-accent); border: 0; margin: 20px 0; opacity: 1; } #hero-section-wrapper .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 0 45px 45px 0; } #hero-section-wrapper .hero-content-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 40px; } #hero-section-wrapper .hero-content { position: relative; max-width: 960px; flex: 1 1 0; min-width: 0; } #hero-section-wrapper .hero-image { flex: 1 1 0; min-width: 0; } #hero-section-wrapper .hero-image img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; } #hero-section-wrapper .secondary-button { color: var(--pg-on-surface, var(--pg-color-surface)); background: transparent; border: 2px solid var(--pg-orange); } #hero-section-wrapper .secondary-button:hover, #hero-section-wrapper .secondary-button:focus-visible { color: var(--pg-color-ink); background: var(--pg-orange); border-color: var(--pg-orange); } #customer-tabs-section { padding: 100px 0 60px; background: var(--pg-color-surface); overflow: hidden; } #customer-tabs-section h2.title { color: var(--pg-color-ink); text-align: center; font-size: 67px; font-weight: 500; line-height: 1.1; text-transform: none; } @media (max-width: 992px) { #customer-tabs-section h2.title { font-size: 48px; } } @media (max-width: 767px) { #customer-tabs-section h2.title { font-size: 36px; } } @media (max-width: 420px) { #customer-tabs-section h2.title { font-size: 32px; } } #customer-tabs-section h2.title strong { color: var(--pg-color-accent); font-weight: 500; text-transform: none; } #customer-tabs-section #tabs, #customer-tabs-section #tabs .tabs-content { min-width: 0; } #customer-tabs-section .tabs-content-navigation { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; } #customer-tabs-section #tabs .tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--pg-color-ink); background: var(--pg-color-surface); border: 2px solid var(--pg-color-muted); border-radius: 25px; font-size: 18px; font-weight: 500; text-align: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } #customer-tabs-section #tabs .tab:hover, #customer-tabs-section #tabs .tab.whiteborder, #customer-tabs-section #tabs .tab[aria-selected="true"] { background: var(--pg-color-accent); border-color: var(--pg-color-accent); color: var(--pg-color-ink); } #customer-tabs-section #tabs .tab:focus-visible { outline: 2px solid var(--pg-color-ink); outline-offset: 3px; } #customer-tabs-section #tabs .tab img, #customer-tabs-section #tabs .tab svg { display: block; width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; } #customer-tabs-section #tabs .tab-content-holder { padding-left: 40px; } #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 36px; font-weight: 500; color: var(--pg-color-ink); margin: 0 0 20px; text-transform: none; } @media (max-width: 992px) { #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 32px; } } @media (max-width: 767px) { #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 28px; } } @media (max-width: 420px) { #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 24px; } } #customer-tabs-section #tabs .tab-content-holder em { font-size: 20px; font-weight: 500; font-style: normal; color: var(--pg-color-accent); text-transform: uppercase; margin-bottom: 24px; } #customer-tabs-section #tabs .tab-content-holder strong { color: var(--pg-color-accent); font-weight: 500; } #customer-tabs-section #tabs .tab-content-holder p, #customer-tabs-section #tabs .tab-content-holder li { font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--pg-color-ink); margin-bottom: 12px; } #customer-tabs-section #tabs .tab-content-holder a.cta, #customer-tabs-section #tabs .addon-box a.cta { font-size: 14px; font-weight: 500; color: var(--pg-color-ink); text-decoration: none; } #customer-tabs-section #tabs .tab-content-holder a.cta:hover, #customer-tabs-section #tabs .addon-box a.cta:hover { color: var(--pg-color-ink); } #customer-tabs-section #tabs .tabContent.hide, #customer-tabs-section #tabs .tabContent[hidden] { display: none !important; } #customer-tabs-section #tabs .tabContent.show { display: flex; } #customer-tabs-section #tabs .image-holder img { display: block; width: 100%; height: auto; transition: transform 0.2s ease; } #customer-tabs-section #tabs .image-holder:hover img { transform: scale(1.03); } #tabs .addon-box { margin-bottom: 30px; min-width: 0; } #tabs .addon-box .addon-holder { max-width: 400px; height: 100%; margin: 0 auto; border-radius: 8px; overflow: hidden; background: var(--pg-color-white); } #tabs .addon-box .addon-content { padding: 32px 24px 24px; } #tabs .addon-box .tag { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--pg-color-muted); margin: 0 0 12px; letter-spacing: calc(14px * 0.04); } #tabs .addon-box h3 { font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--pg-color-ink); margin: 0 0 12px; text-transform: none; } #tabs .addon-box .content, #tabs .addon-box .content p { font-size: 18px; font-weight: 400; color: var(--pg-color-muted); line-height: 1.5; } #tabs .addon-box .content { min-height: 100px; max-height: 162px; overflow: hidden; margin-bottom: 18px; } #tabs .addon-box .content p { margin: 0 0 10px; } #tabs .addon-box .cta { display: inline-flex; align-items: center; gap: 12px; } #tabs .addon-box .cta img { flex: 0 0 auto; } #partners-wrapper { padding: 24px 0; background: var(--pg-color-ink); overflow: hidden; } #partners-wrapper .row { margin: 0; } #partners-wrapper .partners-slider { position: relative; width: 100%; overflow: hidden; } #partners-wrapper .partners-slider:not(.customers-marquee-ready) { display: flex; align-items: center; overflow-x: auto; } #partners-wrapper .customers-marquee__track { display: flex; align-items: center; width: max-content; animation: customers-overview-marquee 55s linear infinite; will-change: transform; } #partners-wrapper .customers-marquee__group { display: flex; align-items: center; flex: 0 0 auto; } #partners-wrapper .customers-marquee__item, #partners-wrapper .partners-slider:not(.customers-marquee-ready) > div { width: 220px; height: 160px; flex: 0 0 220px; display: flex; align-items: center; justify-content: center; padding: 0 20px; } #partners-wrapper .customers-marquee__item img, #partners-wrapper .partners-slider:not(.customers-marquee-ready) > div img { display: block; max-width: 180px; max-height: 90px; width: auto; height: auto; object-fit: contain; margin: 0 auto; } #partners-wrapper .partners-slider:hover .customers-marquee__track { animation-play-state: paused; } @keyframes customers-overview-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media only screen and (max-width: 992px) { #customer-tabs-section #tabs .tab-content-holder { padding-left: 0; } #tabs .addon-box { margin-bottom: 30px; } #partners-wrapper .customers-marquee__item, #partners-wrapper .partners-slider:not(.customers-marquee-ready) > div { width: 180px; height: 130px; flex-basis: 180px; } #partners-wrapper .customers-marquee__item img, #partners-wrapper .partners-slider:not(.customers-marquee-ready) > div img { max-width: 135px; max-height: 75px; } } @media only screen and (max-width: 768px) { #hero-section-wrapper { min-height: 0; padding: 150px 0 60px; } #hero-section-wrapper h1 { font-size: 101px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { #hero-section-wrapper h1 { font-size: 67px; } } @media (max-width: 767px) { #hero-section-wrapper h1 { font-size: 48px; } } @media (max-width: 420px) { #hero-section-wrapper h1 { font-size: 36px; } } #hero-section-wrapper .subtitle { font-size: 18px; } #hero-section-wrapper .button-row { padding: 0; } #hero-section-wrapper .hero-content-wrapper { display: block; } #hero-section-wrapper .hero-image { display: none; } #customer-tabs-section { padding: 60px 0; } #customer-tabs-section .tabs-content-navigation { justify-content: flex-start; gap: 8px; } #customer-tabs-section #tabs .tab { margin: 0; font-size: 14px; padding: 8px 12px; } #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 36px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 32px; } } @media (max-width: 767px) { #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 28px; } } @media (max-width: 420px) { #customer-tabs-section #tabs .tab-content-holder h3 { font-size: 24px; } } #partners-wrapper .customers-marquee__track { animation-duration: 42s; } } @media (prefers-reduced-motion: reduce) { #partners-wrapper .customers-marquee__track { animation: none; } }