/* ============================================================
   ENTRIES IGNITE — SERVICE PAGES SHARED DESIGN SYSTEM
   Primary: #2e36fd | Secondary: #f18911 | Dark: #202e54
   Header font: Poppins | Body font: Inter
   ============================================================ */


/* ── CERT DASHBOARD MOCKUP ── */
.cert-dash {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r20);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
}

.cd-head {
   background: var(--D);
   padding: 13px 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.cd-dots {
   display: flex;
   gap: 5px;
}

.cd-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
}

.cd-lbl {
   font-size: 11px;
   color: rgba(255, 255, 255, .4);
}

.cd-body {
   padding: 20px;
}

/* cert cards in mockup */
.cert-card {
   background: var(--g50);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 14px 16px;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.cert-card:last-child {
   margin-bottom: 0;
}

.cc-badge {
   width: 44px;
   height: 44px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
}

.cc-name {
   font-family: 'Poppins', sans-serif;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
   display: block;
}

.cc-desc {
   font-size: 11px;
   color: var(--ink30);
   margin-top: 1px;
   display: inline-block;
   line-height: 1.4;
}

.cc-progress {
   flex: 1;
   max-width: 120px;
}

.cc-bar {
   height: 5px;
   background: #e9eaf0;
   border-radius: 3px;
   overflow: hidden;
   margin-bottom: 3px;
}

.cc-fill {
   height: 100%;
   border-radius: 3px;
}

.cc-pct {
   font-size: 10px;
   color: var(--ink30);
}

.cc-status {
   font-size: 10px;
   font-weight: 700;
   padding: 3px 10px;
   border-radius: var(--radius);
   white-space: nowrap;
}

.cs-g {
   background: rgba(22, 163, 74, .1);
   color: #16a34a;
}

.cs-a {
   background: rgba(241, 137, 17, .1);
   color: #b45309;
}

.cs-b {
   background: rgba(46, 54, 253, .1);
   color: var(--P);
}

.cs-q {
   background: var(--ink10);
   color: var(--ink30);
}

/* stage mini progress */
.cert-stage-row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 4px;
   margin-top: 16px;
}

.csr-item {
   text-align: center;
}

.csr-dot {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   margin: 0 auto 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 800;
}

.csr-done {
   background: var(--P);
   color: #fff;
}

.csr-active {
   background: var(--S);
   color: #fff;
   box-shadow: 0 0 0 3px rgba(241, 137, 17, .2);
}

.csr-todo {
   background: var(--g50);
   border: 1px solid var(--bd);
   color: var(--ink30);
}

.csr-label {
   font-size: 9px;
   color: var(--ink30);
   line-height: 1.3;
}

.ai-n {
   background: linear-gradient(135deg, rgba(46, 54, 253, .06), rgba(91, 99, 255, .03));
   border: 1px solid rgba(46, 54, 253, .12);
   border-radius: var(--r12);
   padding: 11px 14px;
   margin-top: 14px;
   display: flex;
   align-items: flex-start;
   gap: 10px;
}

.ai-n i {
   color: var(--P);
   font-size: 17px;
   flex-shrink: 0;
   margin-top: 2px;
}

.ai-n strong {
   font-size: 12px;
   color: var(--ink);
   display: block;
   margin-bottom: 2px;
}

.ai-n span {
   font-size: 11px;
   color: var(--ink60);
}


/* ── WHY CERTIFY ── */
.why-cert {
   background: #fff;
}

.wc-card {
   background: var(--g50);
   border: 1px solid var(--border);
   border-radius: var(--r16);
   padding: 24px;
   height: 100%;
   transition: all .25s;
}

.wc-card:hover {
   box-shadow: var(--sh-md);
   transform: translateY(-3px);
   border-color: rgba(46, 54, 253, .15);
}

.wc-ico {
   width: 48px;
   height: 48px;
   border-radius: var(--r12);
   background: var(--PL);
   color: var(--P);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 16px;
}

.wc-title {
   font-family: 'Poppins', sans-serif;
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 8px;
}

.wc-desc {
   font-size: 13.5px;
   color: var(--ink60);
   line-height: 1.7;
}

/* ── CERT COMPARISON TABLE ── */
.compare-sec {
   background: var(--g50);
}

.comp-table {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r16);
   overflow: hidden;
}

.comp-head {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
   padding: 14px 20px;
   background: var(--D);
   font-size: 11px;
   font-weight: 700;
   color: rgba(255, 255, 255, .5);
   text-transform: uppercase;
   letter-spacing: .7px;
}

.comp-head span:first-child {
   color: rgba(255, 255, 255, .7);
}

.comp-row {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
   padding: 16px 20px;
   border-bottom: 1px solid var(--border);
   align-items: center;
}

.comp-row:last-child {
   border-bottom: none;
}

.comp-row:nth-child(even) {
   background: var(--surface);
}

.cr-feature {
   font-size: 13.5px;
   font-weight: 600;
   color: var(--ink);
}

.cr-sub {
   font-size: 11px;
   color: var(--ink30);
}

.cr-cell {
   display: flex;
   justify-content: center;
}

.cr-yes {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(22, 163, 74, .1);
   display: flex;
   align-items: center;
   justify-content: center;
}

.cr-yes i {
   color: #16a34a;
   font-size: 13px;
}

.cr-no {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--ink10);
   display: flex;
   align-items: center;
   justify-content: center;
}

.cr-no i {
   color: var(--ink30);
   font-size: 12px;
}

@media(max-width:767px) {

   .comp-head,
   .comp-row {
      grid-template-columns: 2fr 1fr 1fr;
   }

   .comp-head span:nth-child(n+4),
   .comp-row div:nth-child(n+4) {
      display: none;
   }
}

/* ── TIMELINE ── */
.tl-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 11.5px;
   font-weight: 600;
   color: var(--P);
   background: var(--PL);
   padding: 3px 12px;
   border-radius: var(--radius);
   margin-top: 8px;
}