body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; }
h1 { font-weight: 800; font-size: 1.8rem; }

.stage-1 .stage-title { color: #1a5fb4; }
.stage-2 .stage-title { color: #2e7d32; }
.stage-3 .stage-title { color: #e65100; }
.stage-4 .stage-title { color: #6a1b9a; }
.stage-5 .stage-title { color: #c62828; }

.stage-icon {
width: 64px; height: 64px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 10px;
font-size: 1.6rem;
}
.icon-1 { background: #1a5fb4; }
.icon-2 { background: #2e7d32; }
.icon-3 { background: #e65100; }
.icon-4 { background: #6a1b9a; }
.icon-5 { background: #c62828; }

.essential-badge {
color: #fff;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 1px;
padding: 6px 0;
text-align: center;
border-radius: 4px 4px 0 0;
}
.badge-1 { background: #1a5fb4; }
.badge-2 { background: #2e7d32; }
.badge-3 { background: #e65100; }
.badge-4 { background: #6a1b9a; }
.badge-5 { background: #c62828; }

.also-helpful-title {
font-weight: 700;
font-size: 0.9rem;
margin-top: 12px;
}
.ah-1 { color: #1a5fb4; }
.ah-2 { color: #2e7d32; }
.ah-3 { color: #e65100; }
.ah-4 { color: #6a1b9a; }
.ah-5 { color: #c62828; }

.service-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
align-self: stretch;
}
.service-card-body { padding: 14px; }

.service-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 0.88rem;
font-weight: 500;
color: #000;
}
.service-item:last-child { border-bottom: none; }

.service-icon {
width: 34px; height: 34px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.si-1 { background: #dbeafe; color: #1a5fb4; }
.si-2 { background: #dcfce7; color: #2e7d32; }
.si-3 { background: #ffedd5; color: #e65100; }
.si-4 { background: #ede9fe; color: #6a1b9a; }
.si-5 { background: #fee2e2; color: #c62828; }

.also-helpful ul {
padding-left: 18px;
margin: 0;
font-size: 0.85rem;
}
.also-helpful ul li { margin-bottom: 4px; color: #000; }

/* FIX: was #fff, invisible on light background */
.stage-desc { font-size: 0.88rem; color: #444; }

.footer-note {
font-style: italic;
font-weight: 600;
font-size: 0.95rem;
color: #fff;
}

#backToTopBtn {
margin-bottom: 60px !important;
right: 18px !important;
}

/* Desktop — grid + subgrid alignment, scoped inside media query */
@media (min-width: 992px) {
.mobile-tabs { display: none !important; }

.desktop-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto 1fr;
align-items: stretch;
gap: 0 12px;
}

.desktop-grid > div {
display: contents;
}

.stage-header {
grid-row: 1; /* always in row 1 */
padding-bottom: 1rem;
text-align: center;
align-self: start;
}

.service-card {
grid-row: 2; /* always in row 2 */
align-self: stretch;
}
}

/* Mobile */
@media (max-width: 991.98px) {
.desktop-grid { display: none !important; }
.mobile-tabs { display: block !important; }
}

/* Tab nav */
.ip-tab-nav {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
border-bottom: 2px solid #dee2e6;
margin-bottom: 1rem;
gap: 2px;
padding-bottom: 0;
scrollbar-width: none;
}
.ip-tab-nav::-webkit-scrollbar { display: none; }

.ip-tab-item {
display: flex;
align-items: center;
border-bottom: 3px solid transparent;
padding: 8px 10px;
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
color: #555;
margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
user-select: none;
}
.ip-tab-item:hover { color: #222; }
.ip-tab-item { color: #fff; }
.ip-tab-item.active-1 { color: #222; background: #f0f0f0; border-bottom-color: #1a5fb4; }
.ip-tab-item.active-2 { color: #222; background: #f0f0f0; border-bottom-color: #2e7d32; }
.ip-tab-item.active-3 { color: #222; background: #f0f0f0; border-bottom-color: #e65100; }
.ip-tab-item.active-4 { color: #222; background: #f0f0f0; border-bottom-color: #6a1b9a; }
.ip-tab-item.active-5 { color: #222; background: #f0f0f0; border-bottom-color: #c62828; }

.ip-tab-pane { display: none; }
.ip-tab-pane.active { display: block; }
.mobile-tabs .stage-desc{ color: #fff; }
.ip-tab-nav {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
border-bottom: 2px solid #dee2e6;
margin-bottom: 1rem;
gap: 0;
padding-bottom: 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch; /* keep this for smooth iOS scrolling */
}
.ip-tab-nav::-webkit-scrollbar { display: none; }

.ip-tab-item {
display: inline-flex;
align-items: center;
flex-shrink: 0;
border-bottom: 3px solid transparent;
padding: 8px 14px;
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
color: #555;
margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
user-select: none;
border-radius: 4px 4px 0 0;
}
.ip-tab-item:hover {
color: #222; background: #f0f0f0;
}
.ip-tab-nav-wrapper {
position: relative;
}
.ip-tab-nav-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 2px;
  width: 40px;
  background: linear-gradient(to right, transparent, #000);
  pointer-events: none;
}