/* Current-quarter banner */
.quarter-banner { display: flex; align-items: center; gap: 18px;
    background: rgba(46,93,59,.08); border: 1px solid rgba(46,93,59,.2);
    border-radius: 12px; padding: 20px 24px; }
.quarter-banner i { font-size: 32px; color: var(--green); }
.quarter-banner h3 { margin: 0 0 4px; font-size: 18px; }
.quarter-banner p { margin: 0; font-size: 15px; color: var(--text-2); }

/* Deadline card status accents */
.deadline-card { position: relative; }
.deadline-card .status-pill { display: inline-block; font-family: "Space Grotesk", sans-serif;
    font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.status-pill.pill-overdue { background: rgba(192,57,43,.12); color: #C0392B; }
.status-pill.pill-due { background: rgba(216,160,42,.16); color: #B8860B; }
.status-pill.pill-current { background: rgba(46,93,59,.12); color: var(--green); }
.status-pill.pill-future { background: var(--sandstone); color: var(--text-2); }
.deadline-card .dl-meta { font-size: 14px; color: var(--text-2); margin: 2px 0; }
.deadline-note { font-size: 13px; border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.deadline-note.dn-warn { background: rgba(216,160,42,.1); border: 1px solid rgba(216,160,42,.3); }
.deadline-note.dn-info { background: rgba(46,93,59,.08); border: 1px solid rgba(46,93,59,.2); }
.deadline-note.dn-neutral { background: var(--sandstone); border: 1px solid var(--border); }

/* Timeline */
.bas-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tl-item { display: flex; gap: 14px; }
.tl-item .tl-dot { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--orange); color: #fff; font-family: "Space Grotesk", sans-serif;
    font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tl-item h4 { margin: 0 0 3px; font-size: 17px; }
.tl-item p { margin: 0; font-size: 14px; color: var(--text-2); }

/* Callout boxes */
.callout { border-radius: 10px; padding: 16px 18px; margin: 16px 0; }
.callout--info { background: rgba(46,93,59,.08); border: 1px solid rgba(46,93,59,.2); }
.callout ul { margin: 6px 0 0; padding-left: 20px; }
.callout h5 { margin: 0 0 6px; font-size: 16px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 880px) {
    .bas-timeline, .two-col { grid-template-columns: 1fr; }
}