/* ======================================================
   GPIR
   Past, Present & Future of Global Payments
====================================================== */

#payments-timeline{

    position:relative;

    overflow:hidden;

    background:var(--hero-light-bg);

    padding:90px 0;

}

.timeline-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.timeline-header .section-label{

    display:inline-block;

    background:var(--hero-gold);

    color:var(--hero-navy);

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

    font-size:.85rem;

    letter-spacing:1px;

    margin-bottom:20px;

}

.timeline-header h2{

    color:var(--hero-navy);

    font-size:var(--fs-section-heading);

    margin-bottom:18px;

}

.timeline-header p{

    color:var(--hero-light-body);

    line-height:1.8;

    font-size:1.05rem;

}

/*=====================================================
  ERA COLUMNS
======================================================*/

.timeline-eras{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;

    align-items:start;

}

.timeline-era{

    position:relative;

    background:var(--hero-light-card);

    border:1px solid var(--hero-light-border);

    border-top:3px solid var(--color-grey);

    border-radius:var(--radius-lg);

    padding:30px 26px;

    box-shadow:0 4px 16px rgba(15,39,71,.05);

}

.timeline-era--past{

    border-top-color:var(--color-grey);

}

.timeline-era--present{

    border-top-color:var(--hero-gold);

}

.timeline-era--future{

    border-top-color:var(--color-secondary);
}

.era-head{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:26px;

    padding-bottom:22px;

    border-bottom:1px solid var(--hero-light-border);

}

.era-icon{

    flex-shrink:0;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    border-radius:50%;

    background:rgba(200,162,74,.10);

    border:1px solid var(--hero-light-border);

}

.era-icon svg{

    width:24px;

    height:24px;

    color:var(--hero-gold);

}

.timeline-era--future .era-icon svg{

    color:var(--color-secondary);

}

.era-head-text{

    display:flex;

    flex-direction:column;

}

.era-kicker{

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#8A94A6;

    margin-bottom:4px;

}

.timeline-era--present .era-kicker{

    color:var(--color-primary);

}

.timeline-era--future .era-kicker{

    color:var(--color-secondary);

}

.era-head-text h3{

    color:var(--hero-navy);

    font-size:var(--fs-card-heading);

    margin:0 0 4px;

}

.era-range{

    font-size:12px;

    color:#8A94A6;

    font-variant-numeric:tabular-nums;

}

/*=====================================================
  MILESTONES
======================================================*/

.era-milestones{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.era-milestones li{

    display:flex;

    gap:16px;

    align-items:flex-start;
}

.milestone-year{

    flex-shrink:0;

    min-width:52px;

    padding:4px 0;

    font-size:13px;

    font-weight:700;

    letter-spacing:.4px;

    color:var(--color-primary);

    font-variant-numeric:tabular-nums;

}

.timeline-era--future .milestone-year{

    color:var(--color-secondary);

    text-transform:uppercase;

    font-size:11px;

}

.milestone-body h4{

    color:var(--hero-navy);

    font-size:15px;

    font-weight:700;

    margin:0 0 6px;

}

.milestone-body p{

    color:var(--hero-light-body);

    font-size:13.5px;

    line-height:1.7;

    margin:0;

}

.era-source-note{

    margin:22px 0 0;

    padding-top:16px;

    border-top:1px dashed var(--hero-light-border);

    color:#8A94A6;

    font-size:11.5px;

    font-style:italic;

    line-height:1.6;

}

/*=====================================================
  RESPONSIVE
======================================================*/

@media (max-width:992px){

    .timeline-eras{

        grid-template-columns:1fr;

    }

}

@media (max-width:560px){

    #payments-timeline{

        padding:64px 0;

    }

    .timeline-header h2{

        font-size:2rem;

    }

    .timeline-era{

        padding:24px 20px;

    }

}