:root {
    --red: #e30613;
    --ink: #222;
    --cream: #fbe9d0;
    --maroon: #8e1b1b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Poppins', sans-serif;
    color: var(--ink);
    /* background: linear-gradient(180deg, #fff 0%, #fff 30%, #fdf0df 100%); */
    background: #ffdab5;
    min-height: 100vh;
}

/* Hero banner: the whole banner is clickable and opens the login pop-up */
.hero { position: relative; max-width: 1920px; margin: 0 auto; }
.hero picture { display: block; }
.hero__img { display: block; width: 100%; height: auto; }
.hero__cta { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }

/* Buttons */
.btn {
    display: inline-block; background: var(--red); color: #fff; text-decoration: none;
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: 28px; padding: 14px 26px; transition: background .2s, transform .2s;
}
.btn:hover { background: #b9040f; transform: translateY(-2px); }
.btn--sm { font-size: 18px; padding: 10px 16px; }

/* Content */
.page { max-width: 1100px; margin: 0 auto; padding: 60px 20px 30px; text-align: center; }
.headline {
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 700;
    font-size: clamp(32px, 5vw, 56px); line-height: 1.15; text-transform: uppercase;
}
.headline em { font-style: normal; color: var(--red); }
.sub { margin-top: 28px; font-size: clamp(18px, 2.4vw, 32px); line-height: 1.5; }
.sub strong { font-weight: 700; }

.steps-head {
    margin: 70px auto 60px; max-width: 760px; padding: 0 12px;
    display: flex; align-items: center; justify-content: center; gap: 0;
}
.steps-head::before, .steps-head::after {
    content: ''; flex: 1 1 0; min-width: 20px; max-width: 220px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--red));
}
.steps-head::after { transform: scaleX(-1); }
.steps-head__pill {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-block; background: var(--red); color: #fff; font-weight: 600;
    font-size: 24px; padding: 6px 40px; border-radius: 30px;
}

.steps {
    list-style: none; display: grid; grid-template-columns: repeat(4, 185px);
    gap: 58px; justify-content: center; margin-bottom: 70px;
}
.step {
    position: relative; border-radius: 22px; background: rgba(255,255,255,.6);
    padding: 54px 8px 28px; min-height: 220px; display: flex; flex-direction: column; align-items: center;
    font-size: 21px; line-height: 1.35;
}
.step::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1.5px solid #333; border-radius: 22px; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-size: 100% 100%, 112px 8px; -webkit-mask-position: 0 0, center top; -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-size: 100% 100%, 112px 8px; mask-position: 0 0, center top; mask-repeat: no-repeat;
    mask-composite: exclude;
}
.step__icon {
    position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
    padding: 0 12px;
}
.step__icon img { display: block; margin: 0 auto; height: auto;  width: 70px; max-width: 80px; }
.step__no { color: var(--red); font-weight: 600; font-size: 20px; margin-bottom: 18px; }
.step__title { font-weight: 600; }
.step__text { font-weight: 400; }

.tnc { padding: 0 16px 12px; text-align: right; font-size: 10px; color: #888; }

/* Responsive */
@media (max-width: 1100px) {
    .page { padding-top: 48px; }
    .steps { grid-template-columns: repeat(4, minmax(0, 185px)); gap: 28px; padding: 0 8px; }
    .step { font-size: 18px; }
}
@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 200px)); gap: 70px 40px; }
    .steps-head { margin: 50px auto 84px; }
}
@media (max-width: 767px) {
    .page { padding: 32px 16px 16px; }
    .sub br { display: none; }
    .btn { font-size: 22px; padding: 12px 24px; }
}
@media (max-width: 480px) {
    .headline br { display: none; }
    .steps { grid-template-columns: minmax(0, 260px); gap: 64px; padding: 0; margin-top: 10px; }
    .step { font-size: 16px; padding: 50px 6px 22px; min-height: 190px; }
    .step__no { font-size: 17px; margin-bottom: 12px; }
    .step__icon img { width: 60px; }
    .step__icon { top: -33px; }
    .steps-head__pill { font-size: 18px; padding: 6px 24px; }
    .headline{font-size: clamp(28px, 4vw, 56px);}
}