@font-face {
 font-family: ESKlarheitGrotesk-Bk;
 src: url("../fonts/ESKlarheitGrotesk-Bk.otf") format("opentype");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ESKlarheitGrotesk-Smbd;
 src: url("../fonts/ESKlarheitGrotesk-Smbd.otf") format("opentype");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ESKlarheitGrotesk-Xbd;
 src: url("../fonts/ESKlarheitGrotesk-Xbd.otf") format("opentype");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ESKlarheitGrotesk-BKlt;
 src: url("../fonts/ESKlarheitGrotesk-Xbd.otf") format("opentype");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ESKlarheitGrotesk-Xlt;
 src: url("../fonts/ESKlarheitGrotesk-Xbd.otf") format("opentype");
 font-weight: normal;
 font-style: normal;
}

.skip-link {
 background-color: #0001aa;
 color: #fff;
 font-family: ESKlarheitGrotesk-Smbd, Roboto, sans-serif;
 font-size: 14px;
 left: 50%;
 padding: 10px 20px;
 position: absolute;
 text-decoration: none;
 top: -100%;
 transform: translateX(-50%);
 z-index: 9999;
}

.skip-link:focus {
 top: 8px;
}

body {
 margin: 0;
 font-family: ESKlarheitGrotesk-Bk, Roboto, sans-serif;
}

img {
 vertical-align: bottom;
}

h1,
h2,
h3 {
 margin-top: 0;
 color: #2800aa;
}

h1 {
 margin: 0 0 16px;
 font-size: 37px;
 font-family: ESKlarheitGrotesk-Xbd, Roboto, sans-serif;
}

h2 {
 font-size: 24px;
 font-family: ESKlarheitGrotesk-Bk, Roboto, sans-serif;
}

h3 {
 font-size: 18px;
 font-weight: 100;
 height: auto;
 color: #00205b;
 font-family: ESKlarheitGrotesk-Bk, Roboto, sans-serif;
}

header {
 height: 72px;
 background-color: #0001aa;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 12px;
}

.header-logo {
 display: block;
 width: 96px;
}

.header-logo img {
 display: block;
 width: 100%;
}

.hero-banner {
 background-color: #090f7a;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 box-sizing: border-box;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 300px;
 padding: 20px clamp(1.5rem, calc(-0.786rem + 11.429vw), 3.5rem);
}

.hero-banner__content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 max-width: 100%;
 text-align: center;
 width: 100%;
}

.hero-banner__title {
 color: #fff;
 font-family: ESKlarheitGrotesk-Xbd, Roboto, sans-serif;
 font-size: clamp(28px, calc(23px + 1.563vw), 32px);
 line-height: 1.08;
 margin: 0 0 18px;
}

.hero-banner__copy {
 color: #fff;
 font-family: ESKlarheitGrotesk-Bk, Roboto, sans-serif;
 font-size: clamp(18px, calc(15.5px + 0.781vw), 20px);
 line-height: 1.35;
 margin: 0;
 max-width: 34ch;
}

#hero-banner-image {
 width: 100%;
}

.main {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 margin: 0;
 max-width: none;
 padding: 0;
 width: 100%;
}

.content-section {
 width: 100%;
}

.content-section--light {
 background-color: #fff;
}

.content-section--muted {
 background-color: #ebebe9;
}

.content-section__inner {
 box-sizing: border-box;
 margin: 0 auto;
 max-width: 1366px;
 padding: 38px clamp(1.5rem, calc(-0.786rem + 11.429vw), 3.5rem) 40px;
}

.section-intro {
 text-align: left;
 margin: 2rem 0 40px;
 max-width: none;
}

.section-intro h2 {
 color: #000064;
 font-family: ESKlarheitGrotesk-Xbd, Roboto, sans-serif;
 font-size: clamp(24px, calc(21.5px + 0.781vw), 26px);
 line-height: 1.18;
 margin-bottom: 10px;
}

