.loyalty-page .header{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.loyalty-page .header .menu a,
.loyalty-page .header .icon-button{
    color:#06298b;
}

.loyalty-page .header .icons svg,
.loyalty-page .header .search-box svg{
    stroke:#06298b;
}

.loyalty-hero{
    padding:170px 0 70px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 58%, rgba(232,244,250,.82) 100%),
        url('../img/homepage/olivy.png') right center/contain no-repeat;
}

.loyalty-hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);
    gap:36px;
    align-items:center;
}

.loyalty-copy small,
.loyalty-heading small,
.loyalty-status span{
    display:block;
    color:#5c6f91;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.loyalty-copy h1{
    max-width:760px;
    margin:10px 0 18px;
    color:#0f1f4d;
    font-size:68px;
    line-height:.98;
}

.loyalty-copy p{
    max-width:700px;
    color:#334155;
    font-size:18px;
    line-height:1.75;
}

.loyalty-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px;
}

.loyalty-button{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid #dbe4f0;
    border-radius:8px;
    padding:0 18px;
    font:inherit;
    font-weight:900;
    cursor:pointer;
    text-decoration:none;
}

.loyalty-button svg{
    width:19px;
    height:19px;
}

.loyalty-button.primary{
    border-color:#06298b;
    background:#06298b;
    color:#fff;
}

.loyalty-button.secondary{
    background:#fff;
    color:#06298b;
}

.loyalty-status{
    padding:28px;
    border:1px solid rgba(6,41,139,.12);
    border-radius:8px;
    background:#06298b;
    color:#fff;
    box-shadow:0 18px 48px rgba(6,41,139,.16);
}

.loyalty-status-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin-bottom:22px;
    border-radius:8px;
    background:rgba(255,255,255,.12);
    color:#fff;
}

.loyalty-status-icon svg{
    width:28px;
    height:28px;
}

.loyalty-status strong{
    display:block;
    margin:8px 0 10px;
    color:#fff;
    font-size:52px;
    line-height:1;
}

.loyalty-status p{
    color:rgba(255,255,255,.82);
    line-height:1.6;
}

.loyalty-status small{
    display:block;
    margin-top:12px;
    color:rgba(255,255,255,.72);
    font-weight:800;
}

.loyalty-progress{
    height:10px;
    overflow:hidden;
    margin-top:18px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
}

.loyalty-progress span{
    display:block;
    height:100%;
    border-radius:999px;
    background:#f6c85f;
}

.loyalty-content{
    background:#ffffff;
}

.loyalty-heading{
    max-width:760px;
    margin:0 auto 28px;
    text-align:center;
}

.loyalty-heading h2{
    margin-top:8px;
    color:#06298b;
    font-size:46px;
    line-height:1.08;
}

.loyalty-tier-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

.loyalty-tier-card{
    position:relative;
    min-height:118px;
    display:grid;
    grid-template-columns:130px 1fr auto;
    align-items:center;
    gap:18px;
    padding:20px 26px;
    border:1px solid #dbe4f0;
    border-left:6px solid #0f6fb8;
    border-radius:8px;
    background:#fff;
    box-shadow:0 8px 22px rgba(6,41,139,.05);
}

.loyalty-tier-card.gold{
    border-color:#dbe4f0;
    border-left-color:#d39b24;
    background:#fff;
}

.loyalty-tier-card.green{
    border-color:#dbe4f0;
    border-left-color:#2f855a;
    background:#fff;
}

.loyalty-tier-card.reached{
    box-shadow:0 12px 28px rgba(47,133,90,.12);
}

.loyalty-tier-card.current{
    outline:3px solid rgba(47,133,90,.16);
}

.loyalty-tier-card > strong{
    min-height:70px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#eff6ff;
    color:#0b6ea8;
    font-size:40px;
    line-height:1;
}

.loyalty-tier-card.gold > strong{
    background:#fff8ec;
    color:#d39b24;
}

.loyalty-tier-card.green > strong{
    background:#edf8f2;
    color:#2f855a;
}

.loyalty-tier-card h3{
    margin:0 0 7px;
    color:#0f172a;
    font-family:"Manrope", sans-serif;
    font-size:25px;
    line-height:1.15;
}

.loyalty-tier-card p{
    margin:0;
    color:#64748b;
    font-size:16px;
    font-weight:800;
}

.loyalty-tier-card > svg{
    width:26px;
    height:26px;
    color:#2f855a;
}

.loyalty-badge{
    position:absolute;
    top:16px;
    right:18px;
    min-height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:999px;
    background:#0f6fb8;
    color:#fff;
    font-size:13px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.loyalty-tier-card.green .loyalty-badge{
    background:#2f855a;
}

.loyalty-note{
    margin:42px 0;
    padding:26px 32px;
    border-left:6px solid #0f6fb8;
    border-radius:8px;
    background:#f8fafc;
    color:#263244;
}

.loyalty-note ul{
    display:grid;
    gap:14px;
    margin:0;
    padding-left:22px;
}

.loyalty-note li{
    line-height:1.7;
    font-weight:700;
}

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

.loyalty-info-grid article{
    padding:32px;
    border:1px solid #dbe4f0;
    border-radius:8px;
    background:#fff;
    box-shadow:0 8px 22px rgba(6,41,139,.05);
}

.loyalty-info-grid svg{
    width:38px;
    height:38px;
    color:#d39b24;
    margin-bottom:42px;
}

.loyalty-info-grid h2{
    margin-bottom:12px;
    color:#06298b;
    font-size:30px;
    line-height:1.08;
}

.loyalty-info-grid p{
    color:#475569;
    line-height:1.7;
}

@media(max-width:980px){
    .loyalty-hero-grid,
    .loyalty-info-grid{
        grid-template-columns:1fr;
    }

    .loyalty-copy h1{
        font-size:54px;
    }
}

@media(max-width:760px){
    .loyalty-hero{
        padding:130px 0 54px;
    }

    .loyalty-copy h1,
    .loyalty-heading h2{
        font-size:40px;
    }

    .loyalty-actions,
    .loyalty-button{
        width:100%;
    }

    .loyalty-tier-grid{
        grid-template-columns:1fr;
    }

    .loyalty-tier-card{
        grid-template-columns:1fr auto;
        gap:10px;
        padding:24px 20px;
    }

    .loyalty-tier-card > strong{
        font-size:42px;
    }

    .loyalty-tier-card h3{
        font-size:22px;
    }

    .loyalty-badge{
        position:static;
        grid-column:1 / -1;
        width:max-content;
        min-height:32px;
        padding:0 12px;
        font-size:11px;
    }

    .loyalty-note,
    .loyalty-info-grid article,
    .loyalty-status{
        padding:22px;
    }
}