/* Arena faculty section — Learn from people in the arena
   One viewport tall at every breakpoint. Five people sit in a single row on
   a wide screen; below 1100px the cards snap-scroll so the section never
   becomes a stacked biography page. TRUSTED BY is a caption under the names,
   not its own band. Uses brand tokens from accelerator/index.html. */

.arena{
  /* Match the page section rhythm (.v2 --space-section). Content-height, not
     100dvh: the six compact cards plus Trusted by are taller than one screen. */
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:72px 0;
  overflow:hidden;
}
.arena .wrap{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  width:100%;
  max-width:1240px;
}
.arena .section-head{margin-bottom:28px;flex:0 0 auto}
.arena .section-head h2{font-size:clamp(26px,3.4vw,40px)}

/* The rotating question above the headline. .sizer is an invisible copy of the
   longest line, so the block holds one height and the headline never jumps as
   the lines type and delete; .live is painted over it. */
.arena .tw{
  position:relative;
  /* wide enough for the longest line to stay on one row on a desktop, so the
     reserved block is a single line high and sits tight under the headline */
  max-width:980px;
  margin:0 0 14px;
  font-size:clamp(17px,1.9vw,22px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.35;
  color:var(--ink2);
}
.arena .tw .sizer{visibility:hidden}
.arena .tw .live{position:absolute;inset:0}
.arena .tw .caret{
  display:inline-block;
  width:2px;
  height:.95em;
  margin-left:3px;
  vertical-align:-.1em;
  background:var(--ink2);
  animation:arenaCaret 1s steps(1) infinite;
}
@keyframes arenaCaret{50%{opacity:0}}

/* People: compact horizontal cards - square headshot on the left, name, role
   and proof line beside it. Three across on desktop, so six people make two
   short rows instead of one row of very tall columns. */
.arena-people{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
  min-height:0;
}
.arena-person{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  gap:0 16px;
  align-items:start;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.arena-person:hover{
  transform:translateY(-3px);
  border-color:var(--line-2);
  box-shadow:0 14px 34px -20px rgba(66,75,54,.45);
}
.arena-photo{
  grid-column:1;
  grid-row:1 / span 4;
  position:relative;
  display:block;
  width:128px;
  aspect-ratio:1;
  max-height:none;
  border-radius:12px;
  overflow:hidden;
  background:var(--panel2);
  border:1px solid var(--line);
  text-decoration:none;
}
.arena-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
}
.arena-name{
  grid-column:2;
  display:inline-block;
  width:fit-content;
  max-width:100%;
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  letter-spacing:-.018em;
  line-height:1.2;
  color:var(--green-deep);
  text-decoration:none;
  padding:0 .06em;
  margin-left:-.06em;
}
/* Same sage underline as .hl2 — slightly darker so it reads on panel fills */
.arena-name:hover{
  color:var(--green-deep);
  background:linear-gradient(180deg,transparent 64%,var(--sage-dk) 64%);
}
.arena-role{
  grid-column:2;
  margin:4px 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.04em;
  line-height:1.35;
  color:var(--lime);
}
.arena-proof{
  grid-column:2;
  margin:6px 0 0;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}
.arena-social{
  grid-column:2;
  justify-self:start;
  display:inline-block;
  margin-top:6px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--dim);
  text-decoration:none;
}
.arena-social:hover{color:var(--green-deep)}

.arena-trusted {
  flex: 0 0 auto;
  margin-top: 40px; /* Brought 'Trusted By' a bit lower relative to the cards above */
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}
.arena-trusted .eyebrow {
  display: inline-block; /* Ensure margins apply */
  margin-top: 32px; /* Bring it a lil lower */
  margin-bottom: 10px;
  margin-left: 16px; /* Bring 'Trusted By' to the right a little */
  font-size: 22px; /* 2x bigger */
  color: rgba(0, 0, 0, 0.45); /* Exact same grey as the logos (brightness 0 + opacity 0.45) */
}
.arena-marks-wrap {
  display: flex;
  margin-top: 32px;
}
.arena-marks-wrap:hover .arena-marks {
  animation-play-state: paused;
}
.arena-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px 48px;
  padding-right: 48px; /* same as gap */
  animation: scroll-marks 55s linear infinite; /* Made the loop slower */
  will-change: transform;
}
.arena-marks li {
  flex: 0 0 auto;
  line-height: 0;
  white-space: nowrap;
}
.trusted-logo {
  height: 56px; /* Greatly increased base height for logos */
  width: auto;
  object-fit: contain;
  filter: brightness(0) opacity(0.45);
  transition: filter 0.2s ease, transform 0.2s ease;
  will-change: filter;
}
/* Make specific logos significantly bigger as requested */
.trusted-logo[alt="Forbes"] {
  height: 76px;
}
.trusted-logo[alt="Techstars"] {
  height: 68px;
}
.trusted-logo[alt="Anthropic"],
.trusted-logo[alt="a16z"] {
  height: 80px; /* Make them even bigger */
}
.trusted-logo[alt="Adobe"] {
  height: 66px;
}
/* Tweaks for vertical alignment */
.trusted-logo[alt="Amazon"] {
  height: 42px;
  margin-top: 8px; /* Push it down */
}
.trusted-logo[alt="L'Oréal"] {
  margin-top: 6px;
}
.trusted-logo:hover {
  filter: brightness(1) opacity(1);
}

@keyframes scroll-marks {
  0% { transform: translate3d(0, 0, 0); }
  /* Animating individual lists by -100% avoids subpixel parent rounding jitter */
  100% { transform: translate3d(-100%, 0, 0); }
}

@media (max-width:1099px){
  .arena-people{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .arena{padding:64px 0}
}
@media (max-width:880px){
  .arena{padding:56px 0}
}
@media (max-width:700px){
  /* six stacked cards cannot fit a phone screen at readable size, so the
     section sizes to its content here instead of being clamped to 100dvh
     (which clipped the heading and the last cards) */
  .arena{height:auto;min-height:0;display:block;overflow:visible;padding:56px 0}
  .arena-people{grid-template-columns:1fr;gap:12px}
  .arena-person{grid-template-columns:104px minmax(0,1fr);gap:0 14px;padding:14px}
  .arena-photo{width:104px}
}
@media (max-width:520px){
  .arena{padding:56px 0}
  .arena .section-head{margin-bottom:24px}
  .arena .section-head h2{font-size:clamp(24px,7vw,30px)}
  /* smaller here so the longest line reserves two rows, not three: the block
     is fixed-height, so every unused row shows as air above the headline */
  .arena .tw{font-size:15px}
  .arena-proof{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .arena-person,
  .arena-person:hover{transform:none;transition:none}
  .arena .tw .caret{animation:none}
  .arena-marks-wrap { animation: none; }
  .arena-trusted {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}