.section-intro__copy {
 color: #171717;
 font-family: ESKlarheitGrotesk-Bk, Roboto, sans-serif;
 font-size: clamp(16px, calc(13.5px + 0.781vw), 18px);
 line-height: 1.4;
 max-width: none;
}

.cta-wrapper {
 display: grid;
 gap: 24px;
 grid-template-columns: 1fr;
 width: 100%;
}

.cta-wrapper > * {
 flex: initial;
}

.offer-card,
.buy-points-card,
.buy-tiles-card,
.gift-points-card,
.transfer-points-card,
.shopping-card,
.subscription-card {
 background-color: #fff;
 border: 1px solid #d8dce6;
 border-radius: 8px;
 justify-self: stretch;
 margin: 0;
 max-height: none;
 max-width: none;
 overflow: hidden;
 width: 100%;
 display: flex;
 flex-direction: column;
}

.buy-tiles-card,
.transfer-points-card {
 margin-right: 0;
}

.offer-card__image {
 aspect-ratio: 2.18;
 display: block;
 overflow: hidden;
 position: relative;
 width: 100%;
}

.offer-card__image img,
#shopping-card .offer-card__image #shopping-image,
#shopping-image {
 display: block;
 height: auto;
 object-fit: cover;
 width: 100%;
}

.offer-card__content,
.offer-card__content--horizontal {
 align-items: flex-start;
 align-self: stretch;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 gap: 24px;
 justify-content: flex-start;
 height: auto;
 min-height: 0;
 padding: 24px;
 text-align: left;
}

.offer-card__content--horizontal {
 height: auto;
}

.offer-card__content h3,
.offer-card__content--horizontal h3 {
 color: #111;
 font-family: ESKlarheitGrotesk-Xbd, Roboto, sans-serif;
 font-size: clamp(24px, calc(21.5px + 0.781vw), 26px);
 height: auto;
 line-height: 1.2;
 margin: 0;
}

.offer-card__copy {
 color: #171717;
 font-family: ESKlarheitGrotesk-Bk, Roboto, sans-serif;
 font-size: clamp(16px, calc(13.5px + 0.781vw), 18px);
 line-height: 1.45;
 margin: 0;
 min-height: 0;
}

.offer-card__actions {
 align-self: stretch;
 display: flex !important;
 justify-content: center;
 margin-top: auto;
 width: 100%;
}

.offer-card__actions a {
 margin-top: 0;
}

.offer-card__content a,
.offer-card__actions a,
.offer-card__link {
 align-items: center;
 align-self: center;
 background-color: #0001aa;
 box-sizing: border-box;
 border-radius: 7px;
 color: #fff;
 display: flex;
 font-family: ESKlarheitGrotesk-Smbd, Roboto, sans-serif;
 font-size: 14px;
 height: 40px;
 justify-content: center;
 line-height: 1;
 margin-top: auto;
 margin-left: auto;
 margin-right: auto;
 min-width: 0;
 padding: 0 16px !important;
 text-align: center;
 text-decoration: none;
 white-space: nowrap;
 width: 190px !important;
}

.offer-card__content a:focus-visible,
.offer-card__actions a:focus-visible,
.offer-card__link:focus-visible,
.header-logo:focus-visible,
.footer-logo:focus-visible {
 outline: 3px solid #ff8200;
 outline-offset: 3px;
}

#buy-points-cta-label,
#buy-tiles-cta-label,
#gift-points-cta-label,
#transfer-points-cta-label,
#shopping-cta-label,
#subscription-cta-label {
 display: flex;
 margin-left: auto;
 margin-right: auto;
 padding: 0 16px !important;
 white-space: nowrap;
 font-size: clamp(14px, calc(12.75px + 0.391vw), 15px);
 height: 40px;
 width: clamp(228px, calc(213px + 4.688vw), 240px) !important;
}

