.pro-tf-benefits.shop-redesign-container,
.pro-tf-benefits.shop-redesign-container * {
box-sizing: border-box;
}
.pro-tf-benefits-page {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #fff;
overflow: visible;
padding: 0 0 64px;
}
.pro-tf-benefits {
--bnf-blue: #004CCA;
--bnf-ink: #08162d;
--bnf-text: #1f1d1d;
--bnf-muted: #667085;
--bnf-light: #e8f1fb;
--bnf-card: #f5f8fc;
--bnf-orange: #f07a2a;
--bnf-yellow: #f5c518;
position: relative;
z-index: 1;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 28px 15px 8px;
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--bnf-text);
} .bnf-hero-band {
position: relative;
width: 100%;
margin: 0;
overflow: visible;
isolation: isolate;
background: #fff;
min-height: 0;
}
.bnf-hero-band-inner {
position: relative;
z-index: 1;
padding-bottom: 28px !important;
}
.bnf-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 22px;
font-size: 13px;
line-height: 1.4;
color: var(--bnf-muted);
}
.bnf-breadcrumbs a {
color: var(--bnf-muted);
text-decoration: none;
}
.bnf-breadcrumbs a:hover { color: var(--bnf-blue); }
.bnf-bc-sep { opacity: 0.7; }
.bnf-bc-current { color: var(--bnf-ink); }
.bnf-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px 40px;
align-items: center;
min-height: 0;
padding-bottom: 12px;
}
.bnf-hero--has-media {
grid-template-columns: minmax(280px, 480px) minmax(0, 1fr);
align-items: stretch;
}
.bnf-hero-copy {
position: relative;
z-index: 2;
min-width: 0;
width: auto;
max-width: none;
}
.bnf-hero-media {
position: relative;
min-width: 0;
border-radius: 18px;
overflow: hidden;
background: #e8f1fb;
min-height: 100%;
align-self: stretch;
}
.bnf-hero-media img {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
object-position: 22% 18%;
}
.bnf-brand {
color: #004CCA;
}
.bnf-bottom-title .bnf-brand {
color: #fff;
}
.bnf-title {
margin: 0 0 14px;
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 800;
line-height: 1.15;
text-transform: none !important;
color: var(--bnf-ink) !important;
}
.bnf-subtitle {
margin: 0 0 22px;
font-size: 15px;
line-height: 1.55;
color: var(--bnf-text);
max-width: 440px;
}
.bnf-hero-checks {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.bnf-hero-check {
position: relative;
padding-left: 34px;
font-size: 14px;
line-height: 1.5;
color: var(--bnf-ink);
font-weight: 500;
} .bnf-hero-check::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--bnf-blue);
border: none;
box-shadow: none;
}
.bnf-hero-check::after {
content: '';
position: absolute;
left: 7px;
top: 8px;
width: 8px;
height: 5px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg);
box-sizing: border-box;
}
.bnf-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.bnf-tagline {
margin: 0;
font-size: 14px;
line-height: 1.4;
color: var(--bnf-muted);
font-weight: 500;
}
.bnf-hero-badge {
position: absolute;
right: 12px;
top: auto;
bottom: 12px;
z-index: 2;
width: clamp(118px, 12.5vw, 156px);
height: clamp(118px, 12.5vw, 156px);
border-radius: 50%;
pointer-events: none;
background:
radial-gradient(circle at 30% 22%, #fffce8 0%, #ffe95a 28%, #ffd400 58%, #f0b400 100%);
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.2),
inset 0 2px 4px rgba(255, 255, 255, 0.55),
inset 0 -2px 5px rgba(180, 120, 0, 0.22);
color: #00205b;
}
.bnf-hero-badge-ring {
position: absolute;
inset: 6px;
border-radius: 50%;
border: 2px solid #c8940a;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.45),
0 0 0 1px rgba(255, 220, 80, 0.35);
pointer-events: none;
}
.bnf-hero-badge-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
padding: 16px 10px 14px;
text-align: center;
}
.bnf-hero-badge-prefix {
font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
font-size: clamp(12px, 1.2vw, 15px);
font-weight: 500;
line-height: 1;
text-transform: none;
letter-spacing: 0.02em;
}
.bnf-hero-badge-value {
font-family: "Montserrat", "Arial Narrow", Arial, sans-serif;
font-size: clamp(28px, 3.3vw, 42px);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: none;
font-stretch: condensed;
}
.bnf-hero-badge-lines {
margin-top: 4px;
font-family: "Arial Narrow", "Montserrat", Arial, sans-serif;
font-size: clamp(9px, 0.92vw, 11px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
text-transform: uppercase;
font-stretch: condensed;
max-width: 88%;
}
.bnf-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
border-radius: 999px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.03em;
text-decoration: none !important;
text-transform: uppercase;
transition: opacity 0.15s ease, filter 0.15s ease;
}
.bnf-btn .bnf-arrow { flex: 0 0 auto; display: block; }
.bnf-btn--orange {
background: linear-gradient(90deg, #f07a2a 0%, #f5c518 100%);
color: #fff !important;
border: none;
box-shadow: 0 6px 18px rgba(240, 122, 42, 0.35);
}
.bnf-btn--orange:hover {
opacity: 0.94;
color: #fff !important;
filter: brightness(1.03);
}
.bnf-btn--wide {
width: 100%;
max-width: 360px;
justify-content: center;
}
.bnf-btn--pill {
border-radius: 999px;
padding: 16px 28px;
justify-content: center;
white-space: nowrap;
} .bnf-stats {
margin: -20px 0 48px;
position: relative;
z-index: 2;
}
.bnf-stats-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(8, 22, 45, 0.1);
border: 1px solid #e4ebf5;
overflow: hidden;
}
.bnf-stat {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 16px;
padding: 24px 20px;
text-align: left;
min-width: 0;
}
.bnf-stat--divider {
border-left: 1px solid #e4ebf5;
}
.bnf-stat-ico {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 65px;
width: 65px;
height: 65px;
min-width: 65px;
min-height: 65px;
border-radius: 0;
background: transparent;
color: var(--bnf-blue);
}
.bnf-stat-ico svg {
width: 65px;
height: 65px;
}
.bnf-stat-ico--img {
background: transparent;
padding: 0;
}
.bnf-stat-ico--img img {
display: block;
width: 65px;
height: 65px;
object-fit: contain;
}
.bnf-stat-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.bnf-stat-value {
font-size: 18px;
font-weight: 800;
line-height: 1.2;
color: var(--bnf-blue);
}
.bnf-stat-sub {
font-size: 13px;
font-weight: 500;
line-height: 1.3;
color: var(--bnf-ink);
} .bnf-why {
margin: 0 0 56px;
}
.bnf-why-title {
margin: 0 0 28px;
max-width: 820px;
font-size: clamp(22px, 2.8vw, 30px);
font-weight: 800;
line-height: 1.25;
color: var(--bnf-ink) !important;
text-transform: none !important;
}
.bnf-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px 24px;
}
.bnf-why-card {
display: flex;
flex-direction: column;
}
.bnf-why-media {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 14px;
overflow: hidden;
background: var(--bnf-light);
margin-bottom: 16px;
}
.bnf-why-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bnf-why-body {
padding: 4px 4px 0;
}
.bnf-why-card-title {
margin: 0 0 10px;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color: var(--bnf-ink) !important;
text-transform: none !important;
}
.bnf-why-card-text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--bnf-muted);
} .bnf-partner {
margin: 0 0 56px;
}
.bnf-partner-box {
background: var(--bnf-card);
border-radius: 20px;
padding: 36px 28px 32px;
border: 1px solid #e4ebf5;
}
.bnf-partner-title {
margin: 0 0 28px;
font-size: clamp(20px, 2.5vw, 26px);
font-weight: 800;
line-height: 1.25;
color: var(--bnf-ink) !important;
text-align: center;
text-transform: none !important;
}
.bnf-partner-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px 16px;
}
.bnf-partner-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.bnf-partner-ico {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 64px;
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
max-width: 64px;
max-height: 64px;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
background: var(--bnf-blue);
color: #fff;
box-sizing: border-box;
}
.bnf-partner-ico--img { background: var(--bnf-blue);
padding: 0;
}
.bnf-partner-ico--img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 0;
box-sizing: border-box;
}
.bnf-partner-text {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--bnf-ink);
} .bnf-bottom-cta {
margin: 0 0 16px;
}
.bnf-bottom-banner {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(8, 22, 45, 0.12);
background: var(--bnf-blue);
min-height: 320px;
isolation: isolate;
}
.bnf-bottom-photo-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(48%, 560px);
z-index: 0;
pointer-events: none;
}
.bnf-bottom-photo-wrap::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
var(--bnf-blue) 0%,
rgba(0, 76, 202, 0.92) 18%,
rgba(0, 76, 202, 0.45) 48%,
rgba(0, 76, 202, 0) 78%
);
}
.bnf-bottom-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.bnf-bottom-inner {
position: relative;
z-index: 1;
padding: 36px 32px 32px;
max-width: min(100%, 820px);
display: flex;
flex-direction: column;
gap: 22px;
}
.bnf-bottom-title {
margin: 0;
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 800;
line-height: 1.25;
color: #fff !important;
text-transform: none !important;
max-width: 640px;
}
.bnf-bottom-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
gap: 28px 40px;
align-items: start;
}
.bnf-bottom-checks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.bnf-bottom-check {
position: relative;
padding-left: 32px;
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.96);
font-weight: 500;
}
.bnf-bottom-check::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(180, 205, 255, 0.45);
border: none;
}
.bnf-bottom-check::after {
content: '';
position: absolute;
left: 6px;
top: 7px;
width: 8px;
height: 5px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg);
box-sizing: border-box;
}
.bnf-bottom-side {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 18px;
min-width: 0;
}
.bnf-bottom-side .bnf-btn--pill {
width: 100%;
}
.bnf-bottom-meta {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 0;
}
.bnf-bottom-meta-item {
display: flex;
align-items: center;
gap: 12px;
text-transform: none;
letter-spacing: 0;
}
.bnf-bottom-meta-ico {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
color: #fff;
opacity: 1;
background: transparent;
}
.bnf-bottom-meta-ico svg {
width: 32px;
height: 32px;
}
.bnf-bottom-meta-ico--img img {
display: block;
width: 32px;
height: 32px;
object-fit: contain;
}
.bnf-bottom-meta-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.bnf-bottom-meta-value {
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: #fff;
}
.bnf-bottom-meta-sub {
font-size: 12px;
font-weight: 500;
line-height: 1.3;
color: rgba(255, 255, 255, 0.85);
} .bnf-bottom-left,
.bnf-bottom-right {
display: none;
} body.pro-tf-benefits-template,
body.pro-tf-benefits-template #main,
body.pro-tf-benefits-template #content,
body.pro-tf-benefits-template .page-wrapper {
background: #fff;
}
.pro-tf-benefits-template .page-title,
.pro-tf-benefits-template .page-header {
display: none !important;
} @media (max-width: 991px) {
.bnf-hero--has-media {
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
gap: 20px 24px;
}
.bnf-hero-copy {
max-width: 100%;
}
.bnf-hero-badge {
width: 118px;
height: 118px;
}
.bnf-stats-inner {
grid-template-columns: repeat(2, 1fr);
}
.bnf-stat-ico,
.bnf-stat-ico svg,
.bnf-stat-ico--img img {
width: 52px;
height: 52px;
min-width: 52px;
min-height: 52px;
flex-basis: 52px;
}
.bnf-stat:nth-child(3) {
border-left: none;
border-top: 1px solid #e4ebf5;
}
.bnf-stat:nth-child(4) {
border-top: 1px solid #e4ebf5;
}
.bnf-why-grid {
grid-template-columns: repeat(2, 1fr);
}
.bnf-partner-grid {
grid-template-columns: repeat(3, 1fr);
}
.bnf-bottom-banner {
min-height: 0;
}
.bnf-bottom-photo-wrap {
width: min(42%, 360px);
opacity: 0.85;
}
.bnf-bottom-inner {
max-width: 100%;
padding-right: 28%;
}
.bnf-bottom-row {
grid-template-columns: 1fr;
gap: 20px;
}
} @media (max-width: 767px) {
.pro-tf-benefits-page {
padding-bottom: 40px;
}
.bnf-hero-band-inner {
padding-bottom: 16px !important;
}
.bnf-hero,
.bnf-hero--has-media {
grid-template-columns: 1fr;
gap: 18px;
}
.bnf-hero-copy {
width: 100%;
max-width: 100%;
}
.bnf-hero-media {
order: 2;
max-height: 320px;
border-radius: 14px;
}
.bnf-hero-media img {
min-height: 220px;
}
.bnf-hero-badge {
display: none;
}
.bnf-hero-actions {
flex-direction: column;
align-items: stretch;
}
.bnf-btn { justify-content: center; }
.bnf-stats {
margin-top: 0;
}
.bnf-stats-inner {
grid-template-columns: 1fr;
}
.bnf-stat--divider,
.bnf-stat:nth-child(3),
.bnf-stat:nth-child(4) {
border-left: none;
border-top: 1px solid #e4ebf5;
}
.bnf-why-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.bnf-partner-grid {
grid-template-columns: repeat(2, 1fr);
}
.bnf-partner-box {
padding: 28px 18px 24px;
}
.bnf-bottom-inner {
padding: 28px 20px 24px;
padding-right: 20px;
max-width: 100%;
}
.bnf-bottom-photo-wrap {
position: relative;
width: 100%;
height: 200px;
opacity: 1;
}
.bnf-bottom-photo-wrap::before {
background: linear-gradient(
180deg,
var(--bnf-blue) 0%,
rgba(0, 76, 202, 0.35) 40%,
rgba(0, 76, 202, 0) 100%
);
}
.bnf-bottom-banner {
display: flex;
flex-direction: column-reverse;
}
.bnf-bottom-meta {
flex-direction: row;
flex-wrap: wrap;
gap: 14px 20px;
}
}
.pro-tf-benefits .bnf-tags.shop-tags-section {
margin: 36px 0 28px;
}
.pro-tf-benefits .bnf-faq {
margin: 0 0 40px;
}
.pro-tf-benefits .bnf-faq .faq-main-title {
text-align: left;
}