/* Meet your AI Fellows: the chosen experience's portrait inside the Frontierz aura, three labeled choices
   under it, and the live demo button. Two equal columns: the text, then the circle and the choices
   centered in theirs. The aura may grow past the page edge on narrow screens: the section clips it sideways, so the
   page never scrolls horizontally. */
.meet-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px 24px; padding-top: 40px; padding-bottom: 96px; overflow-x: clip; scroll-margin-top: 38px; }
.meet-copy { display: flex; flex-direction: column; align-items: flex-start; }
.meet-heading h2 { font-size: clamp(48px, 5.4vw, 76px); letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.meet-intro { max-width: 34ch; margin-top: 22px; color: var(--muted); font-size: 20px; line-height: 1.6; }
.meet-start { margin-top: 34px; gap: 12px; padding-left: 18px; white-space: normal; text-align: left; }
.meet-start .icon { width: 16px; height: 16px; }

/* The stage: the name above the circle, the circle (the button that opens the live session) and three experiences to
   choose from. The aura (the same image as the Frontierz call, from the Founderz app) grows and fades with the
   mouth while a clip plays: meet-fellows.js animates it up to --aura-max times the circle. It sits at z-index -1 of the
   page, with no stacking context between: it shows on the paper and behind the Fellows, and the painted cards of the
   sections around it cover it when it grows that far. */
.meet-stage { --face: min(100%, 360px); --aura-max: 1.9; position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 26px; width: min(100%, 480px); padding-block: 48px; }
.meet-name { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; text-align: center; font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.meet-name span:last-child { color: var(--muted); font-size: 16px; font-weight: 400; letter-spacing: 0; }
.meet-face { position: relative; display: block; width: var(--face); aspect-ratio: 1; padding: 0; border-radius: 50%; background: none; }
.meet-face:focus-visible { outline: 3px solid #547a65; outline-offset: 8px; }
.meet-aura { position: absolute; inset: 0; z-index: -1; width: 100%; max-width: none; height: 100%; pointer-events: none; opacity: .8; transform: scale(1.2); }
.meet-circle { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; clip-path: circle(50%); background: #d3dcd2; }
.meet-circle video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.meet-circle video.is-active { opacity: 1; }
.meet-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 10px; }
.meet-roster button { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 12px 10px; border: 1px solid var(--line); border-radius: 28px; background: var(--paper); font-size: 14px; line-height: 1.35; text-wrap: balance; }
.meet-roster button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.meet-roster button:focus-visible { outline-offset: 4px; }
.meet-roster img { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .meet-circle { transition: transform .35s var(--ease); }
  .meet-face:hover .meet-circle { transform: scale(1.03); }
  .meet-roster img { transition: transform .25s var(--ease); }
  .meet-roster button:hover img { transform: scale(1.08); }
}

@media (max-width: 1000px) {
  .meet-section { grid-template-columns: 1fr; gap: 36px; padding-bottom: 72px; }
  .meet-intro { max-width: 40ch; }
  .meet-stage { justify-self: start; width: 100%; max-width: 560px; }
}
@media (max-width: 650px) {
  .meet-section { gap: 28px; padding-top: 24px; padding-bottom: 64px; scroll-margin-top: 24px; }
  .meet-heading h2 { font-size: clamp(42px, 12vw, 56px); }
  .meet-intro { margin-top: 16px; font-size: 18px; }
  .meet-start { margin-top: 26px; }
  .meet-stage { --face: 64%; --aura-max: 1.8; justify-self: stretch; max-width: none; gap: 22px; padding-block: 36px 44px; }
  .meet-name { font-size: 19px; }
  .meet-name span:last-child { font-size: 16px; }
  .meet-roster { grid-template-columns: 1fr; gap: 8px; }
  .meet-roster button { flex-direction: row; gap: 12px; min-height: 58px; padding: 10px 12px; border-radius: var(--button-radius); font-size: 15px; text-align: left; text-wrap: wrap; }
  .meet-roster img { width: 36px; height: 36px; }
  .meet-roster br { display: none; }   /* the labels sit on one line beside the face */
}