:where(:root) {
--sq-container-width: 1200px;
--sq-container-padding: 16px;
--sq-section-space: clamp(56px, 7vw, 112px);
--sq-gap: 16px;
--sq-radius: 8px;
--sq-radius-lg: 16px;
--sq-color-text: #111827;
--sq-color-muted: #4b5563;
--sq-color-accent: #15803d;
--sq-color-on-accent: #ffffff;
--sq-color-surface: #ffffff;
--sq-color-surface-alt: #f3f4f6;
--sq-color-line: #e5e7eb;
--sq-color-dark: #1f2937;
--sq-color-on-dark: #ffffff;
--sq-color-on-dark-muted: #d1d5db;
--sq-color-accent-on-dark: #86efac;
--sq-font-size-eyebrow: 0.875rem;
--sq-font-size-hero: clamp(2.25rem, 4.5vw, 3.75rem);
--sq-font-size-hero-subtitle: clamp(1.125rem, 1.7vw, 1.5rem);
--sq-font-size-title: clamp(2rem, 3.4vw, 3rem);
--sq-font-size-subtitle: 1.125rem;
--sq-font-size-card-title: 1.25rem;
--sq-font-size-card-text: 0.875rem;
} .sq-block {
position: relative;
color: var(--sq-color-text);
}
:where(.sq-block) :where(h1, h2, h3, p, ul, ol) {
margin-top: 0;
}
.sq-container {
width: min(var(--sq-container-width), 100% - 2 * var(--sq-container-padding));
margin-inline: auto;
}
.sq-eyebrow {
margin: 0 0 16px;
color: var(--sq-color-accent);
font-size: var(--sq-font-size-eyebrow);
}
.sq-heading {
max-width: 56rem;
margin-bottom: 48px;
}
.sq-title {
margin: 0;
font-size: var(--sq-font-size-title);
line-height: 1.15;
}
.sq-subtitle {
margin: 16px 0 0;
color: var(--sq-color-muted);
font-size: var(--sq-font-size-subtitle);
}
.sq-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 10px 28px;
border: 1px solid transparent;
border-radius: var(--sq-radius);
font-weight: 600;
text-decoration: none;
}
.sq-button--primary {
color: var(--sq-color-on-accent);
background: var(--sq-color-accent);
}
.sq-button--secondary {
color: var(--sq-color-text);
background: var(--sq-color-surface);
border-color: var(--sq-color-line);
}
.sq-placeholder {
min-height: 48px;
border: 1px dashed var(--sq-color-line);
border-radius: var(--sq-radius);
background: repeating-linear-gradient(45deg, var(--sq-color-surface-alt) 0 8px, transparent 8px 16px);
} .sq-jumbo {
overflow: hidden;
isolation: isolate;
background: var(--sq-color-surface-alt);
}
.sq-jumbo--dark {
color: var(--sq-color-on-dark);
background: var(--sq-color-dark);
}
.sq-jumbo__decoration {
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
}
.sq-jumbo__inner {
display: grid;
gap: 40px;
padding-block: var(--sq-section-space);
}
:where(.sq-jumbo--split) .sq-jumbo__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
}
:where(.sq-jumbo--centered) .sq-jumbo__content {
max-width: 48rem;
margin-inline: auto;
text-align: center;
}
:where(.sq-jumbo--centered) .sq-jumbo__actions {
justify-content: center;
}
.sq-jumbo__title {
margin: 0 0 16px;
font-size: var(--sq-font-size-hero);
line-height: 1.15;
}
.sq-jumbo__subtitle {
margin: 0 0 40px;
font-size: var(--sq-font-size-hero-subtitle);
line-height: 1.55;
}
:where(.sq-jumbo--light) .sq-jumbo__subtitle {
color: var(--sq-color-muted);
}
:where(.sq-jumbo--dark) .sq-jumbo__subtitle {
color: var(--sq-color-on-dark-muted);
}
:where(.sq-jumbo--dark) .sq-jumbo__eyebrow {
color: var(--sq-color-accent-on-dark);
}
.sq-jumbo__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sq-gap);
}
.sq-jumbo__media {
position: relative;
}
.sq-jumbo__image {
display: block;
width: 100%;
height: auto;
border-radius: var(--sq-radius-lg);
}
:where(.sq-jumbo__media .sq-placeholder).sq-jumbo__image {
aspect-ratio: 4 / 3;
}
.sq-jumbo__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.sq-jumbo__badge {
display: grid;
place-items: center;
height: 72px;
padding: 10px 14px;
border: 1px solid var(--sq-color-line);
border-radius: var(--sq-radius);
background: var(--sq-color-surface);
}
.sq-jumbo__badge-image {
display: block;
width: auto;
max-width: 140px;
height: 100%;
object-fit: contain;
}
:where(.sq-jumbo__badge) .sq-placeholder {
width: 96px;
height: 100%;
min-height: 0;
} .sq-logo-section {
padding-block: 32px;
background: var(--sq-color-surface);
}
.sq-logo-section__title {
margin: 0 0 16px;
color: var(--sq-color-muted);
text-align: center;
}
.sq-logo-section__list {
margin: 0;
padding: 0;
list-style: none;
}
.sq-logo-section__item {
display: grid;
place-items: center;
}
.sq-logo-section__image {
display: block;
width: auto;
max-width: 100%;
height: 44px;
object-fit: contain;
}
:where(.sq-logo-section__item) .sq-placeholder {
width: 120px;
height: 44px;
min-height: 0;
}
:where(.sq-logo-section--row) .sq-logo-section__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 32px;
}
:where(.sq-logo-section--grid) .sq-logo-section__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 24px 32px;
}
.sq-logo-section__viewport {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.sq-logo-section__track {
display: flex;
width: max-content;
animation: sq-logo-scroll calc(var(--sq-logo-count, 8) * 3s) linear infinite;
}
:where(.sq-logo-section__track) .sq-logo-section__list {
display: flex;
gap: 48px;
padding-right: 48px;
}
@keyframes sq-logo-scroll {
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.sq-logo-section__track {
animation: none;
}
} .sq-how-it-works {
padding-block: var(--sq-section-space);
background: var(--sq-color-surface-alt);
}
.sq-how-it-works__steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sq-gap);
margin: 0;
padding: 0;
list-style: none;
}
:where(.sq-how-it-works--cols-4) .sq-how-it-works__steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
:where(.sq-how-it-works--cols-5) .sq-how-it-works__steps {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sq-how-it-works__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px 20px;
border: 1px solid var(--sq-color-line);
border-radius: var(--sq-radius-lg);
background: var(--sq-color-surface);
text-align: center;
}
.sq-how-it-works__number {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--sq-color-on-accent);
background: var(--sq-color-accent);
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
}
.sq-how-it-works__image {
display: block;
width: 64px;
height: 64px;
object-fit: contain;
}
.sq-how-it-works__step-title {
margin: 0;
font-size: var(--sq-font-size-card-title);
line-height: 1.5;
}
.sq-how-it-works__step-text {
margin: 0;
color: var(--sq-color-muted);
font-size: var(--sq-font-size-card-text);
line-height: 1.57;
} @media (max-width: 1100px) {
:where(.sq-how-it-works--cols-4, .sq-how-it-works--cols-5) .sq-how-it-works__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
:where(.sq-jumbo--split) .sq-jumbo__inner {
grid-template-columns: minmax(0, 1fr);
}
.sq-how-it-works__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:where(.sq-logo-section--row) .sq-logo-section__list {
justify-content: center;
}
}
@media (max-width: 600px) {
:where(.sq-how-it-works) .sq-how-it-works__steps {
grid-template-columns: minmax(0, 1fr);
}
.sq-logo-section__image {
height: 32px;
}
}