.badge,
.badge-new,
.orange-badge,
.blue-badge,
.badge--highlight,
.badge--primary {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 color: #fff;
 font-family: ESKlarheitGrotesk-Smbd, Roboto, sans-serif;
 font-weight: 400;
 align-items: center;
 justify-content: center;
 font-size: clamp(14px, calc(11.5px + 0.781vw), 16px);
 height: round(nearest, clamp(28px, calc(23px + 1.563vw), 32px), 1px);
}

.badge {
 display: none;
}

.badge-new,
.orange-badge,
.blue-badge,
.badge--highlight,
.badge--primary {
 display: flex;
}

.badge,
.orange-badge,
.blue-badge,
.badge--highlight,
.badge--primary {
 z-index: 10;
}

.badge-new {
 z-index: 1;
 background-color: #ff6a3d;
}

.badge-new {
 letter-spacing: 0;
}

.badge--highlight {
 background-color: #ff8200;
}

.badge--primary {
 background-color: #0001aa;
}

.orange-badge {
 background-color: #ff6433;
}

.blue-badge {
 background-color: #0001aa;
 /* font-size: clamp(11px, calc(8.295px + 0.642vw), 16px); */
}

#buy-points-image {
 object-position: 50% 20%;
}

#buy-tiles-image {
 object-position: 50% 24%;
}

#gift-points-image {
 object-position: 50% 50%;
}

#transfer-points-image {
 object-position: 50% 50%;
}

#shopping-image {
 object-position: 50% 50%;
}

#subscription-image {
 object-position: 50% 50%;
}

footer {
 background-color: #0001aa;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 min-height: 84px;
 padding: 0 40px;
 gap: 24px;
}

.footer-logo {
 display: block;
 width: 122px;
 flex-shrink: 0;
}

.footer-logo img {
 display: block;
 width: 100%;
}

.footer-copy {
 color: #fff;
 font-family: ESKlarheitGrotesk-Bk, Roboto, sans-serif;
 font-size: 14px;
 line-height: 1.3;
 text-align: right;
}

.hero-banner {
 background-image: none;
 overflow: hidden;
 position: relative;
}

.hero-banner__media {
 inset: 0;
 position: absolute;
 z-index: 0;
}

.hero-banner__media img {
 display: block;
 height: 100%;
 object-fit: cover;
 width: 100%;
}

.hero-banner__content {
 position: relative;
 z-index: 1;
}

.offer-card__image img {
 height: 100%;
 object-fit: cover;
 width: 100%;
}

