.stowly-how-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-how-btn--primary {
background: var(--stowly-color-primary);
color: #ffffff !important;
box-shadow: 0 6px 18px rgba(var(--stowly-color-primary-rgb), 0.25);
}
.stowly-how-btn--primary:hover,
.stowly-how-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-how-btn--ghost {
background: var(--stowly-color-surface);
color: var(--stowly-color-ink) !important;
border-color: var(--stowly-color-line-strong);
}
.stowly-how-btn--ghost:hover,
.stowly-how-btn--ghost:focus-visible {
background: var(--stowly-color-surface-soft);
border-color: var(--stowly-color-ink);
color: var(--stowly-color-ink) !important;
} .stowly-how-cta {
padding-bottom: 96px !important;
}
.stowly-how > .stowly-how-cta {
max-width: var(--stowly-container);
margin: 0 auto;
padding: 80px 24px;
padding-bottom: 96px !important;
box-sizing: border-box;
} .stowly-front .stowly-how-cta {
width: 100%;
max-width: var(--stowly-container);
margin: 0 auto;
padding: 0 24px;
padding-bottom: 0 !important;
box-sizing: border-box;
}
.stowly-how-cta__inner {
position: relative;
overflow: hidden;
padding: 64px 32px;
text-align: center;
background: linear-gradient(135deg, #1a1a1a 0%, #262626 42%, #2e2e2e 100%);
color: #ffffff;
border-radius: var(--stowly-radius-xl);
}
.stowly-how-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-how-cta__title,
.stowly-how-cta__lede,
.stowly-how-cta__actions {
position: relative;
z-index: 1;
} .stowly-how-cta__title,
body .stowly-front .stowly-how-cta__title {
margin: 0 0 12px;
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 800;
letter-spacing: -0.015em;
color: #ffffff;
}
.stowly-how-cta__lede,
body .stowly-front .stowly-how-cta__lede {
margin: 0 auto 28px;
max-width: 520px;
font-size: 17px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.75);
}
.stowly-how-cta__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.stowly-how-cta .stowly-how-btn--ghost {
background: transparent;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.3);
}
.stowly-how-cta .stowly-how-btn--ghost:hover,
.stowly-how-cta .stowly-how-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: 768px) {
.stowly-how > .stowly-how-cta {
padding: 56px 16px;
padding-bottom: 96px !important;
}
.stowly-how-cta__inner {
padding: 48px 20px;
}
.stowly-how-cta__actions .stowly-how-btn {
width: 100%;
}
}