/* less/app.less */
:root {
--color-white: #ffffff;
--color-petrol: #0d3b45;
--color-petrol-light: #175a68;
--color-ademwit: #f1f4f4;
--color-inkt: #101619;
--color-puls: #e2571f;
--color-mist: #dde6e7;
--color-text: var(--color-inkt);
--color-muted: #555;
--color-border: #ccc;
--color-bg: var(--color-ademwit);
--color-bg-alt: var(--color-mist);
--color-accent: var(--color-puls);
--color-link: var(--color-petrol);
--inner: 1026px;
--inner-wide: 1248px;
--gutter: 1.25rem;
--max: var(--inner);
--font-sans:
"Segoe UI",
SegoeUI,
"Franklin Gothic Medium",
"Franklin Gothic",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
--space: 1.5rem;
--section-pad-y: 7.5rem;
--radius-btn: 0;
--header-h: 145px;
--cta-footer-overlap: 200px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-sans);
color: var(--color-text);
background: var(--color-bg);
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-link);
}
a:hover,
a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.site-wrap {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.site-main {
flex: 1;
}
.container,
.inner {
width: min(100% - (var(--gutter) * 2), var(--inner));
margin-inline: auto;
}
.container--wide,
.inner-wide {
width: min(100% - (var(--gutter) * 2), var(--inner-wide));
margin-inline: auto;
}
.section {
padding: var(--section-pad-y) 0;
border-bottom: 0;
}
.section--alt {
background: var(--color-bg-alt);
}
.section-bg--ademwit,
.section.section-bg--ademwit,
.cta-section.section-bg--ademwit {
background: var(--color-ademwit);
}
.section-bg--mist,
.section.section-bg--mist,
.cta-section.section-bg--mist {
background: var(--color-mist);
}
.section-bg--petrol,
.section.section-bg--petrol,
.cta-section.section-bg--petrol {
background: var(--color-petrol);
color: var(--color-ademwit);
}
.section-bg--petrol-light,
.section.section-bg--petrol-light,
.cta-section.section-bg--petrol-light {
background: var(--color-petrol-light);
color: var(--color-ademwit);
}
.section-bg--ademwit + .section.section-bg--inherit {
background: var(--color-ademwit);
}
.section-bg--mist + .section.section-bg--inherit {
background: var(--color-mist);
}
.section-bg--petrol + .section.section-bg--inherit {
background: var(--color-petrol);
color: var(--color-ademwit);
}
.section-bg--petrol-light + .section.section-bg--inherit {
background: var(--color-petrol-light);
color: var(--color-ademwit);
}
.section-bg--ademwit + .section.section-bg--ademwit:not(.section--pad-top),
.section-bg--mist + .section.section-bg--mist:not(.section--pad-top),
.section-bg--petrol + .section.section-bg--petrol:not(.section--pad-top),
.section-bg--petrol-light + .section.section-bg--petrol-light:not(.section--pad-top),
.section--steps:not([class*=section-bg--]) + .section.section-bg--ademwit:not(.section--pad-top) {
padding-top: 0;
}
.section.section-bg--mist:has(+ .section.section-bg--ademwit),
.section.section-bg--mist:has(+ .section-bg--ademwit) {
position: relative;
padding-bottom: var(--section-pad-y);
}
.section.section-bg--mist:has(+ .section.section-bg--ademwit)::after,
.section.section-bg--mist:has(+ .section-bg--ademwit)::after {
content: "";
position: absolute;
left: 50%;
bottom: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.section.section-bg--mist + .section.section-bg--ademwit,
.section.section-bg--mist + .section-bg--ademwit {
padding-top: var(--section-pad-y);
}
.section.section-bg--ademwit:has(+ .section.section-bg--mist),
.section.section-bg--ademwit:has(+ .section-bg--mist) {
padding-bottom: var(--section-pad-y);
}
.section.section-bg--ademwit + .section.section-bg--mist,
.section.section-bg--ademwit + .section-bg--mist {
position: relative;
padding-top: var(--section-pad-y);
}
.section.section-bg--ademwit + .section.section-bg--mist::before,
.section.section-bg--ademwit + .section-bg--mist::before {
content: "";
position: absolute;
left: 50%;
top: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%) rotate(180deg);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.section.section-bg--mist.section--phone-pills:not(.section--phone-pills-no-phone):has(+ .section.section-bg--ademwit),
.section.section-bg--mist.section--phone-pills:not(.section--phone-pills-no-phone):has(+ .section-bg--ademwit) {
padding-bottom: 0;
}
.section.section--hero-info-phone.section-bg--ademwit:has(+ .section.section-bg--mist),
.section.section--hero-info-phone.section-bg--ademwit:has(+ .section-bg--mist) {
padding-bottom: 0;
}
@media (max-width: 899px) {
.section.section--hero-info-phone.section-bg--ademwit + .section.section-bg--mist::before,
.section.section--hero-info-phone.section-bg--ademwit + .section-bg--mist::before {
display: none;
}
.section.section--phone-pills:not(.section--phone-pills-no-phone).section-bg--ademwit + .section.section-bg--petrol-light::before,
.section.section--phone-pills:not(.section--phone-pills-no-phone).section-bg--ademwit + .section-bg--petrol-light::before {
display: none;
}
}
.section.section--hero-info-compose.section-bg--ademwit:has(+ .section.section-bg--mist),
.section.section--hero-info-compose.section-bg--ademwit:has(+ .section-bg--mist) {
padding-bottom: 0;
}
.section.section--hero-info-compose.section-bg--ademwit + .section.section-bg--mist::before,
.section.section--hero-info-compose.section-bg--ademwit + .section-bg--mist::before {
display: none;
}
.contact-page {
padding-bottom: var(--section-pad-y);
}
.contact-page + .contact-page__band.section-bg--mist {
position: relative;
padding-top: var(--section-pad-y);
}
.contact-page + .contact-page__band.section-bg--mist::before {
content: "";
position: absolute;
left: 50%;
top: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%) rotate(180deg);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.section.section-bg--ademwit + .section.section-bg--petrol,
.section-bg--ademwit + .section.section-bg--petrol {
position: relative;
overflow: visible;
}
.section.section-bg--ademwit + .section.section-bg--petrol::before,
.section-bg--ademwit + .section.section-bg--petrol::before {
content: "";
position: absolute;
left: 50%;
top: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.hero-section--sector + .section.section-bg--petrol::before,
.hero-section--sector + .section-bg--petrol::before {
display: none;
}
.section.section-bg--petrol:has(+ .section.section-bg--ademwit),
.section.section-bg--petrol:has(+ .section-bg--ademwit) {
position: relative;
overflow: visible;
}
.section.section-bg--petrol:has(+ .section.section-bg--ademwit)::after,
.section.section-bg--petrol:has(+ .section-bg--ademwit)::after {
content: "";
position: absolute;
left: 50%;
bottom: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.section.section-bg--ademwit + .section.section-bg--petrol-light,
.section-bg--ademwit + .section.section-bg--petrol-light {
position: relative;
overflow: visible;
}
.section.section-bg--ademwit + .section.section-bg--petrol-light::before,
.section-bg--ademwit + .section.section-bg--petrol-light::before {
content: "";
position: absolute;
left: 50%;
top: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.section.section-bg--mist + .section.section-bg--petrol-light,
.section-bg--mist + .section.section-bg--petrol-light {
position: relative;
overflow: visible;
}
.section.section-bg--mist + .section.section-bg--petrol-light::before,
.section-bg--mist + .section.section-bg--petrol-light::before {
content: "";
position: absolute;
left: 50%;
top: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.hero-section--sector + .section.section-bg--petrol-light::before,
.hero-section--sector + .section-bg--petrol-light::before {
display: none;
}
.section.section-bg--petrol-light:has(+ .section.section-bg--ademwit),
.section.section-bg--petrol-light:has(+ .section-bg--ademwit) {
position: relative;
overflow: visible;
}
.section.section-bg--petrol-light:has(+ .section.section-bg--ademwit)::after,
.section.section-bg--petrol-light:has(+ .section-bg--ademwit)::after {
content: "";
position: absolute;
left: 50%;
bottom: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.section.section-bg--petrol-light:has(+ .section.section-bg--mist),
.section.section-bg--petrol-light:has(+ .section-bg--mist) {
position: relative;
overflow: visible;
}
.section.section-bg--petrol-light:has(+ .section.section-bg--mist)::after,
.section.section-bg--petrol-light:has(+ .section-bg--mist)::after {
content: "";
position: absolute;
left: 50%;
bottom: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
background: url('data:image/svg+xml,%0A') center / 50px 30px no-repeat;
}
.section:has(+ .faq-page) {
border-bottom: 0;
padding-bottom: 3rem;
}
.section:has(+ .faq-page) > .inner-wide {
width: min(100% - (var(--gutter) * 2), 75rem);
}
.section:has(+ .faq-page) .hero-info {
align-items: stretch;
}
.section:has(+ .faq-page) .hero-info__copy {
max-width: none;
}
.section:has(+ .cta-section:not(.cta-section--faq-contact)) {
padding-bottom: calc(70px + var(--section-pad-y));
}
.site-main:has(> .cta-section:not(.cta-section--faq-contact):last-child) + .site-footer {
padding-top: calc(var(--cta-footer-overlap) + var(--section-pad-y));
}
@media (max-width: 1099px) {
:root {
--cta-footer-overlap: 120px;
}
.section:has(+ .cta-section:not(.cta-section--faq-contact)) {
padding-bottom: calc(27px + var(--section-pad-y));
}
.site-main:has(> .cta-section:not(.cta-section--faq-contact):last-child) + .site-footer {
padding-top: calc(var(--cta-footer-overlap) + var(--section-pad-y));
}
}
.section-head {
text-align: center;
max-width: 40rem;
margin: 0 auto 3rem;
}
.section-head__title {
margin: 0;
font-size: clamp(2rem, 4vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.section-head__intro {
margin: 1rem 0 0;
font-size: 1rem;
color: var(--color-petrol-light);
letter-spacing: -0.03em;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-petrol);
margin: 0 0 0.5rem;
}
.eyebrow--light {
color: var(--color-ademwit);
}
.lead {
font-size: 1.125rem;
color: var(--color-muted);
max-width: 42rem;
}
.price-line {
font-weight: 600;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: 1rem;
margin-top: 1.5rem;
padding: 0;
list-style: none;
}
.stats strong {
display: block;
font-size: 1.4rem;
}
.stats span {
color: var(--color-muted);
font-size: 0.9rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.8125rem;
padding: 0.5rem 1.5rem;
border: 0;
text-decoration: none;
color: var(--color-inkt);
background-color: var(--color-ademwit);
background-size: 250% 100%;
background-repeat: no-repeat;
background-position: right center;
font: inherit;
font-weight: 600;
letter-spacing: -0.03em;
cursor: pointer;
white-space: nowrap;
transition:
background-position 0.35s ease,
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.btn:hover,
.btn:focus-visible {
text-decoration: none;
background-position: left center;
}
.btn--primary {
--btn-bg: var(--color-accent);
--btn-bg-hover: color-mix(in srgb, var(--color-accent), black 8%);
background-color: var(--btn-bg);
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
var(--btn-bg) 50%,
var(--btn-bg) 100%);
color: var(--color-ademwit);
}
.btn--secondary {
--btn-bg: var(--color-ademwit);
--btn-bg-hover: color-mix(in srgb, var(--color-ademwit), black 8%);
background-color: var(--btn-bg);
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
var(--btn-bg) 50%,
var(--btn-bg) 100%);
color: var(--color-inkt);
}
.btn--petrol {
--btn-bg: var(--color-petrol);
--btn-bg-hover: color-mix(in srgb, var(--color-petrol), black 8%);
background-color: var(--btn-bg);
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
var(--btn-bg) 50%,
var(--btn-bg) 100%);
color: var(--color-ademwit);
}
.btn--petrol-light {
--btn-bg: var(--color-petrol-light);
--btn-bg-hover: color-mix(in srgb, var(--color-petrol-light), black 8%);
background-color: var(--btn-bg);
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
var(--btn-bg) 50%,
var(--btn-bg) 100%);
color: var(--color-ademwit);
}
.btn--ghost {
--btn-bg: transparent;
--btn-bg-hover: color-mix(in srgb, var(--color-mist), black 6%);
background-color: var(--btn-bg);
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
var(--btn-bg) 50%,
var(--btn-bg) 100%);
border: 1px solid var(--color-border);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
border-color: color-mix(in srgb, var(--color-border), black 12%);
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
}
.btn--block {
width: 100%;
}
@media (min-width: 901px) {
.btn {
font-size: 18px;
}
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
.btn-row--center {
justify-content: center;
}
.visually-hidden,
.screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
#cmplz-cookiebanner-container {
--cmplz_button_border_radius: 0;
--cmplz_button_accept_background_color: var(--color-puls);
--cmplz_button_accept_border_color: var(--color-puls);
--cmplz_button_accept_text_color: var(--color-ademwit);
--cmplz_button_deny_background_color: var(--color-ademwit);
--cmplz_button_deny_border_color: var(--color-border);
--cmplz_button_deny_text_color: var(--color-inkt);
--cmplz_button_settings_background_color: var(--color-ademwit);
--cmplz_button_settings_border_color: var(--color-border);
--cmplz_button_settings_text_color: var(--color-inkt);
--cmplz_hyperlink_color: var(--color-petrol);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner {
font-family: var(--font-sans);
left: 10px !important;
right: auto !important;
}
@media (max-width: 768px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner {
left: 0 !important;
right: 0 !important;
width: 100%;
}
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: stretch;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
float: none;
width: auto;
max-width: 100%;
margin: 0;
border-radius: var(--radius-btn, 0);
font-weight: 600;
letter-spacing: -0.03em;
min-height: 2.8125rem;
padding: 0.5rem 1.25rem;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:focus-visible {
background-color: color-mix(in srgb, var(--color-puls), black 8%);
border-color: color-mix(in srgb, var(--color-puls), black 8%);
}
#cmplz-cookiebanner-container .cmplz-category-header {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 0.5rem;
width: 100%;
}
#cmplz-cookiebanner-container .cmplz-always-active {
white-space: nowrap;
}
#cmplz-manage-consent {
--cmplz-manage-consent-offset: -12px;
}
#cmplz-manage-consent .cmplz-manage-consent {
animation: none !important;
left: 40px !important;
right: auto !important;
width: max-content;
bottom: var(--cmplz-manage-consent-offset, -12px);
transition: bottom 0.22s ease;
}
#cmplz-manage-consent .cmplz-manage-consent:hover {
animation: none !important;
bottom: 0;
transition-duration: 0.5s;
}
#cmplz-manage-consent .cmplz-manage-consent.is-tucked {
bottom: var(--cmplz-manage-consent-offset, -12px) !important;
transition-duration: 0.22s;
}
.mobile-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--color-border);
padding: 0.75rem 1rem;
z-index: 40;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
@media (max-width: 700px) {
.mobile-bar {
display: flex;
}
body {
padding-bottom: 4.5rem;
}
}
.placeholder-box {
border: 1px dashed var(--color-border);
background: var(--color-bg-alt);
padding: 2rem;
text-align: center;
color: var(--color-muted);
}
.checklist {
list-style: none;
padding: 0;
margin: 0;
}
.checklist li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.35rem 0;
position: relative;
}
.checklist li::before {
content: none;
}
.checklist img,
.checklist i,
.checklist .icon {
width: 1em;
height: 1em;
margin-top: 0.35rem;
font-size: 15px;
line-height: 1;
text-align: center;
flex: 0 0 auto;
color: var(--color-petrol-light);
}
.checklist--course {
display: grid;
gap: 0.85rem;
margin-top: 1.5rem;
}
.checklist--course li {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0;
color: var(--color-petrol);
letter-spacing: -0.03em;
}
.checklist--course li::before {
content: none;
}
.checklist--course img,
.checklist--course i,
.checklist--course .icon {
width: 1em;
height: 1em;
margin-top: 0.35rem;
font-size: 0.95rem;
line-height: 1;
text-align: center;
flex: 0 0 auto;
color: var(--color-petrol-light);
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
vertical-align: -0.125em;
line-height: 1;
}
.icon::after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: currentColor;
-webkit-mask: var(--icon) center / contain no-repeat;
mask: var(--icon) center / contain no-repeat;
}
.icon-pulse {
--icon: url('data:image/svg+xml,%0A');
}
.icon-euro {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A%0A');
}
.icon-award {
--icon: url('data:image/svg+xml,%0A %0A %0A%0A');
}
.icon-zap {
--icon: url('data:image/svg+xml,%0A %0A%0A');
}
.icon-clock {
--icon: url('data:image/svg+xml,%0A %0A %0A%0A');
}
.icon-smartphone {
--icon: url('data:image/svg+xml,%0A %0A %0A%0A');
}
.icon-heart {
--icon: url('data:image/svg+xml,%0A %0A%0A');
}
.icon-monitor-play {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A %0A%0A');
}
.icon-laptop {
--icon: url('data:image/svg+xml,%0A %0A %0A%0A');
}
.icon-download {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A%0A');
}
.icon-chart-column {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A %0A%0A');
}
.icon-clipboard-list {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A %0A %0A %0A%0A');
}
.icon-square-plus {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A%0A');
}
.icon-flame {
--icon: url('data:image/svg+xml,%0A %0A%0A');
}
.icon-log-out {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A%0A');
}
.icon-calendar {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A %0A%0A');
}
.icon-bell {
--icon: url('data:image/svg+xml,%0A %0A %0A%0A');
}
.icon-shield-check {
--icon: url('data:image/svg+xml,%0A %0A %0A%0A');
}
.icon-check {
--icon: url('data:image/svg+xml,%0A %0A%0A');
}
.icon-user-plus {
--icon: url('data:image/svg+xml,%0A %0A %0A %0A %0A%0A');
}
.icon-building-2 {
--icon: url('data:image/svg+xml,%0A%0A %0A %0A %0A %0A %0A %0A %0A%0A');
}
.icon-phone {
--icon: url('data:image/svg+xml,%0A %0A%0A');
}
.site-main.bhv-page-leave {
opacity: 0.85;
transition: opacity 0.18s ease;
pointer-events: none;
}
.site-main.bhv-page-enter {
opacity: 0.85;
pointer-events: none;
}
.site-main.bhv-page-enter-active {
opacity: 1;
transition: opacity 0.18s ease;
}
html.bhv-page-pending body {
opacity: 0.85;
transition: opacity 0.15s ease;
pointer-events: none;
}
html.bhv-page-transitioning .site-header {
z-index: 200;
}
html.bhv-page-transitioning .site-nav .menu-item-has-children > ul {
z-index: 210;
}
@supports (view-transition-name: none) {
@media (prefers-reduced-motion: no-preference) {
.site-main {
view-transition-name: bhv-main;
}
html.bhv-page-transitioning .site-header {
view-transition-name: bhv-header;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-group(bhv-main) {
z-index: 1;
animation: none;
}
::view-transition-old(bhv-main) {
animation: 0.18s ease both bhv-vt-fade-out;
}
::view-transition-new(bhv-main) {
animation: 0.18s ease both bhv-vt-fade-in;
}
::view-transition-group(bhv-header) {
z-index: 200;
animation: none;
}
::view-transition-old(bhv-header),
::view-transition-new(bhv-header) {
animation: none;
}
}
}
@keyframes bhv-vt-fade-out {
to {
opacity: 0.85;
}
}
@keyframes bhv-vt-fade-in {
from {
opacity: 0.85;
}
}
.site-header {
background: var(--color-ademwit);
position: static;
z-index: 50;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem 2rem;
min-height: var(--header-h);
padding: 1.5rem 0;
}
.site-logo {
display: block;
flex: 0 0 auto;
text-decoration: none;
line-height: 0;
position: relative;
z-index: 2;
}
.site-logo__img {
width: 167px;
height: 97px;
max-width: none;
}
.site-logo__img--on-dark {
display: none;
}
.site-logo__img--mobile {
display: none;
}
@media (min-width: 901px) {
body.has-hero-overlay .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
}
body.has-hero-overlay .site-logo__img--primary {
display: none;
}
body.has-hero-overlay .site-logo__img--on-dark {
display: block;
}
body.has-hero-overlay .site-nav > .menu a,
body.has-hero-overlay .site-nav .menu-parent-toggle,
body.has-hero-overlay .site-nav__app {
color: var(--color-ademwit);
}
body.has-hero-overlay .site-nav .menu-item-has-children > ul > li > a {
color: var(--color-inkt);
}
}
.nav-toggle {
display: none;
position: relative;
z-index: 2;
width: 2.5rem;
height: 2.5rem;
padding: 0;
background: none;
border: 0;
cursor: pointer;
color: var(--color-inkt);
align-items: center;
justify-content: center;
}
.nav-toggle__open {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 21px;
height: 14px;
}
.nav-toggle__bar {
display: block;
height: 2px;
width: 100%;
border-radius: 100px;
background: currentColor;
}
.nav-toggle__close {
display: none;
width: 18px;
height: 18px;
position: relative;
}
.nav-toggle__close::before,
.nav-toggle__close::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
border-radius: 100px;
background: currentColor;
}
.nav-toggle__close::before {
transform: rotate(45deg);
}
.nav-toggle__close::after {
transform: rotate(-45deg);
}
.nav-toggle[aria-expanded=true] .nav-toggle__open {
display: none;
}
.nav-toggle[aria-expanded=true] .nav-toggle__close {
display: block;
}
.site-nav {
display: flex;
align-items: center;
gap: 1.5rem;
margin-left: auto;
}
.site-nav > .menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.75rem;
align-items: center;
}
.site-nav > .menu a,
.site-nav .menu-parent-toggle {
text-decoration: none;
color: var(--color-inkt);
padding: 0.35rem 0;
font-size: 1rem;
font-weight: 400;
letter-spacing: -0.03em;
font-family: inherit;
background: none;
border: 0;
cursor: pointer;
text-align: left;
transition: color 0.25s ease;
}
.site-nav > .menu a:hover,
.site-nav > .menu a:focus-visible,
.site-nav .menu-parent-toggle:hover,
.site-nav .menu-parent-toggle:focus-visible {
color: var(--color-puls);
text-decoration: none;
}
.site-nav > .menu > .current-menu-item > a,
.site-nav > .menu > .current_page_item > a,
.site-nav > .menu > .current-menu-ancestor > .menu-parent-toggle,
.site-nav > .menu > .current-menu-parent > .menu-parent-toggle,
.site-nav > .menu > .current-menu-item > .menu-parent-toggle,
.site-nav > .menu > .current_page_item > .menu-parent-toggle {
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.4em;
text-decoration-skip-ink: none;
}
.site-nav > .menu > .current-menu-item > a:hover,
.site-nav > .menu > .current-menu-item > a:focus-visible,
.site-nav > .menu > .current_page_item > a:hover,
.site-nav > .menu > .current_page_item > a:focus-visible,
.site-nav > .menu > .current-menu-ancestor > .menu-parent-toggle:hover,
.site-nav > .menu > .current-menu-ancestor > .menu-parent-toggle:focus-visible,
.site-nav > .menu > .current-menu-parent > .menu-parent-toggle:hover,
.site-nav > .menu > .current-menu-parent > .menu-parent-toggle:focus-visible,
.site-nav > .menu > .current-menu-item > .menu-parent-toggle:hover,
.site-nav > .menu > .current-menu-item > .menu-parent-toggle:focus-visible,
.site-nav > .menu > .current_page_item > .menu-parent-toggle:hover,
.site-nav > .menu > .current_page_item > .menu-parent-toggle:focus-visible {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.4em;
text-decoration-skip-ink: none;
}
.site-nav .menu-item-has-children {
position: relative;
}
.site-nav .menu-parent-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.site-nav .menu-parent-toggle__icon {
display: inline-block;
width: 0;
height: 0;
border-left: 0.28rem solid transparent;
border-right: 0.28rem solid transparent;
border-top: 0.34rem solid currentColor;
}
.site-nav .menu-item-has-children > ul {
list-style: none;
position: absolute;
top: 100%;
left: 0;
min-width: 15.5rem;
margin: 0;
padding: 2.2rem 1.5rem 1.35rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
background: transparent;
border: 0;
z-index: 30;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-0.35rem);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s;
}
.site-nav .menu-item-has-children > ul::before {
content: "";
position: absolute;
inset: 0.85rem 0 0;
background: #fff;
box-shadow: 0 10px 28px rgba(16, 22, 25, 0.12);
z-index: -1;
}
.site-nav .menu-item-has-children > ul::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0.85rem;
}
.site-nav .menu-item-has-children:hover > ul,
.site-nav .menu-item-has-children:focus-within > ul,
.site-nav .menu-item-has-children.is-open > ul {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.site-nav .menu-item-has-children.is-dropdown-closed > ul,
.site-nav .menu-item-has-children.is-dropdown-closed:hover > ul,
.site-nav .menu-item-has-children.is-dropdown-closed:focus-within > ul,
.site-nav .menu-item-has-children.is-dropdown-closed.is-open > ul {
transition: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-0.35rem) !important;
}
.site-nav .menu-item-has-children > ul > li {
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
.site-nav .menu-item-has-children > ul > li > a {
display: inline;
padding: 0;
font-size: 1rem;
font-weight: 400;
letter-spacing: -0.03em;
color: var(--color-inkt);
white-space: nowrap;
transition: color 0.25s ease;
}
.site-nav .menu-item-has-children > ul > li > a:hover,
.site-nav .menu-item-has-children > ul > li > a:focus-visible {
color: var(--color-puls);
text-decoration: none;
}
.site-nav .menu-item-has-children > ul > .current-menu-item > a,
.site-nav .menu-item-has-children > ul > .current_page_item > a {
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.35em;
text-decoration-skip-ink: none;
}
.site-nav .menu-item-has-children > ul > .current-menu-item > a:hover,
.site-nav .menu-item-has-children > ul > .current-menu-item > a:focus-visible,
.site-nav .menu-item-has-children > ul > .current_page_item > a:hover,
.site-nav .menu-item-has-children > ul > .current_page_item > a:focus-visible {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.35em;
text-decoration-skip-ink: none;
}
.site-nav__actions {
display: contents;
}
.site-nav__app {
font-size: 1rem;
letter-spacing: -0.03em;
text-decoration: none;
color: var(--color-inkt);
transition: color 0.25s ease;
}
.site-nav__app:hover,
.site-nav__app:focus-visible {
color: var(--color-puls);
text-decoration: none;
}
.site-nav__enroll {
display: none;
}
.site-header__cta .btn--primary {
min-width: 9.25rem;
min-height: 2.8125rem;
}
@media (prefers-reduced-motion: reduce) {
.site-nav .menu-item-has-children > ul {
transition: none;
transform: none;
}
}
@media (max-width: 900px) {
.site-header {
position: sticky;
top: 0;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
z-index: 50;
}
.site-header__inner {
min-height: 89px;
padding: 0;
flex-wrap: nowrap;
position: relative;
}
.site-logo__img--desktop {
display: none;
}
.site-logo__img--mobile {
display: block;
width: 154px;
height: 89px;
}
.nav-toggle {
display: flex;
margin-left: auto;
margin-right: 0.35rem;
width: 44px;
height: 44px;
}
.site-header__cta {
display: none;
}
.site-nav {
display: none;
position: fixed;
inset: 89px 0 0;
width: 100%;
margin: 0;
padding: 2.75rem 0 2rem;
flex-direction: column;
align-items: stretch;
gap: 0;
background: #fff;
overflow-y: auto;
z-index: 40;
}
.site-nav.is-open {
display: flex;
}
.site-nav > .menu {
flex-direction: column;
align-items: stretch;
gap: 0;
flex: 1 1 auto;
}
.site-nav > .menu > li {
margin: 0;
}
.site-nav > .menu > li > a,
.site-nav > .menu > li > .menu-parent-toggle {
display: flex;
align-items: center;
width: 100%;
padding: 0.65rem 60px;
font-size: 24px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-inkt);
}
.site-nav > .menu > .current-menu-item > a,
.site-nav > .menu > .current_page_item > a {
font-weight: 400;
text-decoration: none;
}
.site-nav > .menu > .current-menu-ancestor > .menu-parent-toggle,
.site-nav > .menu > .current-menu-parent > .menu-parent-toggle,
.site-nav > .menu > .current-menu-item > .menu-parent-toggle,
.site-nav > .menu > .current_page_item > .menu-parent-toggle {
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.4em;
text-decoration-skip-ink: none;
}
.site-nav .menu-parent-toggle {
justify-content: flex-start;
gap: 0.75rem;
}
.site-nav .menu-parent-toggle__icon {
width: 20px;
height: 20px;
margin: 0;
border: 0;
border-radius: 100px;
background: var(--color-ademwit);
position: relative;
flex: 0 0 auto;
transition: transform 0.25s ease;
}
.site-nav .menu-parent-toggle__icon::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--color-petrol);
transform: translate(-50%, -35%);
}
.site-nav .menu-item-has-children.is-open > .menu-parent-toggle .menu-parent-toggle__icon {
transform: scaleY(-1);
}
.site-nav .menu-item-has-children.is-open > .menu-parent-toggle .menu-parent-toggle__icon::before {
transform: translate(-50%, -35%);
}
.site-nav .menu-item-has-children > ul {
position: static;
box-shadow: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
background: transparent;
min-width: 0;
overflow: hidden;
height: 0;
opacity: 1;
visibility: visible;
pointer-events: none;
transform: none;
transition: none;
}
.site-nav .menu-item-has-children > ul::before,
.site-nav .menu-item-has-children > ul::after {
display: none;
}
.site-nav .menu-item-has-children.is-open > ul {
pointer-events: auto;
}
.site-nav .menu-item-has-children > ul > li > a {
display: block;
padding: 0.65rem 60px 0.65rem 80px;
font-size: 24px;
font-weight: 300;
letter-spacing: -0.03em;
line-height: 1.2;
white-space: normal;
opacity: 0;
transition: opacity 0.25s ease;
}
.site-nav .menu-item-has-children.is-open > ul > li > a {
opacity: 1;
}
.site-nav__actions {
display: flex;
flex-direction: column;
gap: 1.15rem;
margin-top: auto;
padding: 2.75rem 20px 0;
}
.site-nav__enroll,
.site-nav__app {
display: inline-flex;
width: 100%;
min-height: 45px;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.03em;
border-radius: 0;
text-decoration: none;
}
.site-nav__enroll {
background-color: var(--color-puls);
color: var(--color-ademwit);
}
.site-nav__app {
background: var(--color-inkt);
color: var(--color-ademwit);
padding: 0.7rem 1.4rem;
}
body.is-nav-open {
overflow: hidden;
}
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.site-nav .menu-parent-toggle__icon,
.site-nav .menu-item-has-children > ul > li > a {
transition: none;
}
}
.site-footer {
background: var(--color-petrol);
color: var(--color-ademwit);
padding: 5.5rem 0 2.75rem;
margin-top: 0;
}
.footer-grid {
display: grid;
gap: 60px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.footer-col__title {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ademwit);
}
.footer-col__title::after {
content: "";
display: block;
width: 2.8125rem;
height: 3px;
margin-top: 0.75rem;
background: var(--color-petrol-light);
}
.footer-menu {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
}
.footer-menu li + li {
margin-top: 0.85rem;
}
.footer-menu a {
text-decoration: none;
color: inherit;
font-size: 1rem;
letter-spacing: -0.03em;
transition: color 0.25s ease;
}
.footer-menu a:hover,
.footer-menu a:focus-visible {
color: var(--color-puls);
text-decoration: none;
}
.footer-divider {
margin: 3.5rem 0 1.25rem;
line-height: 0;
}
.footer-divider img {
width: 100%;
height: 1.25rem;
object-fit: fill;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2rem;
justify-content: space-between;
align-items: center;
}
.footer-brand {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
min-width: 0;
}
.footer-brand__name {
display: block;
line-height: 0;
text-decoration: none;
height: fit-content;
}
.footer-brand__name:hover,
.footer-brand__name:focus-visible {
text-decoration: none;
}
.footer-brand__logo {
display: block;
width: auto;
height: 3.5rem;
transition: opacity 0.25s ease;
}
.footer-brand__name:hover .footer-brand__logo,
.footer-brand__name:focus-visible .footer-brand__logo {
opacity: 0.85;
}
.footer-brand__powered {
font-size: 0.875rem;
letter-spacing: -0.03em;
white-space: nowrap;
}
.footer-brand__tsn {
display: block;
width: auto;
height: 2rem;
}
.footer-legal__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
}
.footer-legal__list a {
color: var(--color-ademwit);
text-decoration: none;
font-size: 0.875rem;
letter-spacing: -0.03em;
transition: color 0.25s ease;
}
.footer-legal__list a:hover,
.footer-legal__list a:focus-visible {
color: var(--color-puls);
text-decoration: none;
}
@media (max-width: 800px) {
.site-footer {
padding: 4rem 0 2rem;
}
.site-main:has(> .cta-section:not(.cta-section--faq-contact):last-child) + .site-footer {
padding-top: calc(var(--cta-footer-overlap) + var(--section-pad-y));
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-divider {
margin: 2.5rem 0 1rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 2.5rem;
}
.footer-legal {
order: -1;
}
.footer-legal__list {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-brand {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.footer-brand__name {
flex: 1 0 100%;
}
.footer-brand__logo {
width: auto;
height: 3.5rem;
}
.footer-brand__tsn {
height: 2rem;
}
}
.hero {
display: grid;
gap: 2rem;
}
@media (min-width: 800px) {
.hero--split {
grid-template-columns: 1.2fr 1fr;
align-items: center;
}
}
.hero__media {
min-height: 12rem;
background: var(--color-bg-alt);
display: grid;
place-items: center;
color: var(--color-muted);
}
.card-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.card {
border: 1px solid var(--color-border);
padding: 1.25rem;
background: #fff;
}
.card ul {
padding-left: 1.1rem;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid var(--color-border);
padding: 0.6rem 0.75rem;
text-align: left;
vertical-align: top;
}
.steps {
display: grid;
gap: 1rem;
counter-reset: step;
}
@media (min-width: 700px) {
.steps--row {
grid-template-columns: repeat(3, 1fr);
}
}
.step {
border-left: 3px solid var(--color-accent);
padding-left: 1rem;
}
.step::before {
counter-increment: step;
content: "Stap " counter(step);
display: block;
font-size: 0.8rem;
color: var(--color-muted);
margin-bottom: 0.25rem;
}
.contact-split {
display: grid;
gap: 2rem;
}
@media (min-width: 800px) {
.contact-split {
grid-template-columns: 1fr 1fr;
}
}
.wpcf7 input,
.wpcf7 textarea {
width: 100%;
padding: 0.6rem;
font: inherit;
border: 1px solid var(--color-border);
margin-bottom: 0.75rem;
}
.chatbot {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 60;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.chatbot-launcher {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.chatbot-bubble {
position: relative;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 14px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--color-inkt);
box-shadow: 0 4px 18px rgba(16, 22, 25, 0.08);
white-space: nowrap;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.chatbot-bubble::after {
content: "";
position: absolute;
right: 22px;
bottom: -6px;
width: 12px;
height: 12px;
background: #fff;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
transform: rotate(45deg);
}
.chatbot.is-open .chatbot-bubble {
opacity: 0;
transform: translateY(6px);
pointer-events: none;
}
.chatbot-btn {
width: 56px;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: #000;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 18px rgba(16, 22, 25, 0.18);
transition: background-color 0.2s ease;
}
.chatbot-btn:hover,
.chatbot-btn:focus-visible {
background: var(--color-accent);
}
.chatbot-btn svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.chatbot-btn .ico-close {
display: none;
}
.chatbot.is-open .chatbot-btn .ico-chat {
display: none;
}
.chatbot.is-open .chatbot-btn .ico-close {
display: block;
}
.chatbot-panel {
display: none;
flex-direction: column;
width: min(400px, calc(100vw - 48px));
height: min(620px, calc(100vh - 120px));
max-height: min(620px, calc(100vh - 120px));
margin-bottom: -40px;
border: 0;
border-radius: 12px;
background: var(--color-petrol);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.18);
overflow: hidden;
isolation: isolate;
opacity: 0;
transform: translateY(8px);
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
}
.chatbot.is-open .chatbot-panel {
opacity: 1;
display: flex;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
.chatbot-head {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 18px;
border-bottom: 2px solid var(--color-petrol-light);
background: var(--color-petrol);
}
.chatbot-head b {
display: block;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.25;
color: var(--color-ademwit);
}
.chatbot-head span {
display: block;
margin-top: 3px;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.35;
color: color-mix(in srgb, var(--color-ademwit) 72%, transparent);
}
.chatbot-close {
margin-left: auto;
padding: 4px;
border: none;
background: transparent;
color: color-mix(in srgb, var(--color-ademwit) 72%, transparent);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.chatbot-close:hover,
.chatbot-close:focus-visible {
color: var(--color-ademwit);
}
.chatbot-msgs {
flex: 1;
overflow: auto;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--color-ademwit);
}
.chatbot-msg {
max-width: 88%;
padding: 10px 14px;
border-radius: 10px;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-inkt);
word-wrap: break-word;
}
.chatbot-msg.bot {
align-self: flex-start;
background: #fff;
border: 1px solid var(--color-mist);
border-bottom-left-radius: 2px;
}
.chatbot-msg.user {
align-self: flex-end;
background: var(--color-petrol);
color: var(--color-ademwit);
border-bottom-right-radius: 2px;
}
.chatbot-msg.bot > :first-child {
margin-top: 0;
}
.chatbot-msg.bot > :last-child {
margin-bottom: 0;
}
.chatbot-msg.bot p,
.chatbot-msg.bot ul,
.chatbot-msg.bot ol,
.chatbot-msg.bot pre,
.chatbot-msg.bot blockquote {
margin: 0.45em 0;
}
.chatbot-msg.bot ul,
.chatbot-msg.bot ol {
padding-left: 1.25em;
}
.chatbot-msg.bot li + li {
margin-top: 0.2em;
}
.chatbot-msg.bot a {
color: var(--color-petrol);
text-decoration: underline;
text-underline-offset: 2px;
}
.chatbot-msg.bot code {
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Consolas,
monospace;
font-size: 0.92em;
background: rgba(16, 22, 25, 0.06);
padding: 0.1em 0.35em;
border-radius: 3px;
}
.chatbot-msg.bot pre {
overflow-x: auto;
padding: 8px 10px;
background: rgba(16, 22, 25, 0.06);
border-radius: 6px;
}
.chatbot-msg.bot pre code {
padding: 0;
background: none;
}
.chatbot-msg.bot blockquote {
margin-left: 0;
padding-left: 0.75em;
border-left: 3px solid var(--color-mist);
color: var(--color-muted);
}
.chatbot-typing {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 12px 14px;
min-height: 1.45em;
}
.chatbot-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-muted);
animation: chatbot-typing-bounce 1.2s ease-in-out infinite;
}
.chatbot-typing span:nth-child(2) {
animation-delay: 0.15s;
}
.chatbot-typing span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes chatbot-typing-bounce {
0%, 60%, 100% {
opacity: 0.35;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-3px);
}
}
.chatbot-suggest {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 18px 14px;
background: var(--color-ademwit);
}
.chatbot-suggest[hidden] {
display: none;
}
.chatbot-suggest button {
border: 1px solid var(--color-petrol-light);
border-radius: 99px;
padding: 7px 12px;
font: inherit;
font-size: 0.8125rem;
line-height: 1.3;
font-weight: 600;
letter-spacing: -0.02em;
background: #fff;
color: var(--color-petrol);
cursor: pointer;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease;
}
.chatbot-suggest button:hover,
.chatbot-suggest button:focus-visible {
border-color: var(--color-petrol);
background: var(--color-petrol);
color: var(--color-ademwit);
}
.chatbot-foot {
display: flex;
gap: 0;
align-items: stretch;
padding: 0;
border-top: 1px solid var(--color-mist);
margin: 0;
background: #fff;
}
.chatbot-input {
flex: 1;
min-width: 0;
padding: 14px 16px;
border: 0;
border-radius: 0;
font: inherit;
font-size: 0.875rem;
line-height: 1.4;
color: var(--color-inkt);
background: #fff;
caret-color: var(--color-petrol);
outline: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.chatbot-input::placeholder {
color: var(--color-muted);
}
.chatbot-input:focus,
.chatbot-input:focus-visible {
outline: none;
border: 0;
box-shadow: none;
background: #fff;
}
.chatbot-send {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 52px;
padding: 0;
border: 0;
border-radius: 0;
background: var(--color-petrol);
color: var(--color-ademwit);
cursor: pointer;
transition: background-color 0.2s ease;
}
.chatbot-send:hover,
.chatbot-send:focus-visible {
background: var(--color-petrol-light);
}
.chatbot-send:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.chatbot-send svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 700px) {
.chatbot {
right: 16px;
bottom: calc(4.5rem + 16px);
}
.chatbot-bubble {
opacity: 0;
transform: translateY(6px);
pointer-events: none;
}
.chatbot-bubble.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.chatbot.is-open .chatbot-bubble.is-visible {
opacity: 0;
transform: translateY(6px);
pointer-events: none;
}
.chatbot-panel {
width: min(400px, calc(100vw - 32px));
height: min(620px, calc(100vh - 4.5rem - 100px));
max-height: min(620px, calc(100vh - 4.5rem - 100px));
}
}
@media (prefers-reduced-motion: reduce) {
.chatbot-bubble,
.chatbot-panel {
transition: none;
}
}
.faq-home {
position: relative;
color: var(--color-ademwit);
padding: var(--section-pad-y) 0 calc(var(--section-pad-y) + 70px);
overflow: visible;
border-bottom: 0;
}
.faq-home:not([class*=section-bg--]) {
background: var(--color-petrol);
}
.faq-home__inner {
position: relative;
z-index: 1;
width: min(100% - (var(--gutter) * 2), 38.375rem);
margin-inline: auto;
}
.faq-home__header {
text-align: center;
margin-bottom: 2.5rem;
}
.faq-home__title {
margin: 0;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-ademwit);
}
.faq-home__intro {
margin: 0.85rem auto 0;
max-width: 38rem;
font-size: 1.25rem;
letter-spacing: -0.03em;
color: var(--color-ademwit);
}
.faq-home__cta {
--btn-bg: var(--color-petrol-light);
--btn-bg-hover: color-mix(in srgb, var(--color-petrol-light), black 8%);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1.35rem;
padding: 0.7rem 1.35rem;
border: 0;
background-color: var(--btn-bg);
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
var(--btn-bg) 50%,
var(--btn-bg) 100%);
background-size: 250% 100%;
background-repeat: no-repeat;
background-position: right center;
color: var(--color-ademwit);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.03em;
cursor: pointer;
transition: background-position 0.35s ease;
}
.faq-home__cta:hover,
.faq-home__cta:focus-visible {
background-position: left center;
text-decoration: none;
color: var(--color-ademwit);
}
@media (prefers-reduced-motion: reduce) {
.faq-home__cta {
transition: none;
}
}
.faq-home__list {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid rgba(241, 244, 244, 0.35);
}
.faq-home__item {
border: 0;
border-bottom: 1px solid rgba(241, 244, 244, 0.35);
background: transparent;
}
.faq-home__item.is-open,
.faq-home__item[open] {
border-color: rgba(241, 244, 244, 0.35);
}
.faq-home__summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.25rem;
padding: 1.5rem 0;
cursor: pointer;
list-style: none;
}
.faq-home__summary::-webkit-details-marker {
display: none;
}
.faq-home__question {
flex: 1;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.03em;
}
.faq-home__toggle {
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.2rem;
border-radius: 50%;
background: var(--color-petrol-light);
position: relative;
transition: background 0.25s ease, transform 0.25s ease;
}
.faq-home__item.is-open .faq-home__toggle {
background: var(--color-ademwit);
transform: rotate(180deg);
}
.faq-home__toggle::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
border-left: 0.28rem solid transparent;
border-right: 0.28rem solid transparent;
border-bottom: 0.34rem solid var(--color-ademwit);
transition: border-color 0.25s ease;
}
.faq-home__item.is-open .faq-home__toggle::before {
border-bottom-color: var(--color-petrol);
}
.faq-home__body {
overflow: hidden;
height: 0;
}
.faq-home__item.is-open .faq-home__body {
height: auto;
}
.faq-home__body-inner {
overflow: hidden;
min-height: 0;
padding: 0 0 1.75rem;
font-size: 1rem;
line-height: 1.875;
letter-spacing: -0.03em;
opacity: 0;
transition: opacity 0.25s ease;
}
.faq-home__item.is-open .faq-home__body-inner {
opacity: 1;
}
.faq-home__body-inner > *:first-child {
margin-top: 0;
}
.faq-home__body-inner > *:last-child {
margin-bottom: 0;
}
.faq-home.section-bg--ademwit,
.faq-home.section-bg--mist {
color: var(--color-inkt);
}
.faq-home.section-bg--ademwit .faq-home__title,
.faq-home.section-bg--ademwit .faq-home__intro,
.faq-home.section-bg--mist .faq-home__title,
.faq-home.section-bg--mist .faq-home__intro {
color: var(--color-inkt);
}
.faq-home.section-bg--ademwit .faq-home__list,
.faq-home.section-bg--mist .faq-home__list {
border-top-color: rgba(16, 22, 25, 0.18);
}
.faq-home.section-bg--ademwit .faq-home__item,
.faq-home.section-bg--mist .faq-home__item,
.faq-home.section-bg--ademwit .faq-home__item.is-open,
.faq-home.section-bg--mist .faq-home__item.is-open,
.faq-home.section-bg--ademwit .faq-home__item[open],
.faq-home.section-bg--mist .faq-home__item[open] {
border-bottom-color: rgba(16, 22, 25, 0.18);
}
.faq-home.section-bg--ademwit .faq-home__toggle,
.faq-home.section-bg--mist .faq-home__toggle {
background: var(--color-inkt);
}
.faq-home.section-bg--ademwit .faq-home__item.is-open .faq-home__toggle,
.faq-home.section-bg--mist .faq-home__item.is-open .faq-home__toggle {
background: var(--color-inkt);
}
.faq-home.section-bg--ademwit .faq-home__item.is-open .faq-home__toggle::before,
.faq-home.section-bg--mist .faq-home__item.is-open .faq-home__toggle::before {
border-bottom-color: var(--color-ademwit);
}
.faq-page {
border-bottom: 0;
}
.faq-page__toolbar {
background: var(--color-ademwit);
padding: 0 0 6rem;
}
.faq-page__toolbar-inner {
width: min(100% - (var(--gutter) * 2), 75rem);
margin-inline: auto;
}
.faq-page__search {
display: block;
max-width: 31rem;
position: relative;
}
.faq-page__search-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.faq-page__search-input {
width: 100%;
appearance: none;
border: 0;
border-bottom: 1.5px solid var(--color-petrol);
background: transparent;
padding: 0.35rem 2rem 0.65rem 0;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
}
.faq-page__search-input::placeholder {
color: var(--color-petrol);
opacity: 0.85;
}
.faq-page__search-input:focus {
outline: none;
border-bottom-color: var(--color-inkt);
}
.faq-page__search::after {
content: "";
position: absolute;
right: 0;
top: 0.35rem;
width: 1rem;
height: 1rem;
pointer-events: none;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b45' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
.faq-page__search::before {
display: none;
}
.faq-page__chips {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
.faq-page__chip {
appearance: none;
border: 1px solid var(--color-mist);
background: #fff;
color: var(--color-inkt);
padding: 0.65rem 1.15rem;
font: inherit;
font-size: 1rem;
letter-spacing: -0.03em;
cursor: pointer;
border-radius: 999px;
}
.faq-page__chip.is-active {
border-color: var(--color-inkt);
background: var(--color-inkt);
color: #fff;
}
.faq-page__group {
position: relative;
padding: var(--section-pad-y) 0;
scroll-margin-top: 5.5rem;
overflow: visible;
}
.faq-page__seam {
position: absolute;
left: 50%;
top: -15px;
width: 50px;
height: 30px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
}
.faq-page__group-inner {
width: min(100% - (var(--gutter) * 2), 75rem);
margin-inline: auto;
}
.faq-page__group-title {
margin: 0 0 2.5rem;
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
}
.faq-page__group-title::after {
content: "";
display: block;
width: 2.8125rem;
height: 3px;
margin-top: 0.85rem;
background: var(--color-petrol-light);
}
.faq-page__group--petrol {
background: var(--color-petrol);
color: var(--color-ademwit);
}
.faq-page__group--petrol .faq-page__group-title {
color: var(--color-ademwit);
}
.faq-page__group--petrol .faq-page__group-title::after {
background: var(--color-ademwit);
}
.faq-page__group--ademwit,
.faq-page__group--light {
background: var(--color-ademwit);
color: var(--color-inkt);
}
.faq-page__group--mist {
background: var(--color-mist);
color: var(--color-inkt);
}
.faq-page__list {
border-top: 1px solid currentColor;
}
.faq-page__group--petrol .faq-page__list {
border-top-color: rgba(241, 244, 244, 0.35);
}
.faq-page__group--ademwit .faq-page__list,
.faq-page__group--light .faq-page__list,
.faq-page__group--mist .faq-page__list {
border-top-color: rgba(16, 22, 25, 0.18);
}
.faq-page__item {
border-bottom: 1px solid currentColor;
}
.faq-page__group--petrol .faq-page__item {
border-bottom-color: rgba(241, 244, 244, 0.35);
}
.faq-page__group--ademwit .faq-page__item,
.faq-page__group--light .faq-page__item,
.faq-page__group--mist .faq-page__item {
border-bottom-color: rgba(16, 22, 25, 0.18);
}
.faq-page__summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.25rem;
padding: 1.5rem 0;
cursor: pointer;
list-style: none;
}
.faq-page__summary::-webkit-details-marker {
display: none;
}
.faq-page__question {
flex: 1;
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.3;
}
.faq-page__toggle {
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.2rem;
border-radius: 50%;
border: 0;
background: var(--color-petrol-light);
position: relative;
transition: background 0.25s ease, transform 0.25s ease;
}
.faq-page__group--ademwit .faq-page__toggle,
.faq-page__group--light .faq-page__toggle,
.faq-page__group--mist .faq-page__toggle {
background: var(--color-inkt);
}
.faq-page__item.is-open .faq-page__toggle,
.faq-page__item[open] .faq-page__toggle {
background: var(--color-ademwit);
transform: rotate(180deg);
}
.faq-page__group--ademwit .faq-page__item.is-open .faq-page__toggle,
.faq-page__group--light .faq-page__item.is-open .faq-page__toggle,
.faq-page__group--mist .faq-page__item.is-open .faq-page__toggle,
.faq-page__group--ademwit .faq-page__item[open] .faq-page__toggle,
.faq-page__group--light .faq-page__item[open] .faq-page__toggle,
.faq-page__group--mist .faq-page__item[open] .faq-page__toggle {
background: var(--color-inkt);
}
.faq-page__toggle::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
border-left: 0.28rem solid transparent;
border-right: 0.28rem solid transparent;
border-bottom: 0.34rem solid var(--color-ademwit);
transition: border-color 0.25s ease;
}
.faq-page__item.is-open .faq-page__toggle::before,
.faq-page__item[open] .faq-page__toggle::before {
border-bottom-color: var(--color-petrol);
}
.faq-page__group--ademwit .faq-page__item.is-open .faq-page__toggle::before,
.faq-page__group--light .faq-page__item.is-open .faq-page__toggle::before,
.faq-page__group--mist .faq-page__item.is-open .faq-page__toggle::before,
.faq-page__group--ademwit .faq-page__item[open] .faq-page__toggle::before,
.faq-page__group--light .faq-page__item[open] .faq-page__toggle::before,
.faq-page__group--mist .faq-page__item[open] .faq-page__toggle::before {
border-bottom-color: var(--color-ademwit);
}
.faq-page__toggle::after {
display: none;
}
.faq-page__body {
overflow: hidden;
height: 0;
}
.faq-page__item.is-open .faq-page__body {
height: auto;
}
.faq-page__body-inner {
padding: 0 3rem 1.75rem 0;
max-width: 48rem;
font-size: 1rem;
line-height: 1.75;
letter-spacing: -0.03em;
opacity: 0;
transition: opacity 0.25s ease;
}
.faq-page__item.is-open .faq-page__body-inner {
opacity: 1;
}
.faq-page__body-inner > *:first-child {
margin-top: 0;
}
.faq-page__body-inner > *:last-child {
margin-bottom: 0;
}
.faq-page__item[hidden],
.faq-page__group[hidden] {
display: none !important;
}
.hero-section {
padding: 0 0 var(--section-pad-y);
overflow: visible;
}
.hero-section:not(.hero-section--split):not(.hero-section--centered-stats):not(.hero-section--course):not(.hero-section--sector) > .inner-wide {
width: 100%;
}
.hero-section .inner-wide > .inner {
width: min(100% - (var(--gutter) * 2), var(--inner));
overflow: visible;
}
.hero-proof {
width: min(100%, var(--inner));
margin-inline: auto;
overflow: visible;
}
.hero-banner {
position: relative;
isolation: isolate;
min-height: 951px;
display: grid;
align-items: start;
overflow: hidden;
border-radius: 0;
}
.hero-banner__media,
.hero-banner__shade {
position: absolute;
inset: 0;
}
.hero-banner__media {
background: center / cover no-repeat var(--hero-bg);
z-index: -2;
}
.hero-banner__shade {
background:
linear-gradient(
180deg,
rgba(16, 22, 25, 0.5),
#101619);
mix-blend-mode: multiply;
z-index: -1;
}
.hero-banner__content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
width: min(100% - 2rem, 54rem);
margin-inline: auto;
padding: 170px 0 0;
text-align: center;
color: var(--color-ademwit);
}
@media (min-width: 901px) {
body.has-hero-overlay--photo .hero-banner__content {
padding-top: calc(var(--header-h) + 6rem);
}
}
.hero-banner__heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 100%;
}
.hero-banner__eyebrow {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ademwit);
}
.hero-banner__title {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15em;
font-size: clamp(2.4rem, 5vw, 58px);
line-height: 1.07;
letter-spacing: -0.015em;
font-weight: 700;
color: var(--color-ademwit);
}
.hero-banner__title-line {
display: block;
}
.hero-banner__title-line--sub {
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.hero-banner__lead {
margin: 0;
max-width: 45rem;
font-size: 1.1875rem;
line-height: 1.5;
font-weight: 400;
color: var(--color-ademwit);
}
.hero-banner__meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
margin: 0;
font-size: 14px;
color: var(--color-ademwit);
letter-spacing: -0.03em;
}
.hero-pills {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 52rem;
}
.hero-pills__item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
border-radius: 100px;
background: color-mix(in srgb, var(--color-ademwit) 12%, transparent);
color: var(--color-ademwit);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.45;
}
.hero-pills__icon,
.hero-pills__item > i {
flex: 0 0 auto;
width: 1em;
height: 1em;
font-size: 0.875rem;
line-height: 1;
text-align: center;
color: var(--color-ademwit);
}
@media (min-width: 900px) {
.hero-pills {
gap: 14px;
}
.hero-pills__item {
gap: 10px;
padding: 11px 18px 11px 15px;
font-size: 0.9375rem;
}
.hero-pills__icon,
.hero-pills__item > i {
font-size: 1rem;
}
}
.hero-banner__price {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0;
font-size: 0.875rem;
letter-spacing: -0.03em;
color: var(--color-ademwit);
}
.hero-banner__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding-top: 8px;
}
.hero-banner__cta-secondary {
--btn-bg: transparent;
--btn-bg-hover: color-mix(in srgb, var(--color-white) 12%, transparent);
background-color: transparent;
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
transparent 50%,
transparent 100%);
border: 1px solid var(--color-white);
color: var(--color-white);
}
.hero-banner__cta-secondary:hover,
.hero-banner__cta-secondary:focus-visible {
border-color: var(--color-white);
color: var(--color-white);
}
@media (max-width: 899px) {
.hero-section {
padding-bottom: 60px;
}
.hero-banner {
min-height: 0;
}
.hero-banner__content {
width: min(100% - 2.75rem, 21.7rem);
padding: 6.4rem 0 9.5rem;
gap: 1.5rem;
}
.hero-banner__title {
gap: 0.15em;
font-size: 36px;
line-height: 1.15;
letter-spacing: -0.015em;
}
.hero-banner__lead {
font-size: 1rem;
line-height: 1.45;
}
.hero-banner__meta {
gap: 0.75rem;
}
.hero-pills {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
width: 100%;
max-width: none;
gap: 0.75rem;
}
.hero-pills__item {
display: flex;
width: 100%;
min-height: 3rem;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
text-align: left;
}
.hero-pills__item span {
flex: 1 1 auto;
text-align: left;
}
.hero-banner__price {
font-size: 16px;
max-width: 20.5rem;
}
.hero-banner__actions {
gap: 0.75rem;
}
.hero-banner__actions .btn {
min-width: 9.25rem;
min-height: 2.8125rem;
}
}
.hero-proof {
display: grid;
gap: 20px;
margin-top: -219px;
position: relative;
z-index: 2;
overflow: visible;
grid-template-columns: 1fr;
grid-template-areas: "featured" "stat1" "stat2" "app";
}
@media (max-width: 899px) {
.hero-proof {
margin-top: -4.8125rem;
}
}
@media (min-width: 900px) {
.hero-proof {
grid-template-columns: 1fr 1fr 1.15fr;
grid-template-areas: "featured featured app" "stat1 stat2 app";
align-items: stretch;
}
}
.hero-proof__card--featured {
grid-area: featured;
}
.hero-proof__card--stat1 {
grid-area: stat1;
}
.hero-proof__card--stat2 {
grid-area: stat2;
}
.hero-proof__app {
grid-area: app;
}
.hero-proof__card {
background: var(--color-mist);
padding: 3.75rem 3.5rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 13rem;
}
.hero-proof__card--featured {
position: relative;
padding-top: 3rem;
min-height: 14rem;
}
.hero-proof__pulse {
position: absolute;
top: 2.5rem;
left: 3.5rem;
width: min(100% - 4rem, 30rem);
height: auto;
pointer-events: none;
}
.hero-proof__value {
margin: 0;
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-petrol-light);
position: relative;
}
.hero-proof__label {
margin: 0.75rem 0 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
max-width: 25rem;
position: relative;
}
@media (min-width: 900px) {
.hero-proof__label {
height: 3em;
}
}
.hero-proof__app {
position: relative;
background: var(--color-mist);
min-height: 467px;
padding: 23px 20px 40px;
overflow: visible;
display: flex;
flex-direction: column;
}
.phone-mockup {
--phone-mockup-legacy-shift: -15.51%;
display: block;
width: 316px;
max-width: 100%;
height: auto;
pointer-events: none;
}
.laptop-mockup {
display: block;
width: 100%;
max-width: 100%;
height: auto;
pointer-events: none;
}
.hero-proof__phone {
flex: 0 0 auto;
align-self: flex-start;
width: 316px;
max-width: 100%;
margin: 0;
background: var(--color-ademwit);
overflow: hidden;
}
.hero-proof__app .phone-mockup--hero {
display: block;
width: 100%;
max-width: none;
margin: 0;
background: transparent;
transform: translateX(-20%);
}
.hero-proof__badges {
position: absolute;
top: 2.5rem;
right: -1.5rem;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.75rem;
}
.hero-proof__badge {
position: relative;
background: #fff;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
text-align: left;
color: var(--color-inkt);
flex: 0 0 auto;
}
.hero-proof__badge--person {
width: 11.5rem;
padding: 0.85rem 1rem 0.95rem;
}
.hero-proof__badge--ready {
width: 10rem;
padding: 0.75rem 0.9rem 0.7rem;
transform: translateX(22px);
}
.hero-proof__badge-kicker {
margin: 0;
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8a9699;
line-height: 1.3;
}
.hero-proof__badge-name {
margin: 0.45rem 0 0;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-inkt);
}
.hero-proof__badge--person .hero-proof__badge-detail {
margin: 0.3rem 0 0;
font-size: 0.6875rem;
line-height: 1.35;
color: #5c6a6e;
}
.hero-proof__badge-row {
display: flex;
align-items: center;
gap: 0.55rem;
margin-top: 0.45rem;
}
.hero-proof__badge-pct {
margin: 0;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--color-puls);
flex: 0 0 auto;
}
.hero-proof__badge--ready .hero-proof__badge-detail {
margin: 0;
font-size: 0.6875rem;
line-height: 1.3;
color: #3d4a4e;
}
.hero-proof__badge-pulse {
display: block;
width: 100%;
height: auto;
margin-top: 0.65rem;
}
.hero-proof__app-stat {
margin-top: auto;
padding: 1.75rem 2.15rem 0;
}
.hero-proof__app-stat .hero-proof__label {
margin-top: 0.55rem;
}
@media (max-width: 1119px) {
.hero-proof__app {
overflow: hidden;
}
.hero-proof__badges {
right: 1.25rem;
}
.hero-proof__badge--ready {
transform: none;
}
}
@media (max-width: 899px) {
.hero-proof {
gap: 10px;
}
.hero-proof__card {
min-height: 115px;
padding: 30px;
justify-content: center;
}
.hero-proof__card--featured {
padding-top: 30px;
min-height: 115px;
}
.hero-proof__card--featured .hero-proof__value {
margin-top: 25px;
}
.hero-proof__pulse {
top: 30px;
left: 30px;
width: min(100% - 60px, 298px);
}
.hero-proof__value {
font-size: 24px;
letter-spacing: -0.03em;
}
.hero-proof__label {
margin-top: 5px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.14em;
}
.hero-proof__app {
min-height: 0;
padding: 20px;
gap: 1rem;
overflow: hidden;
align-items: stretch;
}
.hero-proof__phone {
align-self: center;
width: min(100%, 316px);
}
.hero-proof__app .phone-mockup--hero {
width: 100%;
max-width: none;
margin: 0;
flex: 0 0 auto;
transform: none;
}
.hero-proof__badges {
display: none;
}
.hero-proof__app-stat {
align-self: stretch;
margin-top: 0.5rem;
padding: 0 10px 10px;
}
.hero-proof__app-stat .hero-proof__label {
margin-top: 5px;
}
}
.section--courses {
position: relative;
padding: var(--section-pad-y) 0;
border-bottom: 0;
}
.section--courses.section-bg--petrol,
.section--courses.section-bg--petrol-light {
color: var(--color-ademwit);
}
.courses-head {
text-align: center;
max-width: 630px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
color: var(--color-inkt);
}
.section--courses.section-bg--petrol .courses-head,
.section--courses.section-bg--petrol-light .courses-head {
color: var(--color-ademwit);
}
.courses-head__eyebrow {
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.4;
text-transform: uppercase;
color: var(--color-inkt);
}
.section--courses.section-bg--petrol .courses-head__eyebrow,
.section--courses.section-bg--petrol-light .courses-head__eyebrow {
color: var(--color-ademwit);
}
.courses-head__title {
margin: 0;
font-size: 44px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--color-inkt);
}
.section--courses.section-bg--petrol .courses-head__title,
.section--courses.section-bg--petrol-light .courses-head__title {
color: var(--color-ademwit);
}
.courses-head__intro {
margin: 0;
font-size: 17px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.55;
color: var(--color-inkt);
}
.section--courses.section-bg--petrol .courses-head__intro,
.section--courses.section-bg--petrol-light .courses-head__intro {
color: var(--color-ademwit);
}
.course-grid {
display: grid;
gap: 20px;
margin-top: 48px;
align-items: stretch;
}
@media (min-width: 800px) {
.course-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.course-card {
background: var(--color-ademwit);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
height: 100%;
}
.course-card__media {
position: relative;
flex: 0 0 auto;
height: 280px;
overflow: hidden;
background: var(--color-mist);
}
.course-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.course-card__label {
position: absolute;
left: 24px;
bottom: 24px;
z-index: 1;
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.course-card__label--light {
background: var(--color-ademwit);
color: var(--color-inkt);
}
.course-card__label--dark {
background: var(--color-petrol);
color: var(--color-ademwit);
}
.course-card__body {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1 1 auto;
padding: 32px 36px 36px;
min-height: 0;
}
.course-card__intro {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.course-card__title {
margin: 0;
font-size: 36px;
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.15;
color: var(--color-inkt);
}
.course-card__desc {
margin: 0;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.6;
color: var(--color-muted);
max-width: none;
}
.course-card__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 14px 0;
border-top: 1px solid var(--color-mist);
border-bottom: 1px solid var(--color-mist);
}
.course-card__amount {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-inkt);
line-height: 1.2;
}
.course-card__suffix {
font-size: 15px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--color-muted);
line-height: 1.5;
}
.course-card__usps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
flex: 1 1 auto;
}
.course-card__usp {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
margin: 0;
padding: 0;
color: var(--color-inkt);
font-size: 16px;
line-height: 1.6;
letter-spacing: 0;
}
.course-card__usp span {
flex: 1 1 auto;
min-width: 0;
}
.course-card__usp-icon {
width: 1em;
height: 1em;
flex: 0 0 auto;
margin-top: 3px;
font-size: 20px;
color: var(--color-petrol-light);
}
.course-card__cta {
margin-top: auto;
min-height: 56px;
}
@media (max-width: 799px) {
.section--courses {
padding: 4rem 0 5rem;
}
.courses-head__title {
font-size: clamp(2rem, 6vw, 44px);
}
.courses-head__intro {
font-size: 1.05rem;
}
.course-card__media {
height: 220px;
}
.course-card__label {
left: 16px;
bottom: 16px;
}
.course-card__body {
padding: 1.5rem 1.25rem 1.5rem;
gap: 1.25rem;
}
.course-card__intro {
gap: 6px;
}
.course-card__title,
.course-card__amount {
font-size: 2rem;
}
.course-card__usps {
gap: 8px;
}
.course-card__usp {
font-size: 15px;
}
.course-card__usp-icon {
font-size: 18px;
}
.course-card__cta {
min-height: 45px;
}
}
.section--steps {
background: var(--color-ademwit);
padding: var(--section-pad-y) 0;
border-bottom: 0;
}
.steps-head {
text-align: center;
max-width: 614px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
color: var(--color-inkt);
}
.steps-head__title {
margin: 0;
font-size: 48px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--color-inkt);
}
.steps-head__intro {
margin: 0;
font-size: 20px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-inkt);
}
.steps-grid {
display: grid;
gap: 40px;
margin-top: 80px;
}
@media (min-width: 900px) {
.steps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
}
.step-card {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.step-card__visual {
position: relative;
width: 161px;
height: 161px;
margin: 0 auto 40px;
border-radius: 50%;
background: var(--color-mist);
display: grid;
place-items: center;
overflow: visible;
}
.section-bg--mist .step-card__visual {
background: var(--color-ademwit);
}
.step-card__visual img {
position: relative;
width: 205px;
max-width: none;
height: auto;
object-fit: contain;
z-index: 1;
}
.step-card__title {
margin: 0 0 15px;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-petrol-light);
}
.step-card__body {
margin: 0;
max-width: 362px;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.proof-panel {
position: relative;
margin-top: 260px;
padding: 300px 50px 56px;
background: var(--color-mist);
max-width: 1026px;
margin-left: auto;
margin-right: auto;
}
.proof-panel__media {
position: absolute;
top: -140px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 100px);
max-width: 928px;
height: 380px;
margin: 0;
overflow: hidden;
}
.proof-panel__media img {
width: 100%;
height: 126.12%;
max-width: none;
object-fit: cover;
object-position: center top;
display: block;
position: relative;
top: -8.44%;
}
.proof-panel__body {
display: grid;
gap: 40px;
margin-top: 0;
padding: 0 30px;
}
@media (min-width: 900px) {
.proof-panel__body {
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 72px;
}
}
.proof-panel__eyebrow {
margin: 0 0 10px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-inkt);
}
.proof-panel__title {
margin: 0 0 40px;
font-size: 48px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.proof-panel__copy .btn {
min-height: 45px;
min-width: 194px;
}
.proof-panel__aside {
padding-top: 16px;
}
.proof-panel__pulse {
display: block;
width: 361px;
max-width: 100%;
height: auto;
margin: 0 0 50px;
}
.proof-panel__text {
margin: 0 0 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.45;
color: var(--color-inkt);
max-width: 391px;
}
.proof-panel__source {
margin: 0;
font-size: 14px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.4;
color: var(--color-petrol);
max-width: 390px;
}
@media (max-width: 899px) {
.section--steps {
padding: 4rem 0 5rem;
}
.steps-head__title {
font-size: clamp(2rem, 6vw, 48px);
}
.steps-head__intro {
font-size: 1.05rem;
}
.steps-grid {
margin-top: 3rem;
gap: 60px;
}
.proof-panel {
margin-top: calc(5rem + 80px);
padding: 140px 1.25rem 2.5rem;
}
.proof-panel__media {
top: -80px;
width: calc(100% - 2.5rem);
height: 200px;
}
.proof-panel__body {
margin-top: 0;
padding: 0;
}
.section--steps .proof-panel__body {
display: flex;
flex-direction: column;
gap: 0;
}
.section--steps .proof-panel__copy,
.section--steps .proof-panel__aside {
display: contents;
}
.section--steps .proof-panel__aside {
padding-top: 0;
}
.section--steps .proof-panel__eyebrow {
order: 1;
}
.section--steps .proof-panel__title {
order: 2;
font-size: clamp(1.75rem, 5vw, 48px);
max-width: none;
margin-bottom: 1.25rem;
}
.section--steps .proof-panel__pulse {
order: 3;
margin: 0 0 1.25rem;
}
.section--steps .proof-panel__text {
order: 4;
}
.section--steps .proof-panel__source {
order: 5;
}
.section--steps .proof-panel__copy .btn {
order: 6;
align-self: flex-start;
margin-top: 0.75rem;
}
.section--steps:has(+ .section--reviews) {
padding-bottom: 3.5rem;
}
}
.cta-section {
position: relative;
z-index: 2;
background: transparent;
}
.cta-section:not(.cta-section--faq-contact) {
margin: -70px 0 calc(var(--cta-footer-overlap) * -1);
padding: 70px 0 0;
background: transparent;
}
.cta-section:not(.cta-section--faq-contact)::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: var(--cta-footer-overlap);
left: 0;
z-index: -1;
pointer-events: none;
background: transparent;
}
.cta-section.section-bg--ademwit:not(.cta-section--faq-contact),
.cta-section.section-bg--mist:not(.cta-section--faq-contact),
.cta-section.section-bg--petrol:not(.cta-section--faq-contact),
.cta-section.section-bg--petrol-light:not(.cta-section--faq-contact),
.cta-section.section-bg--inherit:not(.cta-section--faq-contact),
.cta-section:not([class*=section-bg--]):not(.cta-section--faq-contact) {
background: transparent;
}
.cta-section.section-bg--ademwit:not(.cta-section--faq-contact)::before {
background: var(--color-ademwit);
}
.cta-section.section-bg--mist:not(.cta-section--faq-contact)::before {
background: var(--color-mist);
}
.cta-section.section-bg--petrol:not(.cta-section--faq-contact)::before {
background: var(--color-petrol);
}
.cta-section.section-bg--petrol-light:not(.cta-section--faq-contact)::before {
background: var(--color-petrol-light);
}
.section-bg--ademwit + .cta-section.section-bg--inherit:not(.cta-section--faq-contact)::before {
background: var(--color-ademwit);
}
.section-bg--mist + .cta-section.section-bg--inherit:not(.cta-section--faq-contact)::before {
background: var(--color-mist);
}
.section-bg--petrol + .cta-section.section-bg--inherit:not(.cta-section--faq-contact)::before {
background: var(--color-petrol);
}
.section-bg--petrol-light + .cta-section.section-bg--inherit:not(.cta-section--faq-contact)::before {
background: var(--color-petrol-light);
}
.cta-section:not([class*=section-bg--]):not(.cta-section--faq-contact)::before {
background: var(--color-petrol);
}
.cta-banner {
position: relative;
display: grid;
min-height: 463px;
background: #fff;
box-shadow: 0 18px 50px rgba(16, 22, 25, 0.14);
overflow: visible;
--cta-media-left: clamp(1.25rem, 4.3vw, 3.8125rem);
--cta-media-w: clamp(18rem, 36.5vw, 32.8125rem);
--cta-media-gap: clamp(1.25rem, 5.7vw, 5.125rem);
--cta-pad-right: clamp(1.5rem, 7.6vw, 6.8125rem);
}
@media (min-width: 1100px) {
.cta-banner {
grid-template-columns: minmax(0, calc(var(--cta-media-left) + var(--cta-media-w) + var(--cta-media-gap))) minmax(0, 1fr);
}
}
.cta-banner__media {
position: absolute;
top: -70px;
left: var(--cta-media-left);
width: var(--cta-media-w);
max-width: calc(100% - 4rem);
height: 483px;
overflow: hidden;
background: var(--color-mist);
z-index: 1;
}
.cta-banner__img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center top;
display: block;
}
.cta-banner__content {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 40px;
min-height: 463px;
padding: 38px var(--cta-pad-right) 38px 0;
box-sizing: border-box;
}
.cta-banner__title {
margin: 0;
font-size: 36px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-petrol);
max-width: 14ch;
}
.cta-banner__intro {
margin: 0;
max-width: 36ch;
font-size: 1.125rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-petrol);
}
.cta-banner__intro p {
margin: 0;
}
.cta-banner__intro p + p {
margin-top: 0.5em;
}
.cta-banner__intro a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.cta-banner__intro a:hover,
.cta-banner__intro a:focus-visible {
text-decoration-thickness: 2px;
}
.cta-banner__pills {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 16px 12px;
max-width: 100%;
}
.cta-banner__pills li {
display: inline-flex;
align-items: center;
gap: 8.5px;
margin: 0;
padding: 7px 20px;
min-height: 33px;
border-radius: 100px;
background: var(--color-mist);
color: var(--color-petrol);
font-size: 16px;
font-weight: 400;
letter-spacing: -0.03em;
}
.cta-banner__pills img {
width: 15px;
height: 13px;
flex: 0 0 auto;
}
.cta-banner__pills i,
.cta-banner__pills .icon {
width: 1em;
font-size: 15px;
line-height: 1;
text-align: center;
flex: 0 0 auto;
color: var(--color-petrol);
}
.cta-banner__bar {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 0;
width: 100%;
max-width: 472px;
min-height: 80px;
}
.cta-banner__bar--button-only {
grid-template-columns: 1fr;
}
.cta-banner__price {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-mist);
padding: 1rem 1.25rem;
min-width: 0;
}
.cta-banner__price-inner {
display: flex;
align-items: baseline;
gap: 12px;
white-space: nowrap;
}
.cta-banner__amount {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--color-petrol);
}
.cta-banner__suffix {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.03em;
color: var(--color-petrol);
}
.cta-banner__enroll,
.cta-banner__bar .btn {
min-width: 0;
min-height: 80px;
width: 100%;
border-radius: 0;
font-size: 16px;
}
@media (min-width: 901px) {
.cta-banner__enroll,
.cta-banner__bar .btn {
font-size: 18px;
}
}
.cta-banner__secondary {
margin: 0;
}
.cta-section--faq-contact {
position: relative;
overflow: visible;
clip-path: inset(-4rem 0 0 0);
margin-top: 0;
padding: 0 0 calc(var(--section-pad-y) + 0.5rem);
}
.cta-section--faq-contact:not([class*=section-bg--]) {
background: var(--color-ademwit);
}
.section-bg--ademwit + .cta-section--faq-contact.section-bg--inherit {
background: var(--color-ademwit);
}
.section-bg--mist + .cta-section--faq-contact.section-bg--inherit {
background: var(--color-mist);
}
.section-bg--petrol + .cta-section--faq-contact.section-bg--inherit {
background: var(--color-petrol);
color: var(--color-ademwit);
}
.section-bg--petrol-light + .cta-section--faq-contact.section-bg--inherit {
background: var(--color-petrol-light);
color: var(--color-ademwit);
}
.cta-faq__pulse-wrap {
position: absolute;
top: -4rem;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.cta-faq {
position: relative;
z-index: 1;
max-width: 56rem;
margin: 1.5rem auto 0;
min-height: 0;
padding-bottom: 0;
}
.cta-faq__pulse {
position: absolute;
right: 0;
top: 0;
z-index: 0;
width: min(48vw, 40rem);
max-width: none;
height: auto;
opacity: 0.55;
pointer-events: none;
}
.cta-faq__card {
position: relative;
z-index: 1;
box-sizing: border-box;
width: min(100%, 51.5625rem);
min-height: 16.7rem;
padding: 2rem 14rem 2.5rem 2.5rem;
background: var(--color-petrol);
color: var(--color-ademwit);
}
.cta-faq__title {
margin: 0;
max-width: 25.5rem;
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-ademwit);
}
.cta-faq__intro {
margin: 1.25rem 0 0;
max-width: 24rem;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-ademwit);
}
.cta-faq__intro p {
margin: 0;
}
.cta-faq__intro p + p {
margin-top: 0;
}
.cta-faq__intro a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.cta-faq__intro a:hover,
.cta-faq__intro a:focus-visible {
text-decoration-thickness: 2px;
}
.cta-faq__btn {
margin-top: 1.75rem;
min-height: 2.8125rem;
min-width: 9.875rem;
color: var(--color-petrol);
}
.cta-faq__phone {
position: absolute;
right: 0;
top: 50%;
bottom: auto;
z-index: 2;
width: min(58%, 30rem);
transform: translate(25%, -50%);
pointer-events: none;
filter: drop-shadow(0 14px 22px rgba(16, 22, 25, 0.16));
}
.cta-faq__phone-img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 899px) {
.cta-section--faq-contact {
clip-path: none;
padding: 1.5rem 0 1.25rem;
}
.cta-faq {
margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
min-height: 0;
}
.cta-faq__pulse-wrap,
.cta-faq__phone {
display: none;
}
.cta-faq__card {
width: 100%;
padding: 2rem 1.5rem 2.25rem;
text-align: center;
}
.cta-faq__intro {
margin-left: auto;
margin-right: auto;
font-size: 1.125rem;
}
}
@media (max-width: 899px) {
.faq-home {
padding-bottom: 6rem;
}
}
@media (max-width: 1099px) {
.cta-section:not(.cta-section--faq-contact) {
margin: -27px 0 calc(var(--cta-footer-overlap) * -1);
padding: 27px 0 0;
}
.cta-banner {
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 1.25rem;
}
.cta-banner__media {
position: relative;
top: 0;
left: auto;
transform: none;
width: calc(100% - 40px);
max-width: none;
height: auto;
aspect-ratio: 310 / 143;
margin: -27px auto 0;
}
.cta-banner__content {
grid-column: auto;
min-height: 0;
width: 100%;
align-items: center;
text-align: center;
padding: 2.5rem 20px 0;
gap: 1.875rem;
}
.cta-banner__title {
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.03em;
max-width: none;
text-align: center;
}
.cta-banner__intro {
max-width: none;
text-align: center;
font-size: 1.125rem;
}
.cta-banner__pills {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
gap: 10px;
max-width: none;
}
.cta-banner__pills li {
position: relative;
display: flex;
width: 100%;
box-sizing: border-box;
justify-content: center;
align-items: center;
text-align: center;
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.cta-banner__pills img {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.cta-banner__pills i {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.cta-banner__pills span {
text-align: center;
}
.cta-banner__bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
width: 100%;
max-width: none;
min-height: 0;
margin-top: 0.625rem;
}
.cta-banner__price {
background: transparent;
padding: 0;
}
.cta-banner__price-inner {
gap: 0.75rem;
}
.cta-banner__amount {
font-size: 36px;
}
.cta-banner__enroll,
.cta-banner__bar .btn {
width: 100%;
min-height: 45px;
}
}
.section--hero-info {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
.section--hero-info-compose {
position: relative;
z-index: 0;
padding-bottom: 0;
overflow: hidden;
}
.hero-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 3.75rem;
}
.section--hero-info-compose .hero-info {
gap: 3rem;
}
.hero-info__copy {
width: 100%;
max-width: 42rem;
text-align: center;
}
.hero-info__eyebrow {
margin: 0 0 1.5rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
}
.hero-info__title {
margin: 0;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.hero-info__lead {
margin: 1.25rem 0 0;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.hero-info__actions {
margin-top: 1.5rem;
}
.hero-info__compose {
position: relative;
width: 100%;
max-width: 80rem;
aspect-ratio: 1280 / 560;
margin: 0 auto;
}
.hero-info__rings {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
}
.hero-info__media {
position: absolute;
left: 50%;
bottom: 0;
z-index: 1;
width: 28.8%;
max-width: 23rem;
height: 100%;
transform: translateX(-50%);
pointer-events: none;
}
.hero-info__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.hero-info__card {
position: absolute;
z-index: 2;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
width: 21.875%;
max-width: 17.5rem;
min-width: 14rem;
padding: 1.25rem 1.5rem;
background: var(--color-white);
box-shadow: 0 16px 40px rgba(13, 59, 69, 0.14);
}
.hero-info__card-icon {
flex-shrink: 0;
font-size: 1.75rem;
line-height: 1;
color: var(--color-petrol-light);
}
.hero-info__card-text {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.hero-info__card-value {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-inkt);
line-height: 1.25;
}
.hero-info__card-label {
margin: 0;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--color-inkt);
line-height: 1.45;
opacity: 0.78;
}
.hero-info__card--1 {
left: 9.4%;
top: 19.6%;
}
.hero-info__card--2 {
left: 68.75%;
top: 12.5%;
}
.hero-info__card--3 {
left: 4.7%;
top: 58.9%;
}
.hero-info__card--4 {
left: 73.4%;
top: 53.6%;
}
@media (max-width: 900px) {
.section--hero-info-compose,
.section.section--hero-info-compose.section-bg--ademwit:has(+ .section.section-bg--mist),
.section.section--hero-info-compose.section-bg--ademwit:has(+ .section-bg--mist) {
overflow: visible;
padding-bottom: 4rem;
}
.hero-info {
gap: 2.5rem;
}
.hero-info__compose {
aspect-ratio: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
max-width: 36rem;
}
.hero-info__rings {
display: none;
}
.hero-info__media {
position: relative;
left: auto;
bottom: auto;
width: 100%;
max-width: 16rem;
height: auto;
margin: 0 auto;
transform: none;
grid-column: 1 / -1;
aspect-ratio: 369 / 480;
}
.hero-info__card {
position: relative;
left: auto !important;
top: auto !important;
width: 100%;
max-width: none;
min-width: 0;
padding: 1.25rem;
}
}
@media (max-width: 520px) {
.hero-info__compose {
grid-template-columns: 1fr;
}
}
.section--text-only {
padding: calc(var(--section-pad-y) + 2rem) 0 var(--section-pad-y);
}
.text-only {
width: min(100% - (var(--gutter) * 2), 599px);
margin-inline: auto;
color: var(--color-inkt);
}
.text-only__title {
margin: 0;
font-size: clamp(2rem, 4vw, 48px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.text-only__intro {
margin: 1.5rem 0 0;
font-size: 1.25rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.5;
color: var(--color-inkt);
}
.text-only__body {
margin: 1.5rem 0 0;
font-size: 1.25rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.5;
color: var(--color-inkt);
}
.text-only__body > *:first-child {
margin-top: 0;
}
.text-only__body > *:last-child {
margin-bottom: 0;
}
.text-only__body p {
margin: 0 0 1.5rem;
}
.text-only__body p:last-child {
margin-bottom: 0;
}
.section--legal-text {
padding: calc(var(--section-pad-y) + 2rem) 0 var(--section-pad-y);
}
.legal-text {
width: min(100% - (var(--gutter) * 2), 720px);
margin-inline: auto;
color: var(--color-inkt);
}
.legal-text__title {
margin: 0;
font-size: clamp(1.75rem, 3.5vw, 2rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-inkt);
}
.legal-text__download-wrap {
margin: 0.75rem 0 0;
}
.legal-text__download {
display: inline-block;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.4;
color: var(--color-link);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.legal-text__download:hover,
.legal-text__download:focus-visible {
color: var(--color-petrol-light);
}
.legal-text__intro {
margin: 1.25rem 0 0;
font-size: 1.125rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.55;
color: var(--color-inkt);
}
.legal-text__body {
margin: 1.25rem 0 0;
font-size: 1.125rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.55;
color: var(--color-inkt);
}
.legal-text__body > *:first-child {
margin-top: 0;
}
.legal-text__body > *:last-child {
margin-bottom: 0;
}
.legal-text__body p {
margin: 0 0 1.25rem;
}
.legal-text__body p:last-child {
margin-bottom: 0;
}
.legal-text__body h2,
.legal-text__body h3,
.legal-text__body h4 {
margin: 2rem 0 0.75rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.25;
color: var(--color-inkt);
}
.legal-text__body h2 {
font-size: 1.375rem;
}
.legal-text__body h3 {
font-size: 1.25rem;
}
.legal-text__body h4 {
font-size: 1.125rem;
}
.legal-text__body ul,
.legal-text__body ol {
margin: 0 0 1.25rem;
padding-left: 1.25rem;
}
.legal-text__body li + li {
margin-top: 0.35rem;
}
@media (max-width: 899px) {
.section--text-only,
.section--legal-text {
padding: 5rem 0 4rem;
}
}
.section--quote-image,
.section--pill-grid {
padding-top: 0;
padding-bottom: var(--section-pad-y);
}
.section--quote-image {
padding-top: var(--section-pad-y);
}
.section--steps.section-bg--mist + .section--quote-image {
padding-top: 0;
}
.quote-image {
display: grid;
gap: 2.5rem 3rem;
align-items: center;
background: var(--color-ademwit);
padding: clamp(2rem, 5vw, 8rem) clamp(1.5rem, 6vw, 6.9rem);
overflow: visible;
}
@media (min-width: 900px) {
.quote-image {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
}
.quote-image__head,
.pill-grid__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
}
.quote-image__head {
margin-bottom: 0;
}
.quote-image__badge,
.pill-grid__badge {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 33px;
padding: 7px 20px;
margin-bottom: 0;
border-radius: 100px;
background: var(--color-mist);
font-size: 1rem;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.quote-image__badge img,
.quote-image__badge .icon,
.pill-grid__badge img,
.pill-grid__badge .icon {
width: 1em;
height: 1em;
font-size: 15px;
flex: 0 0 auto;
color: inherit;
}
.quote-image__title,
.pill-grid__title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.quote-image__intro,
.quote-image__body,
.pill-grid__intro {
margin: 1rem 0 0;
font-size: 1rem;
line-height: 1.875;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.quote-image__body > *:first-child {
margin-top: 0;
}
.quote-image__media {
position: relative;
}
.quote-image__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 586 / 348;
object-fit: cover;
}
.quote-image__quote {
position: absolute;
right: -1.5rem;
bottom: -1.5rem;
box-sizing: border-box;
width: min(100%, 372px);
padding: 1.75rem 2rem;
background: var(--color-ademwit);
box-shadow: 0 10px 20px rgba(23, 90, 104, 0.15);
}
.quote-image__quote p {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.45;
color: var(--color-petrol-light);
}
.pill-grid {
position: relative;
background: var(--color-ademwit);
padding: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 6vw, 6.9rem) clamp(2.5rem, 5vw, 5rem);
overflow: hidden;
}
.pill-grid__pulse {
position: absolute;
right: -2%;
bottom: -12%;
width: min(50%, 400px);
height: auto;
opacity: 0.5;
pointer-events: none;
z-index: 0;
user-select: none;
}
.pill-grid__head,
.pill-grid__intro,
.pill-grid__list {
position: relative;
z-index: 1;
}
.pill-grid__head {
margin-bottom: 2rem;
}
.pill-grid__list {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: grid;
gap: 0.85rem 2rem;
}
@media (min-width: 800px) {
.pill-grid__list {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.pill-grid__list li {
display: inline-flex;
align-items: center;
gap: 0.55rem;
position: relative;
padding-left: 0;
margin: 0;
font-size: 1rem;
line-height: 1.875rem;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.pill-grid__list li::before {
display: none;
}
.pill-grid__list img {
flex: 0 0 auto;
width: 15px;
height: 13px;
}
.pill-grid__list i,
.pill-grid__list .icon {
flex: 0 0 auto;
width: 1em;
font-size: 15px;
line-height: 1;
text-align: center;
color: var(--color-petrol-light);
}
.section--practice-split {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
.section--steps.section-bg--mist + .section--practice-split {
padding-top: 0;
}
.practice-split {
display: grid;
gap: 2.5rem 5rem;
align-items: center;
background: var(--color-ademwit);
padding: clamp(2.5rem, 6vw, 7.5rem) clamp(1.5rem, 5vw, 5rem);
}
@media (min-width: 900px) {
.practice-split {
grid-template-columns: minmax(0, 522px) minmax(0, 1fr);
}
}
.practice-split__copy {
display: flex;
flex-direction: column;
gap: 2rem;
min-width: 0;
}
.practice-split__eyebrow {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-petrol-light);
line-height: 1.4;
}
.practice-split__title {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--color-inkt);
}
.practice-split__eyebrow + .practice-split__title {
margin-top: -1.25rem;
}
.practice-split__intro {
margin: 0;
font-size: 1.0625rem;
line-height: 1.55;
color: #3e4f52;
}
.practice-split__eyebrow + .practice-split__title + .practice-split__intro,
.practice-split__title + .practice-split__intro {
margin-top: -0.75rem;
}
.practice-split__card {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.75rem;
background: var(--color-white);
}
.practice-split__card-title {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-petrol-light);
line-height: 1.4;
}
.practice-split__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.practice-split__list li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: #3e4f52;
}
.practice-split__list .icon,
.practice-split__list img {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 0.15em;
color: var(--color-petrol-light);
}
.practice-split__media {
min-width: 0;
align-self: stretch;
display: flex;
}
.practice-split__img {
display: block;
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
}
.section--features {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
.features-head {
margin: 0 0 2.5rem;
text-align: center;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.features-intro {
margin: -1.25rem auto 2.5rem;
max-width: 40rem;
text-align: center;
font-size: 1.125rem;
line-height: 1.6;
}
.features-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.features-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
.features-card {
background: var(--color-mist);
padding: 2.5rem 2rem 2rem;
}
.features-card__title {
display: inline-flex;
align-items: center;
margin: 0 0 1.5rem;
min-height: 33px;
padding: 7px 20px;
border-radius: 100px;
background: #fff;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-inkt);
}
.features-card__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
padding-left: 15px;
}
.features-card__list li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
font-size: 1rem;
line-height: 1.875;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.features-card__dot {
flex: 0 0 auto;
width: 10px;
height: 10px;
margin-top: 0.55rem;
background: var(--color-petrol-light);
}
.features-card__body {
margin: 0;
font-size: 1rem;
line-height: 1.6;
}
.section--hero-info-phone {
overflow: hidden;
padding-top: var(--section-pad-y);
padding-bottom: 0;
}
.hero-info--phone {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
width: 100%;
}
.hero-info--phone .hero-info__copy {
max-width: 582px;
text-align: left;
}
.hero-info--phone .hero-info__eyebrow {
margin-bottom: 1.25rem;
}
.hero-info__phone {
width: 700px;
max-width: 100%;
margin: 0 auto;
margin-bottom: -15rem;
}
.hero-info__phone .phone-mockup--tall,
.phone-pills__phone .phone-mockup--tall {
width: 100%;
max-width: none;
}
.section--hero-info-phone .phone-mockup--tall {
background: var(--color-ademwit);
}
.section--phone-pills.section-bg--mist .phone-mockup--tall {
background: var(--color-mist);
}
.section--phone-pills:not([class*=section-bg--]) .phone-mockup--tall {
background: transparent;
}
@media (max-width: 899px) {
.hero-info--phone {
flex-direction: column;
align-items: stretch;
gap: 2.5rem;
overflow: hidden;
}
.hero-info--phone .hero-info__copy {
max-width: none;
}
.hero-info__phone {
width: min(100%, 500px);
}
}
.section--phone-pills {
padding-top: var(--section-pad-y);
padding-bottom: 0;
overflow: visible;
}
.section--phone-pills-no-phone {
padding-bottom: var(--section-pad-y);
}
.phone-pills {
display: grid;
gap: 2.5rem;
align-items: start;
overflow: hidden;
min-width: 0;
}
@media (min-width: 900px) {
.phone-pills {
grid-template-columns: minmax(0, 1.15fr) 316px;
gap: 3rem 4rem;
align-items: end;
}
.phone-pills--no-phone {
align-items: start;
}
}
.phone-pills__copy {
min-width: 0;
padding-bottom: 8rem;
}
.phone-pills--no-phone .phone-pills__copy {
padding-bottom: 0;
}
.phone-pills__eyebrow {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
}
.phone-pills__eyebrow + .phone-pills__title {
margin-top: 0.2rem;
}
.phone-pills__title {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.phone-pills__intro,
.phone-pills__body {
margin: 1.25rem 0 0;
font-size: 1.125rem;
line-height: 1.6;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.phone-pills__body > *:first-child {
margin-top: 0;
}
.phone-pills__list {
list-style: none;
margin: 1.75rem 0 0;
padding: 0;
display: grid;
gap: calc(0.75rem + 2px) 1.25rem;
}
.phone-pills__list--cols-2 {
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.phone-pills__list--cols-2 {
grid-template-columns: 1fr 1fr;
}
}
.phone-pills__list li {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
min-height: 33px;
padding: 7px 20px;
border-radius: 100px;
background: var(--color-mist);
font-size: 1rem;
line-height: 1.4;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
@media (max-width: 899px) {
.phone-pills__list {
gap: 0.5rem;
}
.phone-pills__list li {
padding: 5px 14px;
}
}
@media (max-width: 699px) {
.phone-pills__list {
grid-template-columns: 1fr;
}
.phone-pills__copy {
padding-bottom: 0;
}
.phone-pills__list li {
display: flex;
width: 100%;
max-width: none;
box-sizing: border-box;
min-height: 2.5rem;
justify-content: flex-start;
text-align: left;
}
}
.section-bg--mist .phone-pills__list li {
background: var(--color-ademwit);
}
.phone-pills__list img,
.phone-pills__list i,
.phone-pills__list .icon {
flex: 0 0 auto;
width: 1em;
height: 1em;
font-size: 15px;
line-height: 1;
text-align: center;
color: var(--color-petrol-light);
}
.phone-pills__phone {
justify-self: center;
width: 500px;
margin-bottom: -15rem;
}
@media (max-width: 899px) {
.phone-pills__phone {
width: min(100%, 500px);
max-width: 100%;
}
}
@media (min-width: 900px) {
.phone-pills__phone .phone-mockup--tall {
transform: translateX(var(--phone-mockup-legacy-shift));
}
}
.section--timeline {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
.section--timeline.section-bg--petrol,
.section--timeline.section-bg--petrol-light {
color: var(--color-ademwit);
}
.timeline-head {
margin: 0 0 2.5rem;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
color: inherit;
}
.section--timeline.section-bg--petrol .timeline-head,
.section--timeline.section-bg--petrol-light .timeline-head {
color: var(--color-ademwit);
}
.timeline__cols {
display: none;
grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.4fr);
gap: 1rem 1.5rem;
margin-bottom: 1.25rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.85;
}
@media (min-width: 800px) {
.timeline__cols {
display: grid;
}
.timeline__cols span:first-child {
grid-column: 2;
}
}
.timeline__list {
list-style: none;
margin: 0;
padding: 0;
}
.timeline__row {
display: grid;
gap: 0.35rem 1.5rem;
padding: 1.35rem 0;
border-top: 1px solid rgba(241, 244, 244, 0.25);
grid-template-columns: 3rem minmax(0, 1fr);
grid-template-areas: "num moment" "num event";
}
@media (min-width: 800px) {
.timeline__row {
grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.4fr);
grid-template-areas: "num moment event";
align-items: start;
gap: 1rem 1.5rem;
}
}
.timeline__row:last-child {
border-bottom: 1px solid rgba(241, 244, 244, 0.25);
}
.timeline__num {
grid-area: num;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.03em;
color: #f1f4f4b3;
}
.timeline__moment {
grid-area: moment;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.03em;
}
.timeline__event {
grid-area: event;
font-size: 1rem;
line-height: 1.6;
letter-spacing: -0.03em;
opacity: 0.95;
}
.section--comparison {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
color: var(--color-inkt);
}
.comparison__header {
max-width: 47.5rem;
margin-bottom: 1.25rem;
}
.comparison__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-petrol-light);
}
.comparison__title {
margin: 0 0 0.5rem;
font-size: clamp(1.35rem, 5vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-inkt);
}
.comparison__intro {
margin: 0;
max-width: 47.5rem;
font-size: 0.9375rem;
line-height: 1.45;
color: var(--color-muted);
}
.comparison__table {
display: none;
width: 100%;
}
.comparison__row {
display: grid;
grid-template-columns: minmax(5.25rem, 0.72fr) minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
}
.comparison__cell {
display: flex;
align-items: center;
padding: 0.5rem 0.4rem;
min-width: 0;
}
.comparison__cell--topic {
border-bottom: 1px solid var(--color-mist);
padding-left: 0;
}
.comparison__cell--classic {
border-bottom: 1px solid var(--color-mist);
color: var(--color-muted);
}
.comparison__cell--ours {
background: var(--color-petrol);
color: var(--color-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-right: 0.5rem;
}
.comparison__row--head .comparison__cell--topic,
.comparison__row--head .comparison__cell--classic,
.comparison__row--action .comparison__cell--topic,
.comparison__row--action .comparison__cell--classic {
border-bottom: 0;
}
.comparison__row--action .comparison__cell--ours {
border-bottom: 0;
}
.comparison__row--head .comparison__cell {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.comparison__row--action .comparison__cell {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.comparison__topic {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-inkt);
}
.comparison__classic-label {
font-size: 0.75rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-muted);
}
.comparison__classic,
.comparison__ours {
font-size: 0.75rem;
line-height: 1.35;
}
.comparison__classic {
font-weight: 400;
}
.comparison__ours {
font-weight: 600;
}
.comparison__logo {
display: block;
width: 3.5rem;
height: auto;
}
.comparison__cta {
display: inline-flex;
width: 100%;
justify-content: center;
text-align: center;
padding: 0.55rem 0.65rem;
font-size: 0.8125rem;
line-height: 1.2;
}
.comparison__stacks {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.comparison__stack {
padding: 0.85rem 1rem;
}
.comparison__stack--classic {
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--color-mist);
color: var(--color-muted);
}
.comparison__stack--ours {
background: var(--color-petrol);
color: var(--color-white);
}
.comparison__stack-label {
margin: 0 0 0.65rem;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-muted);
}
.comparison__logo--stack {
width: 4.75rem;
margin: 0 0 0.65rem;
}
.comparison__stack-list {
margin: 0;
padding: 0 0 0 1.1rem;
list-style: disc;
}
.comparison__stack-list li {
margin: 0;
padding: 0.2rem 0;
font-size: 0.8125rem;
line-height: 1.4;
}
.comparison__stack--classic .comparison__stack-list li {
font-weight: 400;
}
.comparison__stack--ours .comparison__stack-list li {
font-weight: 600;
}
.comparison__stack-list li + li {
margin-top: 0.15rem;
}
.comparison__cta--stack {
margin-top: 0.25rem;
}
@media (min-width: 600px) {
.comparison__cell {
padding: 0.75rem 0.85rem;
}
.comparison__cell--topic {
padding-left: 0.85rem;
}
.comparison__topic,
.comparison__classic,
.comparison__ours {
font-size: 0.875rem;
}
.comparison__classic-label {
font-size: 0.9375rem;
}
.comparison__logo {
width: 4.25rem;
}
.comparison__row {
grid-template-columns: minmax(7rem, 0.65fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
}
.comparison__stack {
padding: 1rem 1.15rem;
}
.comparison__stack-list li {
font-size: 0.875rem;
}
.comparison__logo--stack {
width: 5.2rem;
}
}
@media (min-width: 900px) {
.comparison__header {
margin-bottom: 3.5rem;
}
.comparison__eyebrow {
margin: 0 0 1rem;
font-size: 0.8125rem;
}
.comparison__intro {
font-size: 1.1875rem;
line-height: 1.55;
}
.comparison__table {
display: block;
}
.comparison__stacks {
display: none;
}
.comparison__row {
grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
}
.comparison__cell {
padding: 1.375rem 1.75rem;
}
.comparison__row--head .comparison__cell,
.comparison__row--action .comparison__cell {
padding: 1.75rem;
}
.comparison__topic {
font-size: 1rem;
line-height: 1.5;
}
.comparison__classic-label {
font-size: 1.1875rem;
}
.comparison__classic,
.comparison__ours {
font-size: 1.0625rem;
line-height: 1.5;
}
.comparison__logo {
width: 5.2rem;
}
.comparison__cta {
padding: unset;
font-size: unset;
line-height: unset;
}
}
.hero-section--split {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
overflow: hidden;
}
.hero-split {
display: grid;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 900px) {
.hero-split {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
gap: 3rem 4rem;
}
}
.hero-split__copy {
max-width: 582px;
}
.hero-split__eyebrow {
margin: 0 0 1.25rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
}
.hero-split__title {
margin: 0;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.hero-split__lead {
margin: 1.25rem 0 0;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.hero-split__actions {
margin-top: 2rem;
}
.hero-split__media {
justify-self: stretch;
width: 100%;
max-width: 586px;
margin: 0 auto;
aspect-ratio: 586 / 348;
overflow: hidden;
background: var(--color-mist);
}
.hero-split__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.section--features-showcase {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
.features-showcase__head {
margin: 0 0 2.5rem;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.features-showcase__intro {
margin: -1.25rem 0 2.5rem;
max-width: 40rem;
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-inkt);
}
.features-showcase {
display: grid;
gap: 2.5rem;
}
.features-showcase__card {
display: grid;
gap: 2rem;
align-items: center;
padding: clamp(1.5rem, 4vw, 3rem);
background: var(--color-ademwit);
overflow: visible;
}
@media (min-width: 900px) {
.features-showcase__card {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 3rem 4rem;
}
}
.features-showcase__title-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
.features-showcase__num {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 33px;
padding: 7px 16px;
border-radius: 100px;
background: var(--color-mist);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.features-showcase__num .icon {
font-size: 15px;
color: inherit;
}
.section-bg--mist .features-showcase__num {
background: var(--color-mist);
}
.features-showcase__title {
margin: 0;
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-petrol);
}
.features-showcase__body {
margin: 1.25rem 0 0;
font-size: 1.125rem;
line-height: 1.6;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.features-showcase__media {
position: relative;
overflow: visible;
background: var(--color-mist);
aspect-ratio: 586 / 348;
}
.features-showcase__media--laptop {
aspect-ratio: 787 / 519;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.features-showcase__media--laptop .laptop-mockup--features {
width: 100%;
max-width: 100%;
height: auto;
}
.section-bg--mist .features-showcase__media {
background: var(--color-mist);
}
.section-bg--mist .features-showcase__media--laptop {
background: transparent;
}
.features-showcase__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.features-showcase__heartbar {
position: absolute;
bottom: 0.5rem;
z-index: 2;
width: min(48%, 269px);
pointer-events: none;
line-height: 0;
}
.features-showcase__heartbar--bottomleft {
left: -1.5rem;
right: auto;
}
.features-showcase__heartbar--bottomright {
right: -1.5rem;
left: auto;
}
.features-showcase__heartbar-img {
display: block;
width: 100%;
height: auto;
}
.features-showcase__float {
position: absolute;
z-index: 2;
box-sizing: border-box;
pointer-events: none;
text-align: left;
}
.features-showcase__float--black {
top: 1.25rem;
left: 8%;
width: min(48%, 229px);
padding: 1.1rem 1.2rem 1.15rem;
background: #161b1d;
box-shadow: 0 10px 24px rgba(16, 22, 25, 0.22);
color: #fff;
}
.features-showcase__float-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.25;
color: #fff;
}
.features-showcase__float--black .features-showcase__float-detail {
margin: 0.55rem 0 0;
font-size: 0.8125rem;
line-height: 1.4;
color: rgba(241, 244, 244, 0.72);
}
.features-showcase__float--white {
left: 6%;
bottom: -1.25rem;
width: min(58%, 338px);
padding: 1.25rem 1.35rem 1.1rem;
background: #fff;
box-shadow: 0 10px 24px rgba(16, 22, 25, 0.16);
color: var(--color-inkt);
}
.features-showcase__float-kicker {
margin: 0;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8a9699;
line-height: 1.3;
}
.features-showcase__float-row {
display: flex;
align-items: flex-end;
gap: 0.75rem;
margin-top: 0.65rem;
}
.features-showcase__float-pct {
margin: 0;
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.95;
color: var(--color-puls);
}
.features-showcase__float--white .features-showcase__float-detail {
margin: 0;
font-size: 0.8125rem;
line-height: 1.35;
color: var(--color-inkt);
}
.features-showcase__float-pulse {
display: block;
width: 100%;
max-width: 220px;
height: auto;
margin-top: 0.85rem;
}
@media (max-width: 899px) {
.features-showcase__heartbar {
bottom: 0.25rem;
width: min(62%, 220px);
}
.features-showcase__heartbar--bottomleft {
left: 0.5rem;
right: auto;
}
.features-showcase__heartbar--bottomright {
right: 0.5rem;
left: auto;
}
.features-showcase__float--black {
top: 0.75rem;
left: 0.75rem;
width: min(70%, 220px);
}
.features-showcase__float--white {
left: 0.75rem;
bottom: -0.75rem;
width: min(85%, 300px);
}
}
.section--pills-quote {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
.pills-quote {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.pills-quote__title {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.pills-quote__row {
display: grid;
gap: 2.5rem;
align-items: start;
}
@media (min-width: 900px) {
.pills-quote__row {
grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.85fr);
gap: 3rem 4rem;
}
}
.pills-quote__intro {
margin: 0;
font-size: 1.125rem;
line-height: 1.6;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.pills-quote__copy .phone-pills__list {
margin-top: 1.75rem;
}
.pills-quote__card {
box-sizing: border-box;
padding: 1.75rem 2rem;
background: var(--color-mist);
}
.pills-quote__card-eyebrow {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.45;
color: var(--color-petrol-light);
}
.pills-quote__card-body {
margin: 1rem 0 0;
font-size: 1rem;
line-height: 1.6;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.hero-section--centered-stats {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: 4rem;
padding-bottom: var(--section-pad-y);
}
@media (min-width: 901px) {
body.has-hero-overlay--about .hero-section--centered-stats {
padding-top: calc(var(--header-h) + 3rem);
}
}
.hero-section--centered-stats.section-bg--petrol {
--hero-about-glow-color: color-mix(in srgb, var(--color-petrol-light) 70%, white 30%);
--hero-about-glow-opacity: 0.55;
--hero-about-glow-size: 70% 55%;
--hero-about-glow-position: 50% 42%;
color: var(--color-ademwit);
}
.hero-section--centered-stats.section-bg--petrol::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse var(--hero-about-glow-size) at var(--hero-about-glow-position),
var(--hero-about-glow-color) 0%,
transparent 70%);
opacity: var(--hero-about-glow-opacity);
}
.hero-about {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 3.5rem;
align-items: center;
}
.hero-about__copy {
max-width: 40rem;
margin: 0 auto;
text-align: center;
}
.hero-about__eyebrow {
margin: 0 0 1rem;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ademwit);
}
.hero-about__title {
margin: 0;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--color-white);
}
.hero-about__lead {
margin: 1.5rem auto 0;
max-width: 36rem;
font-size: 1.125rem;
line-height: 1.55;
letter-spacing: -0.02em;
color: color-mix(in srgb, var(--color-white) 76%, transparent);
}
.hero-about__actions {
margin-top: 2rem;
}
@media (max-width: 599px) {
.hero-about__actions {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 20rem;
margin-left: auto;
margin-right: auto;
}
.hero-about__actions .btn {
width: 100%;
}
}
.hero-about__cta-secondary {
--btn-bg: transparent;
--btn-bg-hover: color-mix(in srgb, var(--color-white) 12%, transparent);
background-color: transparent;
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
transparent 50%,
transparent 100%);
border: 1px solid var(--color-white);
color: var(--color-white);
}
.hero-about__cta-secondary:hover,
.hero-about__cta-secondary:focus-visible {
border-color: var(--color-white);
color: var(--color-white);
}
.hero-about__photos {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
width: 100%;
}
@media (min-width: 800px) {
.hero-about__photos {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
}
.hero-about__photo {
position: relative;
margin: 0;
overflow: hidden;
aspect-ratio: 4 / 5;
background: color-mix(in srgb, var(--color-petrol) 80%, black 20%);
}
@media (max-width: 799px) {
.hero-about__photo {
aspect-ratio: 16 / 10;
}
}
.hero-about__photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-about__photo-label {
position: absolute;
left: 1.25rem;
bottom: 1.25rem;
margin: 0;
padding: 0.5rem 0.75rem;
border-radius: 100px;
background: var(--color-white);
color: var(--color-petrol);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0;
max-width: calc(100% - 2.5rem);
}
.hero-section--centered-stats.section-bg--ademwit {
background: var(--color-ademwit);
color: var(--color-inkt);
}
.hero-section--centered-stats.section-bg--ademwit .hero-about__eyebrow {
color: var(--color-petrol);
}
.hero-section--centered-stats.section-bg--ademwit .hero-about__title {
color: var(--color-inkt);
}
.hero-section--centered-stats.section-bg--ademwit .hero-about__lead {
color: var(--color-inkt);
}
.hero-section--centered-stats.section-bg--ademwit .hero-about__cta-secondary {
border-color: var(--color-petrol);
color: var(--color-petrol);
}
.hero-section--course {
padding-top: var(--section-pad-y);
padding-bottom: 0;
overflow: hidden;
position: relative;
z-index: 0;
background: var(--color-ademwit);
}
.hero-course {
display: flex;
flex-direction: column;
gap: 3.5rem;
align-items: stretch;
width: 100%;
max-width: 52rem;
margin-inline: auto;
}
.hero-course__copy {
max-width: 36rem;
text-align: left;
}
.hero-course__eyebrow {
margin: 0 0 1rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
}
.hero-course__title {
margin: 0;
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.hero-course__lead {
margin: 1.25rem 0 0;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.hero-course__cta {
margin-top: 1.75rem;
}
.hero-course__price {
margin: 1.25rem 0 0;
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: -0.03em;
color: var(--color-petrol-light);
}
.hero-course__visual {
position: relative;
isolation: isolate;
overflow: visible;
min-height: 0;
padding-bottom: 0;
}
.hero-course__stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 23.25rem));
column-gap: 2.5rem;
row-gap: 1.375rem;
width: 100%;
max-width: 48.5rem;
margin: 0;
padding-bottom: 5.625rem;
}
.hero-course__card {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-height: 9.5rem;
padding: 2.5rem;
background: var(--color-white);
box-shadow: 0 10px 20px rgba(23, 90, 104, 0.1);
}
.hero-course__card-top {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.25rem;
}
.hero-course__card-icon {
flex-shrink: 0;
font-size: 1.75rem;
line-height: 1;
color: var(--color-petrol-light);
}
.hero-course__card-value {
margin: 0;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.25;
color: var(--color-petrol-light);
}
.hero-course__card-label {
margin: 0;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.4;
color: var(--color-petrol-light);
text-transform: uppercase;
}
.hero-course__card--2,
.hero-course__card--4 {
transform: translateY(5.625rem);
}
.hero-course__phone {
position: absolute;
left: 100%;
transform: translateX(-50%);
top: auto;
bottom: -15rem;
z-index: 2;
width: min(70%, 38rem);
pointer-events: none;
}
.hero-course__phone .phone-mockup--course {
width: 100%;
max-width: none;
transform: rotate(7.13deg);
transform-origin: center bottom;
}
.hero-section--course + .section--course-detail {
margin-top: -2rem;
}
@media (max-width: 899px) {
.hero-course {
max-width: none;
}
.hero-course__visual {
min-height: 0;
padding-bottom: 0;
}
.hero-course__stats {
grid-template-columns: repeat(2, minmax(0, 17.25rem));
justify-content: center;
width: 100%;
max-width: none;
column-gap: 0.625rem;
row-gap: 0.625rem;
padding-bottom: 0;
}
.hero-course__card {
min-height: 0;
width: 100%;
padding: 1.875rem;
gap: 0.5rem;
}
.hero-course__card--2,
.hero-course__card--4 {
transform: none;
}
.hero-course__card-value {
font-size: 1.5rem;
}
.hero-course__card-label {
font-size: 0.8125rem;
}
.hero-course__phone {
display: none;
}
.hero-section--course + .section--course-detail {
margin-top: 0;
}
}
@media (max-width: 480px) {
.hero-course__card {
padding: 1.25rem;
gap: 0.4rem;
}
.hero-course__card-top {
gap: 0.75rem;
}
.hero-course__card-icon {
font-size: 1.25rem;
}
.hero-course__card-value {
font-size: 1.25rem;
}
.hero-course__card-label {
font-size: 0.6875rem;
letter-spacing: 0.03em;
}
}
.section--course-detail {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
overflow: visible;
position: relative;
z-index: 1;
}
.section--course-detail > .inner-wide {
position: relative;
z-index: 0;
}
.section--course-detail > .inner-wide:has(.course-detail) {
position: relative;
z-index: 1;
}
.course-detail__banner {
margin: 0;
overflow: hidden;
}
.course-detail__banner-img {
display: block;
width: 100%;
height: auto;
max-height: 22rem;
object-fit: cover;
}
.course-detail {
display: grid;
gap: 2.5rem;
margin-top: -5.5rem;
align-items: start;
}
@media (min-width: 900px) {
.course-detail {
padding-left: 5rem;
grid-template-columns: minmax(0, 36.5rem) minmax(0, 29.75rem);
column-gap: clamp(6.25rem, calc(100% - 36.5rem - 29.75rem), 7.5rem);
justify-content: start;
}
}
.course-detail__col--practical {
position: relative;
z-index: 1;
}
.course-detail__practical {
position: relative;
z-index: 1;
background: var(--color-ademwit);
padding: 2.5rem 2.5rem 8rem;
box-shadow: 0 10px 30px rgba(16, 22, 25, 0.06);
}
.course-detail__heading {
margin: 0 0 1.25rem;
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.course-detail__rows {
margin: 0;
padding: 0;
}
.course-detail__row {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 1rem;
padding: 0.85rem 0;
border-bottom: 1px solid rgba(13, 59, 69, 0.15);
}
.course-detail__row:last-child {
border-bottom: 0;
}
.course-detail__row dt {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.875rem;
letter-spacing: -0.03em;
color: var(--color-puls);
}
.course-detail__row dd {
margin: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.875rem;
letter-spacing: -0.03em;
color: var(--color-petrol-light);
}
.course-detail__devices {
position: relative;
z-index: 2;
margin-top: -5.5rem;
margin-left: 0.75rem;
max-width: 26rem;
pointer-events: none;
}
.course-detail__devices-img {
display: block;
width: 100%;
height: auto;
}
.course-detail__col--copy {
padding-top: 12rem;
}
@media (max-width: 899px) {
.course-detail {
margin-top: -3rem;
}
.course-detail__col--copy {
padding-top: 1rem;
}
.course-detail__devices {
margin-top: -5.5rem;
margin-left: 0;
max-width: 18rem;
}
}
.course-detail__learn {
margin-bottom: 5.5rem;
}
.course-detail__list {
margin: 0;
padding: 0;
list-style: none;
}
.course-detail__list li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
position: relative;
padding-left: 0;
margin: 0 0 0.35rem;
font-size: 1rem;
line-height: 1.875rem;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.course-detail__list li::before {
display: none;
}
.course-detail__list .icon {
flex: 0 0 auto;
margin-top: 0.35rem;
font-size: 15px;
color: var(--color-petrol-light);
}
.course-detail__audience-text {
margin: 0 0 1.5rem;
max-width: 30rem;
font-size: 1rem;
line-height: 1.875rem;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.course-detail__audience-cta {
margin-top: 0.25rem;
}
.section--person-pulse {
overflow: visible;
padding-top: 4rem;
padding-bottom: calc(var(--section-pad-y) + 6.5rem);
}
@media (min-width: 900px) {
.section--person-pulse {
padding-top: var(--section-pad-y);
}
}
.person-pulse {
display: grid;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 900px) {
.person-pulse {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 5rem;
row-gap: 2.5rem;
}
}
.person-pulse__title {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.person-pulse__intro,
.person-pulse__body {
margin: 1.25rem 0 0;
font-size: 1rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.person-pulse__body p,
.person-pulse__intro + .person-pulse__body {
margin: 1.25rem 0 0;
}
.person-pulse__body > *:first-child {
margin-top: 0;
}
.person-pulse__source {
margin: 1.5rem 0 0;
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: -0.03em;
color: var(--color-petrol-light);
}
.person-pulse__media {
position: relative;
z-index: 1;
overflow: visible;
width: 100%;
max-width: 36.5rem;
margin-inline: auto;
aspect-ratio: 584 / 348;
background: var(--color-ademwit);
}
@media (min-width: 900px) {
.person-pulse__media {
margin-inline: 0 0;
max-width: none;
}
}
.person-pulse__heartbeat {
position: absolute;
left: -37.8%;
top: -29.3%;
width: 122.4%;
max-width: none;
height: auto;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.person-pulse__img {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
display: block;
width: 68.8%;
max-width: none;
height: 127.3%;
object-fit: cover;
object-position: top center;
}
.person-pulse__photo {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.person-pulse--image .person-pulse__media {
overflow: hidden;
}
.person-pulse__meta {
position: absolute;
left: 6%;
top: 11.2%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.0625rem;
}
.person-pulse__name {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
min-height: 33px;
padding: 0.4375rem 1.25rem;
border-radius: 100px;
background: var(--color-mist);
font-size: 1rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.875rem;
color: var(--color-petrol);
box-shadow: none;
}
.person-pulse__name img,
.person-pulse__name .icon {
width: 1em;
height: 1em;
font-size: 15px;
flex-shrink: 0;
color: inherit;
}
.person-pulse__role {
margin-left: 1.125rem;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.03em;
text-transform: none;
color: var(--color-petrol-light);
}
@media (max-width: 899px) {
.person-pulse:not(.person-pulse--image) .person-pulse__media {
margin-top: 3rem;
}
.person-pulse__img {
right: 0;
width: 58%;
height: 120%;
}
.person-pulse__meta {
left: 0.75rem;
top: 12%;
}
.person-pulse__role {
margin-left: 0.75rem;
}
}
.section--cobrand {
overflow: visible;
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
.cobrand {
display: grid;
gap: 2.5rem;
align-items: start;
}
@media (min-width: 900px) {
.cobrand {
grid-template-columns: 25.833rem minmax(0, 1fr);
column-gap: 5rem;
align-items: start;
}
}
.cobrand__brand {
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: flex-start;
}
.cobrand__eyebrow {
margin: 0;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-petrol-light);
line-height: 1.385;
}
.cobrand__logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
}
.cobrand__logo-bhv {
display: block;
width: auto;
height: 5.25rem;
max-width: 9.0625rem;
object-fit: contain;
}
.cobrand__logo-text {
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-inkt);
}
.cobrand__logo-accent {
color: var(--color-puls);
}
.cobrand__tsn {
display: block;
height: 2.5rem;
width: auto;
max-width: 12rem;
object-fit: contain;
}
.cobrand__copy {
min-width: 0;
}
.cobrand__title {
margin: 0;
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--color-inkt);
}
.cobrand__body {
margin: 0.625rem 0 0;
font-size: 1rem;
line-height: 1.625;
letter-spacing: 0;
color: var(--color-muted);
}
.cobrand__side-heading {
margin: 1.25rem 0 0;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-petrol);
}
.cobrand__bullets {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.cobrand__bullets li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.9375rem;
line-height: 1.45;
letter-spacing: -0.02em;
color: var(--color-inkt);
}
.cobrand__bullet-icon,
.cobrand__bullets img,
.cobrand__bullets .icon,
.cobrand__bullets i {
flex: 0 0 auto;
width: 1em;
height: 1em;
margin-top: 0.15em;
font-size: 15px;
line-height: 1;
text-align: center;
color: var(--color-petrol-light);
}
.hero-section--sector {
position: relative;
padding: 0;
margin-bottom: -4rem;
overflow: visible;
}
.hero-section--sector.section-bg--ademwit {
background: transparent;
}
.hero-section--sector::before {
content: "";
position: absolute;
inset: 0 0 4rem 0;
background: var(--color-ademwit);
z-index: 0;
pointer-events: none;
}
.hero-section--sector > * {
position: relative;
z-index: 1;
}
.hero-sector__media {
position: relative;
height: calc(var(--header-h) + clamp(12rem, 22vw, 13.5rem));
background: center / cover no-repeat var(--hero-bg);
}
.hero-sector__shade {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
var(--color-petrol) 0%,
rgba(13, 59, 69, 0) 100%);
mix-blend-mode: multiply;
pointer-events: none;
}
.hero-sector {
position: relative;
z-index: 1;
max-width: 42.25rem;
margin: -90px auto 0;
text-align: center;
}
.hero-sector__card {
box-sizing: border-box;
width: 100%;
padding: 2.7rem 4.4rem 2.75rem;
background: var(--color-petrol);
color: var(--color-ademwit);
text-align: left;
}
.hero-sector__eyebrow {
margin: 0 0 1.15rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ademwit);
}
.hero-sector__title {
margin: 0;
font-size: clamp(1.85rem, 3.6vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.12;
color: var(--color-ademwit);
}
.hero-sector__below {
margin-top: 3.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
}
.hero-sector__lead {
margin: 0;
width: 100%;
max-width: 36.1875rem;
text-align: left;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-petrol);
}
.hero-sector__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 1.25rem;
width: 100%;
max-width: 36.1875rem;
}
.hero-sector__actions .btn--secondary {
border: 0;
--btn-bg: var(--color-mist);
--btn-bg-hover: color-mix(in srgb, var(--color-mist), black 8%);
background-color: var(--btn-bg);
background-image:
linear-gradient(
to right,
var(--btn-bg-hover) 0%,
var(--btn-bg-hover) 50%,
var(--btn-bg) 50%,
var(--btn-bg) 100%);
color: var(--color-petrol);
}
.hero-sector__price {
margin: 0;
width: 100%;
max-width: 36.1875rem;
text-align: left;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.03em;
color: var(--color-petrol-light);
}
.hero-proof--sector {
margin-top: 4.5rem;
position: relative;
z-index: 2;
}
@media (max-width: 899px) {
.hero-sector {
margin-top: -4.5rem;
max-width: 100%;
}
.hero-sector__card {
padding: 2.25rem 1.75rem;
}
.hero-sector__below {
margin-top: 2.5rem;
gap: 1.35rem;
}
.hero-sector__actions {
flex-direction: column;
width: 100%;
}
.hero-sector__actions .btn {
width: 100%;
}
}
.section--problems {
padding: var(--section-pad-y) 0;
color: var(--color-ademwit);
}
.hero-section--sector + .section--problems {
padding-top: calc(var(--section-pad-y) + 4rem);
}
.problems__eyebrow {
margin: 0 0 0.75rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ademwit);
}
.problems__title {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-ademwit);
}
@media (max-width: 899px) {
.problems__header {
margin-bottom: 1.75rem;
}
.problems__problem {
display: block;
}
.problems__num,
.problems__problem-text {
display: inline;
}
}
.problems__intro {
margin: 1rem 0 0;
max-width: 40rem;
color: var(--color-ademwit);
}
.problems__cols {
display: none;
margin: 2.5rem 0 1rem;
gap: 2rem;
}
@media (min-width: 900px) {
.problems__cols {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
}
.problems__col-label {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(241, 244, 244, 0.7);
}
.problems__list {
list-style: none;
margin: 0;
padding: 0;
}
.problems__row {
display: grid;
gap: 0.75rem 2rem;
padding: 1.35rem 0;
border-top: 1px solid rgba(241, 244, 244, 0.28);
}
.problems__row:last-child {
border-bottom: 1px solid rgba(241, 244, 244, 0.28);
}
@media (min-width: 900px) {
.problems__row {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
align-items: start;
}
}
.problems__problem {
display: flex;
gap: 0.75rem;
align-items: flex-start;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.3;
}
.problems__num {
flex: 0 0 auto;
color: #f1f4f4b3;
}
.problems__solution {
margin: 0;
font-size: 1rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: rgba(241, 244, 244, 0.92);
}
.section--proof {
padding: var(--section-pad-y) 0;
overflow: visible;
}
@media (min-width: 900px) {
.section:not(.section-bg--ademwit) + .section--proof.section-bg--ademwit {
padding-top: var(--section-pad-y);
}
}
.section--proof .proof-panel--practice {
position: relative;
display: block;
max-width: 1026px;
margin: 160px auto 0;
padding: 300px 50px 2.5rem;
background: var(--color-mist);
grid-template-columns: none;
gap: 0;
}
.section--proof .proof-panel__media {
position: absolute;
top: -140px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 100px);
max-width: 928px;
height: 380px;
margin: 0;
overflow: hidden;
min-height: 0;
background: transparent;
}
.section--proof .proof-panel__img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: center;
}
.section--proof .proof-panel__body {
display: grid;
gap: 2rem;
margin: 0;
padding: 0 1.875rem;
}
@media (min-width: 900px) {
.section--proof .proof-panel__body {
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 4.5rem;
}
}
.section--proof .proof-panel__eyebrow {
margin: 0 0 0.625rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-inkt);
}
.section--proof .proof-panel__title {
margin: 0;
font-size: clamp(1.75rem, 3.2vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.section--proof .proof-panel__aside {
padding-top: 0;
}
.section--proof .proof-panel__body:has(.proof-panel__eyebrow) .proof-panel__aside {
padding-top: 1.75rem;
}
.section--proof .proof-panel__aside p {
margin: 0;
max-width: 24.5rem;
font-size: 1rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.5;
color: var(--color-inkt);
}
.section--proof .proof-panel__aside p + p {
margin-top: 1rem;
}
.section--proof .proof-panel__stats {
max-width: 1026px;
margin: 20px auto 0;
padding: 0;
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.section--proof .proof-panel__stats {
grid-template-columns: repeat(3, 1fr);
}
.section--proof .proof-panel__stats:has(.proof-panel__stat:nth-child(4)) {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1000px) {
.section--proof .proof-panel__stats:has(.proof-panel__stat:nth-child(4)) {
grid-template-columns: repeat(4, 1fr);
}
}
.section--proof .proof-panel__stat {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 2.5rem 2rem 2rem;
min-height: 10rem;
background: var(--color-mist);
}
.section--proof .proof-panel__stat-value {
margin: 0;
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--color-petrol-light);
}
.section--proof .proof-panel__stat-label {
margin: 0.75rem 0 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.35;
color: var(--color-petrol);
max-width: 16rem;
}
.section--proof .proof-panel--practice-plain {
margin-top: 0;
padding: 2.5rem 3.125rem;
}
@media (max-width: 899px) {
.section--proof {
padding: 1rem 0 3.5rem;
}
.section--proof .proof-panel--practice {
margin-top: 7rem;
padding: 8.5rem 1.25rem 1.5rem;
}
.section--proof .proof-panel--practice-plain {
margin-top: 0;
padding: 1.5rem 1.25rem;
}
.section--proof .proof-panel__media {
width: calc(100% - 2rem);
height: 11rem;
top: -5.5rem;
}
.section--proof .proof-panel__body {
padding: 0;
}
.section--proof .proof-panel__aside {
padding-top: 0;
}
.section--proof .proof-panel__stats {
margin-top: 20px;
}
.section--proof .proof-panel__stat {
min-height: 0;
padding: 2rem 1.5rem 1.75rem;
}
.section--proof .proof-panel__stat-value {
font-size: 1.75rem;
}
}
.section--steps-price {
padding: var(--section-pad-y) 0;
}
.steps-price__title {
margin: 0 0 3rem;
text-align: center;
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.steps-price__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 2.5rem 1.5rem;
}
@media (min-width: 900px) {
.steps-price__steps {
grid-template-columns: repeat(3, 1fr);
}
}
.steps-price__steps .step-card {
list-style: none;
}
.steps-price__card {
box-sizing: border-box;
width: min(100%, 64.125rem);
margin: 3.5rem auto 0;
padding: 2.5rem 2rem;
background: var(--color-petrol);
color: var(--color-ademwit);
text-align: center;
}
.steps-price__amount {
margin: 0;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--color-ademwit);
}
.steps-price__note {
margin: 1rem auto 0;
max-width: 36rem;
font-size: 1rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-ademwit);
}
.steps-price__cta {
margin-top: 1.75rem;
}
.section--contact {
padding: 0;
overflow: visible;
}
.contact-page {
position: relative;
padding-top: var(--section-pad-y);
overflow: hidden;
}
.contact-page__inner {
position: relative;
z-index: 3;
}
.contact-page__hero {
max-width: 40rem;
margin: 0 auto;
text-align: center;
}
.contact-page__eyebrow {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
}
.contact-page__title {
margin: 1.15rem 0 0;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.contact-page__intro {
margin: 1.25rem auto 0;
max-width: 35rem;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.contact-page__form {
max-width: 36.625rem;
margin: 3.5rem auto 0;
position: relative;
z-index: 1;
}
.contact-page--has-person .contact-page__hero {
margin-left: 0;
margin-right: auto;
text-align: left;
}
.contact-page--has-person .contact-page__intro {
margin-left: 0;
margin-right: 0;
}
.contact-page--has-person .contact-page__form {
margin-left: 0;
margin-right: auto;
}
.section--contact .wpcf7 {
margin: 0;
}
.section--contact .wpcf7 p {
margin: 0 0 1.75rem;
}
.section--contact .wpcf7 p:last-of-type {
margin-bottom: 0;
}
.section--contact .wpcf7 label {
display: block;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol);
}
.section--contact .wpcf7 label .req {
color: var(--color-puls);
text-transform: none;
}
.section--contact .wpcf7 input[type=text],
.section--contact .wpcf7 input[type=email],
.section--contact .wpcf7 input[type=tel],
.section--contact .wpcf7 textarea {
display: block;
box-sizing: border-box;
width: 100%;
min-height: 2.8125rem;
margin: 0.65rem 0 0;
padding: 0.65rem 0.9rem;
border: 1.5px solid var(--color-mist);
border-radius: 0;
background: var(--color-ademwit);
font-family: inherit;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.03em;
color: var(--color-inkt);
outline: none;
}
.section--contact .wpcf7 input[type=text]:focus,
.section--contact .wpcf7 input[type=email]:focus,
.section--contact .wpcf7 input[type=tel]:focus,
.section--contact .wpcf7 textarea:focus {
outline: 2px solid var(--color-petrol-light);
outline-offset: 0;
border-color: var(--color-petrol-light);
}
.section--contact .wpcf7 textarea {
height: auto;
min-height: calc(1.3rem + 1.25em * 4 + 3px);
max-height: none;
resize: vertical;
overflow-x: hidden;
overflow-y: auto;
field-sizing: fixed;
}
.section--contact .wpcf7 input::placeholder,
.section--contact .wpcf7 textarea::placeholder {
color: var(--color-petrol-light);
font-weight: 400;
opacity: 1;
}
.section--contact .wpcf7 input[type=submit],
.section--contact .wpcf7 .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
min-height: 2.8125rem;
margin-top: 0.25rem;
padding: 0.7rem 1.4rem;
border: 0;
background: var(--color-petrol);
color: var(--color-ademwit);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.03em;
cursor: pointer;
outline: none;
}
.section--contact .wpcf7 input[type=submit]:focus-visible,
.section--contact .wpcf7 .wpcf7-submit:focus-visible {
outline: 2px solid var(--color-petrol-light);
outline-offset: 2px;
}
.section--contact .wpcf7 .wpcf7-not-valid-tip,
.section--contact .wpcf7 .wpcf7-response-output {
text-transform: none;
letter-spacing: -0.03em;
font-weight: 400;
}
.contact-page__pulse {
position: absolute;
right: -2rem;
bottom: -100px;
width: 600px;
pointer-events: none;
z-index: 0;
}
.contact-page__pulse img {
display: block;
width: 100%;
height: auto;
max-width: none;
}
.contact-page__person {
position: absolute;
right: max(var(--gutter), calc((100% - var(--inner-wide)) / 2));
bottom: -1.5rem;
width: calc((min(100% - (var(--gutter) * 2), var(--inner-wide)) - 36.625rem) * 0.8);
z-index: 4;
pointer-events: none;
line-height: 0;
}
.contact-page__person-img {
display: block;
width: 100%;
height: auto;
max-width: none;
}
.contact-page__phone {
position: absolute;
right: max(0.5rem, calc((100% - var(--inner-wide)) / 2 - 4rem));
bottom: 0;
width: min(36vw, 26rem);
z-index: 2;
pointer-events: none;
}
.contact-page__phone .phone-mockup--contact {
width: 100%;
max-width: none;
transform: translateX(var(--phone-mockup-legacy-shift));
}
.contact-page__band {
position: relative;
z-index: 1;
padding-bottom: calc(var(--section-pad-y) + 3.75rem);
background: var(--color-mist);
}
.contact-page__band-inner {
display: grid;
gap: 3rem;
align-items: end;
padding-bottom: 1rem;
}
@media (min-width: 900px) {
.contact-page__band-inner {
grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 22.625rem);
gap: 4rem;
padding-bottom: 8rem;
}
}
.contact-page__channels {
display: grid;
gap: 3rem;
}
.contact-page__channel-label {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol-light);
}
.contact-page__channel-value {
display: inline-block;
margin: 0.65rem 0 0;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: clamp(1.75rem, 3.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.contact-page__channel-value:hover,
.contact-page__channel-value:focus-visible {
color: var(--color-petrol);
}
button.contact-page__channel-value:focus-visible {
outline: 2px solid var(--color-petrol);
outline-offset: 3px;
}
.contact-page__channel-note {
margin: 0.65rem 0 0;
font-size: 0.875rem;
letter-spacing: -0.03em;
color: var(--color-petrol-light);
}
.contact-page__gegevens {
box-sizing: border-box;
padding: 1.75rem 1.5rem;
background: var(--color-ademwit);
}
.contact-page__gegevens-label {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-petrol-light);
}
.contact-page__gegevens-body {
margin: 1rem 0 0;
font-size: 1rem;
line-height: 1.55;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
@media (max-width: 1359px) {
.contact-page__phone {
display: none;
}
}
@media (max-width: 1099px) {
.contact-page__person {
display: none;
}
.contact-page--has-person .contact-page__hero {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.contact-page--has-person .contact-page__intro {
margin-left: auto;
margin-right: auto;
}
.contact-page--has-person .contact-page__form {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 899px) {
.contact-page {
padding-top: 3rem;
padding-bottom: 3rem;
}
.contact-page__form {
margin-top: 2.5rem;
}
.contact-page__pulse {
display: none;
}
.contact-page__band {
padding: 3rem 0;
}
.contact-page__band-inner {
align-items: stretch;
}
}
.section--locations {
position: relative;
z-index: 2;
margin-top: calc((var(--section-pad-y) + 3.75rem) * -1);
padding: 0 0 var(--section-pad-y);
background: transparent !important;
}
.locations__heading {
margin: 2.75rem 0 1.75rem;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.locations-map {
position: relative;
width: 100%;
max-width: 80rem;
margin: 0 auto;
}
.locations-map__frame {
position: relative;
width: 100%;
overflow: hidden;
background: var(--color-mist);
aspect-ratio: 1;
max-height: 31.25rem;
height: auto;
}
.locations-map__svg {
display: block;
position: absolute;
top: 0;
left: 25%;
height: 100%;
width: auto;
max-width: none;
transform: translateX(-25%);
background: var(--color-mist);
}
.locations-map__marker {
fill: var(--color-inkt);
cursor: pointer;
outline: none;
transition: fill 0.15s ease;
}
.locations-map__marker:hover,
.locations-map__marker.is-active,
.locations-map__marker:focus-visible {
fill: var(--color-puls);
}
.locations-map__route {
position: absolute;
left: 2.5rem;
bottom: 2.5rem;
z-index: 2;
}
.locations-list {
list-style: none;
margin: 2.75rem 0 0;
padding: 0;
display: grid;
gap: 2rem 1.5rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
.locations-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.locations-list__item {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 0.85rem;
row-gap: 0.35rem;
width: 100%;
padding: 0;
border: 0;
background: none;
text-align: left;
cursor: pointer;
font: inherit;
color: var(--color-inkt);
}
.locations-list__pulse {
grid-row: 1 / span 2;
width: 3px;
min-height: 4.5rem;
background: var(--color-mist);
align-self: stretch;
}
.locations-list__item.is-active .locations-list__pulse,
.locations-list__item:hover .locations-list__pulse {
background: var(--color-puls);
}
.locations-list__title {
grid-column: 2;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.locations-list__item.is-active .locations-list__title {
color: var(--color-puls);
}
.locations-list__meta {
grid-column: 2;
font-size: 1rem;
line-height: 1.4;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.locations-list__item.is-active .locations-list__meta {
color: var(--color-puls);
}
.locations__footer {
margin: 2.5rem 0 0;
max-width: 64rem;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
@media (max-width: 899px) {
.section--locations {
margin-top: 0;
padding: 3rem 0 4rem;
background: var(--color-mist) !important;
}
.locations-map__route {
position: static;
display: inline-flex;
margin-top: 1.25rem;
}
.locations-list {
grid-template-columns: 1fr;
}
}
.section--reviews {
text-align: center;
padding: var(--section-pad-y) 0;
}
.reviews__pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
margin: 0 auto 40px;
padding: 7px 20px;
min-height: 33px;
border-radius: 100px;
background: var(--color-mist);
color: var(--color-inkt);
font-size: 16px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 20px;
}
.section-bg--mist .reviews__pill,
.section-bg--petrol .reviews__pill,
.section-bg--petrol-light .reviews__pill {
background: var(--color-ademwit);
}
.reviews__pill img,
.reviews__pill .icon {
width: 1em;
height: 1em;
font-size: 15px;
flex: 0 0 auto;
color: inherit;
}
.reviews-carousel {
position: relative;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 20px;
grid-template-rows: auto auto auto;
grid-template-areas: ". track ." "prev track next" ". stars .";
column-gap: 0;
row-gap: 20px;
max-width: 1026px;
margin: 0 auto;
touch-action: pan-y;
}
.reviews-carousel__track {
position: relative;
display: grid;
grid-area: track;
grid-template-rows: subgrid;
min-height: 247px;
}
.reviews-carousel__slide {
grid-row: 1 / -1;
grid-column: 1;
margin: 0;
display: grid;
grid-template-rows: subgrid;
justify-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.45s ease, visibility 0.45s ease;
pointer-events: none;
z-index: 0;
}
.reviews-carousel__slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.reviews-carousel__slide {
transition: none;
}
}
.reviews-carousel__meta {
grid-row: 1;
margin: 0;
font-size: 14px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-petrol-light);
max-width: 616px;
}
.reviews-carousel__quote {
grid-row: 2;
margin: 0;
font-size: 36px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--color-inkt);
max-width: 616px;
}
.reviews-carousel__stars {
grid-area: stars;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 0;
line-height: 1;
}
.reviews-carousel__star {
display: block;
width: 24px;
height: 24px;
flex: 0 0 auto;
}
.reviews-carousel__nav {
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 100px;
background: var(--color-inkt);
color: var(--color-ademwit);
cursor: pointer;
display: grid;
place-items: center;
align-self: center;
justify-self: center;
z-index: 2;
}
.reviews-carousel__nav--prev {
grid-area: prev;
}
.reviews-carousel__nav--next {
grid-area: next;
}
.reviews-carousel__nav span {
display: block;
width: 0;
height: 0;
border-style: solid;
}
.reviews-carousel__nav--prev span {
border-width: 3.5px 5px 3.5px 0;
border-color: transparent currentColor transparent transparent;
margin-right: 1px;
}
.reviews-carousel__nav--next span {
border-width: 3.5px 0 3.5px 5px;
border-color: transparent transparent transparent currentColor;
margin-left: 1px;
}
.section-bg--petrol .reviews-carousel__meta,
.section-bg--petrol-light .reviews-carousel__meta {
color: var(--color-mist);
}
.section-bg--petrol .reviews-carousel__quote,
.section-bg--petrol-light .reviews-carousel__quote {
color: var(--color-ademwit);
}
.section-bg--petrol .reviews-carousel__nav,
.section-bg--petrol-light .reviews-carousel__nav {
background: var(--color-ademwit);
color: var(--color-petrol);
}
@media (max-width: 899px) {
.section--reviews {
padding: 4rem 0;
}
.reviews-carousel {
grid-template-columns: 38px minmax(0, 1fr) 38px;
grid-template-rows: auto auto;
grid-template-areas: "track track track" "prev stars next";
column-gap: 0;
row-gap: 2rem;
}
.reviews-carousel__quote {
font-size: clamp(1.5rem, 5vw, 36px);
}
.reviews-carousel__track {
min-height: 0;
grid-template-rows: none;
}
.reviews-carousel__slide {
grid-row: 1;
grid-column: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.reviews-carousel__meta,
.reviews-carousel__quote {
grid-row: auto;
}
.reviews-carousel__nav {
width: 38px;
height: 38px;
}
.reviews-carousel__nav--prev {
grid-area: prev;
}
.reviews-carousel__nav--next {
grid-area: next;
}
.reviews-carousel__nav--prev span {
border-width: 5px 7px 5px 0;
}
.reviews-carousel__nav--next span {
border-width: 5px 0 5px 7px;
}
.reviews-carousel__stars {
gap: 6px;
}
.reviews-carousel__star {
width: 16px;
height: 16px;
}
}
@media (min-width: 901px) {
body.error404 .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
}
}
.error404 .site-main {
display: flex;
flex-direction: column;
overflow: visible;
}
.error404 .site-footer {
position: relative;
z-index: 2;
}
.page-404 {
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
isolation: isolate;
min-height: 28rem;
padding: calc(var(--header-h) + 2rem) var(--gutter) 7rem;
overflow: visible;
}
.page-404__watermark {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
width: 100%;
overflow: visible;
pointer-events: none;
}
.page-404__watermark-svg {
display: block;
position: absolute;
left: 50%;
bottom: 0;
width: min(100vw, 90rem);
max-width: none;
height: auto;
overflow: visible;
transform: translate(-50%, 35%);
}
.page-404__watermark-text {
fill: var(--color-mist);
font-family: var(--font-sans);
font-size: 600px;
font-weight: 700;
letter-spacing: -0.03em;
}
.page-404__content {
position: relative;
z-index: 1;
max-width: 28rem;
margin: 0 auto;
text-align: center;
}
.page-404 .eyebrow {
margin: 0 0 1rem;
color: var(--color-inkt);
}
.page-404__content h1 {
margin: 0;
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-inkt);
}
.page-404__lead {
margin: 1.25rem 0 0;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.03em;
color: var(--color-inkt);
}
.page-404__content .btn {
margin-top: 2rem;
}
@media (max-width: 900px) {
.page-404 {
padding: 4rem var(--gutter) 5rem;
min-height: 22rem;
}
.page-404__watermark-text {
font-size: 320px;
}
.page-404__lead {
font-size: 1.125rem;
}
}
/*# sourceMappingURL=/wp-content/themes/bhvopleidingen/assets/build/app-CDGVFF4Z.css.map */