/* =============================================================
   QMerse — p-who-its-for.css (Who it's for page only; loads after site.css)
   A headline over a ruled list of roles, and the chosen role open beside it: a large real screen, then two short
   paragraphs (after Goodfire). Then the common thread as a three-stage rail, with the sector note under it.
   ============================================================= */

.page-hero { padding-bottom: clamp(44px, 5.5vw, 80px); }
#roles { padding-top: clamp(56px, 6vw, 96px); }

/* ---- Role explorer ---- */
.roles { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.roles-side { position: sticky; top: 100px; }
.roles-side h2 { font-size: clamp(30px, 2.8vw, 42px); margin: 0 0 14px; }
.roles-lede { font-size: 16px; line-height: 1.6; color: var(--tp-mute); margin-bottom: 28px; max-width: 30em; }
.role-list { border-top: 1px solid var(--tp-line); }
.role-tab {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 16px; align-items: center; width: 100%; text-align: start;
  padding: 16px 4px; border-bottom: 1px solid var(--tp-line); color: var(--tp-mute); position: relative;
  transition: color 0.3s, padding 0.4s var(--ease);
}
.role-tab::before { content: ''; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--tp-acc); transform: scaleY(0); transition: transform 0.35s var(--ease); }
.role-tab:hover { color: var(--tp-ink); }
.role-tab[aria-selected="true"] { color: var(--tp-ink); padding-inline-start: 16px; }
.role-tab[aria-selected="true"]::before { transform: none; }
.rt-name { font-family: var(--font-sans); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.rt-arr { font-size: 18px; color: var(--tp-dim); transition: transform 0.3s var(--ease), color 0.3s; }
.role-tab[aria-selected="true"] .rt-arr { color: var(--tp-acc); transform: translateX(3px); }

/* one open panel: the screen large on top, then the role and what changes */
.role-panel { display: flex; flex-direction: column; color: var(--tp-ink); scroll-margin-top: 100px; }
.js .role-panel:not(.on) { display: none; }
.role-panel[hidden] { display: none; }
.role-panel.on { animation: rolePanelIn 0.5s var(--ease-out) both; }
@keyframes rolePanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.js) .role-list { display: none; }
html:not(.js) .role-panel + .role-panel { margin-top: clamp(48px, 6vw, 80px); }
.rp-art { order: -1; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border: 1px solid var(--tp-line); border-radius: 10px; box-shadow: 0 30px 60px -36px var(--tp-lift); }
.rp-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); transform: scale(1.025); transition: transform 1.4s var(--ease-out); }
.role-panel.on .rp-art img { transform: none; }
.rp-copy { padding-top: clamp(24px, 2.6vw, 34px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 3.5vw, 48px); }
.role-panel h3 { grid-column: 1 / -1; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -0.02em; color: var(--tp-ink); margin: 0 0 4px; }
.rp-k { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--tp-dim); }
.rp-block.after .rp-k { color: var(--tp-ok); }
.rp-block p { font-size: 16px; line-height: 1.65; color: var(--tp-mute); }
.rp-block.after p { color: var(--tp-ink); }
.rp-block a { color: var(--tp-acc); border-bottom: 1px solid currentColor; }
.rp-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 6px; }
/* the honest test has no screen: one heading, one paragraph, one button */
.role-panel.ask .rp-copy { grid-template-columns: minmax(0, 1fr); max-width: 36em; padding-top: 0; }
.role-panel.ask h3 { font-size: clamp(32px, 3vw, 44px); }
.role-panel.ask .rp-block p { font-size: 18px; }
@media (max-width: 980px) {
  .roles { grid-template-columns: minmax(0, 1fr); }
  .roles-side { position: static; }
  .role-tab { padding: 14px 4px; }
  .rt-name { font-size: 16px; }
}
@media (max-width: 640px) { .rp-copy { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .role-panel.on .rp-art img { transform: none; } .role-panel.on { animation-name: rmFade; } }

/* ---- The common thread: a text rail, then the sector note ---- */
.thread .gw-card, .thread .gw-stage.is-lit .gw-card { background: transparent; border: 0; box-shadow: none; padding: 0 16px 0 0; color: var(--tp-ink); }
.thread .gw-card h3 { font-size: clamp(20px, 1.7vw, 24px); margin: 0 0 10px; color: var(--tp-ink); }
.thread .gw-card p { font-size: 16px; color: var(--tp-mute); margin: 0; }
@media (max-width: 1080px) and (min-width: 640px) { .thread .gw-card { display: flex; flex-direction: column; } }
.thread-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--tp-line); }
.thread-foot h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--tp-ink); }
.thread-foot p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tp-mute); }
@media (max-width: 880px) { .thread-foot { grid-template-columns: minmax(0, 1fr); } }