@media screen and (width >= 577px) {
 header {
 height: 96px;
 justify-content: flex-start;
 padding-left: max(4rem, calc((100vw - 1366px) / 2 + 4rem));
 padding-right: max(4rem, calc((100vw - 1366px) / 2 + 4rem));
 }

 .header-logo {
 width: 122px;
 }

 .hero-banner {
 height: 330px;
 padding: 24px 4rem;
 }

 .hero-banner__content {
 max-width: 940px;
 }

 .hero-banner__title {
 font-size: clamp(32px, calc(26.651px + 0.927vw), 40px);
 line-height: 1.1;
 margin: 0 0 16px;
 }

 .hero-banner__copy {
 font-size: clamp(18px, calc(16.663px + 0.232vw), 20px);
 line-height: 1.4;
 margin: 0 auto;
 max-width: 54ch;
 }

 h1 {
 font-size: 37px;
 }

 h2 {
 font-size: 24px;
 font-family: ESKlarheitGrotesk-Smbd, Roboto, sans-serif;
 }

 h3 {
 font-size: 18px;
 font-weight: 100;
 font-family: ESKlarheitGrotesk-Smbd, Roboto, sans-serif;
 }

 .content-section__inner {
 padding: 1rem 4rem 4rem;
 }

 .section-intro {
 margin: 2rem 0 3rem;
 }

 .section-intro h2 {
 font-size: clamp(30px, calc(28.663px + 0.232vw), 32px);
 line-height: 1.12;
 }

 .section-intro__copy {
 font-size: clamp(18px, calc(13.988px + 0.695vw), 24px);
 line-height: 1.35;
 }

 .cta-wrapper {
 gap: 24px;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .offer-card,
 .buy-points-card,
 .buy-tiles-card,
 .gift-points-card,
 .transfer-points-card,
 .shopping-card,
 .subscription-card {
 width: 100%;
 }

 .offer-card__image {
 aspect-ratio: 1.8;
 }

 .offer-card__image img,
 #shopping-card .offer-card__image #shopping-image,
 #shopping-image {
 height: 100%;
 }

 .offer-card__content,
 .offer-card__content--horizontal {
 padding: 24px;
 flex: 1;
 gap: 24px;
 }

 .offer-card__content h3,
 .offer-card__content--horizontal h3 {
 font-size: clamp(20px, calc(15.819px + 0.725vw), 23px);
 line-height: 1.15;
 margin: 0;
 }

 .offer-card__copy {
 font-size: 16px;
 font-weight: 100;
 line-height: 1.4;
 margin: 0;
 }

 .offer-card__actions {
 align-self: stretch;
 display: flex !important;
 justify-content: center;
 margin-top: auto;
 width: 100%;
 }

 .offer-card__content a,
 .offer-card__actions a,
 .offer-card__link {
 display: flex;
 font-size: 15px;
 height: 40px;
 line-height: 1;
 padding: 0 18px !important;
 width: 228px !important;
 }

 .content-section .offer-card__content a,
 .content-section .offer-card__actions a,
 .content-section .offer-card__link,
 .content-section #buy-points-cta-label,
 .content-section #buy-tiles-cta-label,
 .content-section #gift-points-cta-label,
 .content-section #transfer-points-cta-label,
 .content-section #shopping-cta-label,
 .content-section #subscription-cta-label {
 box-sizing: border-box;
 max-width: 100%;
 padding-left: 12px !important;
 padding-right: 12px !important;
 white-space: nowrap;
 width: clamp(196px, 88%, 228px) !important;
 }

 #buy-points-cta-label,
 #buy-tiles-cta-label,
 #gift-points-cta-label,
 #transfer-points-cta-label,
 #shopping-cta-label,
 #subscription-cta-label {
 padding: 0 18px !important;
 font-size: clamp(13px, calc(10.395px + 0.451vw), 15px);
 height: clamp(40px, calc(36.657px + 0.579vw), 45px);
 width: 228px !important;
 }

 .badge,
 .orange-badge,
 .blue-badge,
 .badge--highlight,
 .badge--primary {
 font-size: clamp(11px, calc(8.295px + 0.642vw), 16px);
 height: round(nearest, clamp(28px, calc(25.326px + 0.463vw), 32px), 1px);
 }

 .badge-new {
 font-size: clamp(13px, calc(10.994px + 0.348vw), 16px);
 height: round(nearest, clamp(28px, calc(23.988px + 0.695vw), 34px), 1px);
 }

 #buy-points-image {
 object-position: 50% 30%;
 }

 #buy-tiles-image {
 object-position: 50% 74%;
 }

 #gift-points-image {
 object-position: 50% 10%;
 }

 #transfer-points-image {
 object-position: 50% 10%;
 }

 #shopping-image {
 object-position: 50% 10%;
 }

 #subscription-image {
 object-position: 50% 65%;
 }

 footer {
 padding-left: max(4rem, calc((100vw - 1366px) / 2 + 4rem));
 padding-right: max(4rem, calc((100vw - 1366px) / 2 + 4rem));
 }
}

@media screen and (width <= 600px) {
 .content-section__inner {
 padding: 16px clamp(1.5rem, calc(-0.786rem + 11.429vw), 3.5rem) 40px;
 }
}

@media screen and (width >= 769px) {
 .shopping-card {
 flex-direction: row;
 margin-right: 0;
 max-height: 300px;
 }

 .buy-tiles-card {
 max-width: 49%;
 }

 #shopping-image {
 border-top-right-radius: 0;
 border-bottom-left-radius: 7px;
 }

 #shopping-card .offer-card__image #shopping-image {
 object-fit: cover;
 height: 100%;
 }
}

