/* === Colorful Partitions === */
.about-bg--top {
  background: linear-gradient(160deg, #5aa0ff22, #ffffff 60%), linear-gradient(180deg, #f4f8ff, #ffffff);
}
.about-bg--mid {
  background: linear-gradient(20deg, #3cc0a622, #ffffff 60%), linear-gradient(180deg, #ffffff, #f7fcff);
}
.about-bg--bot {
  background: linear-gradient(200deg, #9b6bff22, #ffffff 60%), linear-gradient(180deg, #f5f2ff, #ffffff);
}

/* === Section Styling === */
.slab { 
  padding: 18px 0; 
  border-left: 5px solid var(--brand, #2f7df6); 
  padding-left: 14px; 
  margin-bottom: 16px; 
  background: linear-gradient(90deg, rgba(47,125,246,0.05), transparent);
  border-radius: 6px;
}
.slab h2 { 
  color: var(--brand-2, #1a57c7); 
  font-size: 22px; 
  margin-bottom: 6px; 
}
.slab p, .slab li { color: var(--ink-1); }

/* === Flowline brighter pills === */
.flowline span {
  background: linear-gradient(145deg,#5aa0ff,#2f7df6);
  color: #fff;
  border: none;
}

/* === Checklist with color icons === */
.checklist li::before {
  content: "✔";
  color: #3cc0a6;
  font-weight: bold;
}

/* === Right Panel with colorful headers === */
/* Right panel boxes */
.panel {
  margin-bottom: 18px;          /* <-- creates gap between boxes */
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  overflow: hidden;
}


/* Optional: add subtle hover lift for modern feel */
.panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  transition: all 0.2s ease;
}

.panel h3 {
  margin: 0; padding: 8px 12px; color: #fff;
  font-size: 17px;
}
.panel:nth-of-type(1) h3 { background: linear-gradient(90deg,#2f7df6,#5aa0ff); }
.panel:nth-of-type(2) h3 { background: linear-gradient(90deg,#3cc0a6,#4ddbbf); }
.panel:nth-of-type(3) h3 { background: linear-gradient(90deg,#9b6bff,#c2a4ff); }
.panel:nth-of-type(4) h3 { background: linear-gradient(90deg,#f57c00,#fca040); }
.panel:nth-of-type(5) h3 { background: linear-gradient(90deg,#2f7df6,#3cc0a6); }

.panel ul { margin: 10px 0; }
.panel li { margin: 6px 0; }

/* === Accent for Year Timeline === */
.yearline li {
  position: relative; padding-left: 14px; margin: 6px 0;
}
.yearline li::before {
  content:"●"; position:absolute; left:0; top:0; font-size:12px; color:#9b6bff;
}
/* === Two-column grid layout === */
.about-grid2 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px; /* main + right panel */
  gap: 28px;
  padding: 22px 0 24px;
  align-items: start;
}

/* Right panel */
.about-aside {
  position: sticky;
  top: 96px; /* below header */
  align-self: start;
  height: fit-content;
}

/* Responsive fallback */
@media (max-width: 1000px) {
  .about-grid2 {
    grid-template-columns: 1fr; /* stack on small screens */
  }
  .about-aside {
    position: static;
    margin-top: 20px;
  }
}
/* === Improve line spacing for readability === */
.about-main p,
.about-main li,
.about-aside p,
.about-aside li {
  line-height: 1.6;   /* increase from ~1.3 → 1.6 */
}

.about-main .dek {
  line-height: 1.7;   /* intro paragraph gets extra air */
}

.yearline li,
.dotlist li,
.checklist li {
  line-height: 1.55;
}

.contact-form label,
.contact-form input,
.contact-form textarea {
  line-height: 1.5;
}
/* === Peer Review Workflow Timeline === */
.review-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.review-flow .step {
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(145deg, #5aa0ff, #2f7df6);
  color: #fff;
  white-space: nowrap;
}

.review-flow .arrow {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 2px;
}
/* === Contact Section === */
.contact-slab {
  background: linear-gradient(135deg, #f4f8ff, #ffffff);
  padding: 30px 20px;
  border-radius: 12px;
  margin-top: 28px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.contact-info h2 { margin-top: 0; }
.contact-info p { margin: 6px 0 12px; }

.contact-details {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.contact-details li {
  margin: 6px 0;
  font-size: 15px;
}

/* Contact form */
.contact-form label {
  display: block;
  margin-bottom: 14px;
}
.contact-form span {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand, #2f7df6);
  box-shadow: 0 0 0 2px rgba(47,125,246,0.15);
}
.contact-form button {
  margin-top: 8px;
  padding: 10px 18px;
}

/* Mobile */
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}