/* /use-cases: who it is for and why teams move. Page-only figures. */

/* ── teams: three readers, one figure each ── */
.teams { margin-top: 44px; }
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 40px; align-items: center; padding: 28px 30px; border: 1px solid var(--edge); border-radius: 16px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 120, 220, 0.12), transparent 70%), #070b12; }
.team h3 { margin: 0; font: 500 28px/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; }
.team p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.team__fig { display: grid; gap: 8px; }
.team__row { display: flex; align-items: center; gap: 8px; }
.team__box { flex: 1; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); font-size: 13px; color: var(--fg); }
.team__box small { display: block; margin-bottom: 4px; font: 500 9px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.team__box.is-model { border-color: rgba(92, 200, 255, 0.45); background: rgba(92, 200, 255, 0.08); text-align: center; }
.team__box.is-lock::after { content: "own access · blinding · audit trail"; display: block; margin-top: 6px; font: 500 9px var(--font-mono); letter-spacing: 0.06em; color: var(--live); }
.team__arrow { flex: none; width: 22px; height: 1px; background: rgba(92, 200, 255, 0.7); box-shadow: 0 0 6px rgba(92, 200, 255, 0.6); }
.team__check { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); font-size: 13.5px; color: var(--fg); }
.team__check::before { content: ""; width: 16px; height: 16px; flex: none; border: 1px solid rgba(110, 231, 183, 0.6); border-radius: 50%; background: rgba(110, 231, 183, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3 5 8.4 9.3 3.7' fill='none' stroke='%236ee7b7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.team__check span { margin-left: auto; font: 500 10px var(--font-mono); letter-spacing: 0.06em; color: var(--label); }

/* ── why teams move: one fragment per reason ── */
.why .frag { margin-top: 0; }
.why .story { padding-bottom: clamp(16px, 2.4vw, 28px); }

/* ── the customer ── */
.said { margin-top: 8px; }

@media (max-width: 980px) {
  .team { grid-template-columns: 1fr; }
}

/* ══ The page's own world: dossiers on a desk. Tall file folders with offset
   tabs and colored labels, papers that rise when a folder is chosen, section
   heads hung as divider tabs from a rule. ══ */
.page-dossier { --d-sponsors: #5cc8ff; --d-cros: #6ee7b7; --d-biotechs: #f2c46d; --folder: #0d1522; }

.dossier-hero { padding: 136px 0 88px; }
.dossier-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 24px 64px; align-items: end; }
.dossier-hero .page-title { max-width: none; font-size: clamp(46px, 6vw, 92px); }
.dossier-hero .page-lede { margin-top: 0; }
.dossiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 72px 0 0; padding: 0; list-style: none; }
.dossier { --c: var(--d-sponsors); position: relative; padding-top: 34px; animation: dossierIn 0.8s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + 250ms); }
.dossier--cros { --c: var(--d-cros); }
.dossier--biotechs { --c: var(--d-biotechs); }
@keyframes dossierIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.dossier a { position: relative; display: block; color: inherit; outline: none; }
.dossier__tab { position: absolute; z-index: 3; top: -34px; left: calc(14px + var(--i) * 28%); height: 35px; padding: 10px 18px 0; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--folder); font: 600 11px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.dossier__papers { position: absolute; z-index: 1; left: 22px; right: 22px; top: -16px; }
.dossier__papers i { display: block; height: 36px; margin-top: -26px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; background: #dfe3e8; font: 500 10px var(--font-mono); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1a202a; transition: transform 320ms var(--ease-out); }
.dossier__papers i:first-child { margin-top: 0; }
.dossier__body { position: relative; z-index: 2; display: grid; align-content: end; gap: 10px; min-height: 330px; padding: 30px 26px 26px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 4px 14px 14px 14px; background: linear-gradient(180deg, var(--folder), #080d16); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); transition: transform 320ms var(--ease-out), border-color 200ms ease; }
.dossier__body::before { content: ""; position: absolute; left: 22px; top: 22px; width: 40px; height: 4px; border-radius: 2px; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
.dossier__body small { font: 500 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.dossier__body b { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--font-display); color: #fff; text-wrap: balance; }
.dossier__open { margin-top: 8px; font-size: 13.5px; color: var(--muted); transition: color 200ms ease; }
.dossier a:hover .dossier__body, .dossier a:focus-visible .dossier__body { border-color: var(--c); transform: translateY(8px); }
.dossier a:hover .dossier__open, .dossier a:focus-visible .dossier__open { color: #fff; }
.dossier a:hover .dossier__papers i, .dossier a:focus-visible .dossier__papers i { transform: translateY(-22px); }
.dossier a:hover .dossier__papers i:nth-child(2), .dossier a:focus-visible .dossier__papers i:nth-child(2) { transform: translateY(-14px); }
.dossier a:hover .dossier__papers i:nth-child(3), .dossier a:focus-visible .dossier__papers i:nth-child(3) { transform: translateY(-6px); }
.dossier a:focus-visible .dossier__body { box-shadow: 0 0 0 2px var(--c); }

/* section heads hang from a rule like divider tabs */
.page-dossier .section-head { max-width: none; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.page-dossier .section-head > * { max-width: 760px; }
.page-dossier .section-head .kicker { display: inline-block; margin: -1px 0 24px; padding: 8px 16px 9px; border: 1px solid rgba(255, 255, 255, 0.14); border-top: 0; border-radius: 0 0 10px 10px; background: var(--folder); color: #cfd6e0; }
.page-dossier .team { border-radius: 4px 14px 14px 14px; }
.page-dossier .team[data-switch-panel="sponsors"] { border-color: color-mix(in srgb, var(--d-sponsors) 40%, transparent); }
.page-dossier .team[data-switch-panel="cros"] { border-color: color-mix(in srgb, var(--d-cros) 40%, transparent); }
.page-dossier .team[data-switch-panel="biotechs"] { border-color: color-mix(in srgb, var(--d-biotechs) 40%, transparent); }

@media (max-width: 980px) {
  .dossier-hero__top { grid-template-columns: 1fr; }
  .dossiers { grid-template-columns: 1fr; gap: 44px; }
  .dossier__tab { left: 14px; }
  .dossier__body { min-height: 200px; }
}
@media (max-width: 640px) {
  .dossier-hero { padding-top: 112px; }
  .dossier__body b { font-size: 22px; }
}
html[data-motion="paused"] .dossier { animation: none; }
@media (prefers-reduced-motion: reduce) { .dossier { animation: none; } .dossier__body, .dossier__papers i { transition: border-color 200ms ease; } }