/* Program overview page: compact and visual */
.ov { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ov-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding: 20px 26px; align-items: center; background: radial-gradient(800px 240px at 100% -30%, rgba(61,140,132,.14), transparent), radial-gradient(420px 180px at 0% 130%, rgba(160,132,92,.10), transparent), var(--card); }
.ov-hero h1 { font-size: clamp(28px, 3.6vw, 40px); margin: 4px 0 6px; }
.ov-hero p { margin: 0; font-size: 13.5px; }
.ov-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ov-stat { background: rgba(255,255,255,.8); border: 1px solid var(--ln); border-radius: 14px; padding: 9px 10px; text-align: center; }
.ov-stat b { display: block; font: 600 26px 'Cormorant Garamond', Georgia, serif; color: var(--teal-d); line-height: 1.05; }
.ov-stat span { font-size: 11px; color: var(--t2); }

/* Roadmap: pick a module to see its outline */
.ov-road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.ov-road::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 25px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--ln2) 30%, var(--ln2)); z-index: 0; }
.ov-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 4px 6px 8px; border: 1px solid transparent; border-radius: 14px; background: none; font: inherit; color: inherit; transition: .15s; }
.ov-step:hover { background: rgba(255,255,255,.6); }
.ov-step.sel { background: var(--card); border-color: var(--ln2); box-shadow: 0 6px 20px rgba(30,60,60,.07); }
.ov-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); border: 2px solid var(--ln2); color: var(--t3); font: 600 19px 'Cormorant Garamond', Georgia, serif; }
.ov-dot svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-step.live .ov-dot { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 0 0 5px var(--teal-soft); }
.ov-step.sel:not(.live) .ov-dot { border-color: var(--teal); color: var(--teal-d); }
.ov-step b { font: 600 16px 'Cormorant Garamond', Georgia, serif; margin-top: 3px; }

/* Selected module */
.ov-panel { padding: 16px 22px 18px; }
.ov-panel h2 { font-size: 22px; margin-top: 2px; }
.ov-prog { width: 210px; font-size: 12px; color: var(--t2); text-align: right; } .ov-prog .bar { margin-top: 6px; }
.ov-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 26px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ln); }
.ov-outline { columns: 2; column-gap: 18px; margin-top: 6px; }
.ov-topic { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: 12.5px; line-height: 1.3; break-inside: avoid; border-radius: 8px; text-decoration: none; color: inherit; background: none; border: 0; width: 100%; text-align: left; font-family: inherit; }
.ov-topic i, .ov-legend i { flex: none; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 9px; border: 1.5px solid var(--ln2); color: var(--t3); }
.ov-topic.live i, .ov-legend i.live { background: var(--teal); border-color: var(--teal); color: #fff; }
.ov-topic.chat i, .ov-legend i.chat { background: #C9A24A; border-color: #C9A24A; color: #fff; } .ov-topic.chat i svg, .ov-legend i.chat svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.ov-topic.video i, .ov-legend i.video { border-color: var(--teal); color: var(--teal-d); }
.ov-topic.plan { color: var(--t2); }
button.ov-topic, a.ov-topic { cursor: pointer; font-weight: 500; } button.ov-topic:hover, a.ov-topic:hover { background: var(--teal-soft); }
.ov-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--t2); } .ov-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ov-live { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ov-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 12px; background: #fff; text-decoration: none; color: inherit; font: inherit; text-align: left; transition: .15s; }
.ov-item:hover { border-color: var(--teal); transform: translateX(2px); }
.ov-item span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.25; } .ov-item b { font-size: 13px; } .ov-item small { font-size: 11px; color: var(--t2); }
.ov-item em { font-style: normal; }
.ov-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--teal-soft); color: var(--teal-d); display: grid; place-items: center; flex: none; }
.ov-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-outcome { margin: 8px 0 12px; font-size: 14px; line-height: 1.5; }
.ov-soon-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .ov-hero, .ov-body { grid-template-columns: 1fr; } .ov-road { grid-template-columns: repeat(2, 1fr); } .ov-road::before { display: none; } .ov-outline { columns: 1; } }
@media (max-width: 640px) {
  .ov, .ov-road > *, .ov-body > * { min-width: 0; }
  .ov-hero, .ov-panel { padding: 16px; }
  .ov-prog { width: 100%; text-align: left; }
  .ov-legend { flex-wrap: wrap; gap: 8px; }
  .ov-topic, .ov-item { min-height: 44px; }
  .ov-item span:nth-child(2) { min-width: 0; }
  .ov-step { padding: 10px 6px; }
}