@charset "UTF-8";
.spx-auto-mount[hidden],
.spx-extra-feature[hidden] {
display: none !important;
}
.spx-section {
--spx-ink: #231f20;
--spx-copy: #565656;
--spx-charcoal: #323e48;
--spx-red: #e1251b;
--spx-red-dark: #b12028;
--spx-red-soft: #fff2f1;
--spx-line: #dfe3e6;
position: relative;
overflow: hidden;
padding: 48px 20px;
background: radial-gradient(circle at 9% 18%, rgba(225,37,27,.065), transparent 25rem), #f8f9fa;
color: var(--spx-ink);
font-family: Barlow, Arial, sans-serif;
}
.spx-section *,
.spx-section *::before,
.spx-section *::after {
box-sizing: border-box;
}
.spx-section::before,
.spx-section::after {
position: absolute;
z-index: 0;
width: 190px;
height: 58px;
transform: rotate(36deg);
border-radius: 4px;
background: var(--spx-red);
content: "";
opacity: .055;
pointer-events: none;
}
.spx-section::before { top: 110px; left: -92px; }
.spx-section::after { top: 196px; right: -102px; background: var(--spx-charcoal); }
.spx-section > * {
position: relative;
z-index: 1;
}
.spx-heading {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.spx-eyebrow {
margin: 0 0 14px;
color: var(--spx-red);
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
}
.spx-heading h2 {
margin: 0;
color: var(--spx-ink);
font-size: clamp(42px, 6vw, 70px);
font-weight: 700;
letter-spacing: -.04em;
line-height: 1.04;
}
.spx-heading h2::after { display: none; }
.spx-intro {
max-width: 690px;
margin: 22px auto 0;
color: var(--spx-copy);
font-size: 18px;
line-height: 1.65;
}
.spx-grid {
display: grid;
max-width: 1240px;
margin: 72px auto 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.spx-card {
position: relative;
display: flex;
min-width: 0;
min-height: 690px;
padding: 30px;
overflow: hidden;
border: 1px solid var(--spx-line);
border-radius: 16px;
flex-direction: column;
background: #fff;
box-shadow: 0 16px 40px rgba(35,31,32,.07);
transition: transform .25s ease, box-shadow .25s ease;
}
.spx-card:hover {
transform: translateY(-5px);
box-shadow: 0 24px 60px rgba(35,31,32,.12);
}
.spx-card--featured {
border: 2px solid var(--spx-red);
box-shadow: 0 24px 60px rgba(177,32,40,.14);
}
.spx-card--featured::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 6px;
background: linear-gradient(90deg, var(--spx-red), var(--spx-red-dark));
content: "";
}
.spx-popular {
position: absolute;
top: 21px;
right: -34px;
width: 132px;
padding: 7px 0;
transform: rotate(38deg);
background: linear-gradient(135deg, var(--spx-red), var(--spx-red-dark));
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
}
.spx-plan-top {
display: flex;
min-height: 96px;
align-items: flex-start;
gap: 17px;
}
.spx-plan-top > div { min-width: 0; }
.spx-plan-icon {
display: grid;
flex: 0 0 64px;
width: 64px;
min-width: 64px;
height: 64px;
border-radius: 14px;
place-items: center;
background: var(--spx-red-soft);
color: var(--spx-red);
}
.spx-plan-icon svg {
display: block !important;
width: 36px !important;
min-width: 0 !important;
max-width: 36px !important;
height: 36px !important;
min-height: 0 !important;
max-height: 36px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.spx-plan-label {
margin: 0 0 4px;
color: var(--spx-red-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.spx-plan-top h3 {
margin: 0;
color: var(--spx-ink);
font-size: 23px;
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.15;
}
.spx-price-area { margin-top: 17px; }
.spx-price-line {
display: flex;
min-height: 92px;
margin-top: 0;
align-items: flex-end;
}
.spx-currency {
margin: 0 2px 14px 0;
font-size: 23px;
font-weight: 800;
}
.spx-price {
color: var(--spx-charcoal);
font-size: 68px;
font-weight: 800;
letter-spacing: -.07em;
line-height: 1;
}
.spx-card--featured .spx-price { color: var(--spx-red); }
.spx-price-text {
color: var(--spx-charcoal);
font-size: 46px;
font-weight: 800;
letter-spacing: -.05em;
line-height: 1;
}
.spx-period {
margin: 0 0 12px 9px;
color: var(--spx-copy);
font-size: 15px;
font-weight: 700;
}
.spx-billing-note {
min-height: 20px;
margin: 3px 0 26px;
color: var(--spx-copy);
font-size: 12px;
}
.spx-billing-note--custom {
color: var(--spx-red-dark);
font-size: 13px;
font-weight: 700;
}
.spx-features {
display: grid;
margin: 0 0 18px;
padding: 24px 0 0;
border-top: 1px solid rgba(50,62,72,.14);
gap: 13px;
list-style: none;
}
.spx-features li {
position: relative;
display: flex;
margin: 0;
padding: 0;
align-items: flex-start;
gap: 11px;
color: #3c4247;
font-size: 14px;
line-height: 1.45;
}
.spx-features li::before {
display: grid;
flex: 0 0 21px;
width: 21px;
height: 21px;
border-radius: 50%;
place-items: center;
background: var(--spx-red-soft);
color: var(--spx-red);
content: "✓";
font-size: 12px;
font-weight: 900;
}
.spx-card--featured .spx-features li::before {
background: var(--spx-red);
color: #fff;
}
.spx-toggle-slot {
min-height: 28px;
margin: -4px 0 14px 32px;
}
.spx-feature-toggle {
padding: 0;
border: 0;
background: transparent;
color: var(--spx-red-dark);
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 800;
}
.spx-button {
display: flex;
width: 100%;
min-height: 56px;
margin-top: auto;
border-radius: 7px;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, var(--spx-red), var(--spx-red-dark));
color: #fff !important;
font-size: 15px;
font-weight: 800;
text-decoration: none !important;
transition: gap .2s ease, transform .2s ease;
}
.spx-card--featured .spx-button { background: var(--spx-charcoal); }
.spx-button:hover,
.spx-button:focus-visible {
gap: 16px;
transform: translateY(-2px);
color: #fff !important;
}
.spx-contact {
display: grid;
width: min(1200px, 100%);
margin: 36px auto 0;
padding: clamp(30px, 5vw, 54px);
border-radius: 18px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 38px;
background: radial-gradient(circle at 84% 20%, rgba(225,37,27,.55), transparent 13rem), linear-gradient(135deg, var(--spx-charcoal), #20272d);
color: #fff;
box-shadow: 0 24px 60px rgba(35,31,32,.12);
}
.spx-contact .spx-eyebrow { color: #ff746d; }
.spx-contact h3 {
max-width: 730px;
margin: 0 0 14px;
color: #fff;
font-size: clamp(28px, 4vw, 45px);
font-weight: 700;
letter-spacing: -.035em;
line-height: 1.13;
}
.spx-contact h3::after { display: none; }
.spx-contact p:last-child {
max-width: 700px;
margin: 0;
color: rgba(255,255,255,.75);
line-height: 1.65;
}
.spx-contact-actions {
display: grid;
min-width: 210px;
gap: 10px;
}
.spx-contact-actions a {
display: flex;
min-height: 54px;
padding: 0 20px;
border-radius: 7px;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
text-decoration: none !important;
}
.spx-contact-primary {
gap: 9px;
background: linear-gradient(135deg, var(--spx-red), var(--spx-red-dark));
color: #fff !important;
}
.spx-contact-secondary {
border: 1px solid rgba(255,255,255,.2);
color: #fff !important;
}
@media (max-width: 1020px) {
.spx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spx-card:last-child { grid-column: 1 / -1; }
.spx-contact { grid-template-columns: 1fr; }
.spx-contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.spx-section { padding: 38px 16px; }
.spx-heading h2 { font-size: 42px; }
.spx-intro { font-size: 16px; }
.spx-grid { grid-template-columns: 1fr; }
.spx-card,
.spx-card:last-child { min-height: 0; grid-column: auto; }
.spx-plan-top { min-height: 0; }
.spx-price { font-size: 60px; }
.spx-price-text { font-size: 42px; }
.spx-plan-icon { width: 56px; min-width: 56px; height: 56px; flex-basis: 56px; }
.spx-plan-icon svg { width: 32px !important; max-width: 32px !important; height: 32px !important; max-height: 32px !important; }
.spx-contact-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.spx-section *,
.spx-section *::before,
.spx-section *::after { transition-duration: .01ms !important; }
}