@media screen and (577px <= width <= 1020px) {
 .cta-wrapper--top > .buy-tiles-card {
 grid-column: 1 / -1;
 justify-self: center;
 max-width: calc((100% - 24px) / 2);
 }

 .cta-wrapper--bottom > .shopping-card {
 grid-column: 1 / -1;
 justify-self: center;
 max-width: calc((100% - 24px) / 2);
 }
}

@media screen and (width >= 1021px) {
 .hero-banner {
 height: 370px;
 }

 .cta-wrapper {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }

 .offer-card__image {
 aspect-ratio: 1.5;
 }

 .offer-card__image img,
 #shopping-card .offer-card__image #shopping-image,
 #shopping-image {
 height: 100%;
 }

 .offer-card__content,
 .offer-card__content--horizontal {
 padding: 24px;
 gap: 24px;
 }

 .offer-card__content h3,
 .offer-card__content--horizontal h3 {
 font-size: 24px;
 line-height: 1.15;
 margin: 0;
 }

 .offer-card__copy {
 font-size: 16px;
 line-height: 1.4;
 margin: 0;
 }

 .content-section .offer-card__content a,
 .content-section .offer-card__actions a,
 .content-section .offer-card__link,
 .content-section #buy-points-cta-label,
 .content-section #buy-tiles-cta-label,
 .content-section #gift-points-cta-label,
 .content-section #transfer-points-cta-label,
 .content-section #shopping-cta-label,
 .content-section #subscription-cta-label {
 font-size: clamp(15px, calc(12.563px + 0.239vw), 16px);
 width: clamp(248px, calc(145.042px + 10.084vw), 260px) !important;
 }
}

@media screen and (width >= 1441px) {
 .hero-banner__title {
 font-size: 40px;
 line-height: 1.1;
 }

 .hero-banner__copy {
 font-size: 20px;
 line-height: 1.4;
 max-width: 68ch;
 }
}

@media screen and (width >= 2000px) {
 .main {
 margin: 0;
 max-width: none;
 width: 100%;
 }

 .offer-card__content a {
 padding: 1vw !important;
 width: 90% !important;
 }

 .buy-tiles-card {
 max-width: none;
 }

 .shopping-card {
 max-height: none;
 }
}

@media screen and (width >= 577px) {
 .offer-card,
 .buy-points-card,
 .buy-tiles-card,
 .gift-points-card,
 .transfer-points-card,
 .shopping-card,
 .subscription-card {
 place-self: stretch stretch;
 height: 100%;
 max-width: none;
 width: 100%;
 }

 .shopping-card {
 flex-direction: column;
 max-height: none;
 }

 .offer-card__content,
 .offer-card__content--horizontal {
 display: flex;
 flex: 1;
 flex-direction: column;
 height: auto;
 justify-content: flex-start;
 }

 .offer-card__actions {
 align-self: stretch;
 display: flex !important;
 justify-content: center;
 margin-top: auto;
 width: 100%;
 }

 .offer-card__content a,
 .offer-card__link,
 #buy-points-cta-label,
 #buy-tiles-cta-label,
 #gift-points-cta-label,
 #transfer-points-cta-label,
 #shopping-cta-label,
 #subscription-cta-label {
 margin-top: auto;
 }
}

@media screen and (min-width: 1020px) and (max-width: 1150px),
       screen and (min-width: 576px) and (max-width: 670px),
       screen and (max-width: 359px) {
 .blue-badge,
 .orange-badge {
 font-size: 11px;
 }
}

@media screen and (width <= 576px) {
 footer {
 flex-direction: column;
 justify-content: center;
 min-height: 88px;
 padding: 12px;
 gap: 8px;
 }

 .footer-logo {
 width: 96px;
 margin-bottom: 0;
 }

 .footer-copy {
 font-size: 14px;
 line-height: 1.25;
 text-align: center;
 }
}