/* roadmap.css */
.roadmap { max-width: 860px; margin: 0 auto; }

.phase {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    margin: 1.5rem 0;
}
.phase h3 {
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.phase-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.status-active {
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent);
}
.status-next {
    background: rgba(255, 170, 51, 0.15);
    color: var(--orange);
}
.status-future {
    background: rgba(136, 136, 160, 0.15);
    color: var(--text-dim);
}

/* 4-track grid for Phase 2 */
.tracks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0 1rem;
}
.track-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem;
}
.track-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) {
    .tracks-grid { grid-template-columns: 1fr; }
}

.phase-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.phase-items li {
    padding: 0.35rem 0;
    padding-left: 1.4rem;
    position: relative;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.45;
}
.phase-items li::before {
    position: absolute;
    left: 0;
    font-size: 0.8rem;
    top: 0.4rem;
}
.phase-items li.done::before { content: "✓"; color: var(--green); }
.phase-items li.wip::before  { content: "◆"; color: var(--accent); }
.phase-items li.todo::before { content: "○"; color: var(--text-dim); }
.phase-items li.done { color: var(--text-dim); text-decoration: line-through; opacity: 0.65; }
.phase-items li.wip  { color: var(--text); }

.phase-gate {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-dim);
}
.phase-gate strong { color: var(--orange); }

.principles {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.principles h3 { color: var(--green); margin-bottom: 0.75rem; }
.principles p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin: 0.4rem 0;
}

/* revenue table */
.rev-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 1rem;
}
.rev-table th, .rev-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
}
.rev-table th { color: var(--text); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
.rev-table td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }

/* ── Timelines ── */
.timelines-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}
@media (max-width: 620px) { .timelines-row { grid-template-columns: 1fr; } }

.timeline-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
}
.timeline-card h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    font-weight: 700;
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}
.timeline {
    position: relative;
    padding-left: 1.5rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.5rem;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--border), transparent);
}
.tl-item {
    position: relative;
    padding: 0 0 1.1rem 0.75rem;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
    content: '';
    position: absolute;
    left: -1.55rem;
    top: 0.38rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.tl-done::before  { background: var(--green); }
.tl-now::before   { background: var(--accent); box-shadow: 0 0 0 3px rgba(74,158,255,0.18); }
.tl-soon::before  { background: var(--orange); }
.tl-warn::before  { background: #ef4444; }
.tl-gate::before  { background: #a78bfa; }
.tl-future::before { background: var(--text-dim); opacity: 0.5; }

.tl-date {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-faint);
    font-weight: 700;
    margin-bottom: 0.15rem;
}
.tl-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}
.tl-desc {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.45;
}
.tl-done  .tl-label { color: var(--text-dim); }
.tl-now   .tl-label { color: var(--accent); }
.tl-warn  .tl-label { color: #ef4444; }
.tl-soon  .tl-label { color: var(--orange); }
.tl-gate  .tl-label { color: #a78bfa; }