html,body{
margin:0;
padding:0;
background:#f4f7f6;
font-family:system-ui;
padding-bottom:110px;
}

/* SECTION */

.section{
padding:16px;
}

/* SERVICE CARD */

.service-card{

background:#fff;

border-radius:18px;

padding:16px;

margin-bottom:16px;

display:flex;

gap:14px;

box-shadow:0 6px 18px rgba(0,0,0,0.06);

cursor:pointer;

transition:.25s;
}

.service-card:hover{

transform:translateY(-2px);

box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* ICON */

.service-icon{

font-size:24px;

width:44px;
height:44px;

display:flex;
align-items:center;
justify-content:center;

border-radius:12px;

background:#f2f7f4;
}

/* BODY */

.service-body{
flex:1;
}

.service-title{

font-weight:700;

font-size:15px;

margin-bottom:4px;
}

.service-desc{

font-size:13px;

color:#666;

line-height:1.5;
}

/* FOOTER */

.service-footer{

margin-top:12px;

display:flex;

justify-content:space-between;

align-items:center;
}

.service-action{

font-size:13px;

font-weight:600;

color:#0f7a3d;
}

.arrow{
font-size:14px;
color:#0f7a3d;
}

/* BADGES */

.badge{

display:inline-block;

font-size:10px;

padding:4px 9px;

border-radius:20px;

margin-top:6px;

font-weight:600;
}

.badge.public{

background:#e6f5ec;

color:#0f7a3d;
}

.badge.paid{

background:#fff3cd;

color:#856404;
}

.badge.restricted{

background:#f8d7da;

color:#842029;
}

.badge.coming{

background:#e7f1ff;

color:#084298;
}

/* LOCKED */

.locked{

opacity:.55;

pointer-events:none;
}

/* NOTICE */

.notice{

font-size:12px;

color:#777;

line-height:1.6;

margin-top:20px;
}