/* CPDREG - A clear route to accreditation / modern step markers */
#how-it-works .numbered-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    border:0;
    background:transparent;
    overflow:visible;
}
#how-it-works .number-card{
    --step-accent:#dce8ef;
    --step-accent-2:#eef3f6;
    position:relative;
    isolation:isolate;
    min-height:292px;
    padding:30px 28px 28px;
    border:1px solid var(--line);
    background:linear-gradient(145deg,#fff 0%,#fff 72%,var(--step-accent-2) 100%);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
#how-it-works .number-card:nth-child(2){--step-accent:#dce9df;--step-accent-2:#eef4ef}
#how-it-works .number-card:nth-child(3){--step-accent:#eadfd9;--step-accent-2:#f7f0ec}
#how-it-works .number-card:nth-child(4){--step-accent:#e7e0ee;--step-accent-2:#f4f0f7}
#how-it-works .number-card::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-68px;
    top:-68px;
    border:1px solid rgba(13,34,56,.08);
    transform:rotate(25deg);
    z-index:-1;
}
#how-it-works .number-card::after{
    position:absolute;
    right:18px;
    bottom:-28px;
    font-size:118px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.09em;
    color:var(--navy);
    opacity:.035;
    pointer-events:none;
    z-index:-1;
}
#how-it-works .number-card:nth-child(1)::after{content:"01"}
#how-it-works .number-card:nth-child(2)::after{content:"02"}
#how-it-works .number-card:nth-child(3)::after{content:"03"}
#how-it-works .number-card:nth-child(4)::after{content:"04"}
#how-it-works .number-card .n{
    position:relative;
    width:86px;
    height:86px;
    margin:0 0 38px 2px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 0 13px;
    background:var(--step-accent)!important;
    color:var(--navy)!important;
    clip-path:polygon(17% 0,100% 0,100% 82%,82% 100%,0 100%,0 17%);
    border:0;
    font-size:34px;
    line-height:1;
    font-weight:850;
    letter-spacing:-.055em;
    text-shadow:none;
    z-index:2;
    filter:drop-shadow(7px 7px 0 var(--navy));
    transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s ease;
}
#how-it-works .number-card .n::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(13,34,56,.18);
    clip-path:inherit;
    pointer-events:none;
}
#how-it-works .number-card .n::after{
    content:"STEP";
    position:absolute;
    left:0;
    right:0;
    bottom:12px;
    text-align:center;
    font-size:7px;
    line-height:1;
    letter-spacing:.22em;
    font-weight:900;
    color:var(--navy)!important;
    opacity:.72;
}
#how-it-works .number-card h3{
    position:relative;
    margin:auto 0 9px;
    font-size:22px;
    line-height:1.15;
    font-weight:550;
    letter-spacing:-.02em;
}
#how-it-works .number-card h3::before{
    content:"";
    display:block;
    width:32px;
    height:2px;
    background:var(--navy);
    margin-bottom:16px;
    opacity:.88;
    transition:width .28s ease;
}
#how-it-works .number-card p{
    margin:0;
    color:var(--muted);
    max-width:31ch;
}
#how-it-works .number-card:hover{
    transform:translateY(-7px);
    border-color:rgba(13,34,56,.22);
    box-shadow:0 22px 52px rgba(18,18,18,.09);
}
#how-it-works .number-card:hover .n{
    transform:translateY(-4px) rotate(1deg);
    filter:drop-shadow(10px 10px 0 var(--navy));
}
#how-it-works .number-card:hover h3::before{width:54px}

@media (max-width:1180px){
    #how-it-works .numbered-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
    #how-it-works .numbered-grid{grid-template-columns:1fr;gap:12px}
    #how-it-works .number-card{min-height:245px;padding:24px}
    #how-it-works .number-card .n{width:76px;height:76px;font-size:30px;margin-bottom:28px}
    #how-it-works .number-card::after{font-size:96px;right:14px;bottom:-22px}
}
@media (prefers-reduced-motion:reduce){
    #how-it-works .number-card,#how-it-works .number-card .n,#how-it-works .number-card .n::before,#how-it-works .number-card h3::before{transition:none}
}