.wsp-rf {
--wsp-rf-ink: #17202a;
--wsp-rf-muted: #5c6977;
--wsp-rf-steel: #3d4d5e;
--wsp-rf-blue: #12395d;
--wsp-rf-blue-dark: #0b243d;
--wsp-rf-line: #d9e0e7;
--wsp-rf-panel: #ffffff;
--wsp-rf-bg: #f4f7f9;
--wsp-rf-accent: #b85c25;
--wsp-rf-shadow: 0 14px 34px rgba(16, 32, 48, 0.1);
color: var(--wsp-rf-ink);
background: var(--wsp-rf-bg);
font-family: inherit;
line-height: 1.55;
}
.wsp-rf *,
.wsp-rf *::before,
.wsp-rf *::after {
box-sizing: border-box;
}
.wsp-rf--theme-shop-floor {
--wsp-rf-blue: #1f3c4a;
--wsp-rf-blue-dark: #162b35;
--wsp-rf-accent: #96512f;
--wsp-rf-bg: #f1f3f1;
}
.wsp-rf--density-compact .wsp-rf-section {
padding-block: 44px;
}
.wsp-rf h1,
.wsp-rf h2,
.wsp-rf h3,
.wsp-rf p {
margin-top: 0;
}
.wsp-rf h1 {
max-width: 860px;
margin-bottom: 18px;
color: #ffffff;
font-size: clamp(2.2rem, 5vw, 4.6rem);
line-height: 1.04;
letter-spacing: 0;
}
.wsp-rf h2 {
margin-bottom: 12px;
color: var(--wsp-rf-blue-dark);
font-size: clamp(1.65rem, 3vw, 2.45rem);
line-height: 1.14;
letter-spacing: 0;
}
.wsp-rf h3 {
margin-bottom: 10px;
color: var(--wsp-rf-blue-dark);
font-size: 1.12rem;
line-height: 1.25;
letter-spacing: 0;
}
.wsp-rf p {
color: var(--wsp-rf-muted);
}
.wsp-rf a {
color: var(--wsp-rf-blue);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.wsp-rf-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
gap: 42px;
align-items: center;
min-height: 620px;
padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 72px);
overflow: hidden;
background:
linear-gradient(110deg, rgba(11, 36, 61, 0.97), rgba(18, 57, 93, 0.91)),
repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 18px);
}
.wsp-rf-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 8px;
background: linear-gradient(90deg, var(--wsp-rf-accent), #d4d9df, var(--wsp-rf-steel));
opacity: 0.95;
}
.wsp-rf-hero__content,
.wsp-rf-hero__visual {
position: relative;
z-index: 1;
}
.wsp-rf-hero__subhead {
max-width: 760px;
margin-bottom: 30px;
color: #dbe5ee;
font-size: clamp(1.05rem, 2vw, 1.28rem);
}
.wsp-rf-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: var(--wsp-rf-accent);
font-size: 0.78rem;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0;
}
.wsp-rf-kicker::before {
content: "";
display: inline-block;
width: 28px;
height: 2px;
background: currentColor;
}
.wsp-rf-hero .wsp-rf-kicker {
color: #f0a15f;
}
.wsp-rf-actions,
.wsp-rf-card-actions,
.wsp-rf-payment-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.wsp-rf-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 18px;
border: 1px solid transparent;
border-radius: 6px;
font-size: 0.96rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.wsp-rf-button:hover,
.wsp-rf-button:focus {
transform: translateY(-1px);
text-decoration: none;
}
.wsp-rf-button--primary {
border-color: var(--wsp-rf-blue-dark);
background: var(--wsp-rf-blue);
color: #ffffff;
}
.wsp-rf-button--primary:hover,
.wsp-rf-button--primary:focus {
background: var(--wsp-rf-blue-dark);
color: #ffffff;
}
.wsp-rf-button--secondary {
border-color: #aeb9c4;
background: #ffffff;
color: var(--wsp-rf-blue-dark);
}
.wsp-rf-button--secondary:hover,
.wsp-rf-button--secondary:focus {
border-color: var(--wsp-rf-blue);
color: var(--wsp-rf-blue);
}
.wsp-rf-hero .wsp-rf-button--secondary {
border-color: rgba(255,255,255,0.4);
background: rgba(255,255,255,0.08);
color: #ffffff;
}
.wsp-rf-button--disabled {
border-color: #c9d1da;
background: #e8edf2;
color: #667280;
cursor: not-allowed;
}
.wsp-rf-hero__visual {
display: grid;
gap: 18px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.22);
border-radius: 8px;
background: rgba(255,255,255,0.08);
box-shadow: 0 24px 50px rgba(0,0,0,0.18);
}
.wsp-rf-gauge {
display: grid;
gap: 9px;
}
.wsp-rf-gauge__label {
color: #ffffff;
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0;
}
.wsp-rf-gauge__bar {
display: block;
height: 9px;
overflow: hidden;
border-radius: 999px;
background: rgba(255,255,255,0.18);
}
.wsp-rf-gauge__bar span {
display: block;
width: 76%;
height: 100%;
border-radius: inherit;
background: #f0a15f;
}
.wsp-rf-gauge:nth-child(2) .wsp-rf-gauge__bar span {
width: 62%;
background: #b7c8d8;
}
.wsp-rf-gauge:nth-child(3) .wsp-rf-gauge__bar span {
width: 84%;
background: #ffffff;
}
.wsp-rf-section {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
padding-block: 64px;
}
.wsp-rf-section__header {
max-width: 760px;
margin-bottom: 28px;
}
.wsp-rf-category-grid,
.wsp-rf-card-grid,
.wsp-rf-impact-grid {
display: grid;
gap: 18px;
}
.wsp-rf-category-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wsp-rf-card-grid--guides,
.wsp-rf-impact-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wsp-rf-card-grid--premium {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wsp-rf-category-card,
.wsp-rf-guide-card,
.wsp-rf-premium-card,
.wsp-rf-impact-card,
.wsp-rf-faq-item,
.wsp-rf-placeholder,
.wsp-rf-support__panel {
border: 1px solid var(--wsp-rf-line);
border-radius: 8px;
background: var(--wsp-rf-panel);
box-shadow: 0 8px 24px rgba(23, 32, 42, 0.06);
}
.wsp-rf-category-card {
display: grid;
min-height: 220px;
padding: 18px;
text-decoration: none;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.wsp-rf-category-card:hover,
.wsp-rf-category-card:focus {
border-color: var(--wsp-rf-blue);
box-shadow: var(--wsp-rf-shadow);
transform: translateY(-2px);
text-decoration: none;
}
.wsp-rf-category-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 18px;
border: 1px solid #c9d3dd;
border-radius: 6px;
background: #eef3f7;
color: var(--wsp-rf-blue);
font-size: 0.74rem;
font-weight: 900;
}
.wsp-rf-category-card__title {
margin-bottom: 8px;
color: var(--wsp-rf-blue-dark);
font-size: 1.02rem;
font-weight: 900;
line-height: 1.2;
}
.wsp-rf-category-card__description {
color: var(--wsp-rf-muted);
font-size: 0.92rem;
}
.wsp-rf-card-link {
align-self: end;
margin-top: 18px;
color: var(--wsp-rf-accent);
font-size: 0.84rem;
font-weight: 900;
}
.wsp-rf-lead {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
gap: 34px;
align-items: center;
}
.wsp-rf-lead__form {
min-width: 0;
}
.wsp-rf-form-embed,
.wsp-rf-placeholder {
padding: 24px;
}
.wsp-rf-form-embed {
border: 1px solid var(--wsp-rf-line);
border-radius: 8px;
background: #ffffff;
box-shadow: var(--wsp-rf-shadow);
}
.wsp-rf-form-embed input,
.wsp-rf-form-embed select,
.wsp-rf-form-embed textarea {
max-width: 100%;
}
.wsp-rf-form-embed input[type="email"],
.wsp-rf-form-embed input[type="text"] {
min-height: 44px;
padding: 10px 12px;
border: 1px solid #bac6d1;
border-radius: 6px;
}
.wsp-rf-form-embed button,
.wsp-rf-form-embed input[type="submit"] {
min-height: 44px;
padding: 10px 16px;
border: 1px solid var(--wsp-rf-blue-dark);
border-radius: 6px;
background: var(--wsp-rf-blue);
color: #ffffff;
font-weight: 800;
cursor: pointer;
}
.wsp-rf-notice {
padding: 12px 14px;
border-radius: 6px;
font-weight: 700;
}
.wsp-rf-notice--success {
border: 1px solid #9bc3a6;
background: #eef8f0;
color: #245634;
}
.wsp-rf-guide-card,
.wsp-rf-premium-card {
overflow: hidden;
}
.wsp-rf-guide-card__image,
.wsp-rf-premium-card__image {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
background: #dce4eb;
}
.wsp-rf-guide-card__image--placeholder {
background:
repeating-linear-gradient(135deg, rgba(18, 57, 93, 0.16) 0 1px, transparent 1px 14px),
linear-gradient(135deg, #dce4eb, #f7f9fb);
}
.wsp-rf-guide-card__body,
.wsp-rf-premium-card__body {
padding: 20px;
}
.wsp-rf-badge,
.wsp-rf-price {
display: inline-flex;
width: max-content;
margin-bottom: 12px;
padding: 5px 9px;
border-radius: 999px;
background: #f3e5d9;
color: #77411f;
font-size: 0.76rem;
font-weight: 900;
line-height: 1.1;
}
.wsp-rf-text-link {
font-weight: 900;
}
.wsp-rf-text-link--muted {
color: var(--wsp-rf-muted);
}
.wsp-rf-premium-card__topline {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
}
.wsp-rf-price {
flex: 0 0 auto;
background: #e5edf4;
color: var(--wsp-rf-blue-dark);
}
.wsp-rf-file-list {
display: grid;
gap: 7px;
margin: 16px 0 20px;
padding-left: 20px;
color: var(--wsp-rf-ink);
}
.wsp-rf-payment-note {
margin: 12px 0 0;
color: #687582;
font-size: 0.82rem;
}
.wsp-rf-support__main,
.wsp-rf-routing,
.wsp-rf-disclosures {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
gap: 28px;
align-items: center;
}
.wsp-rf-support__panel {
padding: 22px;
}
.wsp-rf-amounts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.wsp-rf-amount {
min-height: 44px;
border: 1px solid #b7c3ce;
border-radius: 6px;
background: #ffffff;
color: var(--wsp-rf-blue-dark);
font-weight: 900;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.wsp-rf-amount.is-active,
.wsp-rf-amount:hover,
.wsp-rf-amount:focus {
border-color: var(--wsp-rf-blue);
background: var(--wsp-rf-blue);
color: #ffffff;
}
.wsp-rf-custom-amount {
display: grid;
gap: 7px;
margin-bottom: 16px;
color: var(--wsp-rf-muted);
font-weight: 800;
}
.wsp-rf-custom-amount input {
min-height: 44px;
padding: 10px 12px;
border: 1px solid #b7c3ce;
border-radius: 6px;
font: inherit;
}
.wsp-rf-impact-grid {
margin-top: 24px;
}
.wsp-rf-impact-card {
padding: 18px;
}
.wsp-rf-impact-card p,
.wsp-rf-thanks p {
margin-bottom: 0;
}
.wsp-rf-thanks {
margin-top: 20px;
padding: 18px 0 0;
border-top: 1px solid var(--wsp-rf-line);
}
.wsp-rf-routing {
width: min(1180px, calc(100% - 40px));
padding: 34px;
border: 1px solid var(--wsp-rf-line);
border-radius: 8px;
background: #ffffff;
box-shadow: var(--wsp-rf-shadow);
}
.wsp-rf-disclosures {
align-items: stretch;
}
.wsp-rf-disclosure {
padding: 20px;
border-left: 4px solid var(--wsp-rf-accent);
background: #ffffff;
}
.wsp-rf-disclosure h2 {
margin-bottom: 8px;
font-size: 1.1rem;
}
.wsp-rf-disclosure p {
margin-bottom: 0;
font-size: 0.93rem;
}
.wsp-rf-faq-list {
display: grid;
gap: 12px;
}
.wsp-rf-faq-item {
padding: 0;
overflow: hidden;
}
.wsp-rf-faq-item summary {
padding: 18px 20px;
color: var(--wsp-rf-blue-dark);
font-weight: 900;
cursor: pointer;
}
.wsp-rf-faq-item p {
margin: 0;
padding: 0 20px 18px;
}
.wsp-rf-empty {
padding: 16px;
border: 1px dashed #b4c0ca;
border-radius: 8px;
background: #ffffff;
}
@media (max-width: 1040px) {
.wsp-rf-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wsp-rf-card-grid--guides,
.wsp-rf-impact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 780px) {
.wsp-rf-hero,
.wsp-rf-lead,
.wsp-rf-support__main,
.wsp-rf-routing,
.wsp-rf-disclosures {
grid-template-columns: 1fr;
}
.wsp-rf-hero {
min-height: auto;
}
.wsp-rf-hero__visual {
max-width: 420px;
}
.wsp-rf-category-grid,
.wsp-rf-card-grid--guides,
.wsp-rf-card-grid--premium,
.wsp-rf-impact-grid {
grid-template-columns: 1fr;
}
.wsp-rf-section,
.wsp-rf-routing {
width: min(100% - 28px, 1180px);
}
}
@media (max-width: 520px) {
.wsp-rf-hero {
padding-inline: 16px;
}
.wsp-rf-actions,
.wsp-rf-payment-actions {
align-items: stretch;
flex-direction: column;
}
.wsp-rf-button {
width: 100%;
}
.wsp-rf-amounts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wsp-rf-premium-card__topline {
display: block;
}
}