.stowly-site-cta__shell {
max-width: var(--stowly-container);
margin: 0 auto;
padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
box-sizing: border-box;
}
@media (min-width: 768px) {
.stowly-site-cta__shell {
padding-inline: max(32px, env(safe-area-inset-left, 0px)) max(32px, env(safe-area-inset-right, 0px));
}
} .stowly-about .stowly-site-cta .stowly-site-cta__shell {
max-width: none;
margin: 0;
padding-inline: 0;
}
.stowly-site-cta {
padding-top: clamp(56px, 7vw, 88px);
padding-bottom: clamp(64px, 9vw, 96px);
}
.stowly-site-cta__inner {
position: relative;
overflow: hidden;
margin: 0;
padding: 64px 32px;
text-align: center;
background: linear-gradient(135deg, #1a1a1a 0%, #262626 42%, #2e2e2e 100%);
color: #ffffff;
border-radius: var(--stowly-radius-xl);
border: 0;
box-shadow: none;
}
.stowly-site-cta__inner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 88%, rgba(var(--stowly-color-primary-rgb), 0.38), transparent 48%),
radial-gradient(circle at 88% 12%, rgba(var(--stowly-color-primary-rgb), 0.22), transparent 42%),
radial-gradient(ellipse 90% 55% at 50% 120%, rgba(var(--stowly-color-primary-rgb), 0.12), transparent 55%);
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.stowly-site-cta__title,
.stowly-site-cta__lede,
.stowly-site-cta__actions {
position: relative;
z-index: 1;
}
.stowly-site-cta__title {
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 800;
letter-spacing: -0.015em;
margin: 0 0 12px;
color: #ffffff;
}
.stowly-site-cta__lede {
font-size: 17px;
color: rgba(255, 255, 255, 0.75);
margin: 0 auto 28px;
max-width: 520px;
line-height: 1.55;
}
.stowly-site-cta__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.stowly-site-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 26px;
border-radius: var(--stowly-radius-pill);
font-weight: 600;
font-size: 15px;
line-height: 1;
text-decoration: none !important;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
color 0.2s ease, border-color 0.2s ease;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
}
.stowly-site-cta__btn--primary {
background: var(--stowly-color-primary);
color: #ffffff !important;
box-shadow: 0 6px 18px rgba(var(--stowly-color-primary-rgb), 0.25);
}
.stowly-site-cta__btn--primary:hover,
.stowly-site-cta__btn--primary:focus-visible {
background: var(--stowly-color-primary-hover);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(var(--stowly-color-primary-rgb), 0.35);
color: #ffffff !important;
}
.stowly-site-cta__btn--ghost {
background: transparent;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.3);
}
.stowly-site-cta__btn--ghost:hover,
.stowly-site-cta__btn--ghost:focus-visible {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.6);
color: #ffffff !important;
}
@media (max-width: 520px) {
.stowly-site-cta__inner {
padding: 48px 20px;
}
.stowly-site-cta__actions {
flex-direction: column;
align-items: stretch;
}
.stowly-site-cta__btn {
width: 100%;
}
}