/* V2.5 — collaborate, evidence, FAQ, example report, needs, hero animation */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.path { display: flex; flex-direction: column; gap: .2rem; }
.path .button { margin-top: auto; align-self: flex-start; }
.path p { color: var(--muted); }
.h3.big { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: .3rem 0 .6rem; }
.mini { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-ink); margin: 1rem 0 .5rem; }
.needs-row { margin-top: 1.2rem; }
.ladder { display: grid; gap: .7rem; }
.lvl { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--ivory); }
.lvl p { color: var(--muted); font-size: .92rem; margin-top: .2rem; }
.badge { flex: 0 0 auto; font-size: .78rem; font-weight: 750; padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; }
.badge.progress { background: rgba(0,168,164,.16); color: var(--turq-ink); }
.badge.planned { background: rgba(242,181,68,.22); color: var(--gold-ink); }
.badge.none { background: #EEF1F2; color: #4A5D64; }
.faq-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 1.5rem; align-items: start; }
.faq-list { display: grid; gap: .7rem; }
.faq { margin: 0; }
.faq summary { font-size: 1rem; }
.downloads.plain a::before { content: none; }
.report { display: grid; gap: 1.1rem; }
.synthetic { padding: .9rem 1.2rem; border-radius: 14px; background: repeating-linear-gradient(135deg, #FFF4D6, #FFF4D6 14px, #FFEBB8 14px, #FFEBB8 28px); color: #5A3B00; font-weight: 750; border: 1px solid #F2B544; }
.chart { width: 100%; max-width: 720px; height: auto; display: block; margin: .6rem 0 .4rem; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick, .chart .lab, .chart .axis { font: 12px var(--sans); fill: var(--muted); }
.chart .lab { font-weight: 700; fill: var(--petrol); }
.chart .ci { stroke: var(--turq); stroke-width: 4; stroke-linecap: round; }
.chart .pt { fill: var(--gold); stroke: var(--petrol); stroke-width: 2; }
.table-wrap { overflow-x: auto; }
.rob { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .92rem; }
.rob th, .rob td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.rob thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--turq-ink); }
.needs-chips { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.needs-chips h3 { font-size: 1rem; margin-right: .3rem; }
.needs-chips ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.needs-chips li { padding: .4rem .75rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .85rem; font-weight: 650; }
.needs-chips a { color: var(--turq-ink); font-weight: 750; }
/* hero: tissue -> zoom on the golden cell -> mechanism (illustrative) */
.hero-art .mechanism { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #fff 0%, #F6FBFA 70%); opacity: 0; }
.hero-art .mechanism img { width: 86%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .tissue img { animation: cellzoom 18s ease-in-out infinite; transform-origin: 60% 44%; }
  .hero-art .mechanism { animation: mechfade 18s ease-in-out infinite; }
  .hero-art .mechanism img { animation: mechturn 18s ease-in-out infinite; }
}
@keyframes cellzoom { 0%, 8% { transform: scale(1); } 46% { transform: scale(2.6); } 58% { transform: scale(3); opacity: 1; } 64%, 92% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mechfade { 0%, 52% { opacity: 0; } 62%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mechturn { 0%, 55% { transform: scale(.9) rotate(-4deg); } 90% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1); } }
@media (max-width: 1080px) { .paths { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .lvl { flex-direction: column; align-items: flex-start; } }
.report > *, .report .panel, .two-col > * { min-width: